From c051bacedc9047fd87a4032fee8ebc438caae2d2 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Thu, 8 Jun 2023 11:55:30 -0700
Subject: [PATCH 1/2] rename InfoTip to InfoButton

---
 .../etc/react-infobutton.api.md               | 44 +++++++++----------
 .../react-infobutton/src/InfoIcon.ts          |  1 +
 .../react-infobutton/src/InfoTip.ts           |  1 -
 .../InfoIcon.test.tsx}                        | 10 ++---
 .../src/components/InfoIcon/InfoIcon.tsx      | 18 ++++++++
 .../src/components/InfoIcon/InfoIcon.types.ts | 17 +++++++
 .../__snapshots__/InfoIcon.test.tsx.snap      | 11 +++++
 .../src/components/InfoIcon/index.ts          |  5 +++
 .../renderInfoIcon.tsx}                       |  8 ++--
 .../useInfoTip.ts => InfoIcon/useInfoIcon.ts} | 14 +++---
 .../InfoIcon/useInfoIconStyles.styles.ts      | 33 ++++++++++++++
 .../src/components/InfoTip/InfoTip.tsx        | 18 --------
 .../src/components/InfoTip/InfoTip.types.ts   | 17 -------
 .../__snapshots__/InfoTip.test.tsx.snap       | 11 -----
 .../src/components/InfoTip/index.ts           |  5 ---
 .../InfoTip/useInfoTipStyles.styles.ts        | 33 --------------
 .../react-infobutton/src/index.ts             | 14 +++---
 .../InfoButtonBestPractices.md                |  0
 .../InfoButtonDefault.stories.tsx             |  0
 .../InfoButtonDescription.md                  |  0
 .../InfoButtonSize.stories.tsx                |  0
 .../index.stories.tsx                         |  0
 .../InfoIconBestPractices.md}                 |  0
 .../InfoIcon/InfoIconDefault.stories.tsx      |  4 ++
 .../InfoIconDescription.md}                   |  0
 .../stories/InfoIcon/index.stories.tsx        | 18 ++++++++
 .../InfoTip/InfoTipDefault.stories.tsx        |  4 --
 .../stories/InfoTip/index.stories.tsx         | 18 --------
 28 files changed, 152 insertions(+), 152 deletions(-)
 create mode 100644 packages/react-components/react-infobutton/src/InfoIcon.ts
 delete mode 100644 packages/react-components/react-infobutton/src/InfoTip.ts
 rename packages/react-components/react-infobutton/src/components/{InfoTip/InfoTip.test.tsx => InfoIcon/InfoIcon.test.tsx} (64%)
 create mode 100644 packages/react-components/react-infobutton/src/components/InfoIcon/InfoIcon.tsx
 create mode 100644 packages/react-components/react-infobutton/src/components/InfoIcon/InfoIcon.types.ts
 create mode 100644 packages/react-components/react-infobutton/src/components/InfoIcon/__snapshots__/InfoIcon.test.tsx.snap
 create mode 100644 packages/react-components/react-infobutton/src/components/InfoIcon/index.ts
 rename packages/react-components/react-infobutton/src/components/{InfoTip/renderInfoTip.tsx => InfoIcon/renderInfoIcon.tsx} (54%)
 rename packages/react-components/react-infobutton/src/components/{InfoTip/useInfoTip.ts => InfoIcon/useInfoIcon.ts} (55%)
 create mode 100644 packages/react-components/react-infobutton/src/components/InfoIcon/useInfoIconStyles.styles.ts
 delete mode 100644 packages/react-components/react-infobutton/src/components/InfoTip/InfoTip.tsx
 delete mode 100644 packages/react-components/react-infobutton/src/components/InfoTip/InfoTip.types.ts
 delete mode 100644 packages/react-components/react-infobutton/src/components/InfoTip/__snapshots__/InfoTip.test.tsx.snap
 delete mode 100644 packages/react-components/react-infobutton/src/components/InfoTip/index.ts
 delete mode 100644 packages/react-components/react-infobutton/src/components/InfoTip/useInfoTipStyles.styles.ts
 rename packages/react-components/react-infobutton/stories/{Infobutton => InfoButton}/InfoButtonBestPractices.md (100%)
 rename packages/react-components/react-infobutton/stories/{Infobutton => InfoButton}/InfoButtonDefault.stories.tsx (100%)
 rename packages/react-components/react-infobutton/stories/{Infobutton => InfoButton}/InfoButtonDescription.md (100%)
 rename packages/react-components/react-infobutton/stories/{Infobutton => InfoButton}/InfoButtonSize.stories.tsx (100%)
 rename packages/react-components/react-infobutton/stories/{Infobutton => InfoButton}/index.stories.tsx (100%)
 rename packages/react-components/react-infobutton/stories/{InfoTip/InfoTipBestPractices.md => InfoIcon/InfoIconBestPractices.md} (100%)
 create mode 100644 packages/react-components/react-infobutton/stories/InfoIcon/InfoIconDefault.stories.tsx
 rename packages/react-components/react-infobutton/stories/{InfoTip/InfoTipDescription.md => InfoIcon/InfoIconDescription.md} (100%)
 create mode 100644 packages/react-components/react-infobutton/stories/InfoIcon/index.stories.tsx
 delete mode 100644 packages/react-components/react-infobutton/stories/InfoTip/InfoTipDefault.stories.tsx
 delete mode 100644 packages/react-components/react-infobutton/stories/InfoTip/index.stories.tsx

