Merge branch 'main' into update-theme-tokens

carbon-design-system · Apr 2, 2021 · c05f203 · c05f203
2 parents 8f17974 + 8b9c366
commit c05f203
Show file tree

Hide file tree

Showing 47 changed files with 831 additions and 447 deletions.
diff --git a/packages/components/gulpfile.js b/packages/components/gulpfile.js
@@ -360,7 +360,8 @@ const buildStyles = (prod) => {
       .pipe(
         postcss([
           autoprefixer({
-            browsers: ['> 1%', 'last 2 versions'],
+            browsers: ['> 1%', 'last 2 versions', 'ie >= 11'],
+            grid: 'autoplace',
           }),
         ])
       )
@@ -417,7 +418,15 @@ gulp.task('sass:dev', () => {
         })
       ).on('error', sass.logError)
     )
-    .pipe(postcss([customProperties(), autoprefixer()]))
+    .pipe(
+      postcss([
+        customProperties(),
+        autoprefixer({
+          browsers: ['> 1%', 'last 2 versions', 'ie >= 11'],
+          grid: 'autoplace',
+        }),
+      ])
+    )
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest('demo'))
     .pipe(browserSync.stream({ match: '**/*.css' }));

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "10.32.0-rc.0",
+  "version": "10.32.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",
@@ -85,9 +85,9 @@
     "@babel/preset-react": "^7.10.0",
     "@babel/runtime": "^7.10.0",
     "@carbon/cli": "^10.21.0",
-    "@carbon/elements": "^10.31.0-rc.0",
-    "@carbon/icons-handlebars": "^10.29.0-rc.0",
-    "@carbon/icons-react": "^10.29.0-rc.0",
+    "@carbon/elements": "^10.31.0",
+    "@carbon/icons-handlebars": "^10.29.0",
+    "@carbon/icons-react": "^10.29.0",
     "@carbon/test-utils": "^10.15.0",
     "@frctl/fractal": "^1.1.0",
     "@rollup/plugin-babel": "^5.2.2",

diff --git a/packages/components/src/components/context-menu/_context-menu.scss b/packages/components/src/components/context-menu/_context-menu.scss
@@ -40,6 +40,7 @@
   .#{$prefix}--context-menu-option {
     position: relative;
     height: $spacing-07;
+    color: $text-01;
     background-color: $ui-01;
     cursor: pointer;
     transition: background-color $duration--fast-01 motion(standard, productive);
@@ -54,6 +55,12 @@
     background-color: $hover-ui;
   }
 
+  .#{$prefix}--context-menu-option--danger:hover,
+  .#{$prefix}--context-menu-option--danger:focus {
+    color: $text-04;
+    background-color: $danger-01;
+  }
+
   .#{$prefix}--context-menu-option > .#{$prefix}--context-menu {
     margin-top: calc(#{$spacing-02} * -1);
   }
@@ -67,19 +74,11 @@
   }
 
   .#{$prefix}--context-menu-option__content--disabled {
+    color: $disabled-02;
     background-color: $ui-01;
     cursor: not-allowed;
   }
 
-  .#{$prefix}--context-menu-option__content--disabled
-    .#{$prefix}--context-menu-option__label,
-  .#{$prefix}--context-menu-option__content--disabled
-    .#{$prefix}--context-menu-option__info,
-  .#{$prefix}--context-menu-option__content--disabled
-    .#{$prefix}--context-menu-option__icon {
-    color: $disabled-02;
-  }
-
   .#{$prefix}--context-menu-option__content--indented
     .#{$prefix}--context-menu-option__label {
     margin-left: $spacing-05;
@@ -92,7 +91,6 @@
     // add top/bottom padding to make sure letters are not cut off by hidden overflow
     padding: $spacing-02 0;
     overflow: hidden;
-    color: $text-01;
     white-space: nowrap;
     text-align: start;
     text-overflow: ellipsis;
@@ -101,7 +99,6 @@
   .#{$prefix}--context-menu-option__info {
     display: inline-flex;
     margin-left: $spacing-05;
-    color: $icon-01;
   }
 
   .#{$prefix}--context-menu-option__icon {
@@ -110,7 +107,6 @@
     width: 1rem;
     height: 1rem;
     margin-right: $spacing-03;
-    color: $icon-01;
   }
 
   .#{$prefix}--context-menu-divider {

diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
@@ -141,6 +141,19 @@
     }
   }
 
+  // Form Control Overrides
+  .#{$prefix}--list-box input[role='combobox'],
+  .#{$prefix}--list-box input[type='text'],
+  .#{$prefix}--dropdown,
+  .#{$prefix}--list-box,
+  .#{$prefix}--number input[type='number'],
+  .#{$prefix}--number__control-btn::before,
+  .#{$prefix}--number__control-btn::after,
+  .#{$prefix}--text-input,
+  .#{$prefix}--select-input {
+    background-color: $field-02;
+  }
+
   // Overflow Menu Overrides
   .#{$prefix}--data-table
     td.#{$prefix}--table-column-menu

diff --git a/packages/components/src/components/data-table/_data-table-inline-edit.scss b/packages/components/src/components/data-table/_data-table-inline-edit.scss
@@ -62,18 +62,4 @@
       padding-left: $spacing-04;
     }
   }
-
-  .#{$prefix}--data-table--short {
-    input {
-      height: rem(32px);
-    }
-
-    select {
-      padding: 0.45rem 2.75rem 0.45rem $spacing-05;
-    }
-
-    .#{$prefix}--select__arrow {
-      top: 0.875rem;
-    }
-  }
 }
