Skip to content

Commit

Permalink
feat(dropdowns): new light/dark mode colors (#1816)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jzempel
jzempel authored Jun 5, 2024
1 parent cffdb06 commit 142286c
Show file tree
Hide file tree
Showing 23 changed files with 343 additions and 157 deletions.
98 changes: 98 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions packages/dropdowns/demo/~patterns/stories/ListboxStory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
*/

import React, { useRef } from 'react';
import { Story } from '@storybook/react';
import { StoryFn } from '@storybook/react';
import styled from 'styled-components';
import { Combobox, Field, Option } from '@zendeskgarden/react-dropdowns';
import { getColorV8 } from '@zendeskgarden/react-theming';
import { getColor } from '@zendeskgarden/react-theming';
import { Paragraph } from '@zendeskgarden/react-typography';

interface IArgs {
Expand All @@ -20,13 +20,13 @@ export const StyledContainer = styled.div`
position: relative;
border: ${p => p.theme.borders.sm};
border-radius: ${p => p.theme.borderRadii.md};
border-color: ${p => getColorV8('neutralHue', 300, p.theme)};
border-color: ${p => getColor({ theme: p.theme, variable: 'border.default' })};
padding: ${p => p.theme.space.md};
max-height: 300px;
overflow: clip;
`;

export const ListboxStory: Story<IArgs> = ({ listboxAppendToNode }) => {
export const ListboxStory: StoryFn<IArgs> = ({ listboxAppendToNode }) => {
const portalNode = useRef<HTMLDivElement>(null);

return (
Expand Down
27 changes: 16 additions & 11 deletions packages/dropdowns/src/elements/combobox/Combobox.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@
import React, { HTMLAttributes, InputHTMLAttributes, forwardRef } from 'react';
import { render, renderRtl } from 'garden-test-utils';
import userEvent from '@testing-library/user-event';
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
import { IComboboxProps, ISelectedOption } from '../../types';
import { Combobox } from './Combobox';
import { OptGroup } from './OptGroup';
import { Option } from './Option';
import { Field } from './Field';
import { rgba } from 'polished';

interface ITestComboboxProps extends IComboboxProps {
fieldTestId?: string;
Expand Down Expand Up @@ -99,7 +100,7 @@ describe('Combobox', () => {

await user.hover(label);

expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.blue[600], {
expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.blue[700], {
modifier: ':hover'
});
});
Expand Down Expand Up @@ -228,9 +229,13 @@ describe('Combobox', () => {
const input = getByTestId('input');

expect(trigger).toHaveAttribute('aria-disabled', 'true');
expect(trigger).toHaveStyleRule('background-color', PALETTE_V8.grey[100], {
modifier: '[aria-disabled="true"]'
});
expect(trigger).toHaveStyleRule(
'background-color',
rgba(PALETTE.grey[700], DEFAULT_THEME.opacity[100]),
{
modifier: '[aria-disabled="true"]'
}
);
expect(input).toHaveAttribute('disabled');
});

Expand Down Expand Up @@ -451,8 +456,8 @@ describe('Combobox', () => {
const combobox = getByTestId('combobox');
const message = getByTestId('message');

expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.green[600]);
expect(message).toHaveStyleRule('color', PALETTE_V8.green[600]);
expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.green[700]);
expect(message).toHaveStyleRule('color', PALETTE.green[700]);
expect(message.firstChild).not.toBeNull();
});

Expand All @@ -461,8 +466,8 @@ describe('Combobox', () => {
const combobox = getByTestId('combobox');
const message = getByTestId('message');

expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.yellow[600]);
expect(message).toHaveStyleRule('color', PALETTE_V8.yellow[700]);
expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.yellow[700]);
expect(message).toHaveStyleRule('color', PALETTE.yellow[700]);
expect(message.firstChild).not.toBeNull();
});

Expand All @@ -471,8 +476,8 @@ describe('Combobox', () => {
const combobox = getByTestId('combobox');
const message = getByTestId('message');

expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE_V8.red[600]);
expect(message).toHaveStyleRule('color', PALETTE_V8.red[600]);
expect(combobox.firstChild).toHaveStyleRule('border-color', PALETTE.red[700]);
expect(message).toHaveStyleRule('color', PALETTE.red[700]);
expect(message.firstChild).not.toBeNull();
});
});
Expand Down
14 changes: 7 additions & 7 deletions packages/dropdowns/src/elements/combobox/Option.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import React, { HTMLAttributes, forwardRef } from 'react';
import { render } from 'garden-test-utils';
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
import { PALETTE } from '@zendeskgarden/react-theming';
import { IOptionProps } from '../../types';
import { Field } from './Field';
import { Combobox } from './Combobox';
Expand Down Expand Up @@ -84,7 +84,7 @@ describe('Option', () => {
const tag = getByTestId('tag');

expect(option).toHaveAttribute('aria-disabled', 'true');
expect(option).toHaveStyleRule('color', PALETTE_V8.grey[400], {
expect(option).toHaveStyleRule('color', PALETTE.grey[600], {
modifier: '[aria-disabled="true"]'
});
expect(tag).not.toHaveAttribute('tabindex');
Expand Down Expand Up @@ -127,7 +127,7 @@ describe('Option', () => {
const option = getByTestId('option');

expect(option.firstChild).toHaveStyleRule('opacity', '1');
expect(option.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]);
expect(option.firstChild).toHaveStyleRule('color', PALETTE.grey[700]);
expect(option.firstChild).toHaveStyleRule('left', '12px');
});

Expand All @@ -136,22 +136,22 @@ describe('Option', () => {
const option = getByTestId('option');

expect(option.firstChild).toHaveStyleRule('opacity', '1');
expect(option.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]);
expect(option.firstChild).toHaveStyleRule('color', PALETTE.grey[700]);
expect(option.firstChild).toHaveStyleRule('right', '12px');
});

it('renders "add" as expected', () => {
const { getByTestId } = render(<TestOption type="add" />);
const option = getByTestId('option');

expect(option).toHaveStyleRule('color', PALETTE_V8.blue[600]);
expect(option).toHaveStyleRule('color', PALETTE.blue[700]);
});

it('renders "danger" as expected', () => {
const { getByTestId } = render(<TestOption type="danger" />);
const option = getByTestId('option');

expect(option).toHaveStyleRule('color', PALETTE_V8.red[600]);
expect(option).toHaveStyleRule('color', PALETTE.red[700]);
});
});

