feat(components): new Tags component (#988)

Co-authored-by: Louis-Maxime Piton <[email protected]> Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Vincent Aniort <[email protected]> Co-authored-by: Vincent Ogloblinsky <[email protected]>
Orange-OpenSource · Oct 20, 2022 · a163d5d · a163d5d
1 parent 82da281
commit a163d5d
Show file tree

Hide file tree

Showing 15 changed files with 558 additions and 11 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
  },
  {
  "path": "./dist/css/boosted.css",
- "maxSize": "37.0 kB"
+ "maxSize": "38.0 kB"
  },
  {
  "path": "./dist/css/boosted.min.css",
- "maxSize": "34.0 kB"
+ "maxSize": "35.0 kB"
  },
  {
  "path": "./dist/js/boosted.bundle.js",

diff --git a/scss/_tags.scss b/scss/_tags.scss
@@ -0,0 +1,154 @@
+// stylelint-disable function-disallowed-list
+
+.tag {
+ // scss-docs-start tag-css-vars
+ --#{$prefix}tag-gap: #{$tag-gap};
+ --#{$prefix}tag-padding-x: #{$tag-padding-x};
+ --#{$prefix}tag-padding-y: #{$tag-padding-y};
+ @include rfs($tag-font-size, --#{$prefix}tag-font-size);
+ --#{$prefix}tag-font-shift: #{$tag-font-shift};
+ --#{$prefix}tag-font-weight: #{$tag-font-weight};
+ --#{$prefix}tag-icon-size: #{$tag-icon-size};
+ --#{$prefix}tag-icon-margin-start: #{$tag-icon-margin-start};
+ --#{$prefix}tag-close-size: #{add(var(--#{$prefix}tag-font-size), .375rem)};
+ --#{$prefix}tag-close-margin-end: #{$tag-close-margin-end};
+ --#{$prefix}tag-close-margin-start: #{$tag-close-margin-start};
+ --#{$prefix}tag-border-width: #{$tag-border-width};
+ --#{$prefix}tag-border-radius: #{$tag-border-radius};
+ --#{$prefix}tag-border-color: #{$tag-border-color};
+ --#{$prefix}tag-active-color: #{$tag-active-color};
+ --#{$prefix}tag-active-decoration-color: #{$tag-active-decoration-color};
+ --#{$prefix}tag-disabled-color: #{$tag-disabled-color};
+ --#{$prefix}tag-outline-color: var(--#{$prefix}link-hover-color);
+ // scss-docs-end tag-css-vars
+
+ display: inline-flex;
+ gap: var(--#{$prefix}tag-gap);
+ align-items: center;
+ padding: subtract(var(--#{$prefix}tag-padding-y), calc(var(--#{$prefix}tag-font-shift) * .5)) var(--#{$prefix}tag-padding-x) add(var(--#{$prefix}tag-padding-y), calc(var(--#{$prefix}tag-font-shift) * .5));
+ @include font-size(var(--#{$prefix}tag-font-size));
+ font-weight: var(--#{$prefix}tag-font-weight);
+ line-height: add(var(--#{$prefix}tag-font-size), .125rem);
+ color: inherit;
+ background-color: transparent;
+ border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color);
+ @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius));
+
+ img,
+ svg {
+ width: var(--#{$prefix}tag-icon-size);
+ min-width: var(--#{$prefix}tag-icon-size); // Here to avoid weird behavior on wrap
+ height: var(--#{$prefix}tag-icon-size);
+ margin: add(calc(-.5 * var(--#{$prefix}tag-icon-size)), var(--#{$prefix}tag-font-shift)) 0 calc(-.5 * var(--#{$prefix}tag-icon-size)) var(--#{$prefix}tag-icon-margin-start);
+ }
+
+ .close {
+ position: relative;
+ width: var(--#{$prefix}tag-close-size);
+ min-width: var(--#{$prefix}tag-close-size); // Here to avoid weird behavior on wrap
+ height: var(--#{$prefix}tag-close-size);
+ margin: add(calc(-.5 * var(--#{$prefix}tag-close-size)), var(--#{$prefix}tag-font-shift)) var(--#{$prefix}tag-close-margin-end) calc(-.5 * var(--#{$prefix}tag-close-size)) var(--#{$prefix}tag-close-margin-start);
+ color: inherit;
+ background-color: transparent;
+ border: 0;
+ outline-offset: $outline-offset;
+ @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius));
+
+ &::before {
+ position: absolute;
+ top: calc(-1 * var(--#{$prefix}tag-padding-y));
+ right: calc(-1 * var(--#{$prefix}tag-padding-y));
+ bottom: calc(-1 * var(--#{$prefix}tag-padding-y));
+ left: calc(-1 * var(--#{$prefix}tag-padding-y));
+ content: "";
+ @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius));
+ }
+
+ &::after {
+ display: block;
+ height: 100%;
+ content: "";
+ background-color: currentcolor;
+ mask-image: escape-svg(var(--#{$boosted-prefix}close-icon));
+ mask-repeat: no-repeat;
+ mask-position: 50%;
+ mask-size: subtract(var(--#{$prefix}tag-close-size), .625rem);
+ }
+
+ &:hover,
+ &:active {
+ color: var(--#{$prefix}tag-active-color);
+ background-color: var(--#{$prefix}tag-active-decoration-color);
+ }
+
+ &:focus[data-focus-visible-added] {
+ outline: $outline-width * 1.5 solid var(--#{$prefix}tag-outline-color);
+ outline-offset: $outline-offset;
+ }
+
+ &[disabled] {
+ pointer-events: none;
+ }
+ }
+
+ &[disabled],
+ &.disabled {
+ color: var(--#{$prefix}tag-disabled-color);
+ pointer-events: none;
+ border-color: var(--#{$prefix}tag-disabled-color);
+ }
+}
+
+// stylelint-disable selector-no-qualifying-type
+a.tag,
+button.tag,
+label.tag {
+ color: inherit;
+ text-decoration: none;
+ cursor: pointer;
+ outline-offset: $outline-offset;
+
+ &:hover {
+ border-color: var(--#{$prefix}tag-active-decoration-color);
+ }
+
+ &:focus[data-focus-visible-added] {
+ outline: $outline-width * 1.5 solid var(--#{$prefix}tag-outline-color);
+ outline-offset: $outline-offset;
+ }
+
+ &.active,
+ &:active {
+ color: var(--#{$prefix}tag-active-color);
+ background-color: var(--#{$prefix}tag-active-decoration-color);
+ border-color: var(--#{$prefix}tag-active-decoration-color);
+
+ &[disabled],
+ &.disabled {
+ background-color: var(--#{$prefix}tag-disabled-color);
+ border-color: var(--#{$prefix}tag-disabled-color);
+ }
+ }
+}
+// stylelint-enable selector-no-qualifying-type
+
+.tag-sm {
+ // scss-docs-start tag-sm-css-vars
+ --#{$prefix}tag-padding-x: #{$tag-padding-x-sm};
+ --#{$prefix}tag-padding-y: #{$tag-padding-y-sm};
+ --#{$prefix}tag-font-size: #{$tag-font-size-sm};
+ --#{$prefix}tag-icon-size: #{$tag-icon-size-sm};
+ --#{$prefix}tag-icon-margin-start: #{$tag-icon-margin-start-sm};
+ --#{$prefix}tag-close-margin-end: #{$tag-close-margin-end-sm};
+ --#{$prefix}tag-close-margin-start: #{$tag-close-margin-start-sm};
+ // scss-docs-end tag-sm-css-vars
+}
+
+.tag-dark {
+ // scss-docs-start tag-dark-css-vars
+ --#{$prefix}tag-border-color: #{$tag-border-color-dark};
+ --#{$prefix}tag-active-color: #{$tag-active-color-dark};
+ --#{$prefix}tag-active-decoration-color: #{$tag-active-decoration-color-dark};
+ --#{$prefix}tag-disabled-color: #{$tag-disabled-color-dark};
+ // scss-docs-end tag-dark-css-vars
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -2163,3 +2163,43 @@ $footer-gap: $spacer * .75 !default;
 $footer-gap-xl: $spacer * 1.7 !default;
 // scss-docs-end footer
 // End mod
+
+// Tags
+
+// scss-docs-start tag-variables
+$tag-gap: map-get($spacers, 1) !default;
+$tag-font-shift: $spacer * .1 !default;
+$tag-font-weight: $font-weight-bold !default;
+$tag-border-width: $border-width !default;
+$tag-border-radius: $border-radius-pill !default;
+
+$tag-padding-x: $spacer * .65 !default;
+$tag-padding-y: $spacer * .45 !default;
+$tag-icon-size: $spacer * 1.2 !default;
+$tag-icon-margin-start: -$spacer * .35 !default;
+$tag-close-margin-end: -$spacer * .3 !default;
+$tag-close-margin-start: $spacer * .2 !default;
+$tag-font-size: $font-size-base !default;
+
+$tag-active-color: $white !default;
+$tag-disabled-color: $gray-500 !default;
+$tag-border-color: $gray-500 !default;
+$tag-active-decoration-color: $black !default;
+// scss-docs-end tag-variables
+
+// scss-docs-start tag-sm-variables
+$tag-padding-x-sm: $spacer * .4 !default;
+$tag-padding-y-sm: $spacer * .25 !default;
+$tag-icon-size-sm: $spacer !default;
+$tag-icon-margin-start-sm: -$spacer * .1 !default;
+$tag-close-margin-end-sm: -$spacer * .25 !default;
+$tag-close-margin-start-sm: 0 !default;
+$tag-font-size-sm: $font-size-sm !default;
+// scss-docs-end tag-sm-variables
+
+// scss-docs-start tag-dark-variables
+$tag-active-color-dark: $black !default;
+$tag-disabled-color-dark: $gray-700 !default;
+$tag-border-color-dark: $gray-700 !default;
+$tag-active-decoration-color-dark: $white !default;
+// scss-docs-end tag-dark-variables
diff --git a/scss/boosted.scss b/scss/boosted.scss
@@ -30,6 +30,7 @@
 @import "breadcrumb";
 @import "pagination";
 @import "badge";
+@import "tags";
 @import "alert";
 @import "progress";
 @import "list-group";

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -286,6 +286,11 @@
  border-color: $gray-500;
  outline-color: currentcolor;
  }
+
+ + .tag {
+ outline: $outline-width * 1.5 solid var(--#{$prefix}tag-outline-color);
+ outline-offset: .125rem;
+ }
  }
 
  &:checked {
@@ -306,6 +311,12 @@
  background-color: transparent;
  }
  }
+
+ + .tag {
+ color: var(--bs-tag-active-color);
+ background-color: var(--bs-tag-active-decoration-color);
+ border-color: var(--bs-tag-active-decoration-color);
+ }
  }
 
  &:active + .btn,
@@ -345,6 +356,17 @@
  background-color: transparent;
  border-color: currentcolor;
  }
+
+ + .tag {
+ color: var(--#{$prefix}tag-disabled-color);
+ pointer-events: none;
+ border-color: var(--#{$prefix}tag-disabled-color);
+ }
+
+ &:checked + .tag {
+ color: var(--#{$prefix}tag-active-color);
+ background-color: var(--#{$prefix}tag-disabled-color);
+ }
  // End mod
  }
 

diff --git a/site/content/docs/5.2/about/overview.md b/site/content/docs/5.2/about/overview.md
@@ -29,6 +29,7 @@ Boosted ships with custom accessible components to suit specific needs:
 - [Star rating]({{< docsref "/forms/checks-radios#star-rating" >}})
 - [Stepped process]({{< docsref "/components/stepped-process" >}})
 - [Sticker]({{< docsref "/components/sticker" >}})
+- [Tags]({{< docsref "/components/tags" >}})
 - [Title bars]({{< docsref "/components/title-bars" >}})
 
 ## Bootstrap Team
@@ -47,7 +48,6 @@ With Bootstrap 4, they once again rewrote the project to account for two key arc
 
 Their latest release, Bootstrap 5, focuses on improving v4's codebase with as few major breaking changes as possible. They improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of their tooling.
 
-
 ## Get involved in Bootstrap
 
 Get involved with Bootstrap development by [opening an issue](https:/twbs/bootstrap/issues/new/choose) or submitting a pull request. Read their [contributing guidelines](https:/twbs/bootstrap/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how they develop.