fix: Select disabled state hover style, Combobox disabled state open …

…on chevron click (#26068)
microsoft · Jan 9, 2023 · e361553 · e361553
1 parent 55c6dc1
commit e361553
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 4 deletions.
diff --git a/change/@fluentui-react-combobox-3d31acf9-37ca-43e4-8338-1f3ce04d8e7e.json b/change/@fluentui-react-combobox-3d31acf9-37ca-43e4-8338-1f3ce04d8e7e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: disabled cursor style, opening when disabled, and hover styles",
+  "packageName": "@fluentui/react-combobox",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-select-f9db8e0b-3088-4a68-9179-d5821aebf0cd.json b/change/@fluentui-react-select-f9db8e0b-3088-4a68-9179-d5821aebf0cd.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: no interactive hover style when disabled",
+  "packageName": "@fluentui/react-select",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
@@ -43,7 +43,7 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
     setValue,
     value,
   } = baseState;
-  const { freeform, multiselect } = props;
+  const { disabled, freeform, multiselect } = props;
 
   const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
     props,
@@ -109,6 +109,10 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
   };
 
   baseState.setOpen = (ev, newState: boolean) => {
+    if (disabled) {
+      return;
+    }
+
     if (!newState && !freeform) {
       setValue(undefined);
     }
@@ -141,7 +145,7 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
   // open Combobox when typing
   const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
     if (!open && getDropdownActionFromKey(ev) === 'Type') {
-      setOpen(ev, true);
+      baseState.setOpen(ev, true);
     }
   };
 
@@ -200,7 +204,6 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
       },
     }),
     ...baseState,
-    setOpen,
   };
 
   state.root.ref = useMergedRefs(state.root.ref, rootRef);

diff --git a/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts b/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts
@@ -176,6 +176,11 @@ const useStyles = makeStyles({
       ...shorthands.borderColor('GrayText'),
     },
   },
+
+  disabledText: {
+    color: tokens.colorNeutralForegroundDisabled,
+    cursor: 'not-allowed',
+  },
 });
 
 const useIconStyles = makeStyles({
@@ -227,6 +232,7 @@ export const useDropdownStyles_unstable = (state: DropdownState): DropdownState
     dropdownClassNames.root,
     styles.root,
     styles[appearance],
+    !disabled && appearance === 'outline' && styles.outlineInteractive,
     invalid && appearance !== 'underline' && styles.invalid,
     invalid && appearance === 'underline' && styles.invalidUnderline,
     disabled && styles.disabled,
@@ -238,6 +244,7 @@ export const useDropdownStyles_unstable = (state: DropdownState): DropdownState
     styles.button,
     styles[size],
     placeholderVisible && styles.placeholder,
+    disabled && styles.disabledText,
     state.button.className,
   );
 

diff --git a/packages/react-components/react-combobox/stories/Combobox/ComboboxDisabled.stories.tsx b/packages/react-components/react-combobox/stories/Combobox/ComboboxDisabled.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { makeStyles, shorthands, useId } from '@fluentui/react-components';
+import { Combobox, Option } from '@fluentui/react-combobox';
+import type { ComboboxProps } from '@fluentui/react-combobox';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+});
+
+export const Disabled = (props: Partial<ComboboxProps>) => {
+  const comboId = useId('combo-disabled');
+  const options = ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'];
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <label id={comboId}>Best pet</label>
+      <Combobox aria-labelledby={comboId} disabled placeholder="Select an animal" {...props}>
+        {options.map(option => (
+          <Option key={option}>{option}</Option>
+        ))}
+      </Combobox>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Combobox/index.stories.tsx b/packages/react-components/react-combobox/stories/Combobox/index.stories.tsx
@@ -15,6 +15,7 @@ export { MultiselectWithValueString } from './ComboboxMultiselectWithValueString
 export { Grouped } from './ComboboxGrouped.stories';
 export { Appearance } from './ComboboxAppearance.stories';
 export { Size } from './ComboboxSize.stories';
+export { Disabled } from './ComboboxDisabled.stories';
 
 export default {
   title: 'Preview Components/Combobox',

diff --git a/packages/react-components/react-combobox/stories/Dropdown/DropdownDisabled.stories.tsx b/packages/react-components/react-combobox/stories/Dropdown/DropdownDisabled.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { makeStyles, shorthands, useId } from '@fluentui/react-components';
+import { Dropdown, Option } from '@fluentui/react-combobox';
+import type { DropdownProps } from '@fluentui/react-combobox';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+});
+
+export const Disabled = (props: Partial<DropdownProps>) => {
+  const comboId = useId('combo-disabled');
+  const options = ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'];
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <label id={comboId}>Best pet</label>
+      <Dropdown aria-labelledby={comboId} disabled placeholder="Select an animal" {...props}>
+        {options.map(option => (
+          <Option key={option}>{option}</Option>
+        ))}
+      </Dropdown>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Dropdown/index.stories.tsx b/packages/react-components/react-combobox/stories/Dropdown/index.stories.tsx
@@ -12,6 +12,7 @@ export { ComplexOptions } from './DropdownComplexOptions.stories';
 export { CustomOptions } from './DropdownCustomOptions.stories';
 export { Multiselect } from './DropdownMultiselect.stories';
 export { Size } from './DropdownSize.stories';
+export { Disabled } from './DropdownDisabled.stories';
 
 export default {
   title: 'Preview Components/Dropdown',

diff --git a/packages/react-components/react-select/src/components/Select/useSelectStyles.ts b/packages/react-components/react-select/src/components/Select/useSelectStyles.ts
@@ -163,7 +163,8 @@ const useSelectStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackground1,
     ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
-
+  },
+  outlineInteractive: {
     '&:hover': {
       ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
       borderBottomColor: tokens.colorNeutralStrokeAccessible,
@@ -256,6 +257,7 @@ export const useSelectStyles_unstable = (state: SelectState): SelectState => {
     selectStyles.base,
     selectStyles[size],
     selectStyles[appearance],
+    !disabled && appearance === 'outline' && selectStyles.outlineInteractive,
     !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,
     !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,
     disabled && selectStyles.disabled,