diff --git a/.changeset/large-buttons-ring.md b/.changeset/large-buttons-ring.md index 814490cfb..5efcb6bda 100644 --- a/.changeset/large-buttons-ring.md +++ b/.changeset/large-buttons-ring.md @@ -1,6 +1,6 @@ --- -'@microsoft/atlas-site': patch -'@microsoft/atlas-css': patch +'@microsoft/atlas-site': minor +'@microsoft/atlas-css': minor --- -Update badge styles to handle icon only badges and add multiple sizes for icon badges +Update badge styles to handle icon only badges. Add new extra large badge size. diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss index 44023619e..7c43faed3 100644 --- a/css/src/components/badge.scss +++ b/css/src/components/badge.scss @@ -12,13 +12,6 @@ $badge-font-weight: $weight-semibold !default; $badge-icon-size: 1.3em !default; -$badge-icon-font-size-xs: 1.2em !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-icon-with-text-font-size: 0.875em !default; - $badge-border-width: $border-width !default; $badge-border-radius: $border-radius-rounded !default; diff --git a/site/src/components/badge.md b/site/src/components/badge.md index e774779c2..d57e497c2 100644 --- a/site/src/components/badge.md +++ b/site/src/components/badge.md @@ -2,7 +2,6 @@ title: Badge description: The Badge component in the Atlas Design System template: standard -figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Fm%3Dauto%26node-id%3D3381-10722%26t%3DZhpJOvxIFDBwfkR7-1 classType: Component classPrefixes: - badge @@ -101,10 +100,10 @@ Badges can include icons and text. To do this, nest the [icon component](./icon. ### Badge with Icon only -Badges with only icons, can be used with all badge sizes +Badges with only icons, can be used with all badge sizes. If including an icon is the only child of the element, ensure that `aria-label` is added to the badge for accessibility. ```html - + - + - + - +