mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Removing Box props description from TS component docs (#20451)
* Removing Box props description from TS component docs * Making style utility prop comments more generic
This commit is contained in:
George Marshall
GitHub
parent
4e93b86116
commit
419bf92282
@ -13,8 +13,6 @@ The `AvatarAccount` is a type of avatar reserved for representing accounts.
|
||||
|
||||
## Props
|
||||
|
||||
The `AvatarAccount` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
|
||||
|
||||
<ArgsTable of={AvatarAccount} />
|
||||
|
||||
### Size
|
||||
|
||||
@ -14,8 +14,6 @@ The `AvatarBase` is a wrapper component responsible for enforcing dimensions and
|
||||
|
||||
## Props
|
||||
|
||||
The `AvatarBase` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props.
|
||||
|
||||
<ArgsTable of={AvatarBase} />
|
||||
|
||||
### Size
|
||||
|
||||
@ -13,8 +13,6 @@ The `AvatarIcon` is an avatar component that renders only an icon inside and is
|
||||
|
||||
## Props
|
||||
|
||||
The `AvatarIcon` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
|
||||
|
||||
<ArgsTable of={AvatarIcon} />
|
||||
|
||||
`AvatarIcon` accepts all [AvatarBase](/docs/components-componentlibrary-avatarbase--default-story))
|
||||
|
||||
@ -12,8 +12,6 @@ The `AvatarNetwork` is a component responsible for display of the image of a giv
|
||||
|
||||
## Props
|
||||
|
||||
The `AvatarNetwork` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
|
||||
|
||||
<ArgsTable of={AvatarNetwork} />
|
||||
|
||||
### Size
|
||||
|
||||
@ -12,8 +12,6 @@ The `AvatarToken` is a component responsible for display of the image of a given
|
||||
|
||||
## Props
|
||||
|
||||
The `AvatarToken` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
|
||||
|
||||
<ArgsTable of={AvatarToken} />
|
||||
|
||||
### Size
|
||||
|
||||
@ -12,8 +12,6 @@ The `BadgeWrapper` positions a badge on top of another component
|
||||
|
||||
## Props
|
||||
|
||||
The `BadgeWrapper` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props.
|
||||
|
||||
<ArgsTable of={BadgeWrapper} />
|
||||
|
||||
### Children
|
||||
|
||||
@ -225,187 +225,187 @@ export type PolymorphicComponentPropWithRef<
|
||||
*/
|
||||
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';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
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';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
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.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
gap?: SizeNumber | SizeNumberArray | undefined;
|
||||
/**
|
||||
* The margin of the Box component.
|
||||
* The margin of the component.
|
||||
* Use 1-12 for 4px-48px or 'auto'.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
margin?: SizeNumberAndAuto | SizeNumberAndAutoArray;
|
||||
/**
|
||||
* The margin-top of the Box component.
|
||||
* The margin-top of the component.
|
||||
* Use 1-12 for 4px-48px or 'auto'.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
marginTop?: SizeNumberAndAuto | SizeNumberAndAutoArray;
|
||||
/**
|
||||
* The margin-bottom of the Box component.
|
||||
* The margin-bottom of the component.
|
||||
* Use 1-12 for 4px-48px or 'auto'.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
marginBottom?: SizeNumberAndAuto | SizeNumberAndAutoArray;
|
||||
/**
|
||||
* The margin-right of the Box component.
|
||||
* The margin-right of the component.
|
||||
* Use 1-12 for 4px-48px or 'auto'.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
marginRight?: SizeNumberAndAuto | SizeNumberAndAutoArray;
|
||||
/**
|
||||
* The margin-left of the Box component.
|
||||
* The margin-left of the component.
|
||||
* Use 1-12 for 4px-48px or 'auto'.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
marginLeft?: SizeNumberAndAuto | SizeNumberAndAutoArray;
|
||||
/**
|
||||
* The margin-inline of the Box component.
|
||||
* The margin-inline of the component.
|
||||
* Use 1-12 for 4px-48px or 'auto'.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
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'.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
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'.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
marginInlineEnd?: SizeNumberAndAuto | SizeNumberAndAutoArray;
|
||||
/**
|
||||
* The padding of the Box component.
|
||||
* The padding of the component.
|
||||
* Use 1-12 for 4px-48px.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
padding?: SizeNumber | SizeNumberArray;
|
||||
/**
|
||||
* The padding-top of the Box component.
|
||||
* The padding-top of the component.
|
||||
* Use 1-12 for 4px-48px.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
paddingTop?: SizeNumber | SizeNumberArray;
|
||||
/**
|
||||
* The padding-bottom of the Box component.
|
||||
* The padding-bottom of the component.
|
||||
* Use 1-12 for 4px-48px.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
paddingBottom?: SizeNumber | SizeNumberArray;
|
||||
/**
|
||||
* The padding-right of the Box component.
|
||||
* The padding-right of the component.
|
||||
* Use 1-12 for 4px-48px.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
paddingRight?: SizeNumber | SizeNumberArray;
|
||||
/**
|
||||
* The padding-left of the Box component.
|
||||
* The padding-left of the component.
|
||||
* Use 1-12 for 4px-48px.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
paddingLeft?: SizeNumber | SizeNumberArray;
|
||||
/**
|
||||
* The padding-inline of the Box component.
|
||||
* The padding-inline of the component.
|
||||
* Use 1-12 for 4px-48px.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
paddingInline?: SizeNumber | SizeNumberArray;
|
||||
/**
|
||||
* The padding-inline-start of the Box component.
|
||||
* The padding-inline-start of the component.
|
||||
* Use 1-12 for 4px-48px.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
paddingInlineStart?: SizeNumber | SizeNumberArray;
|
||||
/**
|
||||
* The padding-inline-end of the Box component.
|
||||
* The padding-inline-end of the component.
|
||||
* Use 1-12 for 4px-48px.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
paddingInlineEnd?: SizeNumber | SizeNumberArray;
|
||||
/**
|
||||
* The border-color of the Box component.
|
||||
* The border-color of the component.
|
||||
* Use BorderColor enum from '../../../helpers/constants/design-system';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
borderColor?: BorderColor | BorderColorArray;
|
||||
/**
|
||||
* The border-width of the Box component.
|
||||
* The border-width of the component.
|
||||
* Use 1-12 for 1px-12px.
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
borderWidth?: SizeNumber | SizeNumberArray;
|
||||
/**
|
||||
* The border-radius of the Box component.
|
||||
* The border-radius of the component.
|
||||
* Use BorderRadius enum from '../../../helpers/constants/design-system';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
borderRadius?: BorderRadius | BorderRadiusArray;
|
||||
/**
|
||||
* The border-style of the Box component.
|
||||
* The border-style of the component.
|
||||
* Use BorderStyle enum from '../../../helpers/constants/design-system';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
borderStyle?: BorderStyle | BorderStyleArray;
|
||||
/**
|
||||
* The align-items of the Box component.
|
||||
* The align-items of the component.
|
||||
* Use AlignItems enum from '../../../helpers/constants/design-system';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
alignItems?: AlignItems | AlignItemsArray;
|
||||
/**
|
||||
* The justify-content of the Box component.
|
||||
* The justify-content of the component.
|
||||
* Use JustifyContent enum from '../../../helpers/constants/design-system';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
justifyContent?: JustifyContent | JustifyContentArray;
|
||||
/**
|
||||
* The text-align of the Box component.
|
||||
* The text-align of the component.
|
||||
* Use TextAlign enum from '../../../helpers/constants/design-system';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
textAlign?: TextAlign | TextAlignArray;
|
||||
/**
|
||||
* The display of the Box component.
|
||||
* The display of the component.
|
||||
* Use Display enum from '../../../helpers/constants/design-system';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
display?: Display | DisplayArray;
|
||||
/**
|
||||
* The width of the Box component.
|
||||
* The width of the component.
|
||||
* Use BlockSize enum from '../../../helpers/constants/design-system';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
width?: BlockSize | BlockSizeArray;
|
||||
/**
|
||||
* The height of the Box component.
|
||||
* The height of the component.
|
||||
* Use BlockSize enum from '../../../helpers/constants/design-system';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
height?: BlockSize | BlockSizeArray;
|
||||
/**
|
||||
* The background-color of the Box component.
|
||||
* The background-color of the component.
|
||||
* Use BackgroundColor enum from '../../../helpers/constants/design-system';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
backgroundColor?: BackgroundColor | BackgroundColorArray;
|
||||
/**
|
||||
* The text-color of the Box component.
|
||||
* The text-color of the component.
|
||||
* Use TextColor enum from '../../../helpers/constants/design-system';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
|
||||
@ -13,8 +13,6 @@ The `ButtonBase` is the base component for buttons.
|
||||
|
||||
## Props
|
||||
|
||||
The `ButtonBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
||||
|
||||
<ArgsTable of={ButtonBase} />
|
||||
|
||||
### Size
|
||||
|
||||
@ -11,8 +11,6 @@ The `ButtonIcon` is used for icons associated with a user action.
|
||||
|
||||
## Props
|
||||
|
||||
The `ButtonIcon` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
|
||||
|
||||
<ArgsTable of={ButtonIcon} />
|
||||
|
||||
### Icon Name<span style={{ color: 'red' }}>\*</span>
|
||||
|
||||
@ -12,8 +12,6 @@ Checkbox is a graphical element that allows users to select one or more options
|
||||
|
||||
## Props
|
||||
|
||||
The `Checkbox` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
|
||||
|
||||
<ArgsTable of={Checkbox} />
|
||||
|
||||
### Label
|
||||
|
||||
@ -13,8 +13,6 @@ The `HeaderBase` component is a reusable UI component for displaying a header wi
|
||||
|
||||
## Props
|
||||
|
||||
The `HeaderBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
||||
|
||||
<ArgsTable of={HeaderBase} />
|
||||
|
||||
### Children
|
||||
|
||||
@ -14,8 +14,6 @@ The `HelpText` is used as feedback text under a form field including error, succ
|
||||
|
||||
## Props
|
||||
|
||||
The `HelpText` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
||||
|
||||
<ArgsTable of={HelpText} />
|
||||
|
||||
`HelpText` accepts all [Text](/docs/components-componentlibrary-text--default-story#props) component props
|
||||
|
||||
@ -12,8 +12,6 @@ The `Icon` component in conjunction with `IconName` can be used for all icons in
|
||||
|
||||
## Props
|
||||
|
||||
The `Icon` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
||||
|
||||
<ArgsTable of={Icon} />
|
||||
|
||||
### Name
|
||||
|
||||
@ -12,8 +12,6 @@ import { Input } from './input';
|
||||
|
||||
## Props
|
||||
|
||||
The `Input` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
|
||||
|
||||
<ArgsTable of={Input} />
|
||||
|
||||
### Type
|
||||
|
||||
@ -14,8 +14,6 @@ import { Label } from './label';
|
||||
|
||||
## Props
|
||||
|
||||
The `Label` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
||||
|
||||
<ArgsTable of={Label} />
|
||||
|
||||
`Label` accepts all [Text](/docs/components-componentlibrary-text--default-story#props) component props
|
||||
|
||||
@ -12,8 +12,6 @@ import { ModalContent } from './modal-content';
|
||||
|
||||
## Props
|
||||
|
||||
The `ModalContent` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
||||
|
||||
<ArgsTable of={ModalContent} />
|
||||
|
||||
### Children
|
||||
|
||||
@ -12,8 +12,6 @@ import { ModalOverlay } from './modal-overlay';
|
||||
|
||||
## Props
|
||||
|
||||
The `ModalOverlay` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
|
||||
|
||||
<ArgsTable of={ModalOverlay} />
|
||||
|
||||
### On Click
|
||||
|
||||
@ -12,8 +12,6 @@ The `Modal` focuses the user's attention exclusively on information via a window
|
||||
|
||||
## Props
|
||||
|
||||
The `Modal` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
||||
|
||||
<ArgsTable of={Modal} />
|
||||
|
||||
### Usage
|
||||
|
||||
@ -12,8 +12,6 @@ The `Tag` is a component used to display text within a container.
|
||||
|
||||
## Props
|
||||
|
||||
The `Tag` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props.
|
||||
|
||||
<ArgsTable of={Tag} />
|
||||
|
||||
### Label
|
||||
@ -22,4 +20,4 @@ The text content of the `Tag` component
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-tag--label" />
|
||||
</Canvas>
|
||||
</Canvas>
|
||||
|
||||
@ -14,8 +14,6 @@ Good typography improves readability, legibility and hierarchy of information.
|
||||
|
||||
## Props
|
||||
|
||||
The `Text` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
|
||||
|
||||
<ArgsTable of={Text} />
|
||||
|
||||
### Variant
|
||||
|
||||
Loading…
Reference in New Issue
Block a user