Merge branch 'master' into addAlignOptionsToTooltip

carbon-design-system · Dec 2, 2020 · 0c628f6 · 0c628f6
2 parents f8a123f + 5300124
commit 0c628f6
Show file tree

Hide file tree

Showing 20 changed files with 332 additions and 269 deletions.
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -2,8 +2,8 @@
 * @carbon-design-system/developers-system
 
 # Core icons and pictograms
-/packages/icons/svg/ @laurenmrice @conradennis @carbon-design-system/developers-system
-/packages/pictograms/svg/ @laurenmrice @conradennis @carbon-design-system/developers-system
+/packages/icons/svg/ @laurenmrice @conradennis @dudley-ibm @carbon-design-system/developers-system
+/packages/pictograms/svg/ @laurenmrice @conradennis @dudley-ibm @carbon-design-system/developers-system
 
 # Angular icons
 /packages/icons-angular/ @cal-smith @carbon-design-system/developers-system

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -14144,6 +14144,7 @@ Button styles
     }
 
     &:active {
+      color: $inverse-01;
       background-color: $active-tertiary;
       border-color: transparent;
     }
@@ -23502,23 +23503,22 @@ Select styles
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    width: 100%;
   }
 
   .#{$prefix}--select-input__wrapper {
     position: relative;
     display: flex;
     align-items: center;
+    width: 100%;
   }
 
   .#{$prefix}--select-input {
     @include type-style('body-short-01');
     @include focus-outline('reset');
 
     display: block;
-    width: rem(224px);
-    min-width: rem(128px);
-    max-width: rem(448px);
-
+    width: 100%;
     height: rem(40px);
     padding: 0 $spacing-09 0 $spacing-05;
     color: $text-01;
@@ -23679,6 +23679,7 @@ Select styles
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select-input {
+    width: auto;
     padding-right: $spacing-07;
     padding-left: $carbon--spacing-03;
     color: $text-01;

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.25.0-rc.1",
+  "version": "10.25.0-rc.2",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -79,6 +79,7 @@
     }
 
     &:active {
+      color: $inverse-01;
       background-color: $active-tertiary;
       border-color: transparent;
     }

diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss
@@ -27,23 +27,22 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    width: 100%;
   }
 
   .#{$prefix}--select-input__wrapper {
     position: relative;
     display: flex;
     align-items: center;
+    width: 100%;
   }
 
   .#{$prefix}--select-input {
     @include type-style('body-short-01');
     @include focus-outline('reset');
 
     display: block;
-    width: rem(224px);
-    min-width: rem(128px);
-    max-width: rem(448px);
-
+    width: 100%;
     height: rem(40px);
     padding: 0 $spacing-09 0 $spacing-05;
     color: $text-01;
@@ -204,6 +203,7 @@
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select-input {
+    width: auto;
     padding-right: $spacing-07;
     padding-left: $carbon--spacing-03;
     color: $text-01;

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.0.0-rc.1",
+  "version": "11.0.0-rc.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@carbon/icon-build-helpers": "^0.12.0-rc.0",
-    "@carbon/pictograms": "^11.0.0-rc.1"
+    "@carbon/pictograms": "^11.0.0-rc.3"
   },
   "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.0.0-rc.1",
+  "version": "11.0.0-rc.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/pictograms/pictograms.yml b/packages/pictograms/pictograms.yml
@@ -2000,7 +2000,7 @@
     - headphones
     - electronics
 - name: heart
-  friendly_name: heart
+  friendly_name: Heart
   aliases:
     - heart
     - like
@@ -3742,7 +3742,7 @@
   aliases:
     - systems devops deploy
 - name: systems-devops--monitor
-  friendly_name: Systems DevOps nonitor
+  friendly_name: Systems DevOps monitor
   aliases:
     - systems devops monitor
 - name: systems-devops--plan
@@ -4291,11 +4291,12 @@
     - cities
     - city
 - name: watson--logo
-  friendly_name: Watson logo
+  friendly_name: IBM Watson
   aliases:
     - Watson logo
     - logo
     - watson
+    - ibm watson
     - avatar
 - name: weather
   friendly_name: Weather

diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react-hooks",
   "private": true,
-  "version": "10.19.0-rc.1",
+  "version": "10.19.0-rc.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,7 +43,7 @@
     "autoprefixer": "^9.7.4",
     "babel-loader": "^8.1.0",
     "browserslist-config-carbon": "^10.6.0-rc.0",
-    "carbon-components": "^10.25.0-rc.1",
+    "carbon-components": "^10.25.0-rc.2",
     "css-loader": "^3.4.2",
     "node-sass": "^4.13.1",
     "postcss-loader": "^3.0.0",

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1250,6 +1250,9 @@ Map {
           "isRequired": true,
           "type": "string",
         },
