Merge branch 'main' into 8091-listbox-translatewithid

carbon-design-system · Mar 17, 2021 · ea91eda · ea91eda
2 parents d232cc2 + 322ca4d
commit ea91eda
Show file tree

Hide file tree

Showing 31 changed files with 321 additions and 119 deletions.
diff --git a/packages/cli/src/git.js b/packages/cli/src/git.js
@@ -30,7 +30,7 @@ async function fetchLatestFromUpstream() {
       '[email protected]:carbon-design-system/carbon.git',
     ]);
   }
-  await execa('git', ['fetch', 'upstream', 'master', '--tags']);
+  await execa('git', ['fetch', 'upstream', 'main', '--tags']);
 }
 
 module.exports = {

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.30.0",
+  "version": "10.31.0-rc.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.20.0",
-    "@carbon/elements": "^10.29.0",
-    "@carbon/icons-handlebars": "^10.27.0",
-    "@carbon/icons-react": "^10.27.0",
+    "@carbon/elements": "^10.30.0-rc.0",
+    "@carbon/icons-handlebars": "^10.28.0-rc.0",
+    "@carbon/icons-react": "^10.28.0-rc.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/form/_form.scss b/packages/components/src/components/form/_form.scss
@@ -88,6 +88,7 @@
   .#{$prefix}--text-input__field-wrapper--warning > .#{$prefix}--text-input,
   .#{$prefix}--text-area__wrapper[data-invalid],
   .#{$prefix}--select-input__wrapper[data-invalid],
+  .#{$prefix}--select--warning .#{$prefix}--select-input__wrapper,
   .#{$prefix}--time-picker[data-invalid],
   .#{$prefix}--list-box[data-invalid],
   .#{$prefix}--list-box--warning {

diff --git a/packages/components/src/components/inline-loading/_inline-loading.scss b/packages/components/src/components/inline-loading/_inline-loading.scss
@@ -42,8 +42,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
+    margin-right: $carbon--spacing-03;
   }
 
   .#{$prefix}--inline-loading__checkmark-container {

diff --git a/packages/components/src/components/inline-loading/inline-loading.hbs b/packages/components/src/components/inline-loading/inline-loading.hbs
@@ -9,13 +9,15 @@
 <div data-inline-loading class="{{@root.prefix}}--inline-loading" role="alert" aria-live="assertive">
   <div class="{{@root.prefix}}--inline-loading__animation">
     <div data-inline-loading-spinner class="{{@root.prefix}}--loading {{@root.prefix}}--loading--small">
-      <svg class="{{@root.prefix}}--loading__svg" viewBox="-75 -75 150 150">
-        <circle class="{{@root.prefix}}--loading__background" cx="0" cy="0" r="26.8125" />
-        <circle class="{{@root.prefix}}--loading__stroke" cx="0" cy="0" r="26.8125"/>
+      <svg class="{{@root.prefix}}--loading__svg" viewBox="0 0 100 100">
+        <circle class="{{@root.prefix}}--loading__background" cx="50%" cy="50%" r="42" />
+        <circle class="{{@root.prefix}}--loading__stroke" cx="50%" cy="50%" r="42" />
       </svg>
     </div>
-    {{ carbon-icon "CheckmarkFilled16" data-inline-loading-finished='' hidden='' class=(add @root.prefix '--inline-loading__checkmark-container') }}
-    {{ carbon-icon "Error20" data-inline-loading-error='' hidden='' class=(add @root.prefix '--inline-loading--error') }}
+    {{ carbon-icon "CheckmarkFilled16" data-inline-loading-finished='' hidden='' class=(add @root.prefix
+    '--inline-loading__checkmark-container') }}
+    {{ carbon-icon "Error20" data-inline-loading-error='' hidden='' class=(add @root.prefix '--inline-loading--error')
+    }}
   </div>
   <p data-inline-loading-text-active class="{{@root.prefix}}--inline-loading__text">Loading data...</p>
   <p data-inline-loading-text-finished hidden class="{{@root.prefix}}--inline-loading__text">Data loaded.</p>
@@ -24,4 +26,4 @@
 {{#if showToggleButton}}
 <button data-inline-loading-demo-button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary">Toggle
   state</button>
-{{/if}}
+{{/if}}
diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
@@ -127,8 +127,7 @@ $list-box-menu-width: rem(300px);
     fill: $support-03;
   }
 
-  .#{$prefix}--list-box__invalid-icon--warning
-    path[data-icon-path='inner-path'] {
+  .#{$prefix}--list-box__invalid-icon--warning path[fill] {
     opacity: 1;
     fill: $carbon__black-100;
   }

diff --git a/packages/components/src/components/loading/loading.hbs b/packages/components/src/components/loading/loading.hbs
@@ -1,20 +1,21 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 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.
 -->
 
 {{#if overlay}}<div class="{{@root.prefix}}--loading-overlay">{{/if}}
-<div data-loading class="{{@root.prefix}}--loading{{#if small}} {{@root.prefix}}--loading--small{{/if}}">
-  <svg class="{{@root.prefix}}--loading__svg" viewBox="-75 -75 150 150">
-    <title>Loading</title>
-    {{#if small}}
-    <circle class="{{@root.prefix}}--loading__background" cx="0" cy="0" r="26.8125" />
-    <circle class="{{@root.prefix}}--loading__stroke" cx="0" cy="0" r="26.8125" />
-    {{else}}
-    <circle class="{{@root.prefix}}--loading__stroke" cx="0" cy="0" r="37.5" />
-    {{/if}}
-  </svg>
-</div>
-{{#if overlay}}</div>{{/if}}
+  <div data-loading class="{{@root.prefix}}--loading{{#if small}} {{@root.prefix}}--loading--small{{/if}}">
+    <svg class="{{@root.prefix}}--loading__svg" viewBox="0 0 100 100">
+      <title>Loading</title>
+      {{#if small}}
+      <circle class="{{@root.prefix}}--loading__background" cx="50%" cy="50%" r="42" />
+      <circle class="{{@root.prefix}}--loading__stroke" cx="50%" cy="50%" r="42" />
+      {{else}}
+      <circle class="{{@root.prefix}}--loading__stroke" cx="50%" cy="50%" r="44" />
+      {{/if}}
+    </svg>
+  </div>
+  {{#if overlay}}
+</div>{{/if}}
diff --git a/packages/components/src/components/overflow-menu/_overflow-menu.scss b/packages/components/src/components/overflow-menu/_overflow-menu.scss
@@ -292,15 +292,6 @@
     background-color: $hover-ui;
   }
 
-  .#{$prefix}--overflow-menu-options__option--danger {
-    border-top: 1px solid $ui-03;
-  }
-
-  .#{$prefix}--overflow-menu--light
-    .#{$prefix}--overflow-menu-options__option--danger {
-    border-top: 1px solid $decorative-01;
-  }
-
   .#{$prefix}--overflow-menu-options__option--danger
     .#{$prefix}--overflow-menu-options__btn:hover,
   .#{$prefix}--overflow-menu-options__option--danger

diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss
@@ -108,8 +108,9 @@
     color: $disabled-02;
   }
 
-  .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input {
-    padding-right: carbon--mini-units(10);
+  .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input,
+  .#{$prefix}--select--warning .#{$prefix}--select-input {
+    padding-right: carbon--mini-units(9);
   }
 
   .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow {
@@ -149,14 +150,26 @@
     }
   }
 
+  .#{$prefix}--select__invalid-icon {
+    position: absolute;
+    right: $spacing-08;
+  }
+
   .#{$prefix}--select-input__wrapper[data-invalid]
     .#{$prefix}--select-input
     ~ .#{$prefix}--select__invalid-icon {
-    position: absolute;
-    right: $spacing-09;
     fill: $support-01;
   }
 
+  .#{$prefix}--select__invalid-icon--warning {
+    fill: $support-03;
+  }
+
+  .#{$prefix}--select__invalid-icon--warning path[fill] {
+    opacity: 1;
+    fill: $carbon__black-100;
+  }
+
   .#{$prefix}--select-optgroup,
   .#{$prefix}--select-option {
     // For the options to show in IE11

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.29.0",
+  "version": "10.30.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@carbon/colors": "^10.21.0",
     "@carbon/grid": "^10.22.0",
-    "@carbon/icons": "^10.27.0",
+    "@carbon/icons": "^10.28.0-rc.0",
     "@carbon/import-once": "^10.6.0",
     "@carbon/layout": "^10.20.0",
     "@carbon/motion": "^10.14.0",

diff --git a/packages/feature-flags/package.json b/packages/feature-flags/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/feature-flags",
   "description": "Build with feature flags in Carbon",
-  "version": "0.1.0",
+  "version": "0.2.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@babel/generator": "^7.10.2",
+    "@babel/template": "^7.12.13",
     "@babel/types": "^7.10.2",
     "@carbon/scss-generator": "^10.13.0",
     "change-case": "^4.1.2",

diff --git a/packages/feature-flags/tasks/build.js b/packages/feature-flags/tasks/build.js
@@ -8,9 +8,10 @@
 'use strict';
 
 const { default: babelGenerate } = require('@babel/generator');
+const { default: template } = require('@babel/template');
 const babelTypes = require('@babel/types');
 const { types: t, generate } = require('@carbon/scss-generator');
-const { constantCase } = require('change-case');
+const { camelCase, constantCase } = require('change-case');
 const fs = require('fs-extra');
 const yaml = require('js-yaml');
 const path = require('path');
@@ -78,8 +79,46 @@ const javascriptBanner = `/**
 `;
 function buildJavaScriptModule(featureFlags) {
   const t = babelTypes;
+  const tmpl = template(`
+    if (process.env.%%env%%) {
+      if (process.env.%%env%% === 'true') {
+        enabled.%%key%% = true;
+      } else {
+        enabled.%%key%% = false;
+      }
+    } else {
+      enabled.%%key%% = %%defaultEnabled%%;
+    }
+  `);
+  const fallback = template(`enabled.%%key%% = %%enabled%%;`);
+
   const file = t.file(
     t.program([
+      t.variableDeclaration('const', [
+        t.variableDeclarator(t.identifier('enabled'), t.objectExpression([])),
+      ]),
+      t.tryStatement(
+        t.blockStatement(
+          featureFlags.flatMap((featureFlag) => {
+            return tmpl({
+              env: t.identifier(constantCase(`CARBON_${featureFlag.name}`)),
+              key: t.identifier(camelCase(featureFlag.name)),
+              defaultEnabled: t.booleanLiteral(featureFlag.enabled),
+            });
+          })
+        ),
+        t.catchClause(
+          t.identifier('error'),
+          t.blockStatement(
+            featureFlags.flatMap((featureFlag) => {
+              return fallback({
+                key: t.identifier(camelCase(featureFlag.name)),
+                enabled: t.booleanLiteral(featureFlag.enabled),
+              });
+            })
+          )
+        )
+      ),
       t.exportNamedDeclaration(
         t.variableDeclaration('const', [
           t.variableDeclarator(
@@ -97,16 +136,9 @@ function buildJavaScriptModule(featureFlags) {
                   ),
                   t.objectProperty(
                     t.identifier('enabled'),
-                    t.logicalExpression(
-                      '||',
-                      t.memberExpression(
-                        t.memberExpression(
-                          t.identifier('process'),
-                          t.identifier('env')
-                        ),
-                        t.identifier(constantCase(`CARBON_${featureFlag.name}`))
-                      ),
-                      t.booleanLiteral(featureFlag.enabled)
+                    t.memberExpression(
+                      t.identifier('enabled'),
+                      t.identifier(camelCase(featureFlag.name))
                     )
                   ),
                 ]);

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.27.0",
+  "version": "10.28.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@carbon/icon-helpers": "^10.14.0",
-    "@carbon/icons": "^10.27.0"
+    "@carbon/icons": "^10.28.0-rc.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.27.0",
+  "version": "10.28.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@carbon/icon-build-helpers": "^0.17.0",
-    "@carbon/icons": "^10.27.0"
+    "@carbon/icons": "^10.28.0-rc.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.27.0",
+  "version": "10.28.0-rc.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.27.0",
+    "@carbon/icons": "^10.28.0-rc.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.27.0",
+  "version": "10.28.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/react/.storybook/Welcome/Welcome.mdx b/packages/react/.storybook/Welcome/Welcome.mdx
@@ -0,0 +1,15 @@
+# Welcome
+
+- [Carbon Website](https://www.carbondesignsystem.com/)
+- [IBM Design Language](https://www.ibm.com/design/language/)
+
+## Other Frameworks
+
+- [Carbon Angular](https://angular.carbondesignsystem.com)
+- [Carbon Vue](http://vue.carbondesignsystem.com)
+
+## Feedback
+
+Help us improve the documentation by providing feedback, asking questions on
+Slack, or updating the mdx files file on
+[GitHub](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components).
diff --git a/packages/react/.storybook/Welcome/Welcome.stories.js b/packages/react/.storybook/Welcome/Welcome.stories.js
@@ -9,10 +9,16 @@
 
 import React from 'react';
 import { Welcome as Intro } from './Welcome';
+import mdx from './Welcome.mdx';
 
 export default {
   title: ' Getting Started/ Welcome',
   component: Intro,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const Welcome = () => <Intro />;