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 badge component to have icon only badges #716

Merged
merged 17 commits into from
Nov 11, 2024
Merged

Update badge component to have icon only badges #716

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
f7aa789
Add badge-icon
jim-benson Nov 6, 2024
6a35c12
add changeset
jim-benson Nov 6, 2024
279f1c6
fix linting
jim-benson Nov 6, 2024
a05f205
default no border
jim-benson Nov 6, 2024
7b24f1d
updated styles and description
jim-benson Nov 8, 2024
43e0ae0
fix lint errors
jim-benson Nov 8, 2024
197ee72
nest icon sizes in has selector
jim-benson Nov 8, 2024
ba9511e
few modifications to try and avoid icon specific rules
wibjorn Nov 8, 2024
e33869a
Update cheangeset and descriptions
jim-benson Nov 8, 2024
1793ff7
Add acessibility for icon only and remove unused vars
jim-benson Nov 9, 2024
2acc20d
add role for accessibility
jim-benson Nov 11, 2024
bc77a6d
change from span to div
jim-benson Nov 11, 2024
4d18de8
update aria role
jim-benson Nov 11, 2024
f7dd335
update description
jim-benson Nov 11, 2024
263f62d
update description
jim-benson Nov 11, 2024
2492e72
fix border
jim-benson Nov 11, 2024
49631e1
restore border
jim-benson Nov 11, 2024
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
6 changes: 6 additions & 0 deletions .changeset/large-buttons-ring.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@microsoft/atlas-site': patch
wibjorn marked this conversation as resolved.
Show resolved Hide resolved
'@microsoft/atlas-css': patch
wibjorn marked this conversation as resolved.
Show resolved Hide resolved
---

Add badge-icon css styles
30 changes: 28 additions & 2 deletions css/src/components/badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@ $badge-font-size-sm: $font-size-9 !default;
$badge-font-size-lg: $font-size-7 !default;
wibjorn marked this conversation as resolved.
Show resolved Hide resolved
$badge-font-weight: $weight-semibold !default;

$badge-icon-font-size: 0.875em !default;
$badge-icon-font-size-xs: 1.5em !default;
$badge-icon-font-size-sm: 2.5em !default;
$badge-icon-font-size: 3.5em !default;
$badge-icon-font-size-lg: 4.5em !default;

$badge-with-icon-font-size: 0.875em !default;

$badge-border-width: $border-width !default;
$badge-border-radius: $border-radius-rounded !default;
Expand Down Expand Up @@ -72,7 +77,16 @@ $badge-border-radius: $border-radius-rounded !default;
}

.icon {
font-size: $badge-icon-font-size;
font-size: $badge-with-icon-font-size;
}

&:has(.icon:only-child) {
padding: 0;
border: none;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think border: none; should be removed. I think this is the desired stated for these in the high contrast theme:

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This also means the the default badges will have a border:

image

Which if not desired can always be changed to use badge-clear.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated


.icon {
font-size: $badge-icon-font-size;
}
}

// Sizes
Expand All @@ -84,4 +98,16 @@ $badge-border-radius: $border-radius-rounded !default;
&.badge-lg {
font-size: $badge-font-size-lg;
}

&.icon-xs {
font-size: $badge-icon-font-size-xs;
}

&.icon-sm {
font-size: $badge-icon-font-size-sm;
}

&.icon-lg {
font-size: $badge-icon-font-size-lg;
}
}
50 changes: 49 additions & 1 deletion site/src/components/badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ By default, badges are secondary badges.

### Badge with icon

Badges can include icons. To do this, nest the [icon component](./icon.md) inside a badge.
Badges can include icons and text. To do this, nest the [icon component](./icon.md) inside a badge.

```html
<span class="badge">
Expand All @@ -59,3 +59,51 @@ Badges can include icons. To do this, nest the [icon component](./icon.md) insid
<span>Badge</span>
</span>
```

### Badge Icon

Badges with only icons. To do this, the following classes are available for resizing: `icon-xs`, `icon-sm`, `icon-lg`.
BenDMyers marked this conversation as resolved.
Show resolved Hide resolved

```html
<span class="badge badge-success">
<span class="icon icon-xs" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
fill="white"
/>
</svg>
</span>
</span>
<span class="badge badge-primary">
<span class="icon icon-sm" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
fill="white"
/>
</svg>
</span>
</span>
<span class="badge badge-info">
<span class="icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
fill="white"
/>
</svg>
</span>
</span>
<span class="badge badge-warning">
<span class="icon icon-lg" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
fill="white"
/>
</svg>
</span>
</span>
</span>
```
Loading