fix(slug): resolve comments

ariellalgilmore · Jan 24, 2024 · c58426b · c58426b
1 parent 912335d
commit c58426b
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 118 deletions.
diff --git a/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts b/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts
@@ -333,13 +333,12 @@ class CDSDatePickerInput extends FocusMixin(LitElement) {
   }
 
   updated() {
-    this.querySelector('cds-slug')?.hasAttribute('revert-active')
-      ? this.shadowRoot
-          ?.querySelector("slot[name='slug']")
-          ?.classList.add('cds--slug--revert')
-      : this.shadowRoot
-          ?.querySelector("slot[name='slug']")
-          ?.classList.remove('cds--slug--revert');
+    this.shadowRoot
+      ?.querySelector("slot[name='slug']")
+      ?.classList.toggle(
+        'cds--slug--revert',
+        this.querySelector('cds-slug')?.hasAttribute('revert-active')
+      );
   }
 
   /**

diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown.ts b/packages/carbon-web-components/src/components/dropdown/dropdown.ts
@@ -677,13 +677,12 @@ class CDSDropdown extends ValidityMixin(
       ? this.setAttribute('slug', '')
       : this.removeAttribute('slug');
 
-    this.querySelector('cds-slug')?.hasAttribute('revert-active')
-      ? this.shadowRoot
-          ?.querySelector("slot[name='slug']")
-          ?.classList.add('cds--slug--revert')
-      : this.shadowRoot
-          ?.querySelector("slot[name='slug']")
-          ?.classList.remove('cds--slug--revert');
+    this.shadowRoot
+      ?.querySelector("slot[name='slug']")
+      ?.classList.toggle(
+        'cds--slug--revert',
+        this.querySelector('cds-slug')?.hasAttribute('revert-active')
+      );
   }
 
   /**

diff --git a/packages/carbon-web-components/src/components/popover/popover.scss b/packages/carbon-web-components/src/components/popover/popover.scss
@@ -180,7 +180,7 @@ $popover-caret-height: custom-property.get-var(
     // moved farther than the caret
     transform: translate(
       calc(-1 * $popover-offset),
-      calc(0.5 * $popover-offset + 16px)
+      calc(0.5 * $popover-offset + $spacing-05)
     );
   }
 }
@@ -196,7 +196,7 @@ $popover-caret-height: custom-property.get-var(
     // moved farther than the caret
     transform: translate(
       calc(-1 * $popover-offset),
-      calc(-1 * 0.5 * $popover-offset - 16px)
+      calc(-1 * 0.5 * $popover-offset - $spacing-05)
     );
   }
 }

diff --git a/packages/carbon-web-components/src/components/select/select.ts b/packages/carbon-web-components/src/components/select/select.ts
@@ -343,13 +343,12 @@ class CDSSelect extends FormMixin(LitElement) {
       this._selectNode.value = !value ? placeholderItemValue : value;
     }
 
-    this.querySelector('cds-slug')?.hasAttribute('revert-active')
-      ? this.shadowRoot
-          ?.querySelector("slot[name='slug']")
-          ?.classList.add('cds--slug--revert')
-      : this.shadowRoot
-          ?.querySelector("slot[name='slug']")
-          ?.classList.remove('cds--slug--revert');
+    this.shadowRoot
+      ?.querySelector("slot[name='slug']")
+      ?.classList.toggle(
+        'cds--slug--revert',
+        this.querySelector('cds-slug')?.hasAttribute('revert-active')
+      );
   }
 
   render() {

diff --git a/packages/carbon-web-components/src/components/slug/slug.scss b/packages/carbon-web-components/src/components/slug/slug.scss
@@ -277,121 +277,69 @@ $colorMap: (
       border-end-end-radius: 50%;
       border-start-end-radius: 50%;
       inset-block-start: to-rem(-1px);
-      inset-inline-start: $spacing-01;
+      inset-inline-start: -$spacing-01;
     }
   }
 }
 
 // override for specific alignments
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='left-bottom']
-  ),
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='right-bottom']
-  ) {
-  .#{$prefix}--popover-caret::after {
-    background: transparent;
+/* stylelint-disable-next-line no-duplicate-selectors */
+:host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) {
+  &[alignment='left-bottom'],
+  &[alignment='right-bottom'] {
+    .#{$prefix}--popover-caret::after {
+      background: transparent;
+    }
   }
 }
 
 // Change caret color / border when it is near the bottom of the callout
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='left-bottom']
-  ),
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='right-bottom']
-  ),
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='top']
-  ),
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='top-right']
-  ),
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='top-left']
-  ) {
-  .#{$prefix}--popover-caret::before {
-    border-color: $slug-callout-caret-bottom;
-    background: $slug-callout-caret-bottom-background;
-  }
-}
-
-// Adjust background if actions are present
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='left-bottom'][has-actions]
-  ),
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='right-bottom'][has-actions]
-  ),
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='top'][has-actions]
-  ),
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='top-right'][has-actions]
-  ),
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='top-left'][has-actions]
-  ) {
-  .#{$prefix}--popover-caret::before {
-    background: $slug-callout-caret-bottom-background-actions;
+/* stylelint-disable-next-line no-duplicate-selectors */
+:host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) {
+  &[alignment='left-bottom'],
+  &[alignment='right-bottom'],
+  &[alignment='top'],
+  &[alignment='top-right'],
+  &[alignment='top-left'] {
+    .#{$prefix}--popover-caret::before {
+      border-color: $slug-callout-caret-bottom;
+      background: $slug-callout-caret-bottom-background;
+    }
+    // Adjust background if actions are present
+    &[has-actions] {
+      .#{$prefix}--popover-caret::before {
+        background: $slug-callout-caret-bottom-background-actions;
+      }
+    }
   }
 }
 
 // Change the caret border when it is near the middle of the callout
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='left']
-  ),
-:host(
-    #{$prefix}-slug:not([kind='hollow']):not(
-        [dot-type='hollow']
-      )[alignment='right']
-  ) {
-  .#{$prefix}--popover-caret::before {
-    border-color: $slug-callout-caret-center;
+/* stylelint-disable-next-line no-duplicate-selectors */
+:host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) {
+  &[alignment='left'],
+  &[alignment='right'] {
+    .#{$prefix}--popover-caret::before {
+      border-color: $slug-callout-caret-center;
+    }
   }
 }
 
 @each $color, $token in $colorMap {
   :host(#{$prefix}-slug[tag='#{$color}']) {
     .#{$prefix}--slug__text {
-      color: map.get($colorMap, $color);
+      color: $token;
     }
 
     .#{$prefix}--slug__text::before {
-      background: map.get($colorMap, $color);
+      background: $token;
     }
 
     button:hover {
-      border-color: map.get($colorMap, $color);
+      border-color: $token;
 
       .#{$prefix}--slug__text::before {
-        background-color: map.get($colorMap, $color);
+        background-color: $token;
       }
     }
   }

diff --git a/packages/carbon-web-components/src/components/text-input/text-input.ts b/packages/carbon-web-components/src/components/text-input/text-input.ts
@@ -503,13 +503,12 @@ class CDSTextInput extends ValidityMixin(FormMixin(LitElement)) {
   }
 
   updated() {
-    this.querySelector('cds-slug')?.hasAttribute('revert-active')
-      ? this.shadowRoot
-          ?.querySelector("slot[name='slug']")
-          ?.classList.add('cds--slug--revert')
-      : this.shadowRoot
-          ?.querySelector("slot[name='slug']")
-          ?.classList.remove('cds--slug--revert');
+    this.shadowRoot
+      ?.querySelector("slot[name='slug']")
+      ?.classList.toggle(
+        'cds--slug--revert',
+        this.querySelector('cds-slug')?.hasAttribute('revert-active')
+      );
   }
 
   /**