d98f4397-8489-480e-bb62-e5e3a6d8ebfa

Committed 06 Jun 2024 06:19PM UTC coverage: 96.083% (+0.04%) from 96.04%

Build # d98f4397-8489-480e-bb62-e5e3a6d8ebfa

Build Type

Pull #1833

circleci

Committed by

geotrev

Commit Message

chore: updates migration.md

Pull Request Pull Request #1833: feat(tables): new light/dark mode colors

Run Details

3278 of 3622 branches covered (90.5%)

Branch coverage included in aggregate %.

83 of 83 new or added lines in 16 files covered. (100.0%)

2 existing lines in 1 file now uncovered.

9968 of 10164 relevant lines covered (98.07%)

216.38 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,
      color: { 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	color: { hue: focusBorderColor, shade: focusShade },
92	selector: focusSelector,
93	styles: { borderColor: focusBorderColor },
94	condition: !props.isBare
95	})}
96
97	&[aria-disabled='true'] {
98	border-color: ${disabledBorderColor};
99	background-color: ${disabledBackgroundColor};
100	color: ${disabledForegroundColor};
101	}
102	`;
103	};
104
105	const sizeStyles = (props: IStyledTriggerProps) => {	4✔
106	const inputHeight = getInputHeight(props);	190✔
107	let minHeight;
108	let horizontalPadding;
109
110	if (props.isBare) {	190✔
111	if (props.isMultiselectable) {	2!
UNCOV 112	minHeight = math(`${props.theme.shadowWidths.sm} * 2 + ${inputHeight}`);	×
UNCOV 113	horizontalPadding = props.theme.shadowWidths.sm;	×
114	} else {
115	minHeight = `${inputHeight}px`;	2✔
116	horizontalPadding = '0';	2✔
117	}
118	} else {
119	minHeight = `${props.theme.space.base * (props.isCompact ? 3 : 2) + inputHeight}px`;	188✔
120	horizontalPadding = `${props.theme.space.base * 3}px`;	188✔
121	}
122
123	const maxHeight = props.maxHeight \|\| minHeight;	190✔
124	const verticalPadding = math(	190✔
125	`(${minHeight} - ${inputHeight} - (${props.isBare ? 0 : props.theme.borderWidths.sm} * 2)) / 2`	190✔
126	);
127
128	return css`	190✔
129	padding: ${verticalPadding} ${horizontalPadding};
130	min-height: ${minHeight};
131	max-height: ${maxHeight};
132	font-size: ${props.theme.fontSizes.md};
133	`;
134	};
135
136	export const StyledTrigger = styled.div.attrs({	318✔
137	'data-garden-id': COMPONENT_ID,
138	'data-garden-version': PACKAGE_VERSION
139	})<IStyledTriggerProps>`
140	overflow-y: auto;
141	/* prettier-ignore */
142	transition:
143	border-color 0.25s ease-in-out,
144	box-shadow 0.1s ease-in-out,
145	background-color 0.25s ease-in-out,
146	color 0.25s ease-in-out;
147	border: ${props => (props.isBare ? 'none' : props.theme.borders.sm)};	190✔
148	border-radius: ${props => (props.isBare ? '0' : props.theme.borderRadii.md)};	190✔
149	cursor: ${props => (!props.isAutocomplete && props.isEditable ? 'text' : 'pointer')};	190✔
150	box-sizing: border-box;
151
152	${sizeStyles};
153
154	&:focus {
155	outline: none;
156	}
157
158	${colorStyles};
159
160	&[aria-disabled='true'] {
161	cursor: default;
162	}
163
164	${props => retrieveComponentStyles(COMPONENT_ID, props)};	190✔
165	`;
166
167	StyledTrigger.defaultProps = {	4✔
168	theme: DEFAULT_THEME
169	};

zendeskgarden / react-components / d98f4397-8489-480e-bb62-e5e3a6d8ebfa

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