ffbf0860-3826-4f9a-8e35-d4fef8008014

Committed 25 Jun 2024 09:39PM UTC coverage: 96.024% (-0.03%) from 96.057%

Build # ffbf0860-3826-4f9a-8e35-d4fef8008014

Build Type

Pull #1842

circleci

Committed by

geotrev

Commit Message

chore: use parent theme callback

Co-authored-by: Florent <ze-flo@users.noreply.github.com>

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

Run Details

3346 of 3700 branches covered (90.43%)

Branch coverage included in aggregate %.

228 of 232 new or added lines in 24 files covered. (98.28%)

5 existing lines in 5 files now uncovered.

10131 of 10335 relevant lines covered (98.03%)

213.29 hits per line

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

94.55

/packages/grid/src/styled/pane/StyledPaneSplitterButtonContainer.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 { math, stripUnit } from 'polished';
import { DEFAULT_THEME, getColorV8, retrieveComponentStyles } from '@zendeskgarden/react-theming';
import { StyledPaneSplitter } from './StyledPaneSplitter';
import { getSize } from './StyledPaneSplitterButton';
import { Orientation, PLACEMENT } from '../../types';

const COMPONENT_ID = 'pane.splitter_button_container';

interface IStyledSplitterButtonContainerProps {
  orientation: Orientation;
  placement: (typeof PLACEMENT)[number];
  splitterSize: number;
}

const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
  const backgroundColor = getColorV8('background', 600 /* default shade */, theme);
  const boxShadow = theme.shadows.lg(
    `${theme.space.base}px`,
    `${theme.space.base * 2}px`,
    getColorV8('chromeHue', 600, theme, 0.15)!
  );

  return css`
    box-shadow: ${boxShadow};
    background-color: ${backgroundColor};
  `;
};

const positionStyles = (props: IStyledSplitterButtonContainerProps & ThemeProps<DefaultTheme>) => {
  let top;
  let left;
  let right;
  let bottom;
  const size = getSize(props.theme);
  const inset = `-${size / 2}px`;

  if (props.placement === 'center' || props.splitterSize < size * 3) {
    const center = `${props.splitterSize / 2 - size / 2}px`;

    switch (`${props.orientation}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
      case 'top-ltr':
      case 'top-rtl':
        top = inset;
        left = center;
        break;

      case 'start-ltr':
      case 'end-rtl':
        top = center;
        left = inset;
        break;

      case 'end-ltr':
      case 'start-rtl':
        top = center;
        right = inset;
        break;

      case 'bottom-ltr':
      case 'bottom-rtl':
        bottom = inset;
        right = center;
        break;
    }
  } else {
    const offset = `${size}px`;

    /* istanbul ignore next */
    switch (`${props.orientation}-${props.placement}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
      case 'top-end-ltr':
      case 'top-end-rtl':
      case 'top-start-rtl':
        top = inset;
        right = offset;
        break;

      case 'bottom-end-ltr':
      case 'bottom-end-rtl':
      case 'bottom-start-rtl':
        bottom = inset;
        right = offset;
        break;

      case 'start-start-ltr':
      case 'end-start-rtl':
        top = offset;
        left = inset;
        break;

      case 'start-end-ltr':
      case 'end-end-rtl':
        bottom = offset;
        left = inset;
        break;

      case 'end-start-ltr':
      case 'start-start-rtl':
        top = offset;
        right = inset;
        break;

      case 'end-end-ltr':
      case 'start-end-rtl':
        bottom = offset;
        right = inset;
        break;

      case 'top-start-ltr':
        top = inset;
        left = offset;
        break;

      case 'bottom-start-ltr':
        bottom = inset;
        left = offset;
        break;
    }
  }

  return css`
    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
    top: ${top};
    right: ${right};
    bottom: ${bottom};
    left: ${left};
  `;
};

const sizeStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
  const size = getSize(theme);

  return css`
    border-radius: ${size}px;
    width: ${size}px;
    height: ${size}px;
  `;
};

const minimumSplitterSize = (theme: DefaultTheme) =>
  stripUnit(math(`${theme.shadowWidths.md} * 2 + ${getSize(theme)}`)) as number;

/**
 * 1. Match focused `Splitter` z-index
 */
