diff --git a/.changeset/fair-feet-know.md b/.changeset/fair-feet-know.md new file mode 100644 index 00000000000..6b304100194 --- /dev/null +++ b/.changeset/fair-feet-know.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Update color variable used in ProgressBar (`state.success` → `bg.successInverse`) diff --git a/docs/content/BorderBox.md b/docs/content/BorderBox.md index 2a72369a085..ecf2bc16c81 100644 --- a/docs/content/BorderBox.md +++ b/docs/content/BorderBox.md @@ -2,8 +2,7 @@ title: BorderBox --- - -BorderBox is a Box component with a border. When no `borderColor` is present, the component defaults to a gray border. +BorderBox is a Box component with a border. When no `borderColor` is present, the component defaults to a primary border. ## Default example @@ -19,10 +18,10 @@ BorderBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. ## Component props -| Prop name | Type | Default | Description | -| :- | :- | :-: | :- | -| borderWidth | String | '1px' | Sets the border, use theme values or provide your own. | -| borderStyle | String | 'solid' | Sets the border style, use theme values or provide your own. | -| borderColor | String | 'gray.2' (from theme) | Sets the border color, use theme values or provide your own. | -| borderRadius | String or Number| 2 (from theme)| Sets the border radius, use theme values or provide your own. | -| boxShadow | String | | Sets box shadow, use theme values or provide your own. | +| Prop name | Type | Default | Description | +| :----------- | :--------------- | :---------------------------: | :------------------------------------------------------------ | +| borderWidth | String | '1px' | Sets the border, use theme values or provide your own. | +| borderStyle | String | 'solid' | Sets the border style, use theme values or provide your own. | +| borderColor | String | 'border.primary' (from theme) | Sets the border color, use theme values or provide your own. | +| borderRadius | String or Number | 2 (from theme) | Sets the border radius, use theme values or provide your own. | +| boxShadow | String | | Sets box shadow, use theme values or provide your own. | diff --git a/docs/content/Box.md b/docs/content/Box.md index ec0d92d401b..ea2b5dd8ac0 100644 --- a/docs/content/Box.md +++ b/docs/content/Box.md @@ -2,17 +2,26 @@ title: Box --- - -The Box component serves as a wrapper component for most layout related needs. Use Box to set values such as `display`, `width`, `height`, and more. See the LAYOUT section of our [System Props](/system-props) documentation for the full list of available props. In practice, this component is used frequently as a wrapper around other components to achieve Box Model related styling. +The Box component serves as a wrapper component for most layout related needs. Use Box to set values such as `display`, `width`, `height`, and more. See the LAYOUT section of our [System Props](/system-props) documentation for the full list of available props. In practice, this component is used frequently as a wrapper around other components to achieve Box Model related styling. ## Default example ```jsx live live - Box can be used to create both inline and - block-level elements, - elements with fixed or responsive width and height, - and more! + Box can be used to create both{' '} + + inline + {' '} + and + + block-level elements, + + + elements with fixed or responsive width and height, + + + and more! + ``` @@ -22,6 +31,6 @@ Box components get the `COMMON`, `LAYOUT`, and `FLEX` categories of system props ## Component props -| Prop name | Type | Default | Description | -| :- | :- | :-: | :- | -| as | String | `div` | sets the HTML tag for the component| +| Prop name | Type | Default | Description | +| :-------- | :----- | :-----: | :---------------------------------- | +| as | String | `div` | sets the HTML tag for the component | diff --git a/docs/content/BranchName.md b/docs/content/BranchName.md index f16cf0aef70..1badc1882a2 100644 --- a/docs/content/BranchName.md +++ b/docs/content/BranchName.md @@ -2,8 +2,7 @@ title: BranchName --- - -BranchName is a label-type component rendered as an `` tag by default with monospace font and blue background. +BranchName is a label-type component rendered as an `` tag by default with monospace font. ## Default example @@ -17,7 +16,7 @@ BranchName components get `COMMON` system props. Read our [System Props](/system ## Component props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| as | String | `` | sets the HTML tag for the component | -| href | String | | a URL to link the component to | +| Name | Type | Default | Description | +| :--- | :----- | :-----: | :---------------------------------- | +| as | String | `` | sets the HTML tag for the component | +| href | String | | a URL to link the component to | diff --git a/docs/content/CircleOcticon.md b/docs/content/CircleOcticon.md index 15acafd2495..c48583735a9 100644 --- a/docs/content/CircleOcticon.md +++ b/docs/content/CircleOcticon.md @@ -2,13 +2,12 @@ title: CircleOcticon --- - CircleOcticon renders any Octicon with a circle background. CircleOcticons are most commonly used to represent the status of a pull request in the comment timeline. ## Default example ```jsx live - + ``` ## System props @@ -17,7 +16,7 @@ CircleOcticon components get `COMMON` system props. Read our [System Props](/sys ## Component props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| icon | Octicon | | Octicon component used in the component | -| size | Number | 32 | used to set the width and height of the component | +| Name | Type | Default | Description | +| :--- | :------ | :-----: | :------------------------------------------------ | +| icon | Octicon | | Octicon component used in the component | +| size | Number | 32 | used to set the width and height of the component | diff --git a/docs/content/Flex.md b/docs/content/Flex.md index 245f917151a..ab342589a41 100644 --- a/docs/content/Flex.md +++ b/docs/content/Flex.md @@ -4,20 +4,20 @@ title: Flex The `Flex` component behaves the same as the `Box` component except that it has `display: flex` set by default. -*Previously, a `Flex.Item` component was used for flex item specific properties; `Box` now contains all those properties and should be used in its place.* +_Previously, a `Flex.Item` component was used for flex item specific properties; `Box` now contains all those properties and should be used in its place._ ## Default example ```jsx live - + Item 1 - + Item 2 - + Item 3 diff --git a/docs/content/Grid.md b/docs/content/Grid.md index ef0ebe0f392..315c2de8b27 100644 --- a/docs/content/Grid.md +++ b/docs/content/Grid.md @@ -8,8 +8,12 @@ Grid is a component that exposes grid system props. See the [CSS Tricks Complete ```jsx live - 1 - 2 + + 1 + + + 2 + ``` diff --git a/docs/content/Label.md b/docs/content/Label.md index c77d3cba59d..40375d4d484 100644 --- a/docs/content/Label.md +++ b/docs/content/Label.md @@ -7,11 +7,11 @@ The Label component is used to add contextual metadata to a design. Visually it ## Default example ```jsx live - + - + @@ -26,9 +26,9 @@ Label components get `COMMON` system props. Read our [System Props](/system-prop ## Component props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| outline | Boolean | | Creates an outline style label | -| variant | String | 'medium' | Can be one of `small`, `medium` (default), `large` or `xl` . -| dropshadow | Boolean | | Adds a dropshadow to the label | -| bg | String | 'gray.5' | Part of the `COMMON` system props, used to change the background of the label. +| Name | Type | Default | Description | +| :--------- | :------ | :--------------------: | :----------------------------------------------------------------------------- | +| outline | Boolean | | Creates an outline style label | +| variant | String | 'medium' | Can be one of `small`, `medium` (default), `large` or `xl` . | +| dropshadow | Boolean | | Adds a dropshadow to the label | +| bg | String | 'label.primary.border' | Part of the `COMMON` system props, used to change the background of the label. | diff --git a/docs/content/LabelGroup.md b/docs/content/LabelGroup.md index abf1788bff1..8f3e62766c9 100644 --- a/docs/content/LabelGroup.md +++ b/docs/content/LabelGroup.md @@ -9,7 +9,7 @@ The LabelGroup component is used to add commonly used margins and wrapping for g ```jsx live - + ``` diff --git a/docs/content/Link.md b/docs/content/Link.md index 424c76ee5e0..106fda6d2e8 100644 --- a/docs/content/Link.md +++ b/docs/content/Link.md @@ -2,7 +2,7 @@ title: Link --- -The Link component styles anchor tags with default blue styling and hover text decoration. `Link` is used for destinations, or moving from one page to another. +The Link component styles anchor tags with default hyperlink color cues and hover text decoration. `Link` is used for destinations, or moving from one page to another. In special cases where you'd like a `