c0b06f1f-3224-4b6e-82eb-3a539823e90b

Committed 14 Jun 2024 03:00PM UTC coverage: 96.041%. First build

Build # c0b06f1f-3224-4b6e-82eb-3a539823e90b

Build Type

Pull #1838

circleci

Committed by

jzempel

Commit Message

Fix `Select` height

Pull Request Pull Request #1838: feat(forms): new light/dark mode colors

Run Details

3334 of 3687 branches covered (90.43%)

Branch coverage included in aggregate %.

243 of 244 new or added lines in 21 files covered. (99.59%)

10081 of 10281 relevant lines covered (98.05%)

214.46 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

94.87

/packages/forms/src/styled/text/StyledTextMediaFigure.ts

/**
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
import {
  retrieveComponentStyles,
  DEFAULT_THEME,
  StyledBaseIcon,
  getColor
} from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'forms.media_figure';

interface IStyledTextMediaFigureProps {
  $isRotated?: boolean;
  $isHovered?: boolean;
  $isFocused?: boolean;
  $isDisabled?: boolean;
  $position: 'start' | 'end';
}

const colorStyles = ({
  theme,
  $isDisabled,
  $isHovered,
  $isFocused
}: IStyledTextMediaFigureProps & ThemeProps<DefaultTheme>) => {
  let color;

  if ($isDisabled) {
    color = getColor({ theme, variable: 'foreground.disabled' });
  } else {
    const options = { theme, variable: 'foreground.subtle' };

    if ($isHovered || $isFocused) {
      color = getColor({ ...options, dark: { offset: -100 }, light: { offset: 100 } });
    } else {
      color = getColor(options);
    }
  }

  return css`
    color: ${color};
  `;
};

const sizeStyles = (props: IStyledTextMediaFigureProps & ThemeProps<DefaultTheme>) => {
  const size = props.theme.iconSizes.md;
  const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;
  const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;
  let margin;

  if (props.$position === 'start') {
    margin = props.theme.rtl ? marginLast : marginFirst;
  } else {
    margin = props.theme.rtl ? marginFirst : marginLast;
  }

  return css`
    margin: ${margin};
    width: ${size};
    height: ${size};
  `;
};

export const StyledTextMediaFigure = styled(StyledBaseIcon).attrs({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION
})<IStyledTextMediaFigureProps>`
  transform: ${props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`};
  /* prettier-ignore */
  transition:
    transform 0.25s ease-in-out,
    color 0.25s ease-in-out;

  ${sizeStyles};

  ${colorStyles}

  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
`;

StyledTextMediaFigure.defaultProps = {
  theme: DEFAULT_THEME
};

1	/**
2	* Copyright Zendesk, Inc.
3	*
4	* Use of this source code is governed under the Apache License, Version 2.0
5	* found at http://www.apache.org/licenses/LICENSE-2.0.
6	*/
7
8	import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';	27✔
9	import {
10	retrieveComponentStyles,
11	DEFAULT_THEME,
12	StyledBaseIcon,
13	getColor
14	} from '@zendeskgarden/react-theming';	27✔
15
16	const COMPONENT_ID = 'forms.media_figure';	27✔
17
18	interface IStyledTextMediaFigureProps {
19	$isRotated?: boolean;
20	$isHovered?: boolean;
21	$isFocused?: boolean;
22	$isDisabled?: boolean;
23	$position: 'start' \| 'end';
24	}
25
26	const colorStyles = ({	27✔
27	theme,
28	$isDisabled,
29	$isHovered,
30	$isFocused
31	}: IStyledTextMediaFigureProps & ThemeProps<DefaultTheme>) => {
32	let color;
33
34	if ($isDisabled) {	20!
NEW 35	color = getColor({ theme, variable: 'foreground.disabled' });	×
36	} else {
37	const options = { theme, variable: 'foreground.subtle' };	20✔
38
39	if ($isHovered \|\| $isFocused) {	20✔
40	color = getColor({ ...options, dark: { offset: -100 }, light: { offset: 100 } });	5✔
41	} else {
42	color = getColor(options);	15✔
43	}
44	}
45
46	return css`	20✔
47	color: ${color};
48	`;
49	};
50
51	const sizeStyles = (props: IStyledTextMediaFigureProps & ThemeProps<DefaultTheme>) => {	27✔
52	const size = props.theme.iconSizes.md;	20✔
53	const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;	20✔
54	const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;	20✔
55	let margin;
56
57	if (props.$position === 'start') {	20✔
58	margin = props.theme.rtl ? marginLast : marginFirst;	8✔
59	} else {
60	margin = props.theme.rtl ? marginFirst : marginLast;	12✔
61	}
62
63	return css`	20✔
64	margin: ${margin};
65	width: ${size};
66	height: ${size};
67	`;
68	};
69
70	export const StyledTextMediaFigure = styled(StyledBaseIcon).attrs({	90✔
71	'data-garden-id': COMPONENT_ID,
72	'data-garden-version': PACKAGE_VERSION
73	})<IStyledTextMediaFigureProps>`
74	transform: ${props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`};	20✔
75	/* prettier-ignore */
76	transition:
77	transform 0.25s ease-in-out,
78	color 0.25s ease-in-out;
79
80	${sizeStyles};
81
82	${colorStyles}
83
84	${props => retrieveComponentStyles(COMPONENT_ID, props)};	20✔
85	`;
86
87	StyledTextMediaFigure.defaultProps = {	27✔
88	theme: DEFAULT_THEME
89	};

zendeskgarden / react-components / c0b06f1f-3224-4b6e-82eb-3a539823e90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous