created:3/5/2021
updated:3/5/2021
loc
51
comments
22%
passed
14
coverage
75%
PropsTable
Displays the component's properties as well as configurable controls to interact with the component.
Hello, my name is Mark, and I am 19 years old.
Name | Description | Default | Controls |
|---|---|---|---|
| Name | a name property string | - | |
| Age | age is a number property number | - |
Name | Description | Default | |
|---|---|---|---|
PropsTableOwnProps(2 properties) | |||
| extraColumns | extra custom columns passed to the PropsTable. Column<{}>[] | - | |
| flat | if true, will flatten the group by boolean | - | |
-(3 properties) | |||
SpaceProps(28 properties) | |||
HTMLAttributes(42 properties) | |||
BlockContainerOwnProps(6 properties) | |||
Attributes(2 properties) | |||
AriaAttributes(48 properties) | |||
DOMAttributes(160 properties) | |||
BoxOwnProps(3 properties) | |||
BackgroundColorProps(2 properties) | |||
OpacityProps(1 properties) | |||
ComponentInputProps(2 properties) | |||
27 commits
package | imports | peer |
|---|---|---|
Column | ||
@component-controls/store ^3.15.0 | StoryContextProviderControlsContextStoryProvider | |
react ^17.0.1 | FC | * |
theme-ui ^0.8.4 | jsx |
file | imports |
|---|---|
| "../BlockContainer/components/ComponentsBlockContainer" | ComponentsBlockContainerComponentsBlockContainerProps |
| "../context" | useCustomProps |
| "./BasePropsTable" | BasePropsTable |
<ComponentsBlockContainer
data-testidvisibility
>ComponentsBlockContainer
from"../BlockContainer/components/ComponentsBlockContainer"
<BasePropsTable
componentvisibilityextraColumnstablePropsflat
/>BasePropsTable
from"./BasePropsTable"
<StoryContextProvider
storyId
>@component-controls/store
^3.15.0<ControlsContextStoryProvider/>
@component-controls/store
^3.15.0Name | Description | Default |
|---|---|---|
| optionalArray | any[] | - |
| optionalArrayOf | number[] | - |
| optionalBool | boolean | - |
| optionalElement | any | - |
| optionalElementType | Element | - |
| optionalEnum | NewsPhotos | - |
| optionalFunc | (args: any) => any | - |
| optionalMessage | Message | - |
| optionalNode | any | - |
| optionalNumber | number | 21 |
| optionalObject | object | - |
| optionalObjectOf | { [key: string]: number; } | - |
| optionalObjectWithShape | { optionalProperty?: string; requiredProperty: number; } | - |
| optionalObjectWithStrictShape | { optionalProperty?: string; requiredProperty: number; } | - |
| optionalString | string | - |
| optionalSymbol | symbol | - |
| optionalUnion | stringnumberMessage | - |
| requiredAny | any | - |
| requiredFunc | (prop: any) => any | - |
Name | Description | Default | Custom |
|---|---|---|---|
| optionalArray | any[] | - | OPTIONALARRAY |
| optionalArrayOf | number[] | - | OPTIONALARRAYOF |
| optionalBool | boolean | - | OPTIONALBOOL |
| optionalElement | any | - | OPTIONALELEMENT |
| optionalElementType | Element | - | OPTIONALELEMENTTYPE |
| optionalEnum | NewsPhotos | - | OPTIONALENUM |
| optionalFunc | (args: any) => any | - | OPTIONALFUNC |
| optionalMessage | Message | - | OPTIONALMESSAGE |
| optionalNode | any | - | OPTIONALNODE |
| optionalNumber | number | 21 | OPTIONALNUMBER |
| optionalObject | object | - | OPTIONALOBJECT |
| optionalObjectOf | { [key: string]: number; } | - | OPTIONALOBJECTOF |
| optionalObjectWithShape | { optionalProperty?: string; requiredProperty: number; } | - | OPTIONALOBJECTWITHSHAPE |
| optionalObjectWithStrictShape | { optionalProperty?: string; requiredProperty: number; } | - | OPTIONALOBJECTWITHSTRICTSHAPE |
| optionalString | string | - | OPTIONALSTRING |
| optionalSymbol | symbol | - | OPTIONALSYMBOL |
| optionalUnion | stringnumberMessage | - | OPTIONALUNION |
| requiredAny | any | - | REQUIREDANY |
| requiredFunc | (prop: any) => any | - | REQUIREDFUNC |