953333cd-7074-46d0-a0f1-5048df3af756

Committed 25 Mar 2024 06:51PM UTC coverage: 96.023%. Remained the same

Build # 953333cd-7074-46d0-a0f1-5048df3af756

Build Type

Pull #1755

circleci

Committed by

jzempel

Commit Message

Update migration guide

Pull Request Pull Request #1755: feat(theming)!: add `variables` to theme `colors`

Run Details

3251 of 3597 branches covered (90.38%)

Branch coverage included in aggregate %.

49 of 51 new or added lines in 39 files covered. (96.08%)

4 existing lines in 2 files now uncovered.

10004 of 10207 relevant lines covered (98.01%)

219.24 hits per line

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

96.34

/packages/dropdowns/src/views/combobox/StyledTrigger.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, { ThemeProps, DefaultTheme, css } from 'styled-components';
import { math } from 'polished';
import {
  retrieveComponentStyles,
  DEFAULT_THEME,
  getColorV8,
  focusStyles
} from '@zendeskgarden/react-theming';
import { Validation } from '../../types';
import { getHeight as getInputHeight } from './StyledInput';

const COMPONENT_ID = 'dropdowns.combobox.trigger';

interface IStyledTriggerProps extends ThemeProps<DefaultTheme> {
  isAutocomplete?: boolean;
  isBare?: boolean;
  isCompact?: boolean;
  isEditable?: boolean;
  isLabelHovered?: boolean;
  isMultiselectable?: boolean;
  maxHeight?: string;
  focusInset?: boolean;
  validation?: Validation;
}

const colorStyles = (props: IStyledTriggerProps) => {
  const SHADE = 600;
  let hue = 'neutralHue';

  if (props.validation === 'success') {
    hue = 'successHue';
  } else if (props.validation === 'warning') {
    hue = 'warningHue';
  } else if (props.validation === 'error') {
    hue = 'dangerHue';
  }

  const backgroundColor = props.isBare
    ? 'transparent'
    : getColorV8('background', 600 /* default shade */, props.theme);
  let borderColor: string | undefined;
  let hoverBorderColor: string | undefined;
  let focusBorderColor: string | undefined;
  let focusShade: number | undefined;

  if (props.validation) {
    borderColor = getColorV8(hue, SHADE, props.theme);
    hoverBorderColor = borderColor;

    if (props.validation === 'warning') {
      focusBorderColor = getColorV8(hue, SHADE + 100, props.theme);
      focusShade = SHADE + 100;
    } else {
      focusBorderColor = borderColor;
    }
  } else {
    borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
    hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
    focusBorderColor = hoverBorderColor;
  }

  const disabledBackgroundColor = props.isBare
    ? undefined
    : getColorV8('neutralHue', SHADE - 500, props.theme);
  const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme);
  const disabledForegroundColor = getColorV8('neutralHue', SHADE - 200, props.theme);
  const focusSelector = `
    &:focus-within:not([aria-disabled='true']),
    &:focus-visible
  `;

  return css`
    border-color: ${props.isLabelHovered ? hoverBorderColor : borderColor};
    background-color: ${backgroundColor};
    color: ${getColorV8('foreground', 600 /* default shade */, props.theme)};

    &:hover {
      border-color: ${hoverBorderColor};
    }

    ${focusStyles({
      theme: props.theme,
      inset: props.focusInset,
      hue: focusBorderColor,
      shade: focusShade,
      selector: focusSelector,
      styles: { borderColor: focusBorderColor },
      condition: !props.isBare
    })}

    &[aria-disabled='true'] {
      border-color: ${disabledBorderColor};
      background-color: ${disabledBackgroundColor};
      color: ${disabledForegroundColor};
    }
  `;
};

