Skip to content

Commit ee0e4f5

Browse files
ze-floze-flo
authored
feat(modals): new light/dark mode colors for TooltipModal and Drawer (#1840)
1 parent 4db371a commit ee0e4f5

File tree

9 files changed

+94
-26
lines changed

9 files changed

+94
-26
lines changed

‎packages/modals/demo/stories/TooltipModalStory.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77

88
import React, { useRef } from 'react';
99
import { Story } from '@storybook/react';
10-
import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
10+
import { useTheme } from 'styled-components';
11+
import { getColor } from '@zendeskgarden/react-theming';
1112
import { Grid } from '@zendeskgarden/react-grid';
1213
import { Button, IconButton } from '@zendeskgarden/react-buttons';
1314
import { Avatar } from '@zendeskgarden/react-avatars';
@@ -45,6 +46,7 @@ export const TooltipModalStory: Story<IArgs> = ({
4546
}) => {
4647
const refs = useRef<(HTMLElement | null | undefined)[]>([]);
4748
const current = refs.current.indexOf(args.referenceElement);
49+
const theme = useTheme();
4850

4951
// Using `aria-label={undefined}` when `hasTitle` is `true` appears to
5052
// void the fallback value in Storybook, resulting in no rendered attribute
@@ -97,9 +99,7 @@ export const TooltipModalStory: Story<IArgs> = ({
9799
}}
98100
onClick={event => handleClick(event.currentTarget)}
99101
>
100-
<Avatar
101-
foregroundColor={getColorV8('foreground', 600 /* default shade */, DEFAULT_THEME)}
102-
>
102+
<Avatar foregroundColor={getColor({ variable: 'foreground.default', theme })}>
103103
<Avatar.Text>{index + 1}</Avatar.Text>
104104
</Avatar>
105105
</IconButton>

‎packages/modals/src/elements/TooltipModal/Close.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const CloseComponent = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLBu
2424
'aria-label': ariaLabel!
2525
}) as ButtonHTMLAttributes<HTMLButtonElement>)}
2626
ref={ref}
27+
size="small"
2728
>
2829
<XStrokeIcon />
2930
</StyledTooltipModalClose>

‎packages/modals/src/styled/StyledDrawer.spec.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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 React from 'react';
9+
import { getRenderFn } from 'garden-test-utils';
10+
import { PALETTE, DEFAULT_THEME } from '@zendeskgarden/react-theming';
11+
import { StyledDrawer } from './StyledDrawer';
12+
import { rgba } from 'polished';
13+
14+
describe('StyledDrawer', () => {
15+
type Args = [
16+
'dark' | 'light',
17+
{
18+
bgColor: string;
19+
borderColor: string;
20+
boxShadowColor: string;
21+
}
22+
];
23+
24+
it.each<Args>([
25+
[
26+
'light',
27+
{
28+
bgColor: PALETTE.white,
29+
borderColor: PALETTE.grey[300],
30+
boxShadowColor: rgba(PALETTE.grey[1200], DEFAULT_THEME.opacity[200])
31+
}
32+
],
33+
[
34+
'dark',
35+
{
36+
bgColor: PALETTE.grey[1000],
37+
borderColor: PALETTE.grey[800],
38+
boxShadowColor: rgba(PALETTE.grey[1200], DEFAULT_THEME.opacity[1000])
39+
}
40+
]
41+
])('renders in "%s" mode', (mode, { bgColor, borderColor, boxShadowColor }) => {
42+
const { container } = getRenderFn(mode)(<StyledDrawer />);
43+
44+
expect(container.firstChild).toHaveStyleRule('background-color', bgColor);
45+
expect(container.firstChild).toHaveStyleRule('border-color', borderColor);
46+
expect(container.firstChild).toHaveStyleRule('box-shadow', `0 20px 28px 0 ${boxShadowColor}`);
47+
});
48+
49+
it('renders RTL styling', () => {
50+
const { container } = getRenderFn('light', true)(<StyledDrawer />);
51+
52+
expect(container.firstChild).toHaveStyleRule('direction', 'rtl');
53+
expect(container.firstChild).toHaveStyleRule('border-right', '1px solid');
54+
});
55+
});

‎packages/modals/src/styled/StyledDrawer.ts‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,33 @@
55
* found at http://www.apache.org/licenses/LICENSE-2.0.
66
*/
77

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

1111
const COMPONENT_ID = 'modals.drawer_modal';
1212

1313
const DRAWER_WIDTH = 380;
1414

15-
const boxShadow = (props: ThemeProps<DefaultTheme>) => {
16-
const { theme } = props;
17-
const { space, shadows } = theme;
18-
const offsetY = `${space.base * 5}px`;
19-
const blurRadius = `${space.base * 7}px`;
20-
const color = getColorV8('neutralHue', 800, theme, 0.35);
15+
const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
16+
const offsetY = `${theme.space.base * 5}px`;
17+
const blurRadius = `${theme.space.base * 7}px`;
18+
const shadowColor = getColor({
19+
theme,
20+
hue: 'neutralHue',
21+
shade: 1200,
22+
light: { transparency: theme.opacity[200] },
23+
dark: { transparency: theme.opacity[1000] }
24+
});
25+
const shadow = theme.shadows.lg(offsetY, blurRadius, shadowColor);
2126

22-
return shadows.lg(offsetY, blurRadius, color as string);
27+
const borderColor = getColor({ theme, variable: 'border.default' });
28+
const backgroundColor = getColor({ theme, variable: 'background.raised' });
29+
30+
return css`
31+
border-color: ${borderColor};
32+
box-shadow: ${shadow};
33+
background-color: ${backgroundColor};
34+
`;
2335
};
2436

