Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update docs #412

Merged
merged 8 commits into from
Aug 30, 2022
Merged

Update docs #412

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
24c8e4a
add docs
Aug 30, 2022
467d2bd
Update src/screens/Heading.js
britt6612 Aug 30, 2022
1546706
add size back in for menu
Aug 30, 2022
f29a38e
add to checkbox for formfield
Aug 30, 2022
4ff707c
update docs
Aug 30, 2022
bfe9240
Update Button.js
britt6612 Aug 30, 2022
b632d7e
update docs
Aug 30, 2022
0f88eaa
Merge branch 'include-latest-changes-docs' of https://github.com/brit…
Aug 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions src/screens/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -683,6 +683,15 @@ const ButtonPage = () => (
</PropertyValue>
</Property>

<Property name="button.active.default.icon">
taysea marked this conversation as resolved.
Show resolved Hide resolved
<Description>
Any specific icon in a active default Button.
</Description>
<PropertyValue type="element">
<Example>{`<Add />`}</Example>
</PropertyValue>
</Property>

<Property name="button.active.primary">
<Description>
Adjustments to the primary Button style when the Button is active.
Expand All @@ -694,6 +703,15 @@ const ButtonPage = () => (
</PropertyValue>
</Property>

<Property name="button.active.primary.icon">
<Description>
Any specific icon in a active primary Button.
</Description>
<PropertyValue type="element">
<Example>{`<Add />`}</Example>
</PropertyValue>
</Property>

<Property name="button.active.secondary">
<Description>
Adjustments to the secondary Button style when the Button is active.
Expand All @@ -705,6 +723,15 @@ const ButtonPage = () => (
</PropertyValue>
</Property>

<Property name="button.active.secondary.icon">
<Description>
Any specific icon in a active secondary Button.
</Description>
<PropertyValue type="element">
<Example>{`<Add />`}</Example>
</PropertyValue>
</Property>

<Property name="button.badge.container.background">
<Description>The background of the badge.</Description>
<PropertyValue type="string">
Expand Down Expand Up @@ -847,6 +874,15 @@ const ButtonPage = () => (
<GenericExtend />
</Property>

<Property name="button.default.icon">
<Description>
Any specific icon in a button default Button.
</Description>
<PropertyValue type="element">
<Example>{`<Add />`}</Example>
</PropertyValue>
</Property>

<Property name="button.default.padding.horizontal">
<Description>
The horizontal padding for a default button.
Expand Down Expand Up @@ -903,6 +939,15 @@ const ButtonPage = () => (
</PropertyValue>
</Property>

<Property name="button.disabled.default.icon">
taysea marked this conversation as resolved.
Show resolved Hide resolved
<Description>
Any specific icon in a disabled default Button.
</Description>
<PropertyValue type="element">
<Example>{`<Add />`}</Example>
</PropertyValue>
</Property>

<Property name="button.disabled.primary">
<Description>
Adjustments to the primary Button style when the Button is disabled.
Expand All @@ -914,6 +959,15 @@ const ButtonPage = () => (
</PropertyValue>
</Property>

<Property name="button.disabled.primary.icon">
taysea marked this conversation as resolved.
Show resolved Hide resolved
<Description>
Any specific icon in a disabled primary Button.
</Description>
<PropertyValue type="element">
<Example>{`<Add />`}</Example>
</PropertyValue>
</Property>

<Property name="button.disabled.secondary">
<Description>
Adjustments to the secondary Button style when the Button is
Expand All @@ -925,6 +979,15 @@ const ButtonPage = () => (
</PropertyValue>
</Property>

<Property name="button.disabled.secondary.icon">
taysea marked this conversation as resolved.
Show resolved Hide resolved
<Description>
Any specific icon in a disabled secondary Button.
</Description>
<PropertyValue type="element">
<Example>{`<Add />`}</Example>
</PropertyValue>
</Property>

<Property name="button.hover.color">
<Description>Label color when the button is hovered.</Description>
<GenericColor />
Expand Down Expand Up @@ -958,6 +1021,15 @@ const ButtonPage = () => (
</PropertyValue>
</Property>

<Property name="button.hover.default.icon">
<Description>
Any specific icon in a hover default Button.
</Description>
<PropertyValue type="element">
<Example>{`<Add />`}</Example>
</PropertyValue>
</Property>

<Property name="button.hover.primary">
<Description>
Adjustments to the primary Button style when the Button is hovered.
Expand All @@ -969,6 +1041,15 @@ const ButtonPage = () => (
</PropertyValue>
</Property>

<Property name="button.hover.primary.icon">
<Description>
Any specific icon in a hover primary Button.
</Description>
<PropertyValue type="element">
<Example>{`<Add />`}</Example>
</PropertyValue>
</Property>

<Property name="button.hover.secondary">
<Description>
Adjustments to the secondary Button style when the Button is
Expand All @@ -980,6 +1061,15 @@ const ButtonPage = () => (
</PropertyValue>
</Property>

<Property name="button.hover.secondary.icon">
<Description>
Any specific icon in a hover secondary Button.
</Description>
<PropertyValue type="element">
<Example>{`<Add />`}</Example>
</PropertyValue>
</Property>

<Property name="button.padding.horizontal">
<Description>The horizontal padding.</Description>
<PropertyValue type="string">
Expand Down Expand Up @@ -1023,6 +1113,15 @@ const ButtonPage = () => (
<GenericColor />
</Property>

<Property name="button.primary.icon">
<Description>
Any specific icon in a button primary Button.
</Description>
<PropertyValue type="element">
<Example>{`<Add />`}</Example>
</PropertyValue>
</Property>

<Property name="button.primary.font.weight">
<Description>
The weight of the text label for primary buttons.
Expand Down Expand Up @@ -1083,6 +1182,15 @@ const ButtonPage = () => (
<GenericColor />
</Property>

<Property name="button.secondary.icon">
<Description>
Any specific icon in a button secondary Button.
</Description>
<PropertyValue type="element">
<Example>{`<Add />`}</Example>
</PropertyValue>
</Property>

<Property name="button.secondary.font.weight">
<Description>
The weight of the text label for secondary buttons. Only relevant
Expand Down
6 changes: 6 additions & 0 deletions src/screens/FormField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
GenericA11yTitle,
GenericBool,
GenericMargin,
GenericPad,
SizesXsmallXlarge,
} from '../utils/genericPropExamples';

Expand Down Expand Up @@ -286,6 +287,11 @@ const FormFieldPage = () => (
</PropertyValue>
</Property>

<Property name="formField.checkBox.pad">
<Description>The CheckBox pad when wrapped in FormField.</Description>
<GenericPad />
</Property>

jcfilben marked this conversation as resolved.
Show resolved Hide resolved
<Property name="formField.content.margin">
<Description>The margin of the FormField content.</Description>
<GenericMargin />
Expand Down
13 changes: 13 additions & 0 deletions src/screens/Heading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,19 @@ const HeadingPage = () => (
</Description>
<GenericBoolFalse />
</Property>

<Property name="weight">
<Description>Font weight</Description>
<PropertyValue type="string">
<Example>"normal"</Example>
britt6612 marked this conversation as resolved.
Show resolved Hide resolved
<Example>"bold"</Example>
<Example>"lighter"</Example>
<Example>"bolder"</Example>
</PropertyValue>
<PropertyValue type="number">
<Example>300</Example>
</PropertyValue>
</Property>
</Properties>

<ThemeDoc>
Expand Down
70 changes: 47 additions & 23 deletions src/screens/Menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,20 +302,6 @@ const MenuPage = () => (
</PropertyValue>
</Property>

<Property name="menu.icons.color">
<Description>The color to use for the icon.</Description>
<PropertyValue type="string">
<Description>A hex, name, or rgb value.</Description>
<Example defaultValue>"control"</Example>
</PropertyValue>
<PropertyValue type="object">
<Description>
An object with a color for dark and light modes.
</Description>
<Example>{`{ dark: "string", light: "string" }`}</Example>
</PropertyValue>
</Property>

<Property name="menu.background">
<Description>
The color for the background of the menu Drop when it is open.
Expand Down Expand Up @@ -373,15 +359,6 @@ const MenuPage = () => (
</PropertyValue>
</Property>

<Property name="menu.group.separator.size">
<Description>
The thickness of the separator line between grouped items.
</Description>
<PropertyValue defaultValue type="string">
<Example>"xsmall"</Example>
</PropertyValue>
</Property>

taysea marked this conversation as resolved.
Show resolved Hide resolved
<Property name="menu.group.separator.pad">
<Description>
The padding around the separator line between grouped items.
Expand All @@ -399,6 +376,20 @@ const MenuPage = () => (
</PropertyValue>
</Property>

<Property name="menu.icons.color">
<Description>The color to use for the icon.</Description>
<PropertyValue type="string">
<Description>A hex, name, or rgb value.</Description>
<Example defaultValue>"control"</Example>
</PropertyValue>
<PropertyValue type="object">
<Description>
An object with a color for dark and light modes.
</Description>
<Example>{`{ dark: "string", light: "string" }`}</Example>
</PropertyValue>
</Property>

<Property name="menu.icons.down">
<Description>
The icon to show to the right of the label when Menu is closed.
Expand All @@ -416,6 +407,39 @@ const MenuPage = () => (
<Example>{`<FormUp />`}</Example>
</PropertyValue>
</Property>

<Property name="menu.item">
<Description>Any valid Button props for the menu items.</Description>
<PropertyValue type="object">
<Example>{`{ align: 'start' }`}</Example>
</PropertyValue>
</Property>

<Property name="menu.item.gap">
<Description>The gap between the label and icon.</Description>
<PropertyValue type="string">
<Description>
T-shirt sizing based off the theme or a specific size in px, em,
etc.
</Description>
<Example>"xxsmall"</Example>
</PropertyValue>
</Property>

<Property name="menu.item.justify">
<Description>
How to align the contents within the button.
</Description>
<PropertyValue type="string">
<Example>"around"</Example>
<Example>"between"</Example>
<Example>"center"</Example>
<Example>"end"</Example>
<Example>"evenly"</Example>
<Example>"start"</Example>
<Example>"stretch"</Example>
</PropertyValue>
</Property>
</ThemeDoc>
</ComponentDoc>
</Page>
Expand Down