export const StyledPaneSplitterButtonContainer = styled.div<IStyledSplitterButtonContainerProps>`
  display: ${props =>
    props.splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined};
  position: absolute;
  /* prettier-ignore */
  transition:
    box-shadow 0.1s ease-in-out,
    opacity 0.25s ease-in-out 0.1s;
  opacity: 0;
  z-index: 2; /* [1] */

  ${positionStyles};

  ${sizeStyles};

  ${colorStyles};

  &:hover,
  &:focus-within,
  /* stylelint-disable selector-no-qualifying-type */
  ${StyledPaneSplitter}:hover ~ &,
  ${StyledPaneSplitter}:focus-visible ~ & {
    opacity: 1;
  }

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

StyledPaneSplitterButtonContainer.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';	8✔
9	import { math, stripUnit } from 'polished';	8✔
10	import { DEFAULT_THEME, getColorV8, retrieveComponentStyles } from '@zendeskgarden/react-theming';	8✔
11	import { StyledPaneSplitter } from './StyledPaneSplitter';	8✔
12	import { getSize } from './StyledPaneSplitterButton';	8✔
13	import { Orientation, PLACEMENT } from '../../types';
14
15	const COMPONENT_ID = 'pane.splitter_button_container';	8✔
16
17	interface IStyledSplitterButtonContainerProps {
18	orientation: Orientation;
19	placement: (typeof PLACEMENT)[number];
20	splitterSize: number;
21	}
22
23	const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {	8✔
24	const backgroundColor = getColorV8('background', 600 /* default shade */, theme);	190✔
25	const boxShadow = theme.shadows.lg(	190✔
26	`${theme.space.base}px`,
27	`${theme.space.base * 2}px`,
28	getColorV8('chromeHue', 600, theme, 0.15)!
29	);
30
31	return css`	190✔
32	box-shadow: ${boxShadow};
33	background-color: ${backgroundColor};
34	`;
35	};
36
37	const positionStyles = (props: IStyledSplitterButtonContainerProps & ThemeProps<DefaultTheme>) => {	8✔
38	let top;
39	let left;
40	let right;
41	let bottom;
42	const size = getSize(props.theme);	190✔
43	const inset = `-${size / 2}px`;	190✔
44
45	if (props.placement === 'center' \|\| props.splitterSize < size * 3) {	190!
46	const center = `${props.splitterSize / 2 - size / 2}px`;	190✔
47
48	switch (`${props.orientation}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {	190✔
49	case 'top-ltr':
50	case 'top-rtl':
51	top = inset;	26✔
52	left = center;	26✔
53	break;	26✔
54
55	case 'start-ltr':
56	case 'end-rtl':
57	top = center;	54✔
58	left = inset;	54✔
59	break;	54✔
60
61	case 'end-ltr':
62	case 'start-rtl':
63	top = center;	58✔
64	right = inset;	58✔
65	break;	58✔
66
67	case 'bottom-ltr':
68	case 'bottom-rtl':
69	bottom = inset;	52✔
70	right = center;	52✔
71	break;	52✔
72	}
73	} else {
UNCOV 74	const offset = `${size}px`;	×
75
76	/* istanbul ignore next */
77	switch (`${props.orientation}-${props.placement}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
78	case 'top-end-ltr':
79	case 'top-end-rtl':
80	case 'top-start-rtl':
81	top = inset;
82	right = offset;
83	break;
84
85	case 'bottom-end-ltr':
86	case 'bottom-end-rtl':
87	case 'bottom-start-rtl':
88	bottom = inset;
89	right = offset;
90	break;
91
92	case 'start-start-ltr':
93	case 'end-start-rtl':
94	top = offset;
95	left = inset;
96	break;
97
98	case 'start-end-ltr':
99	case 'end-end-rtl':
100	bottom = offset;
101	left = inset;
102	break;
103
104	case 'end-start-ltr':
105	case 'start-start-rtl':
106	top = offset;
107	right = inset;
108	break;
109
110	case 'end-end-ltr':
111	case 'start-end-rtl':
112	bottom = offset;
113	right = inset;
114	break;
115
116	case 'top-start-ltr':
117	top = inset;
118	left = offset;
119	break;
120
121	case 'bottom-start-ltr':
122	bottom = inset;
123	left = offset;
124	break;
125	}
126	}
127
128	return css`	190✔
129	/* stylelint-disable declaration-block-no-redundant-longhand-properties */
130	top: ${top};
131	right: ${right};
132	bottom: ${bottom};
133	left: ${left};
134	`;
135	};
136
137	const sizeStyles = ({ theme }: ThemeProps<DefaultTheme>) => {	8✔
138	const size = getSize(theme);	190✔
139
140	return css`	190✔
141	border-radius: ${size}px;
142	width: ${size}px;
143	height: ${size}px;
144	`;
145	};
146
147	const minimumSplitterSize = (theme: DefaultTheme) =>	8✔
148	stripUnit(math(`${theme.shadowWidths.md} * 2 + ${getSize(theme)}`)) as number;	190✔
149
150	/**
151	* 1. Match focused `Splitter` z-index
152	*/
153	export const StyledPaneSplitterButtonContainer = styled.div<IStyledSplitterButtonContainerProps>`	190✔
154	display: ${props =>
155	props.splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined};	190!
156	position: absolute;
157	/* prettier-ignore */
158	transition:
159	box-shadow 0.1s ease-in-out,
160	opacity 0.25s ease-in-out 0.1s;
161	opacity: 0;
162	z-index: 2; /* [1] */
163
164	${positionStyles};
165
166	${sizeStyles};
167
168	${colorStyles};
169
170	&:hover,
171	&:focus-within,
172	/* stylelint-disable selector-no-qualifying-type */
173	${StyledPaneSplitter}:hover ~ &,
174	${StyledPaneSplitter}:focus-visible ~ & {
175	opacity: 1;
176	}
177
178	${props => retrieveComponentStyles(COMPONENT_ID, props)};	190✔
179	`;
180
181	StyledPaneSplitterButtonContainer.defaultProps = {	8✔
182	theme: DEFAULT_THEME
183	};

zendeskgarden / react-components / ffbf0860-3826-4f9a-8e35-d4fef8008014

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