Merge branch 'master' into 7734-resolve-sketch-plugin-color-layer-sty…

…le-duplication
carbon-design-system · Feb 12, 2021 · e774911 · e774911
2 parents c369682 + 82abdc6
commit e774911
Show file tree

Hide file tree

Showing 19 changed files with 159 additions and 40 deletions.
diff --git a/packages/components/src/components/accordion/_accordion.scss b/packages/components/src/components/accordion/_accordion.scss
@@ -113,8 +113,7 @@
     width: 1rem;
     height: 1rem;
     margin: $accordion-arrow-margin;
-    // TODO: RTL rotate(180deg);
-    transform: rotate(90deg);
+    transform: rotate(90deg) #{'/*rtl:ignore*/'};
     transition: all $duration--fast-02 motion(standard, productive);
     fill: $ui-05;
 
@@ -197,8 +196,7 @@
     }
 
     .#{$prefix}--accordion__arrow {
-      /* rtl:ignore */
-      transform: rotate(-90deg);
+      transform: rotate(-90deg) #{'/*rtl:ignore*/'};
       fill: $ui-05;
 
       // Windows, Firefox HCM Fix

diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
@@ -101,12 +101,12 @@
     left: rem(6px);
     width: rem(9px);
     height: rem(5px);
-    margin-top: rem(-3px) /* rtl: 0rem  */;
+    margin-top: rem(-3px) #{'/*rtl:0rem*/'};
     background: none;
     border-bottom: 2px solid $inverse-01;
     border-left: 2px solid $inverse-01;
-    transform: scale(0) rotate(-45deg) /* rtl: scale(0) rotate(45deg) */;
-    transform-origin: bottom right /* rtl: center */;
+    transform: scale(0) rotate(-45deg);
+    transform-origin: bottom right #{'/*rtl:center*/'};
     content: '';
   }
 
@@ -127,7 +127,7 @@
   // Display the check
   .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::after,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after {
-    transform: scale(1) rotate(-45deg) /* rtl: scale(-1,1) rotate(45deg) */;
+    transform: scale(1) rotate(-45deg) #{'/*rtl:scale(1.2) rotate3d(.5, 1, 0, 158deg)*/'};
   }
 
   // Indeterminate symbol

diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -87,6 +87,8 @@ Array [
   "expressiveHeading05",
   "expressiveHeading06",
   "expressiveParagraph01",
+  "fast01",
+  "fast02",
   "field01",
   "field02",
   "fluid",
@@ -184,6 +186,8 @@ Array [
   "magenta90",
   "miniUnit",
   "miniUnits",
+  "moderate01",
+  "moderate02",
   "motion",
   "orange",
   "orange40",
@@ -231,6 +235,8 @@ Array [
   "selectedUI",
   "skeleton01",
   "skeleton02",
+  "slow01",
+  "slow02",
   "spacing",
   "spacing01",
   "spacing02",

diff --git a/packages/motion/__tests__/__snapshots__/motion-test.js.snap b/packages/motion/__tests__/__snapshots__/motion-test.js.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@carbon/motion @carbon/motion/scss/motion.scss 1`] = `
+Array [
+  "fast-01",
+  "fast-02",
+  "moderate-01",
+  "moderate-02",
+  "slow-01",
+  "slow-02",
+  "carbon--easings",
+]
+`;
+
+exports[`@carbon/motion Public API 1`] = `
+Object {
+  "easings": Object {
+    "entrance": Object {
+      "expressive": "cubic-bezier(0, 0, 0.3, 1)",
+      "productive": "cubic-bezier(0, 0, 0.38, 0.9)",
+    },
+    "exit": Object {
+      "expressive": "cubic-bezier(0.4, 0.14, 1, 1)",
+      "productive": "cubic-bezier(0.2, 0, 1, 0.9)",
+    },
+    "standard": Object {
+      "expressive": "cubic-bezier(0.4, 0.14, 0.3, 1)",
+      "productive": "cubic-bezier(0.2, 0, 0.38, 0.9)",
+    },
+  },
+  "fast01": "70ms",
+  "fast02": "110ms",
+  "moderate01": "150ms",
+  "moderate02": "240ms",
+  "motion": [Function],
+  "slow01": "400ms",
+  "slow02": "700ms",
+  "unstable_tokens": Array [
+    "fast01",
+    "fast02",
+    "moderate01",
+    "moderate02",
+    "slow01",
+    "slow02",
+  ],
+}
+`;
diff --git a/packages/motion/__tests__/motion-test.js b/packages/motion/__tests__/motion-test.js
@@ -0,0 +1,30 @@
+/**
+ * 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.
+ *
+ * @jest-environment node
+ */
+
+import { SassRenderer } from '@carbon/test-utils/scss';
+import * as CarbonMotion from '../src';
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('@carbon/motion', () => {
+  test('Public API', () => {
+    expect(CarbonMotion).toMatchSnapshot();
+  });
+
+  test('@carbon/motion/scss/motion.scss', async () => {
+    const { getValue } = await render(`
+      @use 'sass:meta';
+      @use '../scss/motion';
+
+      $_: get-value(meta.module-variables('motion'));
+    `);
+    const variables = getValue(0);
+    expect(Object.keys(variables)).toMatchSnapshot();
+  });
+});
diff --git a/packages/motion/scss/motion.scss b/packages/motion/scss/motion.scss
@@ -5,6 +5,30 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+/// @access public
+/// @group @carbon/motion
+$fast-01: 70ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$fast-02: 110ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$moderate-01: 150ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$moderate-02: 240ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$slow-01: 400ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$slow-02: 700ms !default;
+
 /// Common component easings
 /// @type Map
 /// @access public

diff --git a/packages/motion/src/index.js b/packages/motion/src/index.js
@@ -5,6 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+export const fast01 = '70ms';
+export const fast02 = '110ms';
+export const moderate01 = '150ms';
+export const moderate02 = '240ms';
+export const slow01 = '400ms';
+export const slow02 = '700ms';
+
+export const unstable_tokens = [
+  'fast01',
+  'fast02',
+  'moderate01',
+  'moderate02',
+  'slow01',
+  'slow02',
+];
+
 export const easings = {
   standard: {
     productive: 'cubic-bezier(0.2, 0, 0.38, 0.9)',

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -624,7 +624,7 @@ Map {
         "type": "oneOf",
       },
       "titleText": Object {
-        "type": "string",
+        "type": "node",
       },
       "translateWithId": Object {
         "type": "func",
@@ -2407,17 +2407,7 @@ Map {
         "type": "oneOf",
       },
       "titleText": Object {
-        "args": Array [
-          Array [
-            Object {
-              "type": "string",
-            },
-            Object {
-              "type": "node",
-            },
-          ],
-        ],
-        "type": "oneOfType",
+        "type": "node",
       },
       "translateWithId": Object {
         "type": "func",
@@ -3881,7 +3871,7 @@ Map {
         "type": "func",
       },
       "titleText": Object {
-        "type": "string",
+        "type": "node",
       },
       "translateWithId": Object {
         "type": "func",

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -191,7 +191,7 @@ export default class ComboBox extends React.Component {
      * Provide text to be used in a `<label>` element that is tied to the
      * combobox via ARIA attributes.
      */
-    titleText: PropTypes.string,
+    titleText: PropTypes.node,
 
     /**
      * Specify a custom translation function that takes in a message identifier

diff --git a/packages/react/src/components/DataTable/TableBatchActions.js b/packages/react/src/components/DataTable/TableBatchActions.js
@@ -45,7 +45,10 @@ const TableBatchActions = ({
   );
 
   return (
-    <div {...rest} className={batchActionsClasses}>
+    <div
+      {...rest}
+      aria-hidden={!shouldShowBatchActions}
+      className={batchActionsClasses}>
       <div className={`${prefix}--batch-summary`}>
         <p className={`${prefix}--batch-summary__para`}>
           <span>

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2016,6 +2016,7 @@ exports[`DataTable should render 1`] = `
             translateWithId={[Function]}
           >
             <div
+              aria-hidden={true}
               className="bx--batch-actions"
             >
               <div
@@ -3021,6 +3022,7 @@ exports[`DataTable sticky header should render 1`] = `
             translateWithId={[Function]}
           >
             <div
+              aria-hidden={true}
               className="bx--batch-actions"
             >
               <div

diff --git a/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap b/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
@@ -9,6 +9,7 @@ exports[`DataTable.TableBatchActions should render 1`] = `
   translateWithId={[Function]}
 >
   <div
+    aria-hidden={true}
     className="bx--batch-actions custom-class"
   >
     <div
@@ -62,6 +63,7 @@ exports[`DataTable.TableBatchActions should render 2`] = `
   translateWithId={[Function]}
 >
   <div
+    aria-hidden={false}
     className="bx--batch-actions bx--batch-actions--active custom-class"
   >
     <div

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -322,7 +322,7 @@ Dropdown.propTypes = {
    * Provide the title text that will be read by a screen reader when
    * visiting this control
    */
-  titleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  titleText: PropTypes.node,
 
   /**
    * Callback function for translating ListBoxMenuIcon SVG title

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -384,7 +384,7 @@ MultiSelect.propTypes = {
    * Provide text to be used in a `<label>` element that is tied to the
    * multiselect via ARIA attributes.
    */
-  titleText: PropTypes.string,
+  titleText: PropTypes.node,
 
   /**
    * Callback function for translating ListBoxMenuIcon SVG title

diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
@@ -64,7 +64,11 @@ export function ProgressStep({
   // eslint-disable-next-line react/prop-types
   const SVGIcon = ({ complete, current, description, invalid, prefix }) => {
     if (invalid) {
-      return <Warning16 className={`${prefix}--progress__warning`} />;
+      return (
+        <Warning16 className={`${prefix}--progress__warning`}>
+          <title>{description}</title>
+        </Warning16>
+      );
     }
     if (current) {
       return (

diff --git a/packages/react/src/components/TextInput/ControlledPasswordInput.js b/packages/react/src/components/TextInput/ControlledPasswordInput.js
@@ -86,6 +86,7 @@ const ControlledPasswordInput = React.forwardRef(
     );
     const passwordVisibilityToggleClasses = classNames(
       `${prefix}--text-input--password__visibility__toggle`,
+      `${prefix}--btn`,
       `${prefix}--btn--icon-only`,
       `${prefix}--tooltip__trigger`,
       `${prefix}--tooltip--a11y`,

diff --git a/packages/storybook-addon-carbon-theme/.npmignore b/packages/storybook-addon-carbon-theme/.npmignore
diff --git a/packages/type/src/__tests__/__snapshots__/styles-test.js.snap b/packages/type/src/__tests__/__snapshots__/styles-test.js.snap
@@ -125,9 +125,7 @@ exports[`styles expressiveParagraph01 should be printable 1`] = `
 "font-size: 1.5rem;
 font-weight: 300;
 line-height: 1.334;
-letter-spacing: 0;
-lg: [object Object];
-max: [object Object];"
+letter-spacing: 0;"
 `;
 
 exports[`styles heading01 should be printable 1`] = `

diff --git a/packages/type/src/styles.js b/packages/type/src/styles.js
@@ -239,13 +239,15 @@ export const expressiveParagraph01 = {
   fontWeight: fontWeights.light,
   lineHeight: 1.334,
   letterSpacing: 0,
-  lg: {
-    fontSize: rem(scale[6]),
-    lineHeight: 1.29,
-  },
-  max: {
-    fontSize: rem(scale[7]),
-    lineHeight: 1.25,
+  breakpoints: {
+    lg: {
+      fontSize: rem(scale[6]),
+      lineHeight: 1.29,
+    },
+    max: {
+      fontSize: rem(scale[7]),
+      lineHeight: 1.25,
+    },
   },
 };