m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Removing Box props description from TS component docs (#20451)

Browse Source 
* Removing Box props description from TS component docs

* Making style utility prop comments more generic
This commit is contained in:
George Marshall 2023-08-16 10:34:08 -07:00 committed by GitHub
parent 4e93b86116
commit 419bf92282
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 32 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/component-library/avatar-account/README.mdx
View File

@ -13,8 +13,6 @@ The `AvatarAccount` is a type of avatar reserved for representing accounts.
## Props ## Props
The `AvatarAccount` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
<ArgsTable of={AvatarAccount} /> <ArgsTable of={AvatarAccount} />
### Size ### Size

2
ui/components/component-library/avatar-base/README.mdx
View File

@ -14,8 +14,6 @@ The `AvatarBase` is a wrapper component responsible for enforcing dimensions and
## Props ## Props
The `AvatarBase` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props.
<ArgsTable of={AvatarBase} /> <ArgsTable of={AvatarBase} />
### Size ### Size

2
ui/components/component-library/avatar-icon/README.mdx
View File

@ -13,8 +13,6 @@ The `AvatarIcon` is an avatar component that renders only an icon inside and is
## Props ## Props
The `AvatarIcon` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
<ArgsTable of={AvatarIcon} /> <ArgsTable of={AvatarIcon} />
`AvatarIcon` accepts all [AvatarBase](/docs/components-componentlibrary-avatarbase--default-story)) `AvatarIcon` accepts all [AvatarBase](/docs/components-componentlibrary-avatarbase--default-story))

2
ui/components/component-library/avatar-network/README.mdx
View File

@ -12,8 +12,6 @@ The `AvatarNetwork` is a component responsible for display of the image of a giv
## Props ## Props
The `AvatarNetwork` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
<ArgsTable of={AvatarNetwork} /> <ArgsTable of={AvatarNetwork} />
### Size ### Size

2
ui/components/component-library/avatar-token/README.mdx
View File

@ -12,8 +12,6 @@ The `AvatarToken` is a component responsible for display of the image of a given
## Props ## Props
The `AvatarToken` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
<ArgsTable of={AvatarToken} /> <ArgsTable of={AvatarToken} />
### Size ### Size

2
ui/components/component-library/badge-wrapper/README.mdx
View File

@ -12,8 +12,6 @@ The `BadgeWrapper` positions a badge on top of another component
## Props ## Props
The `BadgeWrapper` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props.
<ArgsTable of={BadgeWrapper} /> <ArgsTable of={BadgeWrapper} />
### Children ### Children

62
ui/components/component-library/box/box.types.ts
View File