diff --git a/packages/react-components/react-infobutton/etc/react-infobutton.api.md b/packages/react-components/react-infobutton/etc/react-infobutton.api.md
index 3ac6dd190275c9..95ff09018d4293 100644
--- a/packages/react-components/react-infobutton/etc/react-infobutton.api.md
+++ b/packages/react-components/react-infobutton/etc/react-infobutton.api.md
@@ -38,51 +38,51 @@ export type InfoButtonSlots = {
 export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;
 
 // @public
-export const InfoLabel: ForwardRefComponent<InfoLabelProps>;
+export const InfoIcon: ForwardRefComponent<InfoIconProps>;
 
 // @public (undocumented)
-export const infoLabelClassNames: SlotClassNames<InfoLabelSlots>;
+export const infoIconClassNames: SlotClassNames<InfoIconSlots>;
 
 // @public
-export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {
-    info?: InfoButtonProps['info'];
-};
+export type InfoIconProps = ComponentProps<InfoIconSlots> & {};
 
 // @public (undocumented)
-export type InfoLabelSlots = {
-    root: NonNullable<Slot<'span'>>;
-    label: NonNullable<Slot<typeof Label>>;
-    infoButton: Slot<typeof InfoButton>;
+export type InfoIconSlots = {
+    root: Slot<'div'>;
 };
 
 // @public
-export type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;
+export type InfoIconState = ComponentState<InfoIconSlots>;
 
 // @public
-export const InfoTip: ForwardRefComponent<InfoTipProps>;
+export const InfoLabel: ForwardRefComponent<InfoLabelProps>;
 
 // @public (undocumented)
-export const infoTipClassNames: SlotClassNames<InfoTipSlots>;
+export const infoLabelClassNames: SlotClassNames<InfoLabelSlots>;
 
 // @public
-export type InfoTipProps = ComponentProps<InfoTipSlots> & {};
+export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {
+    info?: InfoButtonProps['info'];
+};
 
 // @public (undocumented)
-export type InfoTipSlots = {
-    root: Slot<'div'>;
+export type InfoLabelSlots = {
+    root: NonNullable<Slot<'span'>>;
+    label: NonNullable<Slot<typeof Label>>;
+    infoButton: Slot<typeof InfoButton>;
 };
 
 // @public
-export type InfoTipState = ComponentState<InfoTipSlots>;
+export type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;
 
 // @public
 export const renderInfoButton_unstable: (state: InfoButtonState) => JSX.Element;
 
 // @public
-export const renderInfoLabel_unstable: (state: InfoLabelState) => JSX.Element;
+export const renderInfoIcon_unstable: (state: InfoIconState) => JSX.Element;
 
 // @public
-export const renderInfoTip_unstable: (state: InfoTipState) => JSX.Element;
+export const renderInfoLabel_unstable: (state: InfoLabelState) => JSX.Element;
 
 // @public
 export const useInfoButton_unstable: (props: InfoButtonProps, ref: React_2.Ref<HTMLElement>) => InfoButtonState;
@@ -91,16 +91,16 @@ export const useInfoButton_unstable: (props: InfoButtonProps, ref: React_2.Ref<H
 export const useInfoButtonStyles_unstable: (state: InfoButtonState) => InfoButtonState;
 
 // @public
-export const useInfoLabel_unstable: (props: InfoLabelProps, ref: React_2.Ref<HTMLLabelElement>) => InfoLabelState;
+export const useInfoIcon_unstable: (props: InfoIconProps, ref: React_2.Ref<HTMLElement>) => InfoIconState;
 
 // @public
-export const useInfoLabelStyles_unstable: (state: InfoLabelState) => InfoLabelState;
+export const useInfoIconStyles_unstable: (state: InfoIconState) => InfoIconState;
 
 // @public
-export const useInfoTip_unstable: (props: InfoTipProps, ref: React_2.Ref<HTMLElement>) => InfoTipState;
+export const useInfoLabel_unstable: (props: InfoLabelProps, ref: React_2.Ref<HTMLLabelElement>) => InfoLabelState;
 
 // @public
-export const useInfoTipStyles_unstable: (state: InfoTipState) => InfoTipState;
+export const useInfoLabelStyles_unstable: (state: InfoLabelState) => InfoLabelState;
 
 // (No @packageDocumentation comment for this package)
 
diff --git a/packages/react-components/react-infobutton/src/InfoIcon.ts b/packages/react-components/react-infobutton/src/InfoIcon.ts
new file mode 100644
index 00000000000000..c35c5c5d91f9d2
--- /dev/null
+++ b/packages/react-components/react-infobutton/src/InfoIcon.ts
@@ -0,0 +1 @@
+export * from './components/InfoIcon/index';
diff --git a/packages/react-components/react-infobutton/src/InfoTip.ts b/packages/react-components/react-infobutton/src/InfoTip.ts
deleted file mode 100644
index a0c6c5c087ed93..00000000000000
--- a/packages/react-components/react-infobutton/src/InfoTip.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/InfoTip/index';
diff --git a/packages/react-components/react-infobutton/src/components/InfoTip/InfoTip.test.tsx b/packages/react-components/react-infobutton/src/components/InfoIcon/InfoIcon.test.tsx
similarity index 64%
rename from packages/react-components/react-infobutton/src/components/InfoTip/InfoTip.test.tsx
rename to packages/react-components/react-infobutton/src/components/InfoIcon/InfoIcon.test.tsx
index 4fe15be70f7adf..a054f2d0bc7588 100644
--- a/packages/react-components/react-infobutton/src/components/InfoTip/InfoTip.test.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoIcon/InfoIcon.test.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { InfoTip } from './InfoTip';
+import { InfoIcon } from './InfoIcon';
 import { isConformant } from '../../testing/isConformant';
 
-describe('InfoTip', () => {
+describe('InfoIcon', () => {
   isConformant({
-    Component: InfoTip,
-    displayName: 'InfoTip',
+    Component: InfoIcon,
+    displayName: 'InfoIcon',
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
 
   it('renders a default state', () => {
-    const result = render(<InfoTip>Default InfoTip</InfoTip>);
+    const result = render(<InfoIcon>Default InfoIcon</InfoIcon>);
     expect(result.container).toMatchSnapshot();
   });
 });
diff --git a/packages/react-components/react-infobutton/src/components/InfoIcon/InfoIcon.tsx b/packages/react-components/react-infobutton/src/components/InfoIcon/InfoIcon.tsx
new file mode 100644
index 00000000000000..8dd174d290d6c3
--- /dev/null
+++ b/packages/react-components/react-infobutton/src/components/InfoIcon/InfoIcon.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useInfoIcon_unstable } from './useInfoIcon';
+import { renderInfoIcon_unstable } from './renderInfoIcon';
+import { useInfoIconStyles_unstable } from './useInfoIconStyles.styles';
+import type { InfoIconProps } from './InfoIcon.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * InfoIcon component - TODO: add more docs
+ */
+export const InfoIcon: ForwardRefComponent<InfoIconProps> = React.forwardRef((props, ref) => {
+  const state = useInfoIcon_unstable(props, ref);
+
+  useInfoIconStyles_unstable(state);
+  return renderInfoIcon_unstable(state);
+});
+
+InfoIcon.displayName = 'InfoIcon';
diff --git a/packages/react-components/react-infobutton/src/components/InfoIcon/InfoIcon.types.ts b/packages/react-components/react-infobutton/src/components/InfoIcon/InfoIcon.types.ts
new file mode 100644
index 00000000000000..022b28c0fb8257
--- /dev/null
+++ b/packages/react-components/react-infobutton/src/components/InfoIcon/InfoIcon.types.ts
@@ -0,0 +1,17 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type InfoIconSlots = {
+  root: Slot<'div'>;
+};
+
+/**
+ * InfoIcon Props
+ */
+export type InfoIconProps = ComponentProps<InfoIconSlots> & {};
+
+/**
+ * State used in rendering InfoIcon
+ */
+export type InfoIconState = ComponentState<InfoIconSlots>;
+// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from InfoIconProps.
+// & Required<Pick<InfoIconProps, 'propName'>>
diff --git a/packages/react-components/react-infobutton/src/components/InfoIcon/__snapshots__/InfoIcon.test.tsx.snap b/packages/react-components/react-infobutton/src/components/InfoIcon/__snapshots__/InfoIcon.test.tsx.snap
new file mode 100644
index 00000000000000..5c60d249f3d83a
--- /dev/null
+++ b/packages/react-components/react-infobutton/src/components/InfoIcon/__snapshots__/InfoIcon.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoIcon renders a default state 1`] = `
+<div>
+  <div
+    class="fui-InfoIcon"
+  >
+    Default InfoIcon
+  </div>
+</div>
+`;
diff --git a/packages/react-components/react-infobutton/src/components/InfoIcon/index.ts b/packages/react-components/react-infobutton/src/components/InfoIcon/index.ts
new file mode 100644
index 00000000000000..866702c8703c20
--- /dev/null
+++ b/packages/react-components/react-infobutton/src/components/InfoIcon/index.ts
@@ -0,0 +1,5 @@
+export * from './InfoIcon';
+export * from './InfoIcon.types';
+export * from './renderInfoIcon';
+export * from './useInfoIcon';
+export * from './useInfoIconStyles.styles';
diff --git a/packages/react-components/react-infobutton/src/components/InfoTip/renderInfoTip.tsx b/packages/react-components/react-infobutton/src/components/InfoIcon/renderInfoIcon.tsx
similarity index 54%
rename from packages/react-components/react-infobutton/src/components/InfoTip/renderInfoTip.tsx
rename to packages/react-components/react-infobutton/src/components/InfoIcon/renderInfoIcon.tsx
index 68a86967064c35..bcdc556cb73db1 100644
--- a/packages/react-components/react-infobutton/src/components/InfoTip/renderInfoTip.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoIcon/renderInfoIcon.tsx
@@ -3,13 +3,13 @@
 
 import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
-import type { InfoTipState, InfoTipSlots } from './InfoTip.types';
+import type { InfoIconState, InfoIconSlots } from './InfoIcon.types';
 
 /**
- * Render the final JSX of InfoTip
+ * Render the final JSX of InfoIcon
  */
-export const renderInfoTip_unstable = (state: InfoTipState) => {
-  const { slots, slotProps } = getSlotsNext<InfoTipSlots>(state);
+export const renderInfoIcon_unstable = (state: InfoIconState) => {
+  const { slots, slotProps } = getSlotsNext<InfoIconSlots>(state);
 
   // TODO Add additional slots in the appropriate place
   return <slots.root {...slotProps.root} />;
diff --git a/packages/react-components/react-infobutton/src/components/InfoTip/useInfoTip.ts b/packages/react-components/react-infobutton/src/components/InfoIcon/useInfoIcon.ts
similarity index 55%
rename from packages/react-components/react-infobutton/src/components/InfoTip/useInfoTip.ts
rename to packages/react-components/react-infobutton/src/components/InfoIcon/useInfoIcon.ts
index f75a158772025f..4ab64af7d16508 100644
--- a/packages/react-components/react-infobutton/src/components/InfoTip/useInfoTip.ts
+++ b/packages/react-components/react-infobutton/src/components/InfoIcon/useInfoIcon.ts
@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { getNativeElementProps } from '@fluentui/react-utilities';
-import type { InfoTipProps, InfoTipState } from './InfoTip.types';
+import type { InfoIconProps, InfoIconState } from './InfoIcon.types';
 
 /**
- * Create the state required to render InfoTip.
+ * Create the state required to render InfoIcon.
  *
- * The returned state can be modified with hooks such as useInfoTipStyles_unstable,
- * before being passed to renderInfoTip_unstable.
+ * The returned state can be modified with hooks such as useInfoIconStyles_unstable,
+ * before being passed to renderInfoIcon_unstable.
  *
- * @param props - props from this instance of InfoTip
- * @param ref - reference to root HTMLElement of InfoTip
+ * @param props - props from this instance of InfoIcon
+ * @param ref - reference to root HTMLElement of InfoIcon
  */
-export const useInfoTip_unstable = (props: InfoTipProps, ref: React.Ref<HTMLElement>): InfoTipState => {
+export const useInfoIcon_unstable = (props: InfoIconProps, ref: React.Ref<HTMLElement>): InfoIconState => {
   return {
     // TODO add appropriate props/defaults
     components: {
diff --git a/packages/react-components/react-infobutton/src/components/InfoIcon/useInfoIconStyles.styles.ts b/packages/react-components/react-infobutton/src/components/InfoIcon/useInfoIconStyles.styles.ts
new file mode 100644
index 00000000000000..08283e0f86bd0a
--- /dev/null
+++ b/packages/react-components/react-infobutton/src/components/InfoIcon/useInfoIconStyles.styles.ts
@@ -0,0 +1,33 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import type { InfoIconSlots, InfoIconState } from './InfoIcon.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+export const infoIconClassNames: SlotClassNames<InfoIconSlots> = {
+  root: 'fui-InfoIcon',
+  // TODO: add class names for all slots on InfoIconSlots.
+  // Should be of the form `<slotName>: 'fui-InfoIcon__<slotName>`
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    // TODO Add default styles for the root element
+  },
+
+  // TODO add additional classes for different states and/or slots
+});
+
+/**
+ * Apply styling to the InfoIcon slots based on the state
+ */
+export const useInfoIconStyles_unstable = (state: InfoIconState): InfoIconState => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(infoIconClassNames.root, styles.root, state.root.className);
+
+  // TODO Add class names to slots, for example:
+  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+
+  return state;
+};
diff --git a/packages/react-components/react-infobutton/src/components/InfoTip/InfoTip.tsx b/packages/react-components/react-infobutton/src/components/InfoTip/InfoTip.tsx
deleted file mode 100644
index 9340f4ee8e8aad..00000000000000
--- a/packages/react-components/react-infobutton/src/components/InfoTip/InfoTip.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { useInfoTip_unstable } from './useInfoTip';
-import { renderInfoTip_unstable } from './renderInfoTip';
-import { useInfoTipStyles_unstable } from './useInfoTipStyles.styles';
-import type { InfoTipProps } from './InfoTip.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-
-/**
- * InfoTip component - TODO: add more docs
- */
-export const InfoTip: ForwardRefComponent<InfoTipProps> = React.forwardRef((props, ref) => {
-  const state = useInfoTip_unstable(props, ref);
-
-  useInfoTipStyles_unstable(state);
-  return renderInfoTip_unstable(state);
-});
-
-InfoTip.displayName = 'InfoTip';
diff --git a/packages/react-components/react-infobutton/src/components/InfoTip/InfoTip.types.ts b/packages/react-components/react-infobutton/src/components/InfoTip/InfoTip.types.ts
deleted file mode 100644
index f7a24c66420a6b..00000000000000
--- a/packages/react-components/react-infobutton/src/components/InfoTip/InfoTip.types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-
-export type InfoTipSlots = {
-  root: Slot<'div'>;
-};
-
-/**
- * InfoTip Props
- */
-export type InfoTipProps = ComponentProps<InfoTipSlots> & {};
-
-/**
- * State used in rendering InfoTip
- */
-export type InfoTipState = ComponentState<InfoTipSlots>;
-// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from InfoTipProps.
-// & Required<Pick<InfoTipProps, 'propName'>>
diff --git a/packages/react-components/react-infobutton/src/components/InfoTip/__snapshots__/InfoTip.test.tsx.snap b/packages/react-components/react-infobutton/src/components/InfoTip/__snapshots__/InfoTip.test.tsx.snap
deleted file mode 100644
index 78459d67a5dab2..00000000000000
--- a/packages/react-components/react-infobutton/src/components/InfoTip/__snapshots__/InfoTip.test.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InfoTip renders a default state 1`] = `
-<div>
-  <div
-    class="fui-InfoTip"
-  >
-    Default InfoTip
-  </div>
-</div>
-`;
diff --git a/packages/react-components/react-infobutton/src/components/InfoTip/index.ts b/packages/react-components/react-infobutton/src/components/InfoTip/index.ts
deleted file mode 100644
index d2049a239faf4a..00000000000000
--- a/packages/react-components/react-infobutton/src/components/InfoTip/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './InfoTip';
-export * from './InfoTip.types';
-export * from './renderInfoTip';
-export * from './useInfoTip';
-export * from './useInfoTipStyles.styles';
diff --git a/packages/react-components/react-infobutton/src/components/InfoTip/useInfoTipStyles.styles.ts b/packages/react-components/react-infobutton/src/components/InfoTip/useInfoTipStyles.styles.ts
deleted file mode 100644
index a8583f8b5596cc..00000000000000
--- a/packages/react-components/react-infobutton/src/components/InfoTip/useInfoTipStyles.styles.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import type { InfoTipSlots, InfoTipState } from './InfoTip.types';
-import type { SlotClassNames } from '@fluentui/react-utilities';
-
-export const infoTipClassNames: SlotClassNames<InfoTipSlots> = {
-  root: 'fui-InfoTip',
-  // TODO: add class names for all slots on InfoTipSlots.
-  // Should be of the form `<slotName>: 'fui-InfoTip__<slotName>`
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: {
-    // TODO Add default styles for the root element
-  },
-
-  // TODO add additional classes for different states and/or slots
-});
-
-/**
- * Apply styling to the InfoTip slots based on the state
- */
-export const useInfoTipStyles_unstable = (state: InfoTipState): InfoTipState => {
-  const styles = useStyles();
-  state.root.className = mergeClasses(infoTipClassNames.root, styles.root, state.root.className);
-
-  // TODO Add class names to slots, for example:
-  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
-
-  return state;
-};
diff --git a/packages/react-components/react-infobutton/src/index.ts b/packages/react-components/react-infobutton/src/index.ts
index 9315e64b48b42e..f3ace26a667d70 100644
--- a/packages/react-components/react-infobutton/src/index.ts
+++ b/packages/react-components/react-infobutton/src/index.ts
@@ -15,10 +15,10 @@ export {
 } from './InfoLabel';
 export type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel';
 export {
-  InfoTip,
-  infoTipClassNames,
-  renderInfoTip_unstable,
-  useInfoTipStyles_unstable,
-  useInfoTip_unstable,
-} from './InfoTip';
-export type { InfoTipProps, InfoTipSlots, InfoTipState } from './InfoTip';
+  InfoIcon,
+  infoIconClassNames,
+  renderInfoIcon_unstable,
+  useInfoIconStyles_unstable,
+  useInfoIcon_unstable,
+} from './InfoIcon';
+export type { InfoIconProps, InfoIconSlots, InfoIconState } from './InfoIcon';
diff --git a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonBestPractices.md b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonBestPractices.md
similarity index 100%
rename from packages/react-components/react-infobutton/stories/Infobutton/InfoButtonBestPractices.md
rename to packages/react-components/react-infobutton/stories/InfoButton/InfoButtonBestPractices.md
diff --git a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDefault.stories.tsx
similarity index 100%
rename from packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx
rename to packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDefault.stories.tsx
diff --git a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDescription.md b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDescription.md
similarity index 100%
rename from packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDescription.md
rename to packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDescription.md
diff --git a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonSize.stories.tsx b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx
similarity index 100%
rename from packages/react-components/react-infobutton/stories/Infobutton/InfoButtonSize.stories.tsx
rename to packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx
diff --git a/packages/react-components/react-infobutton/stories/Infobutton/index.stories.tsx b/packages/react-components/react-infobutton/stories/InfoButton/index.stories.tsx
similarity index 100%
rename from packages/react-components/react-infobutton/stories/Infobutton/index.stories.tsx
rename to packages/react-components/react-infobutton/stories/InfoButton/index.stories.tsx
diff --git a/packages/react-components/react-infobutton/stories/InfoTip/InfoTipBestPractices.md b/packages/react-components/react-infobutton/stories/InfoIcon/InfoIconBestPractices.md
similarity index 100%
rename from packages/react-components/react-infobutton/stories/InfoTip/InfoTipBestPractices.md
rename to packages/react-components/react-infobutton/stories/InfoIcon/InfoIconBestPractices.md
diff --git a/packages/react-components/react-infobutton/stories/InfoIcon/InfoIconDefault.stories.tsx b/packages/react-components/react-infobutton/stories/InfoIcon/InfoIconDefault.stories.tsx
new file mode 100644
index 00000000000000..ac99b190c70e5a
--- /dev/null
+++ b/packages/react-components/react-infobutton/stories/InfoIcon/InfoIconDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { InfoIcon, InfoIconProps } from '@fluentui/react-infobutton';
+
+export const Default = (props: Partial<InfoIconProps>) => <InfoIcon {...props} />;
diff --git a/packages/react-components/react-infobutton/stories/InfoTip/InfoTipDescription.md b/packages/react-components/react-infobutton/stories/InfoIcon/InfoIconDescription.md
similarity index 100%
rename from packages/react-components/react-infobutton/stories/InfoTip/InfoTipDescription.md
rename to packages/react-components/react-infobutton/stories/InfoIcon/InfoIconDescription.md
diff --git a/packages/react-components/react-infobutton/stories/InfoIcon/index.stories.tsx b/packages/react-components/react-infobutton/stories/InfoIcon/index.stories.tsx
new file mode 100644
index 00000000000000..d3433a2f72ac55
--- /dev/null
+++ b/packages/react-components/react-infobutton/stories/InfoIcon/index.stories.tsx
@@ -0,0 +1,18 @@
+import { InfoIcon } from '@fluentui/react-infobutton';
+
+import descriptionMd from './InfoIconDescription.md';
+import bestPracticesMd from './InfoIconBestPractices.md';
+
+export { Default } from './InfoIconDefault.stories';
+
+export default {
+  title: 'Preview Components/InfoIcon',
+  component: InfoIcon,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components/react-infobutton/stories/InfoTip/InfoTipDefault.stories.tsx b/packages/react-components/react-infobutton/stories/InfoTip/InfoTipDefault.stories.tsx
deleted file mode 100644
index 6baa633d381b52..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoTip/InfoTipDefault.stories.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { InfoTip, InfoTipProps } from '@fluentui/react-infobutton';
-
-export const Default = (props: Partial<InfoTipProps>) => <InfoTip {...props} />;
diff --git a/packages/react-components/react-infobutton/stories/InfoTip/index.stories.tsx b/packages/react-components/react-infobutton/stories/InfoTip/index.stories.tsx
deleted file mode 100644
index 076ebbdd14603b..00000000000000
--- a/packages/react-components/react-infobutton/stories/InfoTip/index.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { InfoTip } from '@fluentui/react-infobutton';
-
-import descriptionMd from './InfoTipDescription.md';
-import bestPracticesMd from './InfoTipBestPractices.md';
-
-export { Default } from './InfoTipDefault.stories';
-
-export default {
-  title: 'Preview Components/InfoTip',
-  component: InfoTip,
-  parameters: {
-    docs: {
-      description: {
-        component: [descriptionMd, bestPracticesMd].join('\n'),
-      },
-    },
-  },
-};

From 2f8cd58a0b853ddaec388481a343a64001d3fa5f Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Thu, 8 Jun 2023 12:00:50 -0700
Subject: [PATCH 2/2] change file

---
 ...ct-infobutton-e927d0f0-b768-40eb-b81e-400ad3c5d3a2.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-infobutton-e927d0f0-b768-40eb-b81e-400ad3c5d3a2.json

diff --git a/change/@fluentui-react-infobutton-e927d0f0-b768-40eb-b81e-400ad3c5d3a2.json b/change/@fluentui-react-infobutton-e927d0f0-b768-40eb-b81e-400ad3c5d3a2.json
new file mode 100644
index 00000000000000..aea65f213eb6f1
--- /dev/null
+++ b/change/@fluentui-react-infobutton-e927d0f0-b768-40eb-b81e-400ad3c5d3a2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: Rename InfoTip to InfoIcon to better align with InfoButton.",
+  "packageName": "@fluentui/react-infobutton",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}