diff --git a/packages/components/src/components/date-picker/_flatpickr.scss b/packages/components/src/components/date-picker/_flatpickr.scss
@@ -21,6 +21,7 @@
   animation: none;
   direction: ltr;
   border: 0;
+  border-radius: 0;
   font-size: 14px;
   line-height: 24px;
   border-radius: 5px;

diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss
@@ -21,6 +21,10 @@
     margin-bottom: $carbon--spacing-07;
   }
 
+  .#{$prefix}--fieldset--no-margin {
+    margin-bottom: 0;
+  }
+
   .#{$prefix}--form-item {
     @include type-style('body-short-01');
 
@@ -170,6 +174,12 @@
   .#{$prefix}--form__helper-text--disabled {
     color: $disabled-02;
   }
+
+  // If a FormGroup is disabled, Form labels and helper text nested inside should also be disabled
+  fieldset[disabled] .#{$prefix}--label,
+  fieldset[disabled] .#{$prefix}--form__helper-text {
+    color: $disabled-02;
+  }
 }
 
 @include exports('form') {

diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss
@@ -22,6 +22,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    width: 100%;
   }
 
   .#{$prefix}--number input[type='number'] {

diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
@@ -76,11 +76,24 @@
   }
 
   .#{$prefix}--tile--clickable:hover,
-  .#{$prefix}--tile--clickable:active {
+  .#{$prefix}--tile--clickable:active,
+  .#{$prefix}--tile--clickable:visited,
+  .#{$prefix}--tile--clickable:visited:hover {
     color: $text-01;
     text-decoration: none;
   }
 
+  // Disabled ClickableTile
+  .#{$prefix}--tile--clickable.#{$prefix}--link--disabled {
+    color: $disabled-02;
+  }
+
+  .#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled {
+    display: block;
+    color: $disabled-02;
+    background-color: $disabled-01;
+  }
+
   .#{$prefix}--tile--selectable {
     padding-right: $carbon--spacing-09;
   }

diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.31.0-rc.0",
+  "version": "10.31.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -36,13 +36,13 @@
   },
   "dependencies": {
     "@carbon/colors": "^10.22.0",
-    "@carbon/grid": "^10.24.0-rc.0",
-    "@carbon/icons": "^10.29.0-rc.0",
+    "@carbon/grid": "^10.24.0",
+    "@carbon/icons": "^10.29.0",
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.22.0-rc.0",
+    "@carbon/layout": "^10.22.0",
     "@carbon/motion": "^10.15.0",
-    "@carbon/themes": "^10.31.0-rc.0",
-    "@carbon/type": "^10.25.0-rc.0"
+    "@carbon/themes": "^10.31.0",
+    "@carbon/type": "^10.25.0"
   },
   "devDependencies": {
     "@carbon/cli": "^10.21.0",

diff --git a/packages/grid/package.json b/packages/grid/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/grid",
   "description": "Grid for digital and software products using the Carbon Design System",
-  "version": "10.24.0-rc.0",
+  "version": "10.24.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.22.0-rc.0"
+    "@carbon/layout": "^10.22.0"
   },
   "devDependencies": {
     "@carbon/cli": "^10.21.0",

diff --git a/packages/icons-handlebars/package.json b/packages/icons-handlebars/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-handlebars",
   "description": "Handlebars helpers for IBM Design Language icons in digital and software products using the Carbon Design System",
-  "version": "10.29.0-rc.0",
+  "version": "10.29.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@carbon/icon-helpers": "^10.15.0",
-    "@carbon/icons": "^10.29.0-rc.0"
+    "@carbon/icons": "^10.29.0"
   },
   "devDependencies": {
     "handlebars": "^4.0.12"

diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-react",
   "description": "React components for icons in digital and software products using the Carbon Design System",
-  "version": "10.29.0-rc.0",
+  "version": "10.29.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@carbon/icon-build-helpers": "^0.18.0",
-    "@carbon/icons": "^10.29.0-rc.0"
+    "@carbon/icons": "^10.29.0"
   },
   "sideEffects": false
 }
diff --git a/packages/icons-vue/package.json b/packages/icons-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-vue",
   "description": "Vue components for icons in digital and software products using the Carbon Design System",
-  "version": "10.29.0-rc.0",
+  "version": "10.29.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@carbon/cli-reporter": "^10.4.0",
-    "@carbon/icons": "^10.29.0-rc.0",
+    "@carbon/icons": "^10.29.0",
     "fs-extra": "^8.1.0",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.0",

diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons",
   "description": "Icons for digital and software products using the Carbon Design System",
-  "version": "10.29.0-rc.0",
+  "version": "10.29.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/layout/package.json b/packages/layout/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/layout",
   "description": "Layout helpers for digital and software products using the Carbon Design System",
-  "version": "10.22.0-rc.0",
+  "version": "10.22.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/pictograms-react/package.json b/packages/pictograms-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/pictograms-react",
   "description": "React components for pictograms in digital and software products using the Carbon Design System",
-  "version": "11.7.0-rc.0",
+  "version": "11.7.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@carbon/icon-build-helpers": "^0.18.0",
-    "@carbon/pictograms": "^11.7.0-rc.0"
+    "@carbon/pictograms": "^11.7.0"
   },
   "sideEffects": false
 }
diff --git a/packages/pictograms/package.json b/packages/pictograms/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/pictograms",
   "description": "Pictograms for digital and software products using the Carbon Design System",
-  "version": "11.7.0-rc.0",
+  "version": "11.7.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",