2537
/**
@@ -35,8 +47,8 @@ export const StyledDrawer = styled.div.attrs({
3547
${props => (props.theme.rtl ? 'left' : 'right')}: 0;
3648
flex-direction: column;
3749
z-index: 500;
38-
box-shadow: ${boxShadow};
39-
background: ${props => getColorV8('background', 600 /* default shade */, props.theme)};
50+
${props => (props.theme.rtl ? 'border-right' : 'border-left')}: ${props =>
51+
props.theme.borders.sm};
4052
width: ${DRAWER_WIDTH}px;
4153
height: 100%;
4254
overflow: auto;
@@ -62,6 +74,8 @@ export const StyledDrawer = styled.div.attrs({
6274
outline: none;
6375
}
6476
77+
${colorStyles}
78+
6579
${props => retrieveComponentStyles(COMPONENT_ID, props)};
6680
`;
6781

‎packages/modals/src/styled/StyledDrawerFooter.ts‎

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

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

1111
const COMPONENT_ID = 'modals.drawer_modal.footer';
1212

@@ -17,7 +17,8 @@ export const StyledDrawerFooter = styled.div.attrs({
1717
display: flex;
1818
flex-shrink: 0;
1919
justify-content: flex-end;
20-
border-top: ${props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`};
20+
border-top: ${({ theme }) =>
21+
`${theme.borders.sm} ${getColor({ theme, variable: 'border.subtle' })}`};
2122
padding: ${props => props.theme.space.base * 5}px;
2223
2324
${props => retrieveComponentStyles(COMPONENT_ID, props)};

‎packages/modals/src/styled/StyledModal.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ const animationStyles = (props: IStyledModalProps) => {
4848
};
4949

5050
const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
51-
const offsetY = `${theme.space.base * (theme.colors.base === 'dark' ? 4 : 5)}px`;
52-
const blurRadius = `${theme.space.base * (theme.colors.base === 'dark' ? 6 : 7)}px`;
51+
const offsetY = `${theme.space.base * 5}px`;
52+
const blurRadius = `${theme.space.base * 7}px`;
5353
const shadowColor = getColor({
5454
theme,
5555
hue: 'neutralHue',

‎packages/modals/src/styled/StyledTooltipModalBody.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
getLineHeight,
1111
retrieveComponentStyles,
1212
DEFAULT_THEME,
13-
getColorV8
13+
getColor
1414
} from '@zendeskgarden/react-theming';
1515

1616
const COMPONENT_ID = 'modals.tooltip_modal.body';
@@ -23,7 +23,7 @@ export const StyledTooltipModalBody = styled.div.attrs({
2323
margin: 0;
2424
padding-top: ${props => props.theme.space.base * 1.5}px;
2525
line-height: ${props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)};
26-
color: ${props => getColorV8('foreground', 600 /* default shade */, props.theme)};
26+
color: ${({ theme }) => getColor({ variable: 'foreground.default', theme })};
2727
font-size: ${props => props.theme.fontSizes.md};
2828
2929
${props => retrieveComponentStyles(COMPONENT_ID, props)};

‎packages/modals/src/styled/StyledTooltipModalClose.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@ export const StyledTooltipModalClose = styled(StyledClose).attrs({
1717
})`
1818
top: ${props => props.theme.space.base * 3.5}px;
1919
${props => (props.theme.rtl ? 'left' : 'right')}: ${props => `${props.theme.space.base * 3}px`};
20-
width: ${props => props.theme.space.base * 8}px;
21-
height: ${props => props.theme.space.base * 8}px;
22-
2320
${props => retrieveComponentStyles(COMPONENT_ID, props)};
2421
`;
2522

‎packages/modals/src/styled/StyledTooltipModalTitle.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
getLineHeight,
1111
retrieveComponentStyles,
1212
DEFAULT_THEME,
13-
getColorV8
13+
getColor
1414
} from '@zendeskgarden/react-theming';
1515

1616
const COMPONENT_ID = 'modals.tooltip_modal.title';
@@ -27,7 +27,7 @@ export const StyledTooltipModalTitle = styled.div.attrs({
2727
'data-garden-version': PACKAGE_VERSION
2828
})`
2929
margin: 0;
30-
color: ${props => getColorV8('foreground', 600 /* default shade */, props.theme)};
30+
color: ${({ theme }) => getColor({ variable: 'foreground.default', theme })};
3131
font-weight: ${props => props.theme.fontWeights.semibold};
3232
3333
${props => sizeStyles(props)};

0 commit comments

Comments
 (0)