Skip to content

Commit 80ff27a

Browse files
geotrevgeotrev
authored
feat(drag-drop): adds light/dark mode colors (#1805)
1 parent e1b1c46 commit 80ff27a

File tree

9 files changed

+168
-220
lines changed

9 files changed

+168
-220
lines changed

‎package-lock.json‎

Lines changed: 99 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/drag-drop/demo/~patterns/stories/components.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Draggable, DraggableList, Dropzone } from '@zendeskgarden/react-drag-dr
1919

2020
import { animateLayoutChanges } from './utils';
2121
import type { IDraggableItemProps, IDropIndicatorProps, ISortableColumnProps } from './types';
22+
import { LG, MD } from '@zendeskgarden/react-typography';
2223

2324
export const DraggableItem = forwardRef<HTMLDivElement, IDraggableItemProps>((props, ref) => {
2425
const { isOverlay, data, tabIndex, ...restProps } = props;
@@ -225,9 +226,7 @@ export const DraggablesColumn = ({
225226
}: ISortableColumnProps) => {
226227
return (
227228
<div style={isHorizontal ? { minHeight: '100px' } : { width: '250px' }}>
228-
<p>
229-
<strong>Produce</strong>
230-
</p>
229+
<LG tag="h2">Produce</LG>
231230
{items.length > 0 && (
232231
<DraggableList isHorizontal={isHorizontal}>
233232
{items.map(item => (
@@ -242,7 +241,7 @@ export const DraggablesColumn = ({
242241
))}
243242
</DraggableList>
244243
)}
245-
{items.length === 0 && <small>You picked every fruit!</small>}
244+
{items.length === 0 && <MD tag="p">No more produce!</MD>}
246245
</div>
247246
);
248247
};
@@ -252,9 +251,7 @@ export const DroppablesColumn = (props: ISortableColumnProps) => {
252251

253252
return (
254253
<div style={isHorizontal ? { minHeight: '100px' } : { width: '284px' }}>
255-
<p>
256-
<strong>Favorites</strong>
257-
</p>
254+
<LG tag="h2">Favorites</LG>
258255
<SortablesColumn {...props} />
259256
</div>
260257
);

‎packages/drag-drop/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"@dnd-kit/sortable": "8.0.0",
3636
"@dnd-kit/utilities": "3.2.2",
3737
"@zendeskgarden/react-theming": "^9.0.0-next.10",
38+
"@zendeskgarden/react-typography": "^9.0.0-next.10",
3839
"@zendeskgarden/svg-icons": "7.0.0"
3940
},
4041
"keywords": [

‎packages/drag-drop/src/elements/dropzone/Dropzone.spec.tsx‎

Lines changed: 1 addition & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@
66
*/
77

88
import React from 'react';
9-
import { rgba } from 'polished';
109
import { render, renderRtl } from 'garden-test-utils';
1110
import { Dropzone } from './Dropzone';
12-
import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
11+
import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
1312

1413
describe('Dropzone', () => {
1514
it('passes ref to underlying DOM element', () => {
@@ -154,91 +153,4 @@ describe('Dropzone', () => {
154153
expect(queryByText('message')!.nodeName).toBe('P');
155154
});
156155
});
157-
158-
const STATES = ['default', 'danger', 'disabled'];
159-
const dangerColor = getColorV8('dangerHue', 600, DEFAULT_THEME);
160-
const dangerDarkColor = getColorV8('dangerHue', 800, DEFAULT_THEME);
161-
const dangerBgColor = rgba(getColorV8('dangerHue', 600, DEFAULT_THEME) as string, 0.08);
162-
const primaryColor = getColorV8('primaryHue', 600, DEFAULT_THEME);
163-
const primaryDarkColor = getColorV8('primaryHue', 800, DEFAULT_THEME);
164-
const primaryBgColor = rgba(getColorV8('primaryHue', 600, DEFAULT_THEME) as string, 0.08);
165-
const neutralColor = getColorV8('neutralHue', 600, DEFAULT_THEME);
166-
167-
const StateMap: Record<string, any> = {
168-
disabled: {
169-
base: `
170-
background-color: ${getColorV8('neutralHue', 200, DEFAULT_THEME)};
171-
color: ${getColorV8('neutralHue', 400, DEFAULT_THEME)};
172-
border-color: ${getColorV8('neutralHue', 300, DEFAULT_THEME)};
173-
`
174-
},
175-
default: {
176-
base: `
177-
background-color: transparent;
178-
color: ${neutralColor};
179-
border-color: ${neutralColor};
180-
`,
181-
active: `
182-
background-color: ${primaryBgColor};
183-
color: ${primaryColor};
184-
border-color: ${primaryColor};
185-
`,
186-
highlight: `
187-
background-color: ${primaryBgColor};
188-
color: ${primaryDarkColor};
189-
border-color: ${primaryColor};
190-
border-width: 2px;
191-
border-style: solid;
192-
`
193-
},
194-
danger: {
195-
base: `
196-
background-color: transparent;
197-
color: ${dangerColor};
198-
border-color: ${dangerColor};
199-
`,
200-
active: `
201-
background-color: ${dangerBgColor};
202-
color: ${dangerColor};
203-
border-color: ${dangerColor};
204-
`,
205-
highlight: `
206-
background-color: ${dangerBgColor};
207-
color: ${dangerDarkColor};
208-
border-color: ${dangerColor};
209-
border-width: 2px;
210-
border-style: solid;
211-
`
212-
}
213-
};
214-
215-
describe.each(STATES)(`%s state`, state => {
216-
it('applies correct base styling', () => {
217-
const { container } = render(
218-
<Dropzone isDanger={state === 'danger'} isDisabled={state === 'disabled'} />
219-
);
220-
221-
expect(container.firstChild).toHaveStyle(StateMap[state].base);
222-
});
223-
224-
if (StateMap[state].active) {
225-
it('applies correct active styling', () => {
226-
const { container } = render(
227-
<Dropzone isDanger={state === 'danger'} isDisabled={state === 'disabled'} isActive />
228-
);
229-
230-
expect(container.firstChild).toHaveStyle(StateMap[state].active);
231-
});
232-
}
233-
234-
if (StateMap[state].highlight) {
235-
it('applies correct highlight styling', () => {
236-
const { container } = render(
237-
<Dropzone isDanger={state === 'danger'} isDisabled={state === 'disabled'} isHighlighted />
238-
);
239-
240-
expect(container.firstChild).toHaveStyle(StateMap[state].highlight);
241-
});
242-
}
243-
});
244156
});

‎packages/drag-drop/src/styled/draggable-list/StyledDropIndicator.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
import styled, { ThemeProps, DefaultTheme, css } from 'styled-components';
9-
import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
9+
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
1010

1111
const COMPONENT_ID = 'draggable_list.drop_indicator';
1212

@@ -16,15 +16,14 @@ export interface IStyledDropIndicatorProps extends ThemeProps<DefaultTheme> {
1616

1717
const colorStyles = (props: IStyledDropIndicatorProps) => {
1818
const { theme } = props;
19-
const backgroundColor = getColorV8('primaryHue', 600, theme);
20-
const color = getColorV8('primaryHue', 600, theme);
19+
const color = getColor({ variable: 'border.primaryEmphasis', theme });
2120

2221
return css`
23-
box-shadow: ${`0 0 0 ${theme.borderWidths.sm} ${color}`};
22+
box-shadow: ${theme.shadows.xs(color)};
2423
2524
&::before,
2625
&::after {
27-
background-color: ${backgroundColor};
26+
background-color: ${color};
2827
}
2928
3029
&:focus {

0 commit comments

Comments
 (0)