diff --git a/.changeset/breezy-comics-attend.md b/.changeset/breezy-comics-attend.md new file mode 100644 index 0000000000..d2e470057e --- /dev/null +++ b/.changeset/breezy-comics-attend.md @@ -0,0 +1,10 @@ +--- +'@primer/css': major +--- + +## Removed DiffStat component + +- the diffStat component is removed from primer/css +- the component is very specific to this use-case, it is not generic enough to be part of the primer design system and was thus chosen for removal +- the component will be added to the github codebase directly so that it is still available +- if you are working within github.com you should be ale to use diffStat just like before. On other projects you will need to copy the diffStat code and add it to your codebase \ No newline at end of file diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md index 7246cb5071..24645699d1 100644 --- a/docs/content/components/labels.md +++ b/docs/content/components/labels.md @@ -99,26 +99,3 @@ If an issue label needs to be bigger, add the `.IssueLabel--big` modifier. help wanted 🚂 deploy: train ``` - -## Diffstat - -Diffstats show how many deletions or additions a diff has. It's typically a row of 5 blocks that get colored with green or red. - -```html live - - 6 - - -``` - -Use the `color-fg-success` and `color-fg-danger` utilities to add additional information about the size of the diff. - -```html live - - +7 - −2 - - - - -``` diff --git a/docs/content/stickersheet/labels.md b/docs/content/stickersheet/labels.md index 1f13e6df47..b603afe3bf 100644 --- a/docs/content/stickersheet/labels.md +++ b/docs/content/stickersheet/labels.md @@ -128,22 +128,3 @@ The base label component styles the t 456 1.5K ``` - -### Diffstat - -```html live - - 6 - - - -
- - - +7 - −2 - - - - -``` diff --git a/docs/src/stories/components/Label/LabelDiffstat.stories.jsx b/docs/src/stories/components/Label/LabelDiffstat.stories.jsx deleted file mode 100644 index 75fe64a51c..0000000000 --- a/docs/src/stories/components/Label/LabelDiffstat.stories.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react' - -export default { - title: 'Components/Label/Diffstat', - excludeStories: ['LabelDiffstatTemplate'], - argTypes: { - diffValueIntent: { - options: [0, 1, 2], // iterator - mapping: ['', 'color-fg-success', 'color-fg-danger'], // values - control: { - type: 'select', - labels: ['default', 'success', 'danger'] // public labels - }, - table: { - category: 'CSS' - } - }, - diffValue: { - name: 'diffValue', - type: 'string', - description: '7', - table: { - category: 'HTML' - } - } - } -} - -// build every component case here in the template (private api) -export const LabelDiffstatTemplate = ({diffValue, diffValueIntent}) => ( - - {diffValueIntent === 'color-fg-success' && +{diffValue}} - {diffValueIntent === 'color-fg-danger' && -{diffValue}} - {diffValueIntent === '' && diffValue} - - - - - -) - -// create a "playground" demo page that may set some defaults and allow story to access component controls -export const Playground = LabelDiffstatTemplate.bind({}) -Playground.args = { - diffValue: '7', - diffValueIntent: '' -} diff --git a/src/labels/diffstat.scss b/src/labels/diffstat.scss deleted file mode 100644 index 0a69ed88ca..0000000000 --- a/src/labels/diffstat.scss +++ /dev/null @@ -1,37 +0,0 @@ -// diffstat -// -// Green/red blocks showing additions and deletions - -.diffstat { - font-size: $h6-size; - font-weight: $font-weight-bold; - color: var(--color-fg-muted); - white-space: nowrap; - cursor: default; -} - -.diffstat-block-deleted, -.diffstat-block-added, -.diffstat-block-neutral { - display: inline-block; - width: $spacer-2; - height: $spacer-2; - // stylelint-disable-next-line primer/spacing - margin-left: 1px; - outline-offset: -1px; // Support Firefox custom colors -} - -.diffstat-block-deleted { - background-color: var(--color-danger-emphasis); - outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors -} - -.diffstat-block-added { - background-color: var(--color-diffstat-addition-bg); - outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors -} - -.diffstat-block-neutral { - background-color: var(--color-neutral-muted); - outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors -} diff --git a/src/labels/index.scss b/src/labels/index.scss index 2e33e89650..041a7c6b88 100644 --- a/src/labels/index.scss +++ b/src/labels/index.scss @@ -4,4 +4,3 @@ @import './labels.scss'; @import './states.scss'; @import './counters.scss'; -@import './diffstat.scss';