zendeskgarden · jzempel · Jun 5, 2024 · May 15, 2024 · May 16, 2024 · May 16, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dropdowns/demo/~patterns/stories/ListboxStory.tsx b/packages/dropdowns/demo/~patterns/stories/ListboxStory.tsx
@@ -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 {
@@ -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 (

diff --git a/packages/dropdowns/src/elements/combobox/Combobox.spec.tsx b/packages/dropdowns/src/elements/combobox/Combobox.spec.tsx
@@ -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;
@@ -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'
     });
   });
@@ -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');
   });
 
@@ -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();
     });
 
@@ -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();
     });
 
@@ -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();
     });
   });

diff --git a/packages/dropdowns/src/elements/combobox/Option.spec.tsx b/packages/dropdowns/src/elements/combobox/Option.spec.tsx
@@ -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';
@@ -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');
@@ -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');
     });
 
@@ -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]);
     });
   });
 
@@ -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]);
     });
   });
 });
diff --git a/packages/dropdowns/src/elements/combobox/Option.tsx b/packages/dropdowns/src/elements/combobox/Option.tsx
@@ -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);
@@ -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>

diff --git a/packages/dropdowns/src/elements/menu/Item.tsx b/packages/dropdowns/src/elements/menu/Item.tsx
@@ -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}>
@@ -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>

diff --git a/packages/dropdowns/src/elements/menu/Menu.spec.tsx b/packages/dropdowns/src/elements/menu/Menu.spec.tsx
@@ -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'];
@@ -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();
     });
 

diff --git a/packages/dropdowns/src/views/combobox/StyledInput.ts b/packages/dropdowns/src/views/combobox/StyledInput.ts
@@ -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';
@@ -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;