From 3d845bd35dd65fa92750389c211b788daa3b0af8 Mon Sep 17 00:00:00 2001
From: Samuel Freiberg <32719011+samuelfreiberg@users.noreply.github.com>
Date: Mon, 15 Nov 2021 10:24:57 -0700
Subject: [PATCH] Adding Some Missing Component Documentation (#1077)
* Yarn
* Merge
* Fixing repo
* Update package
* Merge
* Removing change file
* Add Tabs + FocusZone documentation
* Add Shimmer Documentation
* Fixing documentation
* Adding Callout documentation
* MenuButton doc isn't created yet
* Updating accessibilityPositionInSet and accessibilitySetSize props for RadioButton
* Updating format of RadioGroup tokens to a table
---
docs/pages/Components/Callout.md | 137 +++++++++++++++++++++++++++
docs/pages/Components/Callout.mdx | 1 -
docs/pages/Components/FocusZone.md | 43 +++++++++
docs/pages/Components/MenuButton.mdx | 1 -
docs/pages/Components/RadioGroup.md | 67 +++++++++++++
docs/pages/Components/RadioGroup.mdx | 39 --------
docs/pages/Components/Shimmer.md | 91 ++++++++++++++++++
docs/pages/Components/Tabs.md | 128 +++++++++++++++++++++++++
docs/pages/Components/Tabs.mdx | 66 -------------
9 files changed, 466 insertions(+), 107 deletions(-)
create mode 100644 docs/pages/Components/Callout.md
delete mode 100644 docs/pages/Components/Callout.mdx
create mode 100644 docs/pages/Components/FocusZone.md
delete mode 100644 docs/pages/Components/MenuButton.mdx
create mode 100644 docs/pages/Components/RadioGroup.md
delete mode 100644 docs/pages/Components/RadioGroup.mdx
create mode 100644 docs/pages/Components/Shimmer.md
create mode 100644 docs/pages/Components/Tabs.md
delete mode 100644 docs/pages/Components/Tabs.mdx
diff --git a/docs/pages/Components/Callout.md b/docs/pages/Components/Callout.md
new file mode 100644
index 000000000..d0e23949a
--- /dev/null
+++ b/docs/pages/Components/Callout.md
@@ -0,0 +1,137 @@
+# Callout
+
+## Purpose
+
+A callout is an anchored tip that can be used to teach people or guide them through the app without blocking them.
+
+## Do's:
+
+- Place a callout near the object being described. At the pointer’s tail or head, if possible.
+
+## Don't:
+
+- Don't use large, unformatted blocks of text in your callout. They're difficult to read and overwhelming.
+- Don’t block important UI with the placement of your callout. It's a poor user experience that will lead to frustration
+- Don’t open a callout from within another callout.
+- Don’t show callouts on hidden elements.
+- Don’t overuse callouts. Too many callouts opening automatically can be perceived as interrupting someone's workflow.
+
+## Sample Code:
+
+### Rectangle Shimmer
+
+```jsx
+const customCallout: React.FunctionComponent = () => {
+ const [showCustomizedCallout, setShowCustomizedCallout] = React.useState(false);
+ const [isCustomizedCalloutVisible, setIsCustomizedCalloutVisible] = React.useState(false);
+
+ const toggleShowCustomizedCallout = React.useCallback(() => {
+ setShowCustomizedCallout(!showCustomizedCallout);
+
+ // Unmounting a callout does not invoke onDismiss; onDismiss is only invoked
+ // for dismissals generated by the native app. When toggling to 'show',
+ // the isVisible state will be corrected to 'true' by the onShow callback.
+ setIsCustomizedCalloutVisible(false);
+ }, [showCustomizedCallout, setIsCustomizedCalloutVisible, setShowCustomizedCallout]);
+
+ const onShowCustomizedCallout = React.useCallback(() => {
+ setIsCustomizedCalloutVisible(true);
+ }, [setIsCustomizedCalloutVisible]);
+
+ const onDismissCustomizedCallout = React.useCallback(() => {
+ setIsCustomizedCalloutVisible(false);
+
+ // setting the internal state to false will instigate unmounting the
+ // zombie Callout control.
+ setShowCustomizedCallout(false);
+ }, [setIsCustomizedCalloutVisible, setShowCustomizedCallout]);
+
+ const myRect: ScreenRect = { screenX: 10, screenY: 10, width: 100, height: 100 };
+
+ return (
+
+
+
+
+ Visibility:
+ {isCustomizedCalloutVisible ? Visible : Not Visible}
+
+
+
+ {showCustomizedCallout && (
+
+
+ just some text so it does not take focus and is not empty.
+
+
+ )}
+
+ );
+};
+```
+
+## Props:
+
+### Callout Component:
+
+`extends ICalloutTokens`
+
+| Prop | Type | Default Value | Description |
+| ------------------------------- | ---------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| accessibilityLabel | string | | Used by screen readers to inform the user about the control. |
+| accessibilityOnShowAnnouncement | string | | A string that should be announced when the callout is shown. |
+| accessibilityRole | string | | Used by screen readers to inform the user about the purpose of the control. |
+| componentRef | `React.RefObject` | | A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component. |
+| onShow | () => void | | Callback invoked when the callout has been shown. |
+| setInitialFocus | boolean | | If true then the callout will attempt to focus the first focusable element that it contains. If it doesn't find an element, no focus will be set. This means that it's the contents responsibility to either set focus or have focusable items. |
+| target | React.RefObject | string | Target node the callout uses for relative positioning; the anchor of the callout. A ref is the typical usage; certain components may proffer a string as an anchor target, such as anchoring to a point inside the component. |
+| isBeakVisible | boolean | | Adds a beak to the Callout, pointing to the anchor target. Notable Win32 limitation: Beak rendering currently limits the border width to its default, and the border width prop will not be honored. |
+| onDismiss | () => void | | Callback invoked when the callout has been dismissed. |
+| onRestoreFocus | (restoreFocusEvent: RestoreFocusEvent) => void | | Callback invoked during callout dismissal; if set, focus will not be restored by the callout and onRestoreFocus must result in focus being moved to the appropriate focusable target. The callee should carefully consider their scenarios to avoid dropping focus, or inappropriately moving focus from another component. Focus is not guaranteed to have entered the React-Native surface at all, and this callback is most appropriate for components strictly controlling focus. |
+| onShow | () => void | | Callback invoked when the callout has been shown. |
+| setInitialFocus | boolean | | If true then the callout will attempt to focus the first focusable element that it contains. If it doesn't find an element, no focus will be set. This means that it's the contents responsibility to either set focus or have focusable items. |
+| target | React.RefObject | string | Target node the callout uses for relative positioning; the anchor of the callout. A ref is the typical usage; certain components may proffer a string as an anchor target, such as anchoring to a point inside the component. |
+
+## Callout Tokens
+
+`extends IBackgroundColorTokens, CalloutBorderTokens`
+
+| Token | Type | Default Value | Description |
+| ---------------- | ------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| anchorRect | ScreenRect | | AnchorRect arbitrary anchor rectangle; coordinate system is in DIPs, relative to the React surface origin. |
+| beakWidth | number | | Width of the beak on the Callout indicating its anchor. |
+| directionalHint | DirectionalHint | | Defines the suggested drop direction and alignment for the Callout to use, relative to the anchor information. |
+| dismissBehaviors | DismissBehaviors[] | | Defines variations on how the callout dismissal may be controlled. the async eventing of React-Native makes passing some aspects of dismissal control over to JS difficult. Moreover, the native platform or host may have competing priorities with regards to transient UI that generate bi-directional lifetime management between JS (which mounts and unmounts the component) and native (which may tear down the transient UI without JS input). This property provides control over the latter issue, enabling relevant native platform interactions with transient UI to be managed from JS. These behaviors should generally be orthogonal, and therefore combinable. |
+| gapSpace | number | | Defines the size of the gap between the anchor and the Callout. Not used if no anchor information is provided. |
+| maxHeight | string or number | | Defines a maximum height for the Callout. |
+| maxWidth | string or number | | Defines a maximum width for the Callout. |
+| minPadding | number | | Defines the minimum padding between the Callout and the display edges. |
+
+`Type ScreenRect = { screenX: number, screenY: number, width: number, height: number }`
+
+```jsx
+type DirectionalHint =
+ | 'leftTopEdge'
+ | 'leftCenter'
+ | 'leftBottomEdge'
+ | 'topLeftEdge'
+ | 'topAutoEdge'
+ | 'topCenter'
+ | 'topRightEdge'
+ | 'rightTopEdge'
+ | 'rightCenter'
+ | 'rightBottomEdge'
+ | 'bottonLeftEdge'
+ | 'bottomAutoEdge'
+ | 'bottomCenter'
+ | 'bottomRightEdge';
+```
+
+`export type DismissBehaviors = 'preventDismissOnKeyDown' | 'preventDismissOnClickOutside';`
diff --git a/docs/pages/Components/Callout.mdx b/docs/pages/Components/Callout.mdx
deleted file mode 100644
index 4ecdc4756..000000000
--- a/docs/pages/Components/Callout.mdx
+++ /dev/null
@@ -1 +0,0 @@
-# Callout Documentation
\ No newline at end of file
diff --git a/docs/pages/Components/FocusZone.md b/docs/pages/Components/FocusZone.md
new file mode 100644
index 000000000..0b88ca68d
--- /dev/null
+++ b/docs/pages/Components/FocusZone.md
@@ -0,0 +1,43 @@
+# Component Name: FocusZone
+
+## Purpose:
+
+FocusZone abstracts arrow key navigation behaviors. It takes keyboarding patterns that are seen in
+common controls, such as RadioGroup and Lists, and creates a wrapper control that can be shared in a reusable fashion.
+These patterns may include navigating a RadioGroup in a circular fashion, or disallowing tabbing through elements of a list.
+
+## Don't:
+
+- There is no integration for nested FocusZone's - trying to do this will cause unwanted behavior.
+
+## Sample Code:
+
+```
+
+
+
+
+
+
+```
+
+## Props:
+
+| Prop | Type | Default Value | Description |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| focusZoneDirection | [FocusZoneDirection](https://github.com/microsoft/fluentui-react-native/new/master/docs/pages/Components#focuszonedirection-type) | FocusZoneDirection.bidirectional | Defines which arrows to respond to. |
+| disabled | boolean | false | If set, the FocusZone will not be tabbable and keyboard navigation will be disabled. |
+| isCircularNavigation | boolean | false | If set, when navigating next from the last element, focus will circle back to the first. And vice versa. |
+| defaultTabbableElement | React.RefObject | none | Optionally defined the initial tabbable element inside the FocusZone. If set, when navigating to the FocusZone, focus wil land on this element. |
+| use2DNavigation | boolean | false | Allows for 2D navigation. This navigation strategy takes into account the position of elements on screen, and navigates in the direction the user selects to the nearest element. |
+| onFocus() | (e?: any) => void; | None | Callback called when “focus” event triggered in FocusZone |
+| componentRef | React.RefObject; | None | A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component. |
+
+### FocusZoneDirection Type
+
+| Name | Description |
+| ------------- | ---------------------------------- |
+| bidirectional | Responds to all arrows. |
+| vertical | Only respons to up/down arrows. |
+| horizontal | Only respons to right/left arrows. |
+| none | Doesn't respond to any arrows. |
diff --git a/docs/pages/Components/MenuButton.mdx b/docs/pages/Components/MenuButton.mdx
deleted file mode 100644
index 428001705..000000000
--- a/docs/pages/Components/MenuButton.mdx
+++ /dev/null
@@ -1 +0,0 @@
-# MenuButton Documentation
\ No newline at end of file
diff --git a/docs/pages/Components/RadioGroup.md b/docs/pages/Components/RadioGroup.md
new file mode 100644
index 000000000..df9a23c17
--- /dev/null
+++ b/docs/pages/Components/RadioGroup.md
@@ -0,0 +1,67 @@
+# Component Name: RadioGroup
+
+## Purpose
+
+The goal of this RadioGroup component is to let users select one option from two or more choices. Each option is represented by one RadioButton component, and the group of RadioButton’s is represented by a RadioGroup component. A user can only select one RadioButton in a RadioGroup.
+
+## Do's:
+
+- Use when there are 2-7 options, if you have enough screen space and the options are important enough to be a good use of that screen space. Otherwise, use a Checkbox or Dropdown list.
+- Use on wizard pages to make the alternatives clear, even if a Checkbox is otherwise acceptable.
+- List the options in a logical order, such as most likely to be selected least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable.
+- If none of the options is a valid choice, add another option to reflect this choice, such as “None” or “Does not apply”.
+- Select the safest (to prevent loss of data or system access) and most secure and private option as the default. If safety and security aren’t factors, select the most likely or convenient option.
+- Align radio buttons vertically instead of horizontally, if possible. Horizontal alignment is harder to read and localize.
+
+## Don't:
+
+- Use when the options are numbers that have fixed steps, like 10, 20, 30. Use a slider component instead.
+- Use if there are more than 7 options, use a Dropdown instead.
+- Nest with other RadioGroup or Checkboxes. If possible, keep all the options at the same level.
+
+## Sample Code:
+
+```jsx
+
+
+
+
+
+
+```
+
+## Props
+
+### RadioGroup Component:
+
+| Prop | Type | Default Value | Description |
+| ------------------ | --------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| label | string | | Descriptive label for the RadioGroup. This will be displayed as the title of the radio group to the user. |
+| defaultSelectedKey | string | | The key of the RadioButton that will initially be selected. |
+| accessibilityLabel | string | | An accessibility label for screen readers. If not provided, it will be set to the label of the radio group. |
+| selectedKey | string | | The key of the selected option. If you provide this, you must maintain selection state by onChange events and passing a new value in when changed. This overrides and makes the RadioGroup a controlled component.defaultSelectedKey observing |
+| onChange | (key: string) => void | | Callback for receiving a notification when the choice has been changed. |
+
+### RadioButton Component:
+
+| Prop | Type | Default Value | Description |
+| -------------------------- | ----------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| content | string | | The text string for the option. |
+| buttonKey | string | | A unique key-identifier for each option. |
+| disabled | boolean | | Whether or not the radio button is selectable. |
+| accessibilityPositionInSet | number | | Defines the current radio button's position in the radio group for accessibility purposes. This value is auto-generated iff RadioButtons are direct children of RadioGroup. Otherwise, it can be used to set the n-of-m values. |
+| accessibilitySetSize | number | | Defines the number of radio buttons in the group for accessibility purposes. Defines the current radio button's position in the radio group for accessibility purposes. This value is auto-generated iff RadioButtons are direct children of RadioGroup. Otherwise, it can be used to set the n-of-m values. |
+| accessibilityLabel | string | | An accessibility label for screen readers. If not provided, it will be set to the label of the radio button's content. |
+| componentRef | `React.RefObject` | | A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component. |
+
+## RadioGroup Tokens
+
+`interface IRadioGroupTokens extends IForegroundColorTokens, FontTokens {}`
+
+## RadioButton Tokens
+
+`interface IRadioButtonTokens extends FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens {}`
+
+| Prop | Type | Default Value | Description |
+| --------------- | ------ | ------------- | ------------------------ |
+| textBorderColor | string | | Specifies the text color |
diff --git a/docs/pages/Components/RadioGroup.mdx b/docs/pages/Components/RadioGroup.mdx
deleted file mode 100644
index c0f7e508a..000000000
--- a/docs/pages/Components/RadioGroup.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-# Component Name: RadioGroup
-
-## Purpose
-The goal of this RadioGroup component is to let users select one option from two or more choices. Each option is represented by one RadioButton component, and the group of RadioButton’s is represented by a RadioGroup component. A user can only select one RadioButton in a RadioGroup.
-
-## Do's:
- - Use when there are 2-7 options, if you have enough screen space and the options are important enough to be a good use of that screen space. Otherwise, use a Checkbox or Dropdown list.
- - Use on wizard pages to make the alternatives clear, even if a Checkbox is otherwise acceptable.
- - List the options in a logical order, such as most likely to be selected least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable.
- - If none of the options is a valid choice, add another option to reflect this choice, such as “None” or “Does not apply”.
- - Select the safest (to prevent loss of data or system access) and most secure and private option as the default. If safety and security aren’t factors, select the most likely or convenient option.
- - Align radio buttons vertically instead of horizontally, if possible. Horizontal alignment is harder to read and localize.
-
-## Don't:
- - Use when the options are numbers that have fixed steps, like 10, 20, 30. Use a slider component instead.
- - Use if there are more than 7 options, use a Dropdown instead.
- - Nest with other RadioGroup or Checkboxes. If possible, keep all the options at the same level.
-
-## Sample Code:
-```jsx
-
-
-
-
-
-
-```
-
-## Tokens:
-RadioButton supports the following tokens:
- 1. borderColor – This changes the border color of the RadioButton.
- 2. backgroundColor – This changes the background color of the inner circle of the RadioButton.
- 3. color – This changes the text color of the label associated with the RadioButton.
-
-RadioGroup supports the following tokens:
- 1. fontFamily - Changes the font family of the label associated with the RadioGroup.
- 2. fontSize - Changes the font size of the label associated with the RadioGroup.
- 3. fontWeight - Changes the font weight of the label associated with the RadioGroup.
- 4. color - This changes the text color of the label associated with the RadioGroup.
diff --git a/docs/pages/Components/Shimmer.md b/docs/pages/Components/Shimmer.md
new file mode 100644
index 000000000..9e5a8660e
--- /dev/null
+++ b/docs/pages/Components/Shimmer.md
@@ -0,0 +1,91 @@
+# Shimmer
+
+## Purpose
+
+Shimmer is a temporary animation placeholder for when a service call takes time to return data and we don't want to block rendering the rest of the UI.
+
+## Do's:
+
+- Use shimmer to help ease a UI transition when we know the service will potentially take a longer amount of time to retrieve the data.
+- Provide widths for each of the shimmer elements you used to build a skeleton layout looking as close as possible to real content it is replacing.
+- Use shimmer if you know the UI loading time is longer than 1 second.
+
+## Don't:
+
+- Use on the same element both types of widths. It will always default to just one of them. See documentation below.
+- Use shimmer if you are confident that the UI will take less than a second to load.
+- Use shimmer as a way to not make improvements in your code to improve performance.
+
+## Sample Code:
+
+### Rectangle Shimmer
+
+```jsx
+
+
+
+```
+
+### Circle Shimmer
+
+```jsx
+
+
+
+```
+
+### Customized Shimmer
+
+```jsx
+const PinkShimmer = Shimmer.customize({
+ shimmerWaveColor: 'pink',
+});
+
+return (
+
+
+
+);
+```
+
+## Props:
+
+### Shimmer Component:
+
+| Prop | Type | Default Value | Description |
+| -------- | ---------------------------- | ------------- | --------------------------------------------------------------------- |
+| elements | `Array` | | Shimmer shapes that define the masking effect of the Shimmer control. |
+
+`type ShimmerElementTypes = ShimmerCircleElement | ShimmerRectElement`
+
+### ShimmerCircleElement Type:
+
+| Prop | Type | Default Value | Description |
+| ------ | ------ | ------------- | ------------------------------------------------------------------------------------------------ |
+| radius | number | 12 | Radius of the circle element. |
+| cx | number | | The x-axis center of the circle element in the Shimmer relative to the origin [top-left, (0,0)]. |
+| cy | number | | The y-axis center of the circle element in the Shimmer relative to the origin [top-left, (0,0)]. |
+
+### ShimmerRectElement Type:
+
+| Prop | Type | Default Value | Description |
+| ------------- | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------ |
+| width | number | 100% | Width of the rect. |
+| height | number | 16 | Height of the rect. |
+| borderRadiusX | number | 0 | Border radius for the x-axis of a rounded rect. |
+| borderRadiusY | number | 0 | Border radius for the y-axis of a rounded rect. |
+| x | number | | he x-axis position of the rect element's top-left corner in the Shimmer relative to the origin [top-left, (0,0)]. |
+| y | number | | The y-axis position of the rect element's top-left corner in the Shimmer relative to the origin [top-left, (0,0)]. |
+
+## Shimmer Tokens
+
+| Prop | Type | Default Value | Description |
+| ----------------------- | ---------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
+| angle | number | 0 | Specifies the Shimmer effect angle in degrees (produced by a gradient) |
+| delay | number | 0 | Specifies the animation delay time in milliseconds |
+| duration | number | 2000 | Specifies the time required to traverse the control in milliseconds |
+| shimmerColorOpacity | number | 1 | Specifies the opacity of the shimmer color. |
+| shimmerWaveColorOpacity | number | 1 | Specifies the opacity of the wave color. |
+| shimmerColor | string or number | theme.color.bodyFrameDivider | Color you see when the shimmer wave is not animating. |
+| shimmerWaveColor | string or number | '#E1E1E1' | Defines the tip color of the wave which has a linear gradient. from shimmerColor to shimmerWaveColor to shimmerColor. |
+| shimmerWaveWidth | string or number | '100%' of the 'width' property | Width of the Shimmer wave. |
diff --git a/docs/pages/Components/Tabs.md b/docs/pages/Components/Tabs.md
new file mode 100644
index 000000000..432084c37
--- /dev/null
+++ b/docs/pages/Components/Tabs.md
@@ -0,0 +1,128 @@
+# Tabs
+
+## Purpose
+
+The Tabs control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Tabs allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.
+Selecting a tab item header navigates to that header's section content.
+
+## Do's:
+
+- Use on content-heavy views that require a significant amount of scrolling to access the various sections.
+- Be concise on the navigation header texts, ideally one or two words rather than a phrase.
+- Make sure all the children of the Tabs component are of type TabItem.
+
+## Don't:
+
+- Nest with other RadioGroup or Checkboxes. If possible, keep all the options at the same level.
+- Use on Views which don’t scroll.
+- Use the Tabs to access a different global view.
+- Use the Tabs to access hidden content.
+- Pass any children of type other than TabItem to the Tabs component.
+
+## Sample Code:
+
+```jsx
+
+
+ Tabs #1
+
+
+ Tabs #2
+
+
+ Tabs #3
+
+
+```
+
+## Props:
+
+### Tabs Component:
+
+| Prop | Type | Default Value | Description |
+| ------------------ | -------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultSelectedKey | string | | The key of the TabsItem that will initially be selected. |
+| label | string | | Descriptive label for the Tabs. This will be displayed as the title of the Tabs to the user. |
+| accessibilityLabel | string | | An accessibility label for screen readers. If not provided, it will be set to the label of the Tabs. |
+| selectedKey | string | | The key of the selected option. If you provide this, you must maintain selection state by observing onTabsClick events and passing a new value in when changed. This overrides defaultSelectedKey and makes the Tabs a controlled component. This prop is mutually exclusive to defaultSelectedKey. |
+| onTabsClick | (key: string) => void | | Callback for receiving a notification when the choice has been changed. |
+| getTabId | (key: string, index: number) => string | | Callback to customize how IDs are generated for each tab header. Useful if you're rendering content outside and need to connect accessibility-labelledby. |
+| headersOnly | boolean | false | Sets whether to only render the header. |
+| componentRef | React.RefObject | | A RefObject to access Tabs. |
+
+### TabsItem Component:
+
+| Prop | Type | Default Value | Description |
+| ------------ | ------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| headerText | string | | The text string for the option. |
+| itemCount | number | | The number for the TabsItem count. |
+| itemKey | string | | A unique key-identifier for each option. |
+| disabled | boolean | | Whether or not the tabs item is selectable. |
+| componentRef | React.RefObject | | A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component. |
+| getTabId | (key: string, index: number) => string | | Call |
+| icon | IconSourcesType = (number or string or IconProps) | | Source URL or name of the icon to show on the TabsItem. |
+
+### IconProps Interface
+
+| Prop | Type |
+| ----------------- | ---------------------------------- |
+| fontSource | FontIconProps |
+| svgSource | SvgIconProps |
+| rasterImageSource | RasterImageIconProps |
+| style | StyleProp |
+| width | number |
+| height | number |
+| color | ColorValue |
+
+### FontIconProps Interface
+
+| Prop | Type |
+| ----------- | ------ |
+| fontFamily | string |
+| fontSrcFile | string |
+| codepoint | number |
+| fontSize | number |
+
+### SvgIconProps Interface
+
+| Prop | Type |
+| ------- | ------------------ |
+| uri | string |
+| src | React.FC |
+| viewBox | string |
+
+### RasterImageIconProps Interface
+
+| Prop | Type |
+| ---- | -------------------- |
+| src | ImageProps['source'] |
+
+## Tokens:
+
+Tabs supports the following tokens:
+
+1. backgroundColor – This changes the background color of Tabs.
+2. color – This changes the text color of the label associated with Tabs.
+3. fontFamily – This changes the font family of the label associated with Tabs.
+4. fontSize – This changes the font size of the label associated with Tabs.
+5. fontWeight – This changes the font weight of the label associated with Tabs.
+6. variant – This sets the styling of Tabs to a specific configuration.
+
+TabsItem supports the following tokens:
+
+1. backgroundColor – This changes the background color of the TabsItem.
+2. borderColor – This changes the border color of the TabsItem.
+3. borderRadius – This changes the border radius of the TabsItem.
+4. borderStyle – This changes the border style of the TabsItem.
+5. borderWidth – This changes the border width of the TabsItem.
+6. color – This changes the text color of the header associated with the TabsItem.
+7. fontFamily – This changes the font family of the header associated with the TabsItem.
+8. fontSize – This changes the font size of the header associated with the TabsItem.
+9. fontWeight – This changes the font weight of the header associated with the TabsItem.
+10. headerText – This sets the text to show on the TabsItem.
+11. headerTextPadding – This changes the amount of padding between the border and the headerText.
+12. headerTextPaddingFocused – This changes the amount of padding between the border and the headerText when the TabsItem has focus.
+13. icon – This sets the icon to show on the TabsItem.
+14. iconColor – This changes the color of the TabsItem’s icon.
+15. indicatorColor – This changes the color of the TabsItem's selected indicator.
+16. variant – This sets the styling of the TabsItem to a specific configuration.
diff --git a/docs/pages/Components/Tabs.mdx b/docs/pages/Components/Tabs.mdx
deleted file mode 100644
index 96314838a..000000000
--- a/docs/pages/Components/Tabs.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
-# Tabs
-
-## Purpose
-
-The Tabs control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Tabs allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.
-Selecting a tab item header navigates to that header's section content.
-
-## Do's:
-
-- Use on content-heavy views that require a significant amount of scrolling to access the various sections.
-- Be concise on the navigation header texts, ideally one or two words rather than a phrase.
-- Make sure all the children of the Tabs component are of type TabItem.
-
-## Don't:
-
-- Nest with other RadioGroup or Checkboxes. If possible, keep all the options at the same level.
-- Use on Views which don’t scroll.
-- Use the Tabs to access a different global view.
-- Use the Tabs to access hidden content.
-- Pass any children of type other than TabItem to the Tabs component.
-
-## Sample Code:
-
-```jsx
-
-
- Tabs #1
-
-
- Tabs #2
-
-
- Tabs #3
-
-
-```
-
-## Tokens:
-
-Tabs supports the following tokens:
-
-1. backgroundColor – This changes the background color of Tabs.
-2. color – This changes the text color of the label associated with Tabs.
-3. fontFamily – This changes the font family of the label associated with Tabs.
-4. fontSize – This changes the font size of the label associated with Tabs.
-5. fontWeight – This changes the font weight of the label associated with Tabs.
-6. variant – This sets the styling of Tabs to a specific configuration.
-
-TabsItem supports the following tokens:
-
-1. backgroundColor – This changes the background color of the TabsItem.
-2. borderColor – This changes the border color of the TabsItem.
-3. borderRadius – This changes the border radius of the TabsItem.
-4. borderStyle – This changes the border style of the TabsItem.
-5. borderWidth – This changes the border width of the TabsItem.
-6. color – This changes the text color of the header associated with the TabsItem.
-7. fontFamily – This changes the font family of the header associated with the TabsItem.
-8. fontSize – This changes the font size of the header associated with the TabsItem.
-9. fontWeight – This changes the font weight of the header associated with the TabsItem.
-10. headerText – This sets the text to show on the TabsItem.
-11. headerTextPadding – This changes the amount of padding between the border and the headerText.
-12. headerTextPaddingFocused – This changes the amount of padding between the border and the headerText when the TabsItem has focus.
-13. icon – This sets the icon to show on the TabsItem.
-14. iconColor – This changes the color of the TabsItem’s icon.
-15. indicatorColor – This changes the color of the TabsItem's selected indicator.
-16. variant – This sets the styling of the TabsItem to a specific configuration.