feat(combobox): add isHidden prop to Option component (#1678)

Author: jzempel

package-lock.json

@@ -104,7 +104,6 @@ export const OPTIONS: Options = [
         meta: 'Poison',
         icon: true,
         tagProps: {
-          'aria-label': 'Press delete or backspace to remove',
           isPill: true,
           removeLabel: 'Remove'
         },
@@ -120,6 +119,18 @@ export const OPTIONS: Options = [
           isPill: true,
           removeLabel: 'Remove'
         }
+      },
+      {
+        value: 'flower-05',
+        label: 'Lily-Rose',
+        meta: 'Depp',
+        icon: true,
+        tagProps: {
+          'aria-label': 'Press delete or backspace to remove',
+          isPill: true,
+          removeLabel: 'Remove'
+        },
+        isHidden: true
       }
     ]
   },

packages/dropdowns.next/demo/stories/data.ts

@@ -22,7 +22,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.0",
-    "@zendeskgarden/container-combobox": "^1.0.11",
+    "@zendeskgarden/container-combobox": "^1.1.0",
     "@zendeskgarden/container-menu": "^0.3.0",
     "@zendeskgarden/container-utilities": "^1.0.0",
     "@zendeskgarden/react-buttons": "^8.73.4",

packages/dropdowns.next/package.json

@@ -19,12 +19,12 @@ interface ITestOptionProps extends Partial<IOptionProps> {
 }
 
 const TestOption = forwardRef<HTMLLIElement, ITestOptionProps>(
-  ({ optionTestId = 'option', value = 'test', children, ...props }, ref) => (
+  ({ optionTestId = 'option', value = 'test', tagProps, children, ...props }, ref) => (
     <Field>
       <Combobox defaultExpanded isMultiselectable>
         <Option
           data-test-id={optionTestId}
-          tagProps={{ 'data-test-id': 'tag' } as HTMLAttributes<HTMLDivElement>}
+          tagProps={{ 'data-test-id': 'tag', ...tagProps } as HTMLAttributes<HTMLDivElement>}
           value={value}
           {...props}
           ref={ref}
@@ -90,6 +90,16 @@ describe('Option', () => {
     expect(tag).not.toHaveAttribute('tabindex');
   });
 
+  it('renders hidden as expected', () => {
+    const { getByTestId } = render(<TestOption isHidden isSelected tagProps={{ isPill: true }} />);
+    const option = getByTestId('option');
+    const tag = getByTestId('tag');
+
+    expect(option).toHaveAttribute('aria-hidden', 'true');
+    expect(option).toHaveStyleRule('clip', 'rect(0 0 0 0)', { modifier: '[aria-hidden="true"]' });
+    expect(tag).toHaveStyleRule('border-radius', '100px');
+  });
+
   it('renders value text as expected', () => {
     const { getByTestId } = render(<TestOption />);
     const option = getByTestId('option');

packages/dropdowns.next/src/elements/combobox/Option.spec.tsx

@@ -25,7 +25,7 @@ import { OptionMeta } from './OptionMeta';
 import { toOption, toString } from './utils';
 
 const OptionComponent = forwardRef<HTMLLIElement, IOptionProps>(
-  ({ children, icon, isDisabled, isSelected, label, type, value, ...props }, ref) => {
+  ({ children, icon, isDisabled, isHidden, isSelected, label, type, value, ...props }, ref) => {
     const contextValue = useMemo(() => ({ isDisabled }), [isDisabled]);
     const { activeValue, getOptionProps, isCompact } = useComboboxContext();
     const isActive = value === activeValue;
@@ -58,7 +58,7 @@ const OptionComponent = forwardRef<HTMLLIElement, IOptionProps>(
           return <SelectedIcon />;
       }
     };
-    const option = toOption({ value, label, isDisabled, isSelected });
+    const option = toOption({ value, label, isDisabled, isHidden, isSelected });
     const optionProps = getOptionProps({
       option,
       ref: mergeRefs([optionRef, ref])
@@ -90,6 +90,7 @@ OptionComponent.propTypes = {
   icon: PropTypes.any,
   isDisabled: PropTypes.bool,
   isSelected: PropTypes.bool,
+  isHidden: PropTypes.bool,
   label: PropTypes.string,
   tagProps: PropTypes.object,
   type: PropTypes.oneOf(OPTION_TYPE),

packages/dropdowns.next/src/elements/combobox/Option.tsx

@@ -30,6 +30,7 @@ export const toOption = (props: IOptionProps): IOption => {
   return {
     value: props.value,
     label: props.label,
+    hidden: props.isHidden,
     disabled: props.isDisabled,
     selected: props.isSelected
   };

packages/dropdowns.next/src/elements/combobox/utils.ts

@@ -182,6 +182,8 @@ export interface IOptionProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'val
   icon?: ReactElement;
   /** Indicates that the option is not interactive */
   isDisabled?: boolean;
+  /** Hides the option while retaining props (i.e. selected `tagProps`) */
+  isHidden?: boolean;
   /** Determines the initial selection state for the option */
   isSelected?: boolean;
   /** Sets the text label of the option (defaults to `value`) */

packages/dropdowns.next/src/types/index.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { ThemeProps, DefaultTheme, css } from 'styled-components';
-import { math } from 'polished';
+import { hideVisually, math } from 'polished';
 import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { OptionType } from '../../types';
 
@@ -99,6 +99,10 @@ export const StyledOption = styled.li.attrs({
     cursor: default;
   }
 
+  &[aria-hidden='true'] {
+    ${hideVisually()};
+  }
+
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;