Skip to content

Commit

Permalink
State management + accessibility concerns
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton
louismaximepiton committed Feb 16, 2022
1 parent 1e19442 commit 78fdae3
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 176 deletions.
191 changes: 27 additions & 164 deletions scss/_tag.scss
View file
Original file line number Diff line number Diff line change
@@ -1,153 +1,3 @@
// .tag {
// display: inline-flex;
// gap: $tag-gap;
// align-items: center;
// padding: add($tag-padding-y, .125rem) $tag-padding-x add($tag-padding-y, .25rem); // @include button-size(add($tag-padding-y, .1875rem), $tag-padding-x, $tag-font-size, 0, $tag-line-height, 0);
// font-size: $tag-font-size;
// font-weight: $font-weight-bold;
// line-height: $tag-line-height;
// color: inherit;
// vertical-align: bottom; // To avoid some align issues in some cases
// cursor: if($enable-button-pointers, pointer, null);
// background-color: transparent;
// border: $border-width solid $tag-border-color;
// @include border-radius($tag-border-radius, $tag-border-radius);

// svg,
// .remove {
// width: $tag-icon-size;
// height: $tag-icon-size;
// margin-bottom: -$tag-icon-shift;
// }

// &:hover {
// border-color: currentColor;
// }

// &:active,
// &.active,
// &:focus,
// &.focus {
// color: $tag-active-color;
// background-color: $tag-active-decoration-color;
// border-color: $tag-active-decoration-color;
// outline: $outline-width solid $black;
// outline-offset: map-get($spacers, 1);

// .remove {
// @include tag-remove($tag-active-color);
// }
// }

// &:disabled,
// &.disabled,
// &[disabled] {
// color: $tag-disabled-color;
// pointer-events: none;
// border-color: $tag-disabled-color;

// .remove {
// @include tag-remove($tag-disabled-color);
// }
// }
// }

// .tag-icon,
// .tag-remove {
// padding: $tag-padding-y $tag-padding-x add($tag-padding-y, $tag-icon-shift);
// }

// .tag-icon { // Useless atm but useful in some user cases
// padding-left: subtract($tag-padding-x, .4375rem);
// }

// .tag-remove {
// padding-right: subtract($tag-padding-x, .4375rem);

// .remove {
// margin-left: .1875rem;
// background: no-repeat center/subtract($tag-icon-size, $tag-padding-remove-icon * 2);
// border-color: transparent;
// @include tag-remove($black);
// @include border-radius($tag-border-radius, $tag-border-radius);

// &:hover,
// &:focus {
// background-color: $tag-active-decoration-color;
// @include tag-remove($white);
// }
// }
// }

// .tag-sm {
// padding: add($tag-padding-y-sm, .0625rem) $tag-padding-x-sm add($tag-padding-y-sm, .1875rem);
// font-size: $tag-font-size-sm;
// line-height: $tag-line-height-sm;

// svg,
// .remove {
// width: $tag-icon-size-sm;
// height: $tag-icon-size-sm;
// }

// &.tag-icon,
// &.tag-remove {
// padding: $tag-padding-y-sm $tag-padding-x-sm add($tag-padding-y-sm, .125rem);
// }

// &.tag-icon {
// padding-left: subtract($tag-padding-x-sm, .125rem);
// }

// &.tag-remove {
// padding-right: subtract($tag-padding-x-sm, .3125rem);

// .remove {
// margin-left: 0;
// background-size: subtract($tag-icon-size-sm, $tag-padding-remove-icon * 2);
// }
// }
// }

// .tag-dark {
// border-color: $tag-border-color-dark;

// &:active,
// &.active,
// &:focus,
// &.focus {
// color: $tag-active-color-dark;
// background-color: $tag-active-decoration-color-dark;
// border-color: $tag-active-decoration-color-dark;
// outline-color: $white;

// .remove {
// @include tag-remove($tag-active-color-dark);
// }
// }

// &:disabled,
// &.disabled,
// &[disabled] {
// color: $tag-disabled-color-dark;
// border-color: $tag-disabled-color-dark;

// .remove {
// @include tag-remove($tag-disabled-color-dark);
// }
// }

// .remove{
// @include tag-remove($white);

// &:hover,
// &:focus {
// background-color: $tag-active-decoration-color-dark;
// @include tag-remove($tag-active-color-dark);
// }
// }
// }

