c444ac5a-c5cd-4610-bf75-04419ae2f617

Committed 14 May 2024 09:18PM UTC coverage: 96.138% (-0.09%) from 96.224%

Build # c444ac5a-c5cd-4610-bf75-04419ae2f617

Build Type

Pull #1805

circleci

Committed by

geotrev

Commit Message

fix: uses verbose variable references for better searchability + code review changes

Pull Request Pull Request #1805: feat(drag-drop): adds light/dark mode colors

Run Details

3289 of 3628 branches covered (90.66%)

Branch coverage included in aggregate %.

27 of 30 new or added lines in 4 files covered. (90.0%)

1 existing line in 1 file now uncovered.

9956 of 10149 relevant lines covered (98.1%)

216.72 hits per line

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

94.52

/packages/drag-drop/src/styled/draggable/StyledDraggable.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 {
  retrieveComponentStyles,
  DEFAULT_THEME,
  getColor,
  IGardenTheme,
  getLineHeight,
  focusStyles
} from '@zendeskgarden/react-theming';
import { StyledGrip } from './StyledGrip';

const COMPONENT_ID = 'draggable';

export interface IStyledDraggableProps extends ThemeProps<DefaultTheme> {
  focusInset?: boolean;
  isBare?: boolean;
  isCompact?: boolean;
  isDisabled?: boolean;
  isGrabbed?: boolean;
  isPlaceholder?: boolean;
}

export function getDragShadow(theme: IGardenTheme) {
  const { space, shadows, opacity } = theme;
  const offsetY = `${space.base * 5}px`;
  const blurRadius = `${space.base * 7}px`;
  const color = getColor({
    hue: 'neutralHue',
    shade: 1200,
    light: { transparency: opacity[200] },
    dark: { transparency: opacity[1000] },
    theme
  });

  return shadows.lg(offsetY, blurRadius, color);
}

const colorStyles = (props: IStyledDraggableProps) => {
  const { isBare, isGrabbed, isDisabled, isPlaceholder, focusInset, theme } = props;

  const dragShadow = getDragShadow(theme);
  const baseBgColor = getColor({ variable: 'background.default', theme });
  const placeholderBgColor = getColor({ variable: 'background.disabled', theme });
  const disabledBgColor = getColor({
    variable: 'background.disabled',
    theme
  });
  const disabledColor = getColor({ variable: 'foreground.disabled', theme });

  let color;
  let hoverBackgroundColor;
  let boxShadow;
  let borderColor = 'transparent';
  let backgroundColor = baseBgColor;

  if (isDisabled) {
    backgroundColor = disabledBgColor;
    color = disabledColor;
  } else if (isPlaceholder) {
    backgroundColor = placeholderBgColor;
  } else {
    color = getColor({ variable: 'foreground.default', theme });
    borderColor = isBare ? 'transparent' : getColor({ variable: 'border.default', theme });
    hoverBackgroundColor = getColor({
      variable: isGrabbed ? 'background.raised' : 'background.primaryEmphasis',
      ...(!isGrabbed && { transparency: theme.opacity[100], dark: { offset: -100 } }),
      theme
    });
    boxShadow = dragShadow;
  }

  return css`
    border-color: ${borderColor};
    box-shadow: ${isGrabbed && boxShadow};
    background-color: ${backgroundColor};
    color: ${color};

    &:hover {
      background-color: ${hoverBackgroundColor};
    }

    ${focusStyles({
      theme,
      inset: focusInset,
      boxShadow: isGrabbed ? dragShadow : undefined
    })}

    > ${StyledGrip} {
      color: ${isDisabled && disabledColor};
    }
  `;
};

const sizeStyles = (props: IStyledDraggableProps) => {
  const { isCompact, theme } = props;
  const paddingDefault = theme.space.base * 2.25;
  const paddingCompact = theme.space.base * 1.25;

  /**
   * 1. Reset margin, e.g. when alternative tag includes native margin
   */
  return css`
    margin: 0; /* [1] */
    border: ${theme.borders.sm};
    border-radius: ${theme.borderRadii.md};
    padding: ${isCompact ? `${paddingCompact}px ${paddingDefault}px` : `${paddingDefault}px`};
    line-height: ${getLineHeight(theme.space.base * 5, theme.fontSizes.md)};
    font-size: ${theme.fontSizes.md};
    font-weight: ${theme.fontWeights.regular};
  `;
};

const getCursor = (props: IStyledDraggableProps) => {
  let cursor = props.isGrabbed ? 'grabbing' : 'grab';

  if (props.isDisabled || props.isPlaceholder) {
    cursor = 'default';
  }

  return cursor;
};

