Merge branch 'main' into patch-8

carbon-design-system · Apr 12, 2021 · 8fa639c · 8fa639c
2 parents 3caee2c + 59c8ed2
commit 8fa639c
Show file tree

Hide file tree

Showing 14 changed files with 356 additions and 83 deletions.
diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
@@ -80,15 +80,15 @@
   }
 
   .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search-magnifier {
+    .#{$prefix}--search-magnifier-icon {
     left: 0;
     width: $spacing-09;
     height: $spacing-09;
     padding: $spacing-05;
   }
 
   .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
-    .#{$prefix}--search-magnifier {
+    .#{$prefix}--search-magnifier-icon {
     background-color: $disabled-01;
     cursor: not-allowed;
     transition: background-color none;
@@ -153,11 +153,11 @@
   }
 
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier:focus,
+    .#{$prefix}--search-magnifier-icon:focus,
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier:active,
+    .#{$prefix}--search-magnifier-icon:active,
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier:hover {
+    .#{$prefix}--search-magnifier-icon:hover {
     background-color: transparent;
     border: none;
     outline: none;
@@ -273,7 +273,7 @@
   }
 
   .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search-magnifier {
+    .#{$prefix}--search-magnifier-icon {
     left: $spacing-05;
   }
 
@@ -465,9 +465,9 @@
     }
 
     .#{$prefix}--toolbar-search-container-expandable
-      .#{$prefix}--search-magnifier,
+      .#{$prefix}--search-magnifier-icon,
     .#{$prefix}--toolbar-search-container-persistent
-      .#{$prefix}--search-magnifier {
+      .#{$prefix}--search-magnifier-icon {
       width: rem(32px);
       height: rem(32px);
       padding: $spacing-03;
@@ -513,18 +513,18 @@
     }
 
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search-magnifier:focus,
+      .#{$prefix}--search-magnifier-icon:focus,
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search-magnifier:active,
+      .#{$prefix}--search-magnifier-icon:active,
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search-magnifier:hover {
+      .#{$prefix}--search-magnifier-icon:hover {
       @include focus-outline('reset');
 
       background-color: transparent;
     }
   }
 
-  .#{$prefix}--search--disabled .#{$prefix}--search-magnifier:hover {
+  .#{$prefix}--search--disabled .#{$prefix}--search-magnifier-icon:hover {
     background-color: transparent;
   }
 

diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
@@ -71,7 +71,7 @@
     top: 0;
     display: grid;
     grid-template-rows: auto 1fr auto;
-    grid-template-columns: auto;
+    grid-template-columns: 100%;
     width: 100%;
     height: 100%;
     max-height: 100%;

diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss
@@ -76,34 +76,40 @@
   }
 
   // Small styles
-  .#{$prefix}--search--sm .#{$prefix}--search-input {
+  .#{$prefix}--search--sm .#{$prefix}--search-input,
+  .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-input {
     height: rem(32px);
     // 8px padding on either side of icon + 16px icon (32px)
     padding: 0 $spacing-07;
   }
 
-  .#{$prefix}--search--sm .#{$prefix}--search-magnifier {
+  .#{$prefix}--search--sm .#{$prefix}--search-magnifier-icon {
     left: rem(8px);
   }
 
   // Large styles
-  .#{$prefix}--search--lg .#{$prefix}--search-input {
+  .#{$prefix}--search--lg .#{$prefix}--search-input,
+  .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-input {
     height: rem(40px);
     // 12px padding on either side of icon + 16px icon (40px)
     padding: 0 $spacing-08;
   }
 
-  .#{$prefix}--search--lg .#{$prefix}--search-magnifier {
+  .#{$prefix}--search--lg .#{$prefix}--search-magnifier-icon {
     left: rem(12px);
   }
 
-  .#{$prefix}--search--xl .#{$prefix}--search-input {
+  .#{$prefix}--search--xl .#{$prefix}--search-input,
+  .#{$prefix}--search--xl.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-input {
     height: rem(48px);
     // 16px padding on either side of icon + 16px icon (48px)
     padding: 0 $spacing-09;
   }
 
-  .#{$prefix}--search-magnifier {
+  .#{$prefix}--search-magnifier-icon {
     position: absolute;
     top: 50%;
     left: $spacing-05;
@@ -207,7 +213,9 @@
     }
   }
 
-  .#{$prefix}--search--disabled .#{$prefix}--search-close {
+  .#{$prefix}--search--disabled .#{$prefix}--search-close,
+  .#{$prefix}--search--disabled.#{$prefix}--search--expandable
+    .#{$prefix}--search-magnifier {
     outline: none;
     cursor: not-allowed;
 
