primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-04 12:22:17 +03:00
Code Issues Projects Releases Wiki Activity

Update Counter

Browse Source
This commit is contained in:
simurai 2020-10-20 16:58:24 +09:00
parent 5ecfb379bf
commit 0283baed1f
3 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
MIGRATING.md
View File

@ -25,6 +25,13 @@ Most components don't need to be updated and should work without making changes.
`.Label--purple` | n/a
`.Label--pink` | n/a
### Counters
[`v15`](https://primer.style/css/components/labels#counters) | `v16`
--- | ---
`.Counter--gray` | `.Counter--primary`
`.Counter--gray-light` | `.Counter--secondary`
## Utility classes
### Text

12
docs/content/components/labels.md
View File

@ -150,12 +150,18 @@ Use `State--small` for a state label with reduced padding a smaller font size. T
## Counters
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, the `Counter--gray-light` with a lighter text color, and `Counter--gray` with a dark-gray background and inverse white text. When a counter is empty, its visibility will be hidden.
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations:
1. the default `Counter`,
2. the `Counter--primary` with a stronger background color
3. and `Counter--secondary` with a more subtler text color.
Note: When a counter is empty, its visibility will be hidden.
```html live
<span class="Counter mr-1">1</span>
<span class="Counter mr-1 Counter--gray-light">23</span>
<span class="Counter mr-1 Counter--gray">456</span>
<span class="Counter mr-1 Counter--primary">23</span>
<span class="Counter mr-1 Counter--secondary">456</span>
```
Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation).

21
src/labels/counters.scss
View File

@ -25,12 +25,25 @@
}
}
.Counter--primary {
color: var(--color-counter-primary-text);
background-color: var(--color-counter-primary-bg);
}
.Counter--secondary {
color: var(--color-counter-secondary-text);
}
//
// ------------------------ Deprecated ------------------------
// Some might get replaced at some point. If possible, use functional classes.
//
.Counter--gray-light {
color: var(--color-text-tertiary);
color: var(--color-counter-secondary-text);
}
.Counter--gray {
color: var(--color-text-inverse);
// stylelint-disable-next-line primer/colors
background-color: var(--color-auto-gray-5);
color: var(--color-counter-primary-text);
background-color: var(--color-counter-primary-bg);
}