fix(styling): missing tokens (carbon-design-system#10769)

* fix(styling): missing tokens * fix(search): hover * fix(search): format and remove pointer events * fix(data-table): hover * fix(search): expandable size
kennylam · Aug 1, 2023 · 35c5ca6 · 35c5ca6
1 parent c599f06
commit 35c5ca6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 0 deletions.
diff --git a/web-components/packages/carbon-web-components/src/components/button/button.scss b/web-components/packages/carbon-web-components/src/components/button/button.scss
@@ -35,6 +35,10 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-button-skeleton) {
+  @include emit-layout-tokens();
+}
+
 :host(#{$prefix}-button[isExpressive]) ::slotted([slot='icon']),
 :host(#{$prefix}-modal-footer-button[isExpressive]) ::slotted([slot='icon']) {
   width: rem(20px);

diff --git a/web-components/packages/carbon-web-components/src/components/data-table/_table-action.scss b/web-components/packages/carbon-web-components/src/components/data-table/_table-action.scss
@@ -50,6 +50,10 @@
   @extend .#{$prefix}--toolbar-action;
   @extend .#{$prefix}--toolbar-search-container-expandable;
 
+  &:hover {
+    background-color: $field-hover;
+  }
+
   flex: none;
   transition: flex 175ms $standard-easing;
 

diff --git a/web-components/packages/carbon-web-components/src/components/search/search.scss b/web-components/packages/carbon-web-components/src/components/search/search.scss
@@ -27,12 +27,36 @@ $css--plex: true !default;
   @extend .#{$prefix}--search--expandable;
 }
 
+:host(#{$prefix}-search[expandable][size='sm']) {
+  .#{$prefix}--search-magnifier {
+    width: $spacing-07;
+    height: $spacing-07;
+  }
+}
+
+:host(#{$prefix}-search[expandable][size='md']) {
+  .#{$prefix}--search-magnifier {
+    width: $spacing-08;
+    height: $spacing-08;
+  }
+}
+
+:host(#{$prefix}-search[expandable][size='lg']) {
+  .#{$prefix}--search-magnifier {
+    width: $spacing-09;
+    height: $spacing-09;
+  }
+}
+
 :host(#{$prefix}-search[expandable][expanded]) {
   @extend .#{$prefix}--search--expanded;
 
   .#{$prefix}--search-input {
     width: 100%;
   }
+  .#{$prefix}--search-magnifier {
+    pointer-events: none;
+  }
 }
 
 :host(#{$prefix}-search[expandable][expanded][size='sm']) {
@@ -51,6 +75,11 @@ $css--plex: true !default;
   .#{$prefix}--search-input {
     padding: 0 $spacing-09;
   }
+
+  ::slotted(.#{$prefix}--search-magnifier) {
+    width: rem(48px);
+    height: rem(48px);
+  }
 }
 
 :host(#{$prefix}-search[disabled]) {