@@ -238,26 +246,41 @@
 
   .#{$prefix}--search--sm {
     .#{$prefix}--search-close,
-    ~ .#{$prefix}--search-button {
+    ~ .#{$prefix}--search-button,
+    &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
       width: rem(32px);
       height: rem(32px);
     }
+
+    &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
+      padding: 0 rem(32px);
+    }
   }
 
   .#{$prefix}--search--lg {
     .#{$prefix}--search-close,
-    ~ .#{$prefix}--search-button {
+    ~ .#{$prefix}--search-button,
+    &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
       width: rem(40px);
       height: rem(40px);
     }
+
+    &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
+      padding: 0 rem(40px);
+    }
   }
 
   .#{$prefix}--search--xl {
     .#{$prefix}--search-close,
-    ~ .#{$prefix}--search-button {
+    ~ .#{$prefix}--search-button,
+    &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
       width: rem(48px);
       height: rem(48px);
     }
+
+    &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
+      padding: 0 rem(48px);
+    }
   }
 
   .#{$prefix}--search-close--hidden {
@@ -276,6 +299,56 @@
       color: transparent;
     }
   }
+
+  .#{$prefix}--search--expandable .#{$prefix}--search-input {
+    width: 0;
+    padding: 0;
+    transition-timing-function: motion(standard, productive);
+    transition-duration: $duration--fast-01;
+    transition-property: width, padding;
+
+    &::placeholder {
+      position: relative;
+      opacity: 0;
+      transition-timing-function: motion(standard, productive);
+      transition-duration: $duration--fast-01;
+      transition-property: padding, opacity;
+    }
+  }
+
+  .#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-input {
+    width: 100%;
+
+    &::placeholder {
+      position: relative;
+      padding: 0;
+      opacity: 1;
+    }
+  }
+
+  .#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
+    position: absolute;
+    cursor: pointer;
+  }
+
+  .#{$prefix}--search--expandable .#{$prefix}--search-magnifier:hover {
+    background-color: $hover-ui;
+  }
+
+  .#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-magnifier {
+    pointer-events: none;
+  }
+
+  .#{$prefix}--search--expandable .#{$prefix}--search-magnifier-icon {
+    fill: $icon-01;
+  }
+
+  .#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-magnifier-icon {
+    fill: $icon-02;
+  }
 }
 
 @include exports('search') {

diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss
@@ -402,6 +402,10 @@
   //-----------------------------
   .#{$prefix}--tab-content {
     padding: $carbon--spacing-05;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
   }
 
   //-----------------------------

diff --git a/packages/layout/scss/_breakpoint.scss b/packages/layout/scss/_breakpoint.scss
@@ -196,8 +196,16 @@ $carbon--grid-breakpoints: (
   $max: if($is-number-upper, $upper, map-get($breakpoints, $upper));
 
   @if $min and $max {
-    $min-width: if(not $is-number-lower and $min, map-get($min, width), $min);
-    $max-width: if(not $is-number-upper and $max, map-get($max, width), $max);
+    $min-width: if(
+      not $is-number-lower and $min,
+      map-get($min, width + 0.02),
+      $min
+    );
+    $max-width: if(
+      not $is-number-upper and $max,
+      map-get($max, width - 0.02),
+      $max
+    );
     @media (min-width: $min-width) and (max-width: $max-width) {
       @content;
     }

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4707,6 +4707,79 @@ Map {
       },
     },
   },
+  "ExpandableSearch" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "closeButtonLabelText": Object {
+        "type": "string",
+      },
+      "defaultValue": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "string",
+            },
+            Object {
+              "type": "number",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
+      "disabled": Object {
+        "type": "bool",
+      },
+      "id": Object {
+        "type": "string",
+      },
+      "labelText": Object {
+        "isRequired": true,
+        "type": "node",
+      },
+      "light": Object {
+        "type": "bool",
+      },
+      "onChange": Object {
+        "type": "func",
+      },
+      "onKeyDown": Object {
+        "type": "func",
+      },
+      "placeHolderText": [Function],
+      "placeholder": Object {
+        "type": "string",
+      },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+            "lg",
+            "xl",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "small": [Function],
+      "type": Object {
+        "type": "string",
+      },
+      "value": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "string",
+            },
+            Object {
+              "type": "number",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
+    },
+  },
   "SecondaryButton" => Object {},
   "Select" => Object {
     "$$typeof": Symbol(react.forward_ref),

diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -47,6 +47,7 @@ describe('Carbon Components React', () => {
         "DropdownSkeleton",
         "ErrorBoundary",
         "ErrorBoundaryContext",
+        "ExpandableSearch",
         "ExpandableTile",
         "FileUploader",
         "FileUploaderButton",