From 1a4836d61e8c61773d352b251ab3b5576d9b5e6d Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Mon, 14 Aug 2023 15:27:34 -0700
Subject: [PATCH] docs: Remove InfoButton stories in favor of having only
 InfoLabel stories.

---
 .../InfoButton/InfoButtonBestPractices.md     | 16 -----
 .../InfoButton/InfoButtonDefault.stories.tsx  | 41 ------------
 .../InfoButton/InfoButtonDescription.md       | 14 ----
 .../InfoButton/InfoButtonSize.stories.tsx     | 66 -------------------
 .../stories/InfoButton/index.stories.tsx      | 19 ------
 5 files changed, 156 deletions(-)
 delete mode 100644 packages/react-components/react-infobutton/stories/InfoButton/InfoButtonBestPractices.md
 delete mode 100644 packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDefault.stories.tsx
 delete mode 100644 packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDescription.md
 delete mode 100644 packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx
 delete mode 100644 packages/react-components/react-infobutton/stories/InfoButton/index.stories.tsx

diff --git a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonBestPractices.md b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonBestPractices.md
deleted file mode 100644
index 33b8e50ed5a788..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonBestPractices.md
+++ /dev/null
@@ -1,16 +0,0 @@
-<details>
-<summary>
-Best Practices
-</summary>
-
-### Do
-
-- Prefer using an `InfoLabel` if the `InfoButton` is intended to be associated with a label.
-- Set `aria-label` to an appropriate value if the `InfoButton` is not associated with a label.
-- Add `aria-owns` to the trigger's parent element using the id of the `info` slot. This is done automatically by `InfoLabel`.
-
-### Don't
-
-- Because the Popover isn't always visible, don't include information that people must know in order to complete the field.
-
-</details>
diff --git a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDefault.stories.tsx b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDefault.stories.tsx
deleted file mode 100644
index 5f19c38a001f13..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDefault.stories.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { InfoButton } from '@fluentui/react-infobutton';
-import { Label, makeStyles, useId } from '@fluentui/react-components';
-import type { InfoButtonProps } from '@fluentui/react-infobutton';
-import type { PopoverProps } from '@fluentui/react-components';
-
-const useStyles = makeStyles({
-  infoButton: {
-    verticalAlign: 'top',
-  },
-});
-
-export const Default = (props: Partial<InfoButtonProps>) => {
-  const styles = useStyles();
-  const labelId = useId('label');
-  const infobuttonId = useId('infobutton');
-  const infobuttonInfoId = infobuttonId + '__info';
-  const [open, setOpen] = React.useState(false);
-
-  const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => {
-    setOpen(data.open);
-  };
-
-  return (
-    <div aria-owns={open ? infobuttonInfoId : undefined}>
-      <Label id={labelId}>This is a default Infobutton</Label>
-      <InfoButton
-        {...props}
-        id={infobuttonId}
-        className={styles.infoButton}
-        info={{
-          id: infobuttonInfoId,
-          children: 'This is example information for an InfoButton.',
-        }}
-        popover={{
-          onOpenChange,
-        }}
-      />
-    </div>
-  );
-};
diff --git a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDescription.md b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDescription.md
deleted file mode 100644
index ddaa4db3ef9fac..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDescription.md
+++ /dev/null
@@ -1,14 +0,0 @@
-InfoButtons provide a way to display additional information about a form field or an area in the UI.
-
-<!-- Don't allow prettier to collapse code block into single line -->
-<!-- prettier-ignore -->
-> **⚠️ Preview components are considered unstable:**
->
-> ```jsx
->
-> import { InfoButton } from '@fluentui/react-components/unstable';
->
-> ```
->
-> - Features and APIs may change before final release
-> - Please contact us if you intend to use this in your product
diff --git a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx
deleted file mode 100644
index 0805e5dac432d8..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react';
-import { InfoButton } from '@fluentui/react-infobutton';
-import { Label, makeStyles, shorthands, useId } from '@fluentui/react-components';
-import type { InfoButtonProps } from '@fluentui/react-infobutton';
-import type { PopoverProps } from '@fluentui/react-components';
-
-const useStyles = makeStyles({
-  base: {
-    alignItems: 'start',
-    display: 'flex',
-    flexDirection: 'column',
-    ...shorthands.gap('80px'),
-    ...shorthands.padding('20px'),
-  },
-  infoButton: {
-    verticalAlign: 'top',
-  },
-});
-
-const InfoButtonSize: React.FC<{ size: InfoButtonProps['size'] }> = ({ size }) => {
-  const styles = useStyles();
-  const infobuttonInfoId = useId('infobuton__info');
-  const [open, setOpen] = React.useState(false);
-  const info = 'This is example information for an InfoButton.';
-
-  const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => {
-    setOpen(data.open);
-  };
-
-  return (
-    <div aria-owns={open ? infobuttonInfoId : undefined}>
-      <Label size={size}>This is a {size} Infobutton</Label>
-      <InfoButton
-        size={size}
-        className={styles.infoButton}
-        info={{
-          id: infobuttonInfoId,
-          children: info,
-        }}
-        popover={{
-          onOpenChange,
-        }}
-      />
-    </div>
-  );
-};
-
-export const Size = () => {
-  const styles = useStyles();
-
-  return (
-    <div className={styles.base}>
-      <InfoButtonSize size="small" />
-      <InfoButtonSize size="medium" />
-      <InfoButtonSize size="large" />
-    </div>
-  );
-};
-
-Size.parameters = {
-  docs: {
-    description: {
-      story: 'An InfoButton supports a range of sizes from small to large. The default is medium.',
-    },
-  },
-};
diff --git a/packages/react-components/react-infobutton/stories/InfoButton/index.stories.tsx b/packages/react-components/react-infobutton/stories/InfoButton/index.stories.tsx
deleted file mode 100644
index 65c5f3afaae1d5..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoButton/index.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { InfoButton } from '@fluentui/react-infobutton';
-
-import descriptionMd from './InfoButtonDescription.md';
-import bestPracticesMd from './InfoButtonBestPractices.md';
-
-export { Default } from './InfoButtonDefault.stories';
-export { Size } from './InfoButtonSize.stories';
-
-export default {
-  title: 'Preview Components/InfoButton',
-  component: InfoButton,
-  parameters: {
-    docs: {
-      description: {
-        component: [descriptionMd, bestPracticesMd].join('\n'),
-      },
-    },
-  },
-};