export const StyledDraggable = styled.div.attrs({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION
})<IStyledDraggableProps>`
  display: flex;
  flex: 1;
  align-items: center;
  /* 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,
    z-index 0.25s ease-in-out;
  cursor: ${getCursor};
  font-family: ${props => props.theme.fonts.system};
  direction: ${props => props.theme.rtl && 'rtl'};
  box-sizing: border-box;

  ${sizeStyles}

  ${colorStyles}

  > * {
    visibility: ${p => p.isPlaceholder && !p.isDisabled && 'hidden'};
  }

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

StyledDraggable.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';	6✔
9	import {
10	retrieveComponentStyles,
11	DEFAULT_THEME,
12	getColor,
13	IGardenTheme,
14	getLineHeight,
15	focusStyles
16	} from '@zendeskgarden/react-theming';	6✔
17	import { StyledGrip } from './StyledGrip';	6✔
18
19	const COMPONENT_ID = 'draggable';	6✔
20
21	export interface IStyledDraggableProps extends ThemeProps<DefaultTheme> {
22	focusInset?: boolean;
23	isBare?: boolean;
24	isCompact?: boolean;
25	isDisabled?: boolean;
26	isGrabbed?: boolean;
27	isPlaceholder?: boolean;
28	}
29
UNCOV 30	export function getDragShadow(theme: IGardenTheme) {	×
31	const { space, shadows, opacity } = theme;	9✔
32	const offsetY = `${space.base * 5}px`;	9✔
33	const blurRadius = `${space.base * 7}px`;	9✔
34	const color = getColor({	9✔
35	hue: 'neutralHue',
36	shade: 1200,
37	light: { transparency: opacity[200] },
38	dark: { transparency: opacity[1000] },
39	theme
40	});
41
42	return shadows.lg(offsetY, blurRadius, color);	9✔
43	}
44
45	const colorStyles = (props: IStyledDraggableProps) => {	6✔
46	const { isBare, isGrabbed, isDisabled, isPlaceholder, focusInset, theme } = props;	9✔
47
48	const dragShadow = getDragShadow(theme);	9✔
49	const baseBgColor = getColor({ variable: 'background.default', theme });	9✔
50	const placeholderBgColor = getColor({ variable: 'background.disabled', theme });	9✔
51	const disabledBgColor = getColor({	9✔
52	variable: 'background.disabled',
53	theme
54	});
55	const disabledColor = getColor({ variable: 'foreground.disabled', theme });	9✔
56
57	let color;
58	let hoverBackgroundColor;
59	let boxShadow;
60	let borderColor = 'transparent';	9✔
61	let backgroundColor = baseBgColor;	9✔
62
63	if (isDisabled) {	9✔
64	backgroundColor = disabledBgColor;	2✔
65	color = disabledColor;	2✔
66	} else if (isPlaceholder) {	7✔
67	backgroundColor = placeholderBgColor;	1✔
68	} else {
69	color = getColor({ variable: 'foreground.default', theme });	6✔
70	borderColor = isBare ? 'transparent' : getColor({ variable: 'border.default', theme });	6!
71	hoverBackgroundColor = getColor({	6✔
72	variable: isGrabbed ? 'background.raised' : 'background.primaryEmphasis',	6✔
73	...(!isGrabbed && { transparency: theme.opacity[100], dark: { offset: -100 } }),	11✔
74	theme
75	});
76	boxShadow = dragShadow;	6✔
77	}
78
79	return css`	9✔
80	border-color: ${borderColor};
81	box-shadow: ${isGrabbed && boxShadow};	10✔
82	background-color: ${backgroundColor};
83	color: ${color};
84
85	&:hover {
86	background-color: ${hoverBackgroundColor};
87	}
88
89	${focusStyles({
90	theme,
91	inset: focusInset,
92	boxShadow: isGrabbed ? dragShadow : undefined	9✔
93	})}
94
95	> ${StyledGrip} {
96	color: ${isDisabled && disabledColor};	11✔
97	}
98	`;
99	};
100
101	const sizeStyles = (props: IStyledDraggableProps) => {	6✔
102	const { isCompact, theme } = props;	9✔
103	const paddingDefault = theme.space.base * 2.25;	9✔
104	const paddingCompact = theme.space.base * 1.25;	9✔
105
106	/**
107	* 1. Reset margin, e.g. when alternative tag includes native margin
108	*/
109	return css`	9✔
110	margin: 0; /* [1] */
111	border: ${theme.borders.sm};
112	border-radius: ${theme.borderRadii.md};
113	padding: ${isCompact ? `${paddingCompact}px ${paddingDefault}px` : `${paddingDefault}px`};	9!
114	line-height: ${getLineHeight(theme.space.base * 5, theme.fontSizes.md)};
115	font-size: ${theme.fontSizes.md};
116	font-weight: ${theme.fontWeights.regular};
117	`;
118	};
119
120	const getCursor = (props: IStyledDraggableProps) => {	6✔
121	let cursor = props.isGrabbed ? 'grabbing' : 'grab';	9✔
122
123	if (props.isDisabled \|\| props.isPlaceholder) {	9✔
124	cursor = 'default';	3✔
125	}
126
127	return cursor;	9✔
128	};
129
130	export const StyledDraggable = styled.div.attrs({	9✔
131	'data-garden-id': COMPONENT_ID,
132	'data-garden-version': PACKAGE_VERSION
133	})<IStyledDraggableProps>`
134	display: flex;
135	flex: 1;
136	align-items: center;
137	/* prettier-ignore */
138	transition:
139	border-color 0.25s ease-in-out,
140	box-shadow 0.1s ease-in-out,
141	background-color 0.25s ease-in-out,
142	color 0.25s ease-in-out,
143	z-index 0.25s ease-in-out;
144	cursor: ${getCursor};
145	font-family: ${props => props.theme.fonts.system};	9✔
146	direction: ${props => props.theme.rtl && 'rtl'};	9!
147	box-sizing: border-box;
148
149	${sizeStyles}
150
151	${colorStyles}
152
153	> * {
154	visibility: ${p => p.isPlaceholder && !p.isDisabled && 'hidden'};	9✔
155	}
156
157	${props => retrieveComponentStyles(COMPONENT_ID, props)};	9✔
158	`;
159
160	StyledDraggable.defaultProps = {	6✔
161	theme: DEFAULT_THEME
162	};

zendeskgarden / react-components / c444ac5a-c5cd-4610-bf75-04419ae2f617

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