const sizeStyles = (props: IStyledTriggerProps) => {
  const inputHeight = getInputHeight(props);
  let minHeight;
  let horizontalPadding;

  if (props.isBare) {
    if (props.isMultiselectable) {
      minHeight = math(`${props.theme.shadowWidths.sm} * 2 + ${inputHeight}`);
      horizontalPadding = props.theme.shadowWidths.sm;
    } else {
      minHeight = `${inputHeight}px`;
      horizontalPadding = '0';
    }
  } else {
    minHeight = `${props.theme.space.base * (props.isCompact ? 3 : 2) + inputHeight}px`;
    horizontalPadding = `${props.theme.space.base * 3}px`;
  }

  const maxHeight = props.maxHeight || minHeight;
  const verticalPadding = math(
    `(${minHeight} - ${inputHeight} - (${props.isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`
  );

  return css`
    padding: ${verticalPadding} ${horizontalPadding};
    min-height: ${minHeight};
    max-height: ${maxHeight};
    font-size: ${props.theme.fontSizes.md};
  `;
};

export const StyledTrigger = styled.div.attrs({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION
})<IStyledTriggerProps>`
  overflow-y: auto;
  /* prettier-ignore */
  transition:
    border-color 0.25s ease-in-out,
    box-shadow 0.1s ease-in-out,
    background-color 0.25s ease-in-out,
    color 0.25s ease-in-out;
  border: ${props => (props.isBare ? 'none' : props.theme.borders.sm)};
  border-radius: ${props => (props.isBare ? '0' : props.theme.borderRadii.md)};
  cursor: ${props => (!props.isAutocomplete && props.isEditable ? 'text' : 'pointer')};
  box-sizing: border-box;

  ${sizeStyles};

  &:focus {
    outline: none;
  }

  ${colorStyles};

  &[aria-disabled='true'] {
    cursor: default;
  }

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

StyledTrigger.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, { ThemeProps, DefaultTheme, css } from 'styled-components';	4✔
9	import { math } from 'polished';	4✔
10	import {
11	retrieveComponentStyles,
12	DEFAULT_THEME,
13	getColorV8,
14	focusStyles
15	} from '@zendeskgarden/react-theming';	4✔
16	import { Validation } from '../../types';
17	import { getHeight as getInputHeight } from './StyledInput';	4✔
18
19	const COMPONENT_ID = 'dropdowns.combobox.trigger';	4✔
20
21	interface IStyledTriggerProps extends ThemeProps<DefaultTheme> {
22	isAutocomplete?: boolean;
23	isBare?: boolean;
24	isCompact?: boolean;
25	isEditable?: boolean;
26	isLabelHovered?: boolean;
27	isMultiselectable?: boolean;
28	maxHeight?: string;
29	focusInset?: boolean;
30	validation?: Validation;
31	}
32
33	const colorStyles = (props: IStyledTriggerProps) => {	4✔
34	const SHADE = 600;	190✔
35	let hue = 'neutralHue';	190✔
36
37	if (props.validation === 'success') {	190✔
38	hue = 'successHue';	2✔
39	} else if (props.validation === 'warning') {	188✔
40	hue = 'warningHue';	2✔
41	} else if (props.validation === 'error') {	186✔
42	hue = 'dangerHue';	2✔
43	}
44
45	const backgroundColor = props.isBare	190✔
46	? 'transparent'
47	: getColorV8('background', 600 /* default shade */, props.theme);
48	let borderColor: string \| undefined;
49	let hoverBorderColor: string \| undefined;
50	let focusBorderColor: string \| undefined;
51	let focusShade: number \| undefined;
52
53	if (props.validation) {	190✔
54	borderColor = getColorV8(hue, SHADE, props.theme);	6✔
55	hoverBorderColor = borderColor;	6✔
56
57	if (props.validation === 'warning') {	6✔
58	focusBorderColor = getColorV8(hue, SHADE + 100, props.theme);	2✔
59	focusShade = SHADE + 100;	2✔
60	} else {
61	focusBorderColor = borderColor;	4✔
62	}
63	} else {
64	borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);	184✔
65	hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);	184✔
66	focusBorderColor = hoverBorderColor;	184✔
67	}
68
69	const disabledBackgroundColor = props.isBare	190✔
70	? undefined
71	: getColorV8('neutralHue', SHADE - 500, props.theme);
72	const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme);	190✔
73	const disabledForegroundColor = getColorV8('neutralHue', SHADE - 200, props.theme);	190✔
74	const focusSelector = `	190✔
75	&:focus-within:not([aria-disabled='true']),
76	&:focus-visible
77	`;
78
79	return css`	190✔
80	border-color: ${props.isLabelHovered ? hoverBorderColor : borderColor};	190✔
81	background-color: ${backgroundColor};
82	color: ${getColorV8('foreground', 600 /* default shade */, props.theme)};
83
84	&:hover {
85	border-color: ${hoverBorderColor};
86	}
87
88	${focusStyles({
89	theme: props.theme,
90	inset: props.focusInset,
91	hue: focusBorderColor,
92	shade: focusShade,
93	selector: focusSelector,
94	styles: { borderColor: focusBorderColor },
95	condition: !props.isBare
96	})}
97
98	&[aria-disabled='true'] {
99	border-color: ${disabledBorderColor};
100	background-color: ${disabledBackgroundColor};
101	color: ${disabledForegroundColor};
102	}
103	`;
104	};
105
106	const sizeStyles = (props: IStyledTriggerProps) => {	4✔
107	const inputHeight = getInputHeight(props);	190✔
108	let minHeight;
109	let horizontalPadding;
110
111	if (props.isBare) {	190✔
112	if (props.isMultiselectable) {	2!
UNCOV 113	minHeight = math(`${props.theme.shadowWidths.sm} * 2 + ${inputHeight}`);	×
UNCOV 114	horizontalPadding = props.theme.shadowWidths.sm;	×
115	} else {
116	minHeight = `${inputHeight}px`;	2✔
117	horizontalPadding = '0';	2✔
118	}
119	} else {
120	minHeight = `${props.theme.space.base * (props.isCompact ? 3 : 2) + inputHeight}px`;	188✔
121	horizontalPadding = `${props.theme.space.base * 3}px`;	188✔
122	}
123
124	const maxHeight = props.maxHeight \|\| minHeight;	190✔
125	const verticalPadding = math(	190✔
126	`(${minHeight} - ${inputHeight} - (${props.isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`	190✔
127	);
128
129	return css`	190✔
130	padding: ${verticalPadding} ${horizontalPadding};
131	min-height: ${minHeight};
132	max-height: ${maxHeight};
133	font-size: ${props.theme.fontSizes.md};
134	`;
135	};
136
137	export const StyledTrigger = styled.div.attrs({	341✔
138	'data-garden-id': COMPONENT_ID,
139	'data-garden-version': PACKAGE_VERSION
140	})<IStyledTriggerProps>`
141	overflow-y: auto;
142	/* prettier-ignore */
143	transition:
144	border-color 0.25s ease-in-out,
145	box-shadow 0.1s ease-in-out,
146	background-color 0.25s ease-in-out,
147	color 0.25s ease-in-out;
148	border: ${props => (props.isBare ? 'none' : props.theme.borders.sm)};	190✔
149	border-radius: ${props => (props.isBare ? '0' : props.theme.borderRadii.md)};	190✔
150	cursor: ${props => (!props.isAutocomplete && props.isEditable ? 'text' : 'pointer')};	190✔
151	box-sizing: border-box;
152
153	${sizeStyles};
154
155	&:focus {
156	outline: none;
157	}
158
159	${colorStyles};
160
161	&[aria-disabled='true'] {
162	cursor: default;
163	}
164
165	${props => retrieveComponentStyles(COMPONENT_ID, props)};	190✔
166	`;
167
168	StyledTrigger.defaultProps = {	4✔
169	theme: DEFAULT_THEME
170	};

zendeskgarden / react-components / 953333cd-7074-46d0-a0f1-5048df3af756

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