Expand All @@ -176,7 +176,7 @@ describe('Option', () => {
);
const meta = getByTestId('meta');

expect(meta).toHaveStyleRule('color', PALETTE_V8.grey[600]);
expect(meta).toHaveStyleRule('color', PALETTE.grey[700]);
});
});
});
8 changes: 6 additions & 2 deletions packages/dropdowns/src/elements/combobox/Option.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { toOption } from './utils';

const OptionComponent = forwardRef<HTMLLIElement, IOptionProps>(
({ children, icon, isDisabled, isHidden, isSelected, label, type, value, ...props }, ref) => {
const contextValue = useMemo(() => ({ isDisabled }), [isDisabled]);
const contextValue = useMemo(() => ({ isDisabled, type }), [isDisabled, type]);
const { activeValue, getOptionProps, isCompact } = useComboboxContext();
const isActive = value === activeValue;
const optionRef = useRef<HTMLLIElement>(null);
Expand Down Expand Up @@ -76,7 +76,11 @@ const OptionComponent = forwardRef<HTMLLIElement, IOptionProps>(
<StyledOptionTypeIcon $isCompact={isCompact} $type={type}>
{renderActionIcon(type)}
</StyledOptionTypeIcon>
{icon && <StyledOptionIcon>{icon}</StyledOptionIcon>}
{icon && (
<StyledOptionIcon $isDisabled={isDisabled} $type={type}>
{icon}
</StyledOptionIcon>
)}
<StyledOptionContent>{children || label || value}</StyledOptionContent>
</StyledOption>
</OptionContext.Provider>
Expand Down
8 changes: 6 additions & 2 deletions packages/dropdowns/src/elements/menu/Item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const ItemComponent = forwardRef<HTMLLIElement, IItemProps>(
}
};

const contextValue = useMemo(() => ({ isDisabled }), [isDisabled]);
const contextValue = useMemo(() => ({ isDisabled, type }), [isDisabled, type]);

return (
<ItemContext.Provider value={contextValue}>
Expand All @@ -93,7 +93,11 @@ const ItemComponent = forwardRef<HTMLLIElement, IItemProps>(
<StyledItemTypeIcon $isCompact={isCompact} $type={type}>
{renderActionIcon(type)}
</StyledItemTypeIcon>
{icon && <StyledItemIcon>{icon}</StyledItemIcon>}
{icon && (
<StyledItemIcon $isDisabled={isDisabled} $type={type}>
{icon}
</StyledItemIcon>
)}
<StyledItemContent>{children || label}</StyledItemContent>
</StyledItem>
</ItemContext.Provider>
Expand Down
4 changes: 2 additions & 2 deletions packages/dropdowns/src/elements/menu/Menu.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { Menu } from './Menu';
import { ItemGroup } from './ItemGroup';
import { Item } from './Item';
import { Separator } from './Separator';
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
import { PALETTE } from '@zendeskgarden/react-theming';

interface TestMenuProps extends Omit<IMenuProps, 'button'> {
button?: IMenuProps['button'];
Expand Down Expand Up @@ -311,7 +311,7 @@ describe('Menu', () => {
const item = getByTestId('item');
const icon = item.querySelector('svg')!;

expect(item).toHaveStyleRule('color', PALETTE_V8.red[600]);
expect(item).toHaveStyleRule('color', PALETTE.red[700]);
expect(icon).not.toBeVisible();
});

Expand Down
8 changes: 4 additions & 4 deletions packages/dropdowns/src/views/combobox/StyledInput.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import { hideVisually, math } from 'polished';
import {
retrieveComponentStyles,
DEFAULT_THEME,
getColorV8,
getLineHeight
getLineHeight,
getColor
} from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'dropdowns.combobox.input';
Expand All @@ -23,8 +23,8 @@ interface IStyledInputProps extends ThemeProps<DefaultTheme> {
isMultiselectable?: boolean;
}

const colorStyles = (props: IStyledInputProps) => {
const placeholderColor = getColorV8('neutralHue', 400, props.theme);
const colorStyles = ({ theme }: IStyledInputProps) => {
const placeholderColor = getColor({ theme, variable: 'foreground.disabled' });

return css`
background-color: inherit;
Expand Down
Loading

0 comments on commit 142286c

Please sign in to comment.