refactor(MultiSelect): improve tags close button

Author: mrholek

js/src/multi-select.js

@@ -611,9 +611,8 @@ class MultiSelect extends BaseComponent {
     tag.innerHTML = text
 
     const closeBtn = document.createElement('button')
-    closeBtn.classList.add(CLASS_NAME_TAG_DELETE, 'text-medium-emphasis')
+    closeBtn.classList.add(CLASS_NAME_TAG_DELETE)
     closeBtn.setAttribute('aria-label', 'Close')
-    closeBtn.innerHTML = '<span aria-hidden="true">&times;</span>'
 
     tag.append(closeBtn)
 

scss/_variables.scss

@@ -1218,6 +1218,16 @@ $form-multi-select-tag-border-radius-lg:  .375rem !default;
 $form-multi-select-tag-padding-y:         .0625rem !default;
 $form-multi-select-tag-padding-x:         .5rem !default;
 
+$form-multi-select-tag-delete-width:        .75rem !default;
+$form-multi-select-tag-delete-height:       .75rem !default;
+$form-multi-select-tag-delete-color:        $medium-emphasis !default;
+$form-multi-select-tag-delete-bg:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$form-multi-select-tag-delete-hover-color:  $high-emphasis !default;
+$form-multi-select-tag-delete-hover-bg:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-hover-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$form-multi-select-tag-delete-focus-color:  $high-emphasis !default;
+$form-multi-select-tag-delete-focus-bg:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-focus-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$form-multi-select-tag-delete-bg-size:      .5rem !default;
+
 $form-multi-select-buttons-padding-y:     .375rem !default;
 $form-multi-select-buttons-padding-x:     .375rem !default;
 

scss/forms/_form-multi-select.scss

@@ -100,6 +100,16 @@
   --#{$prefix}form-multi-select-tag-border: #{$form-multi-select-tag-border-width} solid var(--#{$prefix}form-multi-select-tag-border-color);
   --#{$prefix}form-multi-select-tag-border-radius: #{$form-multi-select-tag-border-radius};
 
+  --#{$prefix}form-multi-select-tag-delete-width: #{$form-multi-select-tag-delete-width};
+  --#{$prefix}form-multi-select-tag-delete-height: #{$form-multi-select-tag-delete-height};
+  --#{$prefix}form-multi-select-tag-delete-color: #{$form-multi-select-tag-delete-color};
+  --#{$prefix}form-multi-select-tag-delete-bg: #{$form-multi-select-tag-delete-bg};
+  --#{$prefix}form-multi-select-tag-delete-hover-color: #{$form-multi-select-tag-delete-hover-color};
+  --#{$prefix}form-multi-select-tag-delete-hover-bg: #{$form-multi-select-tag-delete-hover-bg};
+  --#{$prefix}form-multi-select-tag-delete-focus-color: #{$form-multi-select-tag-delete-focus-color};
+  --#{$prefix}form-multi-select-tag-delete-focus-bg: #{$form-multi-select-tag-delete-focus-bg};
+  --#{$prefix}form-multi-select-tag-delete-bg-size: #{$form-multi-select-tag-delete-bg-size};
+
   --#{$prefix}form-multi-select-selection-tags-gap: #{$form-multi-select-selection-tags-gap};
   --#{$prefix}form-multi-select-selection-tags-padding-y: #{$form-multi-select-selection-tags-padding-y};
   --#{$prefix}form-multi-select-selection-tags-padding-x: #{$form-multi-select-selection-tags-padding-x};
@@ -124,7 +134,6 @@ select.form-multi-select {
 }
 
 .form-multi-select-input-group {
-  // position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
@@ -268,16 +277,27 @@ select.form-multi-select {
 }
 
 .form-multi-select-tag {
+  display: flex;
+  align-items: center;
   padding: var(--#{$prefix}form-multi-select-tag-padding-y) var(--#{$prefix}form-multi-select-tag-padding-x);
   background-color: var(--#{$prefix}form-multi-select-tag-bg);
   border: var(--#{$prefix}form-multi-select-tag-border);
   @include border-radius(var(--#{$prefix}form-multi-select-tag-border-radius));
 }
 
 .form-multi-select-tag-delete {
-  padding: 0;
+  position: relative;
+  z-index: 2;
+  box-sizing: content-box;
+  width: var(--#{$prefix}form-multi-select-tag-delete-width);
+  height: var(--#{$prefix}form-multi-select-tag-delete-height);
+  padding: var(--#{$prefix}form-multi-select-tag-delete-padding-y) var(--#{$prefix}form-multi-select-tag-delete-padding-x);
   margin-inline-start: $spacer * .5;
   background-color: transparent;
+  background-image: var(--#{$prefix}form-multi-select-tag-delete-bg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: var(--#{$prefix}form-multi-select-tag-delete-bg-size);
   border: 0;
 }
 

scss/themes/dark/_variables.scss

@@ -356,6 +356,13 @@ $form-multi-select-disabled-bg-dt:         $input-disabled-bg-dt !default;
 $form-multi-select-tag-bg-dt:               $light-dt !default;
 $form-multi-select-tag-border-color-dt:     $input-border-color-dt !default;
 
+$form-multi-select-tag-delete-color-dt:        $medium-emphasis-dt !default;
+$form-multi-select-tag-delete-bg-dt:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-color-dt}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$form-multi-select-tag-delete-hover-color-dt:  $high-emphasis-dt !default;
+$form-multi-select-tag-delete-hover-bg-dt:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-hover-color-dt}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$form-multi-select-tag-delete-focus-color-dt:  $high-emphasis-dt !default;
+$form-multi-select-tag-delete-focus-bg-dt:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-focus-color-dt}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+
 $form-multi-select-search-color-dt:         $input-color-dt !default;
 $form-multi-select-search-bg-dt:            transparent !default;
 $form-multi-select-search-border-color-dt:  $input-border-color-dt !default;
@@ -404,6 +411,9 @@ $form-multi-select-theme-map: (
   "form-multi-select-focus-border-color":       $form-multi-select-focus-border-color-dt,
   "form-multi-select-tag-bg":                   $form-multi-select-tag-bg-dt,
   "form-multi-select-tag-border-color":         $form-multi-select-tag-border-color-dt,
+  "form-multi-select-tag-delete-bg":            $form-multi-select-tag-delete-bg-dt,
+  "form-multi-select-tag-delete-hover-bg":      $form-multi-select-tag-delete-hover-bg-dt,
+  "form-multi-select-tag-delete-focus-bg":      $form-multi-select-tag-delete-focus-bg-dt,
   "form-multi-select-search-color":             $form-multi-select-search-color-dt,
   "form-multi-select-search-bg":                $form-multi-select-search-bg-dt,
   "form-multi-select-search-border-color":      $form-multi-select-search-border-color-dt,