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 4 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
33 changes: 31 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: 2.5em !default;
$badge-icon-font-size-sm: 3.5em !default;
$badge-icon-font-size: 4.5em !default;
$badge-icon-font-size-lg: 5.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 @@ -71,10 +76,34 @@ $badge-border-radius: $border-radius-rounded !default;
}
}

.icon {
&.badge-icon {
wibjorn marked this conversation as resolved.
Show resolved Hide resolved
padding: 0;
border: none;
font-size: $badge-icon-font-size;
}

&.badge-icon-xs {
wibjorn marked this conversation as resolved.
Show resolved Hide resolved
padding: 0;
border: none;
font-size: $badge-icon-font-size-xs;
}

&.badge-icon-sm {
padding: 0;
wibjorn marked this conversation as resolved.
Show resolved Hide resolved
border: none;
font-size: $badge-icon-font-size-sm;
}

&.badge-icon-lg {
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

font-size: $badge-icon-font-size-lg;
}

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

// Sizes

&.badge-sm {
Expand Down
45 changes: 44 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,46 @@ 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, nest the [icon component](./icon.md) inside a badge.
wibjorn marked this conversation as resolved.
Show resolved Hide resolved

```html
<span class="badge badge-icon-xs badge-success">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
wibjorn marked this conversation as resolved.
Show resolved Hide resolved
<path
d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
/>
</svg>
</span>
</span>
<span class="badge badge-icon-sm badge-primary">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
<path
d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
/>
</svg>
</span>
</span>
<span class="badge badge-icon badge-info">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
<path
d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
/>
</svg>
</span>
</span>
<span class="badge badge-icon-lg badge-danger">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
<path
d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
/>
</svg>
</span>
</span>
```
Loading