@ -225,187 +225,187 @@ export type PolymorphicComponentPropWithRef<
*/ */
export interface StyleUtilityProps { export interface StyleUtilityProps {
/** /**
* The flex direction of the Box component. * The flex direction of the component.
* Use the FlexDirection enum from '../../../helpers/constants/design-system'; * Use the FlexDirection enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
flexDirection?: FlexDirection | FlexDirectionArray; flexDirection?: FlexDirection | FlexDirectionArray;
/** /**
* The flex wrap of the Box component. * The flex wrap of the component.
* Use the FlexWrap enum from '../../../helpers/constants/design-system'; * Use the FlexWrap enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
flexWrap?: FlexWrap | FlexWrapArray; flexWrap?: FlexWrap | FlexWrapArray;
/** /**
* The gap between the Box component's children. * The gap between the component's children.
* Use 1-12 for a gap of 4px-48px. * Use 1-12 for a gap of 4px-48px.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
gap?: SizeNumber | SizeNumberArray | undefined; gap?: SizeNumber | SizeNumberArray | undefined;
/** /**
* The margin of the Box component. * The margin of the component.
* Use 1-12 for 4px-48px or 'auto'. * Use 1-12 for 4px-48px or 'auto'.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
margin?: SizeNumberAndAuto | SizeNumberAndAutoArray; margin?: SizeNumberAndAuto | SizeNumberAndAutoArray;
/** /**
* The margin-top of the Box component. * The margin-top of the component.
* Use 1-12 for 4px-48px or 'auto'. * Use 1-12 for 4px-48px or 'auto'.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
marginTop?: SizeNumberAndAuto | SizeNumberAndAutoArray; marginTop?: SizeNumberAndAuto | SizeNumberAndAutoArray;
/** /**
* The margin-bottom of the Box component. * The margin-bottom of the component.
* Use 1-12 for 4px-48px or 'auto'. * Use 1-12 for 4px-48px or 'auto'.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
marginBottom?: SizeNumberAndAuto | SizeNumberAndAutoArray; marginBottom?: SizeNumberAndAuto | SizeNumberAndAutoArray;
/** /**
* The margin-right of the Box component. * The margin-right of the component.
* Use 1-12 for 4px-48px or 'auto'. * Use 1-12 for 4px-48px or 'auto'.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
marginRight?: SizeNumberAndAuto | SizeNumberAndAutoArray; marginRight?: SizeNumberAndAuto | SizeNumberAndAutoArray;
/** /**
* The margin-left of the Box component. * The margin-left of the component.
* Use 1-12 for 4px-48px or 'auto'. * Use 1-12 for 4px-48px or 'auto'.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
marginLeft?: SizeNumberAndAuto | SizeNumberAndAutoArray; marginLeft?: SizeNumberAndAuto | SizeNumberAndAutoArray;
/** /**
* The margin-inline of the Box component. * The margin-inline of the component.
* Use 1-12 for 4px-48px or 'auto'. * Use 1-12 for 4px-48px or 'auto'.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
marginInline?: SizeNumberAndAuto | SizeNumberAndAutoArray; marginInline?: SizeNumberAndAuto | SizeNumberAndAutoArray;
/** /**
* The margin-inline-start of the Box component. * The margin-inline-start of the component.
* Use 1-12 for 4px-48px or 'auto'. * Use 1-12 for 4px-48px or 'auto'.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
marginInlineStart?: SizeNumberAndAuto | SizeNumberAndAutoArray; marginInlineStart?: SizeNumberAndAuto | SizeNumberAndAutoArray;
/** /**
* The margin-inline-end of the Box component. * The margin-inline-end of the component.
* Use 1-12 for 4px-48px or 'auto'. * Use 1-12 for 4px-48px or 'auto'.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
marginInlineEnd?: SizeNumberAndAuto | SizeNumberAndAutoArray; marginInlineEnd?: SizeNumberAndAuto | SizeNumberAndAutoArray;
/** /**
* The padding of the Box component. * The padding of the component.
* Use 1-12 for 4px-48px. * Use 1-12 for 4px-48px.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
padding?: SizeNumber | SizeNumberArray; padding?: SizeNumber | SizeNumberArray;
/** /**
* The padding-top of the Box component. * The padding-top of the component.
* Use 1-12 for 4px-48px. * Use 1-12 for 4px-48px.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
paddingTop?: SizeNumber | SizeNumberArray; paddingTop?: SizeNumber | SizeNumberArray;
/** /**
* The padding-bottom of the Box component. * The padding-bottom of the component.
* Use 1-12 for 4px-48px. * Use 1-12 for 4px-48px.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
paddingBottom?: SizeNumber | SizeNumberArray; paddingBottom?: SizeNumber | SizeNumberArray;
/** /**
* The padding-right of the Box component. * The padding-right of the component.
* Use 1-12 for 4px-48px. * Use 1-12 for 4px-48px.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
paddingRight?: SizeNumber | SizeNumberArray; paddingRight?: SizeNumber | SizeNumberArray;
/** /**
* The padding-left of the Box component. * The padding-left of the component.
* Use 1-12 for 4px-48px. * Use 1-12 for 4px-48px.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
paddingLeft?: SizeNumber | SizeNumberArray; paddingLeft?: SizeNumber | SizeNumberArray;
/** /**
* The padding-inline of the Box component. * The padding-inline of the component.
* Use 1-12 for 4px-48px. * Use 1-12 for 4px-48px.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
paddingInline?: SizeNumber | SizeNumberArray; paddingInline?: SizeNumber | SizeNumberArray;
/** /**
* The padding-inline-start of the Box component. * The padding-inline-start of the component.
* Use 1-12 for 4px-48px. * Use 1-12 for 4px-48px.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
paddingInlineStart?: SizeNumber | SizeNumberArray; paddingInlineStart?: SizeNumber | SizeNumberArray;
/** /**
* The padding-inline-end of the Box component. * The padding-inline-end of the component.
* Use 1-12 for 4px-48px. * Use 1-12 for 4px-48px.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
paddingInlineEnd?: SizeNumber | SizeNumberArray; paddingInlineEnd?: SizeNumber | SizeNumberArray;
/** /**
* The border-color of the Box component. * The border-color of the component.
* Use BorderColor enum from '../../../helpers/constants/design-system'; * Use BorderColor enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
borderColor?: BorderColor | BorderColorArray; borderColor?: BorderColor | BorderColorArray;
/** /**
* The border-width of the Box component. * The border-width of the component.
* Use 1-12 for 1px-12px. * Use 1-12 for 1px-12px.
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
borderWidth?: SizeNumber | SizeNumberArray; borderWidth?: SizeNumber | SizeNumberArray;
/** /**
* The border-radius of the Box component. * The border-radius of the component.
* Use BorderRadius enum from '../../../helpers/constants/design-system'; * Use BorderRadius enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
borderRadius?: BorderRadius | BorderRadiusArray; borderRadius?: BorderRadius | BorderRadiusArray;
/** /**
* The border-style of the Box component. * The border-style of the component.
* Use BorderStyle enum from '../../../helpers/constants/design-system'; * Use BorderStyle enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
borderStyle?: BorderStyle | BorderStyleArray; borderStyle?: BorderStyle | BorderStyleArray;
/** /**
* The align-items of the Box component. * The align-items of the component.
* Use AlignItems enum from '../../../helpers/constants/design-system'; * Use AlignItems enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
alignItems?: AlignItems | AlignItemsArray; alignItems?: AlignItems | AlignItemsArray;
/** /**
* The justify-content of the Box component. * The justify-content of the component.
* Use JustifyContent enum from '../../../helpers/constants/design-system'; * Use JustifyContent enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
justifyContent?: JustifyContent | JustifyContentArray; justifyContent?: JustifyContent | JustifyContentArray;
/** /**
* The text-align of the Box component. * The text-align of the component.
* Use TextAlign enum from '../../../helpers/constants/design-system'; * Use TextAlign enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
textAlign?: TextAlign | TextAlignArray; textAlign?: TextAlign | TextAlignArray;
/** /**
* The display of the Box component. * The display of the component.
* Use Display enum from '../../../helpers/constants/design-system'; * Use Display enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
display?: Display | DisplayArray; display?: Display | DisplayArray;
/** /**
* The width of the Box component. * The width of the component.
* Use BlockSize enum from '../../../helpers/constants/design-system'; * Use BlockSize enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
width?: BlockSize | BlockSizeArray; width?: BlockSize | BlockSizeArray;
/** /**
* The height of the Box component. * The height of the component.
* Use BlockSize enum from '../../../helpers/constants/design-system'; * Use BlockSize enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
height?: BlockSize | BlockSizeArray; height?: BlockSize | BlockSizeArray;
/** /**
* The background-color of the Box component. * The background-color of the component.
* Use BackgroundColor enum from '../../../helpers/constants/design-system'; * Use BackgroundColor enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
backgroundColor?: BackgroundColor | BackgroundColorArray; backgroundColor?: BackgroundColor | BackgroundColorArray;
/** /**
* The text-color of the Box component. * The text-color of the component.
* Use TextColor enum from '../../../helpers/constants/design-system'; * Use TextColor enum from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */

2
ui/components/component-library/button-base/README.mdx
View File

@ -13,8 +13,6 @@ The `ButtonBase` is the base component for buttons.
## Props ## Props
The `ButtonBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={ButtonBase} /> <ArgsTable of={ButtonBase} />
### Size ### Size

2
ui/components/component-library/button-icon/README.mdx
View File

@ -11,8 +11,6 @@ The `ButtonIcon` is used for icons associated with a user action.
## Props ## Props
The `ButtonIcon` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
<ArgsTable of={ButtonIcon} /> <ArgsTable of={ButtonIcon} />
### Icon Name<span style={{ color: 'red' }}>\*</span> ### Icon Name<span style={{ color: 'red' }}>\*</span>

2
ui/components/component-library/checkbox/README.mdx
View File

@ -12,8 +12,6 @@ Checkbox is a graphical element that allows users to select one or more options
## Props ## Props
The `Checkbox` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
<ArgsTable of={Checkbox} /> <ArgsTable of={Checkbox} />
### Label ### Label

2
ui/components/component-library/header-base/README.mdx
View File

@ -13,8 +13,6 @@ The `HeaderBase` component is a reusable UI component for displaying a header wi
## Props ## Props
The `HeaderBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={HeaderBase} /> <ArgsTable of={HeaderBase} />
### Children ### Children

2
ui/components/component-library/help-text/README.mdx
View File

@ -14,8 +14,6 @@ The `HelpText` is used as feedback text under a form field including error, succ
## Props ## Props
The `HelpText` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={HelpText} /> <ArgsTable of={HelpText} />
`HelpText` accepts all [Text](/docs/components-componentlibrary-text--default-story#props) component props `HelpText` accepts all [Text](/docs/components-componentlibrary-text--default-story#props) component props

2
ui/components/component-library/icon/README.mdx
View File

@ -12,8 +12,6 @@ The `Icon` component in conjunction with `IconName` can be used for all icons in
## Props ## Props
The `Icon` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={Icon} /> <ArgsTable of={Icon} />
### Name ### Name

2
ui/components/component-library/input/README.mdx
View File

@ -12,8 +12,6 @@ import { Input } from './input';
## Props ## Props
The `Input` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
<ArgsTable of={Input} /> <ArgsTable of={Input} />
### Type ### Type

2
ui/components/component-library/label/README.mdx
View File

@ -14,8 +14,6 @@ import { Label } from './label';
## Props ## Props
The `Label` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={Label} /> <ArgsTable of={Label} />
`Label` accepts all [Text](/docs/components-componentlibrary-text--default-story#props) component props `Label` accepts all [Text](/docs/components-componentlibrary-text--default-story#props) component props

2
ui/components/component-library/modal-content/README.mdx
View File

@ -12,8 +12,6 @@ import { ModalContent } from './modal-content';
## Props ## Props
The `ModalContent` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={ModalContent} /> <ArgsTable of={ModalContent} />
### Children ### Children

2
ui/components/component-library/modal-overlay/README.mdx
View File

@ -12,8 +12,6 @@ import { ModalOverlay } from './modal-overlay';
## Props ## Props
The `ModalOverlay` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
<ArgsTable of={ModalOverlay} /> <ArgsTable of={ModalOverlay} />
### On Click ### On Click

2
ui/components/component-library/modal/README.mdx
View File

@ -12,8 +12,6 @@ The `Modal` focuses the user's attention exclusively on information via a window
## Props ## Props
The `Modal` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={Modal} /> <ArgsTable of={Modal} />
### Usage ### Usage

4
ui/components/component-library/tag/README.mdx
View File

@ -12,8 +12,6 @@ The `Tag` is a component used to display text within a container.
## Props ## Props
The `Tag` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props.
<ArgsTable of={Tag} /> <ArgsTable of={Tag} />
### Label ### Label
@ -22,4 +20,4 @@ The text content of the `Tag` component
<Canvas> <Canvas>
<Story id="components-componentlibrary-tag--label" /> <Story id="components-componentlibrary-tag--label" />
</Canvas> </Canvas>

2
ui/components/component-library/text/README.mdx
View File

@ -14,8 +14,6 @@ Good typography improves readability, legibility and hierarchy of information.
## Props ## Props
The `Text` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
<ArgsTable of={Text} /> <ArgsTable of={Text} />
### Variant ### Variant