From 091a466bc5892571619305ed281ac6764fb5e0b9 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Wed, 21 Dec 2022 09:11:09 -0800
Subject: [PATCH 1/3] fix: disabled cursor style, opening when disabled, and
 hover styles

---
 .../src/components/Combobox/useCombobox.tsx   |  9 ++++--
 .../components/Dropdown/useDropdownStyles.ts  |  7 +++++
 .../Combobox/ComboboxDisabled.stories.tsx     | 31 +++++++++++++++++++
 .../stories/Combobox/index.stories.tsx        |  1 +
 .../Dropdown/DropdownDisabled.stories.tsx     | 31 +++++++++++++++++++
 .../stories/Dropdown/index.stories.tsx        |  1 +
 .../src/components/Select/useSelectStyles.ts  |  4 ++-
 7 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 packages/react-components/react-combobox/stories/Combobox/ComboboxDisabled.stories.tsx
 create mode 100644 packages/react-components/react-combobox/stories/Dropdown/DropdownDisabled.stories.tsx

diff --git a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
index 3186c4a71ccff..f6df62b51aa06 100644
--- 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,
@@ -104,6 +104,10 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
   };
 
   baseState.setOpen = (ev, newState: boolean) => {
+    if (disabled) {
+      return;
+    }
+
     if (!newState && !freeform) {
       setValue(undefined);
     }
@@ -136,7 +140,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);
     }
   };
 
@@ -195,7 +199,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
index a9fd5208fd585..182ad5fb5ce44 100644
--- 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
new file mode 100644
index 0000000000000..30e713bace48a
--- /dev/null
+++ 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
index 2313827011eb2..74c85cf7d45cc 100644
--- 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
new file mode 100644
index 0000000000000..72d05de05f910
--- /dev/null
+++ 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
index 3fa62bc709358..7e9d4df1b358c 100644
--- 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
index bfb5bcf060943..fb59a0d445d8d 100644
--- 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,

From 6a412da265c7097318117d5a5be7ac6271cbe27d Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Wed, 21 Dec 2022 09:12:12 -0800
Subject: [PATCH 2/3] change files

---
 ...eact-combobox-3d31acf9-37ca-43e4-8338-1f3ce04d8e7e.json | 7 +++++++
 ...-react-select-f9db8e0b-3088-4a68-9179-d5821aebf0cd.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-combobox-3d31acf9-37ca-43e4-8338-1f3ce04d8e7e.json
 create mode 100644 change/@fluentui-react-select-f9db8e0b-3088-4a68-9179-d5821aebf0cd.json

diff --git a/change/@fluentui-react-combobox-3d31acf9-37ca-43e4-8338-1f3ce04d8e7e.json b/change/@fluentui-react-combobox-3d31acf9-37ca-43e4-8338-1f3ce04d8e7e.json
new file mode 100644
index 0000000000000..f2743f8ed949d
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..e6b491c4ebd5e
--- /dev/null
+++ 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"
+}

From b2f121d4ab8b1e4443f5473a311aa21c46b726bb Mon Sep 17 00:00:00 2001
From: Sarah Higley <smhigley@users.noreply.github.com>
Date: Mon, 9 Jan 2023 11:03:12 -0800
Subject: [PATCH 3/3] fix change file typo

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
---
 ...entui-react-select-f9db8e0b-3088-4a68-9179-d5821aebf0cd.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-select-f9db8e0b-3088-4a68-9179-d5821aebf0cd.json b/change/@fluentui-react-select-f9db8e0b-3088-4a68-9179-d5821aebf0cd.json
index e6b491c4ebd5e..9a60008b5d726 100644
--- a/change/@fluentui-react-select-f9db8e0b-3088-4a68-9179-d5821aebf0cd.json
+++ b/change/@fluentui-react-select-f9db8e0b-3088-4a68-9179-d5821aebf0cd.json
@@ -1,6 +1,6 @@
 {
   "type": "prerelease",
-  "comment": "fix: no interactive hover style when disabled\"",
+  "comment": "fix: no interactive hover style when disabled",
   "packageName": "@fluentui/react-select",
   "email": "sarah.higley@microsoft.com",
   "dependentChangeType": "patch"