@carbon/styles 1.13.0-rc.0 → 1.14.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.13.0-rc.0",
+  "version": "1.14.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,17 +32,17 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.5.0-rc.0",
-    "@carbon/feature-flags": "^0.9.0-rc.0",
-    "@carbon/grid": "^11.6.0-rc.0",
-    "@carbon/layout": "^11.6.0-rc.0",
-    "@carbon/motion": "^11.4.0-rc.0",
-    "@carbon/themes": "^11.9.0-rc.0",
-    "@carbon/type": "^11.9.0-rc.0",
+    "@carbon/colors": "^11.6.0-rc.0",
+    "@carbon/feature-flags": "^0.9.0",
+    "@carbon/grid": "^11.7.0-rc.0",
+    "@carbon/layout": "^11.7.0-rc.0",
+    "@carbon/motion": "^11.5.0-rc.0",
+    "@carbon/themes": "^11.10.0-rc.0",
+    "@carbon/type": "^11.10.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.26.0-rc.0",
+    "@carbon/test-utils": "^10.26.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.0.0",
     "css": "^3.0.0",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "b367a932e322ac783c3d4cf0d5a1f1e2756e8b2e"
+  "gitHead": "06ebb59650784ee0bdb602a521e82383472f0487"
 }

package/scss/__tests__/__snapshots__/type-test.js.snap

@@ -2915,7 +2915,7 @@ Object {
           "property": "font-size",
           "type": "declaration",
           "value": "calc(1.75rem +
-      0 *
+      0.25 *
       ((100vw - 20rem) / 62)
     )",
         },
@@ -2955,7 +2955,7 @@ Object {
             Object {
               "position": Position {
                 "end": Object {
-                  "column": 23,
+                  "column": 20,
                   "line": 277,
                 },
                 "source": undefined,
@@ -2966,7 +2966,7 @@ Object {
               },
               "property": "font-size",
               "type": "declaration",
-              "value": "1.75rem",
+              "value": "2rem",
             },
             Object {
               "position": Position {
@@ -3014,8 +3014,8 @@ Object {
               },
               "property": "font-size",
               "type": "declaration",
-              "value": "calc(1.75rem +
-      0.25 *
+              "value": "calc(2rem +
+      0 *
       ((100vw - 82rem) / 17)
     )",
             },
@@ -8132,7 +8132,7 @@ Object {
           "property": "font-size",
           "type": "declaration",
           "value": "calc(1.75rem +
-      0 *
+      0.25 *
       ((100vw - 20rem) / 62)
     )",
         },
@@ -8172,7 +8172,7 @@ Object {
             Object {
               "position": Position {
                 "end": Object {
-                  "column": 23,
+                  "column": 20,
                   "line": 809,
                 },
                 "source": undefined,
@@ -8183,7 +8183,7 @@ Object {
               },
               "property": "font-size",
               "type": "declaration",
-              "value": "1.75rem",
+              "value": "2rem",
             },
             Object {
               "position": Position {
@@ -8231,8 +8231,8 @@ Object {
               },
               "property": "font-size",
               "type": "declaration",
-              "value": "calc(1.75rem +
-      0.25 *
+              "value": "calc(2rem +
+      0 *
       ((100vw - 82rem) / 17)
     )",
             },

package/scss/components/_index.scss

@@ -23,6 +23,7 @@
 @use 'dropdown';
 @use 'file-uploader';
 @use 'fluid-text-input';
+@use 'fluid-text-area';
 @use 'form';
 @use 'inline-loading';
 @use 'link';

package/scss/components/accordion/_accordion.scss

@@ -309,3 +309,24 @@ $content-padding: 0 0 0 $spacing-05 !default;
   opacity: 0;
   visibility: hidden;
 }
+
+// flush
+.#{$prefix}--accordion--flush .#{$prefix}--accordion__title {
+  margin-left: 0;
+}
+
+.#{$prefix}--accordion--flush .#{$prefix}--accordion__arrow {
+  margin-right: 0;
+}
+
+.#{$prefix}--accordion--flush .#{$prefix}--accordion__content {
+  padding-left: 0;
+}
+
+.#{$prefix}--accordion--flush:not(.#{$prefix}--skeleton)
+  .#{$prefix}--accordion__heading:hover::before,
+.#{$prefix}--accordion--flush:not(.#{$prefix}--skeleton)
+  .#{$prefix}--accordion__heading:focus::before {
+  left: -1rem;
+  width: calc(100% + 32px);
+}