+        "onChange": Object {
+          "type": "func",
+        },
         "onSelect": Object {
           "isRequired": true,
           "type": "func",
@@ -1870,6 +1873,9 @@ Map {
         "isRequired": true,
         "type": "string",
       },
+      "onChange": Object {
+        "type": "func",
+      },
       "onSelect": Object {
         "isRequired": true,
         "type": "func",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "carbon-components-react",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "7.25.0-rc.1",
+  "version": "7.25.0-rc.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -88,7 +88,7 @@
     "babel-plugin-react-docgen": "^4.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.0",
     "browserslist-config-carbon": "^10.6.0-rc.0",
-    "carbon-components": "^10.25.0-rc.1",
+    "carbon-components": "^10.25.0-rc.2",
     "carbon-icons": "^7.0.5",
     "chalk": "^2.3.0",
     "cli-table": "^0.3.0",

diff --git a/packages/react/src/components/Accordion/__tests__/Accordion-test.js b/packages/react/src/components/Accordion/__tests__/Accordion-test.js
@@ -5,16 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render, cleanup } from '@carbon/test-utils/react';
-import { mount } from 'enzyme';
 import React from 'react';
 import { default as Accordion, AccordionItem } from '../';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 describe('Accordion', () => {
   afterEach(cleanup);
 
   it('should render', () => {
-    const wrapper = mount(
+    const { asFragment } = render(
       <Accordion className="extra-class">
         <AccordionItem className="child" title="Heading A">
           Panel A
@@ -28,24 +29,131 @@ describe('Accordion', () => {
       </Accordion>
     );
 
-    expect(wrapper).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should have no AVT1 violations', async () => {
-    render(
-      <Accordion className="extra-class">
-        <AccordionItem className="child" title="Heading A">
-          Panel A
-        </AccordionItem>
-        <AccordionItem className="child" title="Heading B">
-          Panel B
-        </AccordionItem>
-        <AccordionItem className="child" title="Heading C">
-          Panel C
-        </AccordionItem>
-      </Accordion>
-    );
+  describe('automated verification testing', () => {
+    it('should have no Axe violations', async () => {
+      render(
+        <Accordion className="extra-class">
+          <AccordionItem className="child" title="Heading A">
+            Panel A
+          </AccordionItem>
+          <AccordionItem className="child" title="Heading B">
+            Panel B
+          </AccordionItem>
+          <AccordionItem className="child" title="Heading C">
+            Panel C
+          </AccordionItem>
+        </Accordion>
+      );
+
+      await expect(screen.getByText('Heading A')).toHaveNoAxeViolations();
+
+      // click to open
+      userEvent.click(screen.getByText('Heading A'));
+
+      // test when open
+      await expect(screen.getByText('Heading A')).toHaveNoAxeViolations();
+    });
+
+    it('should have no Accessibility Checker violations', async () => {
+      render(
+        <main>
+          <Accordion className="extra-class">
+            <AccordionItem className="child" title="Heading A">
+              Panel A
+            </AccordionItem>
+            <AccordionItem className="child" title="Heading B">
+              Panel B
+            </AccordionItem>
+            <AccordionItem className="child" title="Heading C">
+              Panel C
+            </AccordionItem>
+          </Accordion>
+        </main>
+      );
+
+      await expect(screen.getByText('Heading A')).toHaveNoACViolations(
+        'Accordion'
+      );
+
+      // click to open
+      userEvent.click(screen.getByText('Heading A'));
+
+      // test when open
+      await expect(screen.getByText('Heading A')).toHaveNoACViolations(
+        'Opened Accordion'
+      );
+    });
+  });
+
+  describe('basic keyboard accessibility testing', () => {
+    it('should receive focus', async () => {
+      render(
+        <Accordion className="extra-class">
+          <AccordionItem className="child" title="Heading A">
+            Panel A
+          </AccordionItem>
+          <AccordionItem className="child" title="Heading B">
+            Panel B
+          </AccordionItem>
+          <AccordionItem className="child" title="Heading C">
+            Panel C
+          </AccordionItem>
+        </Accordion>
+      );
+
+      userEvent.tab();
+      await expect(document.getElementsByTagName('button')[0]).toHaveFocus();
+    });
+
+    it('should open with enter', async () => {
+      render(
+        <Accordion className="extra-class">
+          <AccordionItem className="child" title="Heading A">
+            Panel A
+          </AccordionItem>
+          <AccordionItem className="child" title="Heading B">
+            Panel B
+          </AccordionItem>
+          <AccordionItem className="child" title="Heading C">
+            Panel C
+          </AccordionItem>
+        </Accordion>
+      );
+
+      // userEvent.type clicks the element passed before typing without skipClick option
+      // see: https://github.com/testing-library/user-event#typeelement-text-options
+      userEvent.type(screen.getByText('Heading A'), '{enter}', {
+        skipClick: true,
+      });
+
+      await expect(screen.getByText('Panel A'));
+    });
+
+    it('should open with spacebar', async () => {
+      render(
+        <Accordion className="extra-class">
+          <AccordionItem className="child" title="Heading A">
+            Panel A
+          </AccordionItem>
+          <AccordionItem className="child" title="Heading B">
+            Panel B
+          </AccordionItem>
+          <AccordionItem className="child" title="Heading C">
+            Panel C
+          </AccordionItem>
+        </Accordion>
+      );
+
+      // userEvent.type clicks the element passed before typing without skipClick option
+      // see: https://github.com/testing-library/user-event#typeelement-text-options
+      userEvent.type(screen.getByText('Heading A'), '{space}', {
+        skipClick: true,
+      });
 
-    await expect(document).toHaveNoAxeViolations();
+      await expect(screen.getByText('Panel A'));
+    });
   });
 });