.tag {
--#{$variable-prefix}tag-height: 2.5rem;
--#{$variable-prefix}tag-padding-x: #{$tag-padding-x};
Expand All @@ -172,40 +22,55 @@
margin-left: var(--#{$variable-prefix}tag-icon-margin-start);
}

> * {
> button {
display: flex;
flex-direction: row;
gap: $tag-gap;
align-items: center;
padding: 0 var(--#{$variable-prefix}tag-padding-x) var(--#{$variable-prefix}tag-icon-shift);
font-size: var(--#{$variable-prefix}tag-font-size);
font-weight: $font-weight-bold;
line-height: $tag-line-height;
line-height: $line-height-base;
color: inherit;
background-color: transparent;
border: $border-width solid var(--#{$variable-prefix}tag-border-color);
outline-offset: $spacer;
@include transition($transition-focus);

&:hover {
border-color: var(--#{$variable-prefix}tag-active-decoration-color);
}

&:focus {
outline: $border-width solid var(--#{$variable-prefix}tag-active-decoration-color);
outline-offset: .25rem;
}

&:hover,
&:focus,
&:active {
z-index: 0;
color: var(--#{$variable-prefix}tag-active-color);
background-color: var(--#{$variable-prefix}tag-active-decoration-color);
border-color: var(--#{$variable-prefix}tag-active-decoration-color);
}

&:hover,
&:focus,
&:active {
z-index: 0;
}

&:not(:first-child) {
margin-left: -$border-width;
}
}

&[disabled] {
color: var(--#{$variable-prefix}tag-disabled-color);
pointer-events: none;
border-color: var(--#{$variable-prefix}tag-disabled-color);
[disabled] {
color: var(--#{$variable-prefix}tag-disabled-color);
pointer-events: none;
border-color: var(--#{$variable-prefix}tag-disabled-color);

&.remove {
@include tag-remove($tag-disabled-color);
}
&.remove {
@include tag-remove($tag-disabled-color);
}
}

Expand All @@ -217,7 +82,6 @@
width: var(--#{$variable-prefix}tag-remove-size);
@include tag-remove($black);

&:hover,
&:focus,
&:active {
@include tag-remove($tag-active-color);
Expand Down Expand Up @@ -253,14 +117,13 @@
--#{$variable-prefix}tag-active-decoration-color: #{$tag-active-decoration-color-dark};
--#{$variable-prefix}tag-disabled-color: #{$tag-disabled-color-dark};

> [disabled].remove {
[disabled].remove {
@include tag-remove($tag-disabled-color-dark);
}

.remove {
@include tag-remove($white);

&:hover,
&:focus,
&:active {
@include tag-remove($tag-active-color-dark);
Expand Down
9 changes: 2 additions & 7 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1537,22 +1537,17 @@ $badge-border-radius: $border-radius !default;
// Tags

// scss-docs-start tag-variables
$tag-font-size-sm: $font-size-sm !default;
$tag-line-height-sm: $line-height-sm !default;
$tag-font-size: $font-size-base !default;
$tag-line-height: $line-height-base !default;

$tag-padding-remove-icon: .1875rem !default;
$tag-padding-x: .8125rem !default;
$tag-padding-y: .375rem !default;
$tag-gap: map-get($spacers, 1) !default;
$tag-icon-size: 1.5rem !default;
$tag-icon-shift: .125rem !default;
$tag-border-radius: 2rem !default;
$tag-font-size: $font-size-base !default;

$tag-padding-x-sm: .5rem !default;
$tag-padding-y-sm: .1875rem !default;
$tag-icon-size-sm: 1.25rem !default;
$tag-font-size-sm: $font-size-sm !default;

$tag-active-color: $white !default;
$tag-disabled-color: $gray-500 !default;
Expand Down
10 changes: 5 additions & 5 deletions site/content/docs/5.1/components/tags.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ A tag is basically a rounded button that can contain some text, an icon and a cl
</div>
<div class="tag">
<button>
<svg fill="currentColor" aria-hidden="true" focusable="false">
<svg fill="currentColor" aria-hidden="true" focusable="false" width="1.5rem" height="1.5rem">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
</svg>
Label
Expand All @@ -30,7 +30,7 @@ A tag is basically a rounded button that can contain some text, an icon and a cl
</div>
<div class="tag tag-remove">
<button>
<svg fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
<svg fill="currentColor" aria-hidden="true" focusable="false" width="1.5rem" height="1.5rem">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
</svg>
Label
Expand All @@ -48,7 +48,7 @@ To add icon to your tag, add `.tag-icon`.
{{< example class="d-flex gap-2" >}}
<div class="tag">
<button>
<svg fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
<svg fill="currentColor" aria-hidden="true" focusable="false" width="1.5rem" height="1.5rem">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
</svg>
Label
Expand Down Expand Up @@ -76,7 +76,7 @@ Tags come with a dark variant : `.tag-dark`.
{{< example class="bg-dark d-flex gap-2" >}}
<div class="tag tag-dark tag-remove">
<button>
<svg fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible" width="1.5rem" height="1.5rem">
<svg fill="currentColor" aria-hidden="true" focusable="false" width="1.5rem" height="1.5rem">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
</svg>
Label
Expand All @@ -97,7 +97,7 @@ Tags come with a disabled state. Add `.disabled` or even the attribute `disabled
</div>
<div class="tag tag-remove">
<button disabled>
<svg fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
<svg fill="currentColor" aria-hidden="true" focusable="false" width="1.5rem" height="1.5rem">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
</svg>
Label
Expand Down

0 comments on commit 78fdae3

Please sign in to comment.