package/scss/components/file-uploader/_file-uploader.scss

@@ -271,7 +271,6 @@
   }
 
   .#{$prefix}--file__state-container .#{$prefix}--file-complete {
-    cursor: pointer;
     fill: $interactive;
 
     &:focus {

package/scss/components/fluid-text-area/_fluid-text-area.scss

@@ -0,0 +1,167 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//-----------------------------
+// Fluid Text Area
+//-----------------------------
+@use '../../config' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+
+@mixin fluid-text-area {
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper {
+    position: relative;
+    height: 100%;
+    flex-direction: column;
+    background: $field;
+  }
+
+  .#{$prefix}--modal
+    .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper {
+    background: $field-02;
+  }
+
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area__label-wrapper {
+    position: relative;
+    height: 100%;
+  }
+
+  .#{$prefix}--text-area--fluid .#{$prefix}--label {
+    position: absolute;
+    z-index: 1;
+    top: rem(13px);
+    left: $spacing-05;
+    display: flex;
+    height: rem(16px);
+    align-items: center;
+    margin: 0;
+  }
+
+  //counter
+  .#{$prefix}--text-area--fluid div.#{$prefix}--label {
+    right: 1rem;
+    left: initial;
+  }
+
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area {
+    min-height: rem(64px);
+    padding: 0 $spacing-05 rem(13px);
+    margin-top: 2rem;
+    outline: none;
+  }
+
+  .#{$prefix}--text-area--fluid .#{$prefix}--form__helper-text {
+    display: none;
+  }
+
+  // invalid
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid,
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area:focus {
+    border-bottom: none;
+  }
+
+  .#{$prefix}--text-area__divider,
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area__divider {
+    display: none;
+  }
+
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area--invalid
+    + .#{$prefix}--text-area__divider {
+    display: block;
+    border-style: solid;
+    border-color: $border-subtle;
+    border-bottom: none;
+    margin: 0 1rem;
+  }
+
+  // invalid error message container
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area--invalid
+    + .#{$prefix}--text-area__divider
+    + .#{$prefix}--form-requirement {
+    position: relative;
+    display: block;
+    overflow: visible;
+    max-height: 12.5rem;
+    padding: 0.5rem 2.5rem 0.5rem 1rem;
+    margin: 0;
+    background: $field;
+    color: $text-error;
+  }
+
+  .#{$prefix}--modal
+    .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area--invalid
+    + .#{$prefix}--text-area__divider
+    + .#{$prefix}--form-requirement {
+    background: $field-02;
+  }
+
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area__invalid-icon {
+    top: 0.5rem;
+  }
+
+  //invalid outline
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper[data-invalid]:not(:focus) {
+    @include focus-outline('invalid');
+
+    outline-offset: 0;
+  }
+
+  // focus
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper[data-invalid]:focus-within,
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper:focus-within {
+    @include focus-outline('outline');
+
+    outline-offset: 0;
+  }
+
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper[data-invalid]
+    > .#{$prefix}--text-area--invalid:focus,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper
+    > .#{$prefix}--text-area:focus,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper
+    > .#{$prefix}--text-area:active,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper[data-invalid]
+    > .#{$prefix}--text-area--invalid {
+    outline: none;
+    transition: none;
+  }
+
+  // Skeleton
+  .#{$prefix}--text-area--fluid__skeleton {
+    padding: $spacing-05;
+    border-bottom: 1px solid $skeleton-element;
+    background: $skeleton-background;
+  }
+
+  .#{$prefix}--text-area--fluid__skeleton .#{$prefix}--skeleton,
+  .#{$prefix}--text-area--fluid__skeleton
+    .#{$prefix}--text-area.#{$prefix}--skeleton::before {
+    height: 0.5rem;
+  }
+
+  .#{$prefix}--text-area--fluid__skeleton .#{$prefix}--label {
+    margin-bottom: $spacing-04;
+  }
+
+  .#{$prefix}--text-area--fluid__skeleton
+    .#{$prefix}--text-area.#{$prefix}--skeleton {
+    width: 80%;
+    height: 4rem;
+  }
+}

package/scss/components/fluid-text-area/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'fluid-text-area';
+@use 'fluid-text-area';
+
+@include fluid-text-area.fluid-text-area;

package/scss/components/fluid-text-input/_fluid-text-input.scss

@@ -122,4 +122,23 @@
     > .#{$prefix}--text-input--warning:focus {
     outline: none;
   }
+
+  // Password Input
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input.#{$prefix}--password-input {
+    padding-right: $spacing-08;
+  }
+
+  .#{$prefix}--text-input--fluid.#{$prefix}--password-input-wrapper
+    .#{$prefix}--text-input__invalid-icon {
+    right: $spacing-05;
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
+    top: rem(26px);
+    right: $spacing-03;
+    width: rem(32px);
+    height: rem(32px);
+  }
 }

package/scss/components/notification/_actionable-notification.scss

@@ -444,7 +444,9 @@
   }
 
   .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon,
-  .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon {
+  .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon,
+  .#{$prefix}--actionable-notification
+    .#{$prefix}--actionable-notification__close-icon {
     @include high-contrast-mode('icon-fill');
   }
   /* stylelint-enable */

package/scss/components/notification/_inline-notification.scss

@@ -309,10 +309,11 @@
     @include high-contrast-mode('focus');
   }
 
-  .#{$prefix}--inline-notification__icon {
+  .#{$prefix}--inline-notification .#{$prefix}--inline-notification__icon {
     @include high-contrast-mode('icon-fill');
   }
-  .#{$prefix}--inline-notification__close-icon {
+  .#{$prefix}--inline-notification
+    .#{$prefix}--inline-notification__close-icon {
     @include high-contrast-mode('icon-fill');
   }
   /* stylelint-enable */

package/scss/components/notification/_toast-notification.scss

@@ -226,10 +226,10 @@
   .#{$prefix}--toast-notification__close-button:focus {
     @include high-contrast-mode('focus');
   }
-  .#{$prefix}--toast-notification__close-icon {
+  .#{$prefix}--toast-notification .#{$prefix}--toast-notification__close-icon {
     @include high-contrast-mode('icon-fill');
   }
-  .#{$prefix}--toast-notification__icon {
+  .#{$prefix}--toast-notification .#{$prefix}--toast-notification__icon {
     @include high-contrast-mode('icon-fill');
   }
   /* stylelint-enable */

package/scss/components/progress-indicator/_progress-indicator.scss

@@ -77,6 +77,10 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     fill: $interactive;
   }
 
+  .#{$prefix}--progress--space-equal .#{$prefix}--progress-text {
+    overflow: hidden;
+  }
+
   .#{$prefix}--progress-label {
     @include type-style('body-compact-01');
 

package/scss/components/radio-button/_radio-button.scss

@@ -110,7 +110,9 @@ $radio-border-width: 1px !default;
       transform: scale(0.5);
 
       // Allow the selected button to be seen in Windows HCM for IE/Edge
-      @include high-contrast-mode('icon-fill');
+      @include high-contrast-mode('icon-fill') {
+        background-color: ButtonText;
+      }
     }
   }
 

package/scss/components/text-area/_text-area.scss

@@ -81,6 +81,7 @@
     color: $text-disabled;
     cursor: not-allowed;
     outline: none;
+    resize: none;
   }
 
   .#{$prefix}--text-area:disabled::placeholder {

package/scss/components/text-input/_text-input.scss

@@ -194,9 +194,13 @@
   }
 
   .#{$prefix}--text-input:disabled
-    + .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
-    svg {
+    ~ .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
     cursor: not-allowed;
+  }
+
+  .#{$prefix}--text-input:disabled
+    ~ .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
+    svg {
     fill: $icon-disabled;
 
     &:hover {

package/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -117,7 +117,6 @@
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__navigation {
     display: flex;
-    height: 100%;
     flex-direction: column;
   }