dfe04bb4-5adc-46cd-9267-e69a5fbb12f6

Committed 20 Jun 2024 05:22PM UTC coverage: 96.035% (-0.008%) from 96.043%

Build # dfe04bb4-5adc-46cd-9267-e69a5fbb12f6

Build Type

Pull #1842

circleci

Committed by

geotrev

Commit Message

chore: changes to global alert button colors (info and warning)

Pull Request Pull Request #1842: feat(notifications): new light/dark mode colors

Run Details

3330 of 3683 branches covered (90.42%)

Branch coverage included in aggregate %.

220 of 223 new or added lines in 24 files covered. (98.65%)

1 existing line in 1 file now uncovered.

10138 of 10341 relevant lines covered (98.04%)

213.2 hits per line

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

91.43

/packages/notifications/src/styled/content/StyledClose.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, { DefaultTheme, ThemeProps, css } from 'styled-components';
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
import { Type } from '../../types';
import { validationTypes } from '../../utils/icons';
import { IconButton } from '@zendeskgarden/react-buttons';

const COMPONENT_ID = 'notifications.close';

interface IStyledCloseProps {
  $type?: Type;
}

/**
 * 1. IconButton reset
 */
const colorStyles = ({ theme, $type }: IStyledCloseProps & ThemeProps<DefaultTheme>) => {
  let variable;
  let color;
  let hoverColor;
  let activeColor;

  if ($type) {
    switch ($type) {
      case validationTypes.warning:
        variable = 'foreground.warning';
        break;
      case validationTypes.error:
        variable = 'foreground.danger';
        break;
      case validationTypes.success:
        variable = 'foreground.success';
        break;
      default:
        variable = 'foreground.subtle';
        break;
    }

    color = getColor({ variable, theme });
    hoverColor = getColor({ variable, light: { offset: 100 }, dark: { offset: -100 }, theme });
    activeColor = getColor({ variable, light: { offset: 200 }, dark: { offset: -200 }, theme });
  }

  return css`
    color: ${color};

    &:hover {
      background-color: transparent; /* [1] */
      color: ${hoverColor};
    }

    &:active {
      background-color: transparent; /* [1] */
      color: ${activeColor};
    }
  `;
};

/**
 * Used to close a Notification. Supports all `<button>` props
 *
 * 1. Reset for <button> element.
 * 2. Remove dotted outline from Firefox on focus.
 */
export const StyledClose = styled(IconButton).attrs({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION
})<IStyledCloseProps>`
  position: absolute;
  top: ${props => props.theme.space.base}px;
  right: ${p => !p.theme.rtl && `${p.theme.space.base}px`};
  left: ${p => p.theme.rtl && `${p.theme.space.base}px`};

  ${colorStyles}

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

StyledClose.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, { DefaultTheme, ThemeProps, css } from 'styled-components';	17✔
9	import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';	17✔
10	import { Type } from '../../types';
11	import { validationTypes } from '../../utils/icons';	17✔
12	import { IconButton } from '@zendeskgarden/react-buttons';	17✔
13
14	const COMPONENT_ID = 'notifications.close';	17✔
15
16	interface IStyledCloseProps {
17	$type?: Type;
18	}
19
20	/**
21	* 1. IconButton reset
22	*/
23	const colorStyles = ({ theme, $type }: IStyledCloseProps & ThemeProps<DefaultTheme>) => {	17✔
24	let variable;
25	let color;
26	let hoverColor;
27	let activeColor;
28
29	if ($type) {	13✔
30	switch ($type) {	6!
31	case validationTypes.warning:
32	variable = 'foreground.warning';	2✔
33	break;	2✔
34	case validationTypes.error:
35	variable = 'foreground.danger';	2✔
36	break;	2✔
37	case validationTypes.success:
38	variable = 'foreground.success';	2✔
39	break;	2✔
40	default:
NEW 41	variable = 'foreground.subtle';	×
NEW 42	break;	×
43	}
44
45	color = getColor({ variable, theme });	6✔
46	hoverColor = getColor({ variable, light: { offset: 100 }, dark: { offset: -100 }, theme });	6✔
47	activeColor = getColor({ variable, light: { offset: 200 }, dark: { offset: -200 }, theme });	6✔
48	}
49
50	return css`	13✔
51	color: ${color};
52
53	&:hover {
54	background-color: transparent; /* [1] */
55	color: ${hoverColor};
56	}
57
58	&:active {
59	background-color: transparent; /* [1] */
60	color: ${activeColor};
61	}
62	`;
63	};
64
65	/**
66	* Used to close a Notification. Supports all `<button>` props
67	*
68	* 1. Reset for <button> element.
69	* 2. Remove dotted outline from Firefox on focus.
70	*/
71	export const StyledClose = styled(IconButton).attrs({	17✔
72	'data-garden-id': COMPONENT_ID,
73	'data-garden-version': PACKAGE_VERSION
74	})<IStyledCloseProps>`
75	position: absolute;
76	top: ${props => props.theme.space.base}px;	13✔
77	right: ${p => !p.theme.rtl && `${p.theme.space.base}px`};	13✔
78	left: ${p => p.theme.rtl && `${p.theme.space.base}px`};	13✔
79
80	${colorStyles}
81
82	${props => retrieveComponentStyles(COMPONENT_ID, props)};	13✔
83	`;
84
85	StyledClose.defaultProps = {	17✔
86	theme: DEFAULT_THEME
87	};

zendeskgarden / react-components / dfe04bb4-5adc-46cd-9267-e69a5fbb12f6

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