chore: adds disableButtonEnhancement on triggers (microsoft#25211)

* chore: adds disableButtonEnhancement on triggers * chore: removes unnecessary tests
NotWoods · Nov 18, 2022 · abff7a4 · abff7a4
1 parent 2ba98cf
commit abff7a4
Show file tree

Hide file tree

Showing 95 changed files with 262 additions and 351 deletions.
diff --git a/change/@fluentui-react-avatar-73954508-ffed-4bfe-a16f-39fd287dafd4.json b/change/@fluentui-react-avatar-73954508-ffed-4bfe-a16f-39fd287dafd4.json
@@ -0,0 +1,7 @@
+{
+ "type": "none",
+ "comment": "chore: adds disableButtonEnhancement on triggers",
+ "packageName": "@fluentui/react-avatar",
+ "email": "bernardo.sunderhus@gmail.com",
+ "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-dialog-914ff253-e601-4337-91a3-f7f8648eb1a5.json b/change/@fluentui-react-dialog-914ff253-e601-4337-91a3-f7f8648eb1a5.json
@@ -0,0 +1,7 @@
+{
+ "type": "none",
+ "comment": "chore: adds disableButtonEnhancement on triggers",
+ "packageName": "@fluentui/react-dialog",
+ "email": "bernardo.sunderhus@gmail.com",
+ "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-menu-4dd93206-2702-4680-829c-617e8b250bc0.json b/change/@fluentui-react-menu-4dd93206-2702-4680-829c-617e8b250bc0.json
@@ -0,0 +1,7 @@
+{
+ "type": "none",
+ "comment": "chore: adds disableButtonEnhancement on triggers",
+ "packageName": "@fluentui/react-menu",
+ "email": "bernardo.sunderhus@gmail.com",
+ "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-popover-c9f8a637-4cdc-438c-b74a-b38279f3e1df.json b/change/@fluentui-react-popover-c9f8a637-4cdc-438c-b74a-b38279f3e1df.json
@@ -0,0 +1,7 @@
+{
+ "type": "none",
+ "comment": "chore: adds disableButtonEnhancement on triggers",
+ "packageName": "@fluentui/react-popover",
+ "email": "bernardo.sunderhus@gmail.com",
+ "dependentChangeType": "none"
+}
diff --git a/...ct-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx b/...ct-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx
@@ -17,7 +17,7 @@ export const renderAvatarGroupPopover_unstable = (
 
  return (
  <slots.root {...(slotProps.root as PopoverProps)}>
- <PopoverTrigger>
+ <PopoverTrigger disableButtonEnhancement>
  <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>
  <slots.triggerButton {...slotProps.triggerButton} />
  </slots.tooltip>

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonAppearance.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonAppearance.stories.tsx
@@ -14,7 +14,7 @@ export const Appearance = () => {
  return (
  <div className={styles.wrapper}>
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton>Default</MenuButton>
  </MenuTrigger>
 
@@ -27,7 +27,7 @@ export const Appearance = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton appearance="primary">Primary</MenuButton>
  </MenuTrigger>
 
@@ -40,7 +40,7 @@ export const Appearance = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton appearance="outline">Outline</MenuButton>
  </MenuTrigger>
 
@@ -53,7 +53,7 @@ export const Appearance = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton appearance="subtle">Subtle</MenuButton>
  </MenuTrigger>
 
@@ -66,7 +66,7 @@ export const Appearance = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton appearance="transparent">Transparent</MenuButton>
  </MenuTrigger>
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonDefault.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonDefault.stories.tsx
@@ -3,7 +3,7 @@ import { Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger } from '
 
 export const Default = () => (
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton>Example</MenuButton>
  </MenuTrigger>
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonDisabled.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonDisabled.stories.tsx
@@ -14,7 +14,7 @@ export const Disabled = () => {
  return (
  <div className={styles.wrapper}>
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton>Enabled state</MenuButton>
  </MenuTrigger>
 
@@ -26,7 +26,7 @@ export const Disabled = () => {
  </MenuPopover>
  </Menu>
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton disabled>Disabled state</MenuButton>
  </MenuTrigger>
 
@@ -38,7 +38,7 @@ export const Disabled = () => {
  </MenuPopover>
  </Menu>
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton disabledFocusable>Disabled focusable state</MenuButton>
  </MenuTrigger>
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonIcon.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonIcon.stories.tsx
@@ -33,7 +33,7 @@ export const Icon = () => {
  return (
  <div className={styles.wrapper}>
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton icon={<CalendarMonth />}>With calendar icon</MenuButton>
  </MenuTrigger>
  <MenuPopover>
@@ -45,7 +45,7 @@ export const Icon = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton icon={<CalendarMonth />} menuIcon={<Filter />}>
  With calendar icon and custom filter menu icon
  </MenuButton>
@@ -59,7 +59,7 @@ export const Icon = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <Tooltip content="With calendar icon and no contents" relationship="label">
  <MenuButton icon={<CalendarMonth />} />
  </Tooltip>

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonShape.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonShape.stories.tsx
@@ -14,7 +14,7 @@ export const Shape = () => {
  return (
  <div className={styles.wrapper}>
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton>Rounded</MenuButton>
  </MenuTrigger>
 
@@ -27,7 +27,7 @@ export const Shape = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton shape="circular">Circular</MenuButton>
  </MenuTrigger>
 
@@ -40,7 +40,7 @@ export const Shape = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton shape="square">Square</MenuButton>
  </MenuTrigger>
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonSize.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonSize.stories.tsx
@@ -15,7 +15,7 @@ export const Size = () => {
  return (
  <div className={styles.wrapper}>
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton size="small">Size: small</MenuButton>
  </MenuTrigger>
 
@@ -28,7 +28,7 @@ export const Size = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton size="medium">Size: medium</MenuButton>
  </MenuTrigger>
 
@@ -41,7 +41,7 @@ export const Size = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton size="large">Size: large</MenuButton>
  </MenuTrigger>
 

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonSizeLarge.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonSizeLarge.stories.tsx
@@ -26,7 +26,7 @@ export const SizeLarge = () => {
  return (
  <div className={styles.wrapper}>
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton size="large">Large</MenuButton>
  </MenuTrigger>
 
@@ -39,7 +39,7 @@ export const SizeLarge = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton icon={<CalendarMonth />} size="large">
  Large with calendar icon
  </MenuButton>
@@ -54,7 +54,7 @@ export const SizeLarge = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <Tooltip content="Large with calendar icon only" relationship="label">
  <MenuButton icon={<CalendarMonth />} size="large" />
  </Tooltip>

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonSizeMedium.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonSizeMedium.stories.tsx
@@ -26,7 +26,7 @@ export const SizeMedium = () => {
  return (
  <div className={styles.wrapper}>
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton size="medium">Medium</MenuButton>
  </MenuTrigger>
 
@@ -39,7 +39,7 @@ export const SizeMedium = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton icon={<CalendarMonth />} size="medium">
  Medium with calendar icon
  </MenuButton>
@@ -54,7 +54,7 @@ export const SizeMedium = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <Tooltip content="Medium with calendar icon only" relationship="label">
  <MenuButton icon={<CalendarMonth />} size="medium" />
  </Tooltip>

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonSizeSmall.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonSizeSmall.stories.tsx
@@ -26,7 +26,7 @@ export const SizeSmall = () => {
  return (
  <div className={styles.wrapper}>
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton size="small">Small</MenuButton>
  </MenuTrigger>
 
@@ -39,7 +39,7 @@ export const SizeSmall = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton icon={<CalendarMonth />} size="small">
  Small with calendar icon
  </MenuButton>
@@ -54,7 +54,7 @@ export const SizeSmall = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <Tooltip content="Small with calendar icon only" relationship="label">
  <MenuButton icon={<CalendarMonth />} size="small" />
  </Tooltip>

diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonWithLongText.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonWithLongText.stories.tsx
@@ -18,7 +18,7 @@ export const WithLongText = () => {
  return (
  <div className={styles.wrapper}>
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton>Short text</MenuButton>
  </MenuTrigger>
 
@@ -31,7 +31,7 @@ export const WithLongText = () => {
  </Menu>
 
  <Menu>
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  <MenuButton className={styles.longText}>
  Long text wraps after it hits the max width of the component
  </MenuButton>

diff --git a/packages/react-components/react-button/stories/SplitButton/SplitButtonAppearance.stories.tsx b/packages/react-components/react-button/stories/SplitButton/SplitButtonAppearance.stories.tsx
@@ -23,7 +23,7 @@ export const Appearance = () => {
  return (
  <div className={styles.wrapper}>
  <Menu positioning="below-end">
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  {(triggerProps: MenuButtonProps) => <SplitButton menuButton={triggerProps}>Default</SplitButton>}
  </MenuTrigger>
 
@@ -36,7 +36,7 @@ export const Appearance = () => {
  </Menu>
 
  <Menu positioning="below-end">
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  {(triggerProps: MenuButtonProps) => (
  <SplitButton menuButton={triggerProps} appearance="primary">
  Primary
@@ -53,7 +53,7 @@ export const Appearance = () => {
  </Menu>
 
  <Menu positioning="below-end">
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  {(triggerProps: MenuButtonProps) => (
  <SplitButton menuButton={triggerProps} appearance="outline">
  Outline
@@ -70,7 +70,7 @@ export const Appearance = () => {
  </Menu>
 
  <Menu positioning="below-end">
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  {(triggerProps: MenuButtonProps) => (
  <SplitButton menuButton={triggerProps} appearance="subtle">
  Subtle
@@ -87,7 +87,7 @@ export const Appearance = () => {
  </Menu>
 
  <Menu positioning="below-end">
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  {(triggerProps: MenuButtonProps) => (
  <SplitButton menuButton={triggerProps} appearance="transparent">
  Transparent

diff --git a/packages/react-components/react-button/stories/SplitButton/SplitButtonDefault.stories.tsx b/packages/react-components/react-button/stories/SplitButton/SplitButtonDefault.stories.tsx
@@ -4,7 +4,7 @@ import type { MenuButtonProps } from '@fluentui/react-components';
 
 export const Default = () => (
  <Menu positioning="below-end">
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  {(triggerProps: MenuButtonProps) => <SplitButton menuButton={triggerProps}>Example</SplitButton>}
  </MenuTrigger>
 

diff --git a/packages/react-components/react-button/stories/SplitButton/SplitButtonDisabled.stories.tsx b/packages/react-components/react-button/stories/SplitButton/SplitButtonDisabled.stories.tsx
@@ -23,7 +23,7 @@ export const Disabled = () => {
  return (
  <div className={styles.wrapper}>
  <Menu positioning="below-end">
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  {(triggerProps: MenuButtonProps) => <SplitButton menuButton={triggerProps}>Enabled state</SplitButton>}
  </MenuTrigger>
 
@@ -35,7 +35,7 @@ export const Disabled = () => {
  </MenuPopover>
  </Menu>
  <Menu positioning="below-end">
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  {(triggerProps: MenuButtonProps) => (
  <SplitButton menuButton={triggerProps} disabled>
  Disabled state
@@ -51,7 +51,7 @@ export const Disabled = () => {
  </MenuPopover>
  </Menu>
  <Menu positioning="below-end">
- <MenuTrigger>
+ <MenuTrigger disableButtonEnhancement>
  {(triggerProps: MenuButtonProps) => (
  <SplitButton menuButton={triggerProps} disabledFocusable>
  Disabled focusable state