chore(react-infobutton): Rename InfoTip to InfoIcon

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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)
 

packages/react-components/react-infobutton/src/InfoIcon.ts

@@ -0,0 +1 @@
+export * from './components/InfoIcon/index';

packages/react-components/react-infobutton/src/components/InfoTip/InfoTip.test.tsx → 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();
   });
 });

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';

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'>>

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>
+`;

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';

packages/react-components/react-infobutton/src/components/InfoTip/renderInfoTip.tsx → 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} />;

packages/react-components/react-infobutton/src/components/InfoTip/useInfoTip.ts → 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: {

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;
+};

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';

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} />;

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'),
+      },
+    },
+  },
+};