chore: Update prerelease/v4 with latest master

.eslintrc.js

@@ -32,8 +32,18 @@ module.exports = {
   env: {
     browser: true,
   },
-  plugins: ['@typescript-eslint', 'jest', 'react', 'prettier', 'react-hooks', 'emotion', 'jsdoc'],
+  plugins: [
+    'workday-custom-rules',
+    '@typescript-eslint',
+    'jest',
+    'react',
+    'prettier',
+    'react-hooks',
+    'emotion',
+    'jsdoc',
+  ],
   rules: {
+    'workday-custom-rules/restricted-imports': 'error',
     '@typescript-eslint/class-name-casing': 'error',
     '@typescript-eslint/indent': 'off',
     '@typescript-eslint/interface-name-prefix': 'error',

CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 3.8.0 (2020-05-22)
+
+### Infrastructure
+- docs: Remove rebase section for pull requests ([#647](https://github.com/Workday/canvas-kit/pull/647)) [@NicholasBoll](https://github.com/NicholasBoll)
+- chore: Add invalid import rule ([#652](https://github.com/Workday/canvas-kit/pull/652)) [@alanbsmith](https://github.com/alanbsmith)
+- fix: Fix incorrect dep listing ([#668](https://github.com/Workday/canvas-kit/pull/668)) [@lychyi](https://github.com/lychyi)
+- chore: Add public config to create-component script ([#667](https://github.com/Workday/canvas-kit/pull/667)) [@alanbsmith](https://github.com/alanbsmith)
+
+### Components
+- feat(badge): Add CountBadge component ([#566](https://github.com/Workday/canvas-kit/pull/566)) [@alanbsmith](https://github.com/alanbsmith)
+- fix: Add public access to Badge publish config ([#653](https://github.com/Workday/canvas-kit/pull/653)) [@alanbsmith](https://github.com/alanbsmith)
+- fix: Align hover ripple for checkbox and radio components in IE11 ([#651](https://github.com/Workday/canvas-kit/pull/651)) [@lychyi](https://github.com/lychyi)
+- fix(switch): Fix click target for switch ([#671](https://github.com/Workday/canvas-kit/pull/671)) [@mannycarrera4](https://github.com/mannycarrera4)
+
 # 4.0.0-beta.4 (2020-05-20)
 
 ### Infrastructure

CONTRIBUTING.md

@@ -128,8 +128,6 @@ fix: Add missing static class variable to IconButton and Avatar
   experience.
 - Project maintainers are able to push commits to fork PRs, but other contributors will need to open
   PRs to the personal fork to collaborate with others on a feature.
-- It is up to the contributor to make sure their PR is rebased onto upstream/master before
-  submitting.
 - When a pull request passes all checks and reviews, a core maintainer merges via Squash and Merge
   with a link back to the PR.
 - The branch will automatically be deleted on merge, but its commits and the branch reference are

TESTING.md

@@ -265,38 +265,41 @@ Component helpers come in 3 flavors:
 
 ## Visual Tests
 
-Canvas Kit uses [ChromaticQA](https://www.chromaticqa.com/) for visual tests which are run on stories
-that are opted-in through a special parameter. All the visual states should be represented at least
-one story. This way all of the visual states of a component can be visually regression tested without
-requiring the test to interact with the UI. These states should include loading states, error states,
-etc. Stories created for visual regression tests should avoid dynamic solutions like
-[knobs](https://github.com/storybookjs/storybook/tree/next/addons/knobs).
+Canvas Kit uses [ChromaticQA](https://www.chromaticqa.com/) for visual tests which are run on
+stories that are opted-in through a special parameter. All the visual states should be represented
+at least one story. This way all of the visual states of a component can be visually regression
+tested without requiring the test to interact with the UI. These states should include loading
+states, error states, etc. Stories created for visual regression tests should avoid dynamic
+solutions like [knobs](https://github.com/storybookjs/storybook/tree/next/addons/knobs).
 
 To make a story runnable in Chromatic for visual testing, add the following to the story's parameter
 list:
 
 ```tsx
 // default Storybook API
 storiesOf('Some Category', module)
-  .add('My Visual Story', () => { /** story contents */ })
+  .add('My Visual Story', () => {
+    /** story contents */
+  })
   .addParameter({
     chromatic: {
       disable: false,
     },
   });
+```
+
+```tsx
+// CSF - All stories in file
+export default withSnapshotsEnabled({
+  // CSF details (title, component, etc.)
+});
 
-// CSF
+// or CSF - Specific story
 export const MyVisualStory = () => {
   // story contents
 };
 
-MyVisualStory.story = {
-  parameters: {
-    chromatic: {
-      disabled: false,
-    },
-  }
-};
+withSnapshotsEnabled(MyVisualStory);
 ```
 
 Not all visual states are application states (E.g. `focus`, `hover`, and `active` on a button

cypress/integration/SelectLabs.spec.ts

@@ -185,9 +185,7 @@ describe('Select', () => {
 
                 context('when the listbox is expanded again', () => {
                   beforeEach(() => {
-                    cy.findByLabelText('Label')
-                      .pipe(h.selectLabs.getMenu)
-                      .type('{downarrow}');
+                    cy.focused().type('{downarrow}');
                   });
 
                   context('the fourth option', () => {

cypress/integration/storybook.spec.ts

@@ -6,10 +6,7 @@ describe('Storybook', () => {
   it('should render the Getting Started page', () => {
     cy.visit('/');
     cy.get('iframe#storybook-preview-iframe')
-      .pipe(
-        getIframeBody,
-        {timeout: 20000}
-      )
+      .pipe(getIframeBody, {timeout: 20000})
       .should('contain', 'Workday Canvas Kit');
   });
 });

lerna.json

@@ -1,7 +1,5 @@
 {
-  "packages": [
-    "modules/**"
-  ],
+  "packages": ["modules/**"],
   "version": "4.0.0-beta.4",
   "npmClient": "yarn",
   "useWorkspaces": true,

modules/_canvas-kit-react/index.ts

@@ -1,6 +1,7 @@
 export {default as canvas} from '@workday/canvas-kit-react-core';
 export * from '@workday/canvas-kit-react-action-bar';
 export * from '@workday/canvas-kit-react-avatar';
+export * from '@workday/canvas-kit-react-badge';
 export * from '@workday/canvas-kit-react-banner';
 export * from '@workday/canvas-kit-react-button';
 export * from '@workday/canvas-kit-react-card';

modules/_canvas-kit-react/package.json

@@ -48,6 +48,7 @@
   "dependencies": {
     "@workday/canvas-kit-react-action-bar": "4.0.0-beta.4",
     "@workday/canvas-kit-react-avatar": "4.0.0-beta.4",
+    "@workday/canvas-kit-react-badge": "4.0.0-beta.4",
     "@workday/canvas-kit-react-banner": "4.0.0-beta.4",
     "@workday/canvas-kit-react-button": "4.0.0-beta.4",
     "@workday/canvas-kit-react-card": "4.0.0-beta.4",

modules/_labs/pagination/react/stories/stories.tsx

@@ -4,7 +4,6 @@ import {boolean, number, text} from '@storybook/addon-knobs';
 import {storiesOf} from '@storybook/react';
 import React, {useEffect, useState} from 'react';
 import withReadme from 'storybook-readme/with-readme';
-import {ComponentStatesTable} from '../../../../../utils/storybook';
 
 import {Pagination} from '@workday/canvas-kit-labs-react-pagination';
 import README from '../README.md';
@@ -110,45 +109,3 @@ storiesOf('Labs|Pagination/React', module)
       </Wrapper>
     );
   });
-
-storiesOf('Labs|Pagination/React/Visual Testing', module)
-  .addParameters({
-    chromatic: {
-      disable: false,
-    },
-  })
-  .add('States', () => {
-    const defaults = {
-      total: 1000,
-      pageSize: 10,
-      showLabel: true,
-      showGoTo: true,
-      currentPage: 1,
-      onPageChange: (_: any) => {
-        /* don't do anything */
-      },
-    };
-    return (
-      <ComponentStatesTable
-        rowProps={[
-          {label: 'Basic 3 Pages', props: {total: 30, showGoTo: false}},
-          {label: 'Basic 7 Pages', props: {total: 70, showGoTo: false}},
-          {label: 'First Page', props: {currentPage: 1}},
-          {label: 'Middle Page', props: {currentPage: 50}},
-          {label: 'Last Page', props: {currentPage: 100}},
-        ]}
-        columnProps={[
-          {
-            label: 'Desktop',
-            props: {width: 800},
-          },
-          {
-            label: 'Mobile',
-            props: {width: 499},
-          },
-        ]}
-      >
-        {props => <Pagination {...defaults} {...props} />}
-      </ComponentStatesTable>
-    );
-  });

modules/_labs/pagination/react/stories/stories_visualTesting.tsx

@@ -0,0 +1,45 @@
+/// <reference path="../../../../../typings.d.ts" />
+import React from 'react';
+import {ComponentStatesTable, withSnapshotsEnabled} from '../../../../../utils/storybook';
+import {Pagination} from '@workday/canvas-kit-labs-react-pagination';
+
+export default withSnapshotsEnabled({
+  title: 'Testing|React/Labs/Pagination',
+  component: Pagination,
+});
+
+export const PaginationStates = () => {
+  const defaults = {
+    total: 1000,
+    pageSize: 10,
+    showLabel: true,
+    showGoTo: true,
+    currentPage: 1,
+    onPageChange: (_: any) => {
+      /* don't do anything */
+    },
+  };
+  return (
+    <ComponentStatesTable
+      rowProps={[
+        {label: 'Basic 3 Pages', props: {total: 30, showGoTo: false}},
+        {label: 'Basic 7 Pages', props: {total: 70, showGoTo: false}},
+        {label: 'First Page', props: {currentPage: 1}},
+        {label: 'Middle Page', props: {currentPage: 50}},
+        {label: 'Last Page', props: {currentPage: 100}},
+      ]}
+      columnProps={[
+        {
+          label: 'Desktop',
+          props: {width: 800},
+        },
+        {
+          label: 'Mobile',
+          props: {width: 499},
+        },
+      ]}
+    >
+      {props => <Pagination {...defaults} {...props} />}
+    </ComponentStatesTable>
+  );
+};

modules/_labs/select/react/lib/Select.tsx

@@ -289,7 +289,6 @@ export default class Select extends React.Component<SelectProps, SelectState> {
     // of focus (i.e., so focus is immediately transferred to the menu when
     // opening the menu, rather than briefly being applied to the button
     // and creating a momentary flash of a focus ring around the button)
-
     event.preventDefault();
   };
 

modules/_labs/select/react/lib/SelectBase.tsx

@@ -152,7 +152,7 @@ const buttonBorderWidth = 1;
 const buttonPadding = spacingNumbers.xxs - buttonBorderWidth;
 
 const SelectButton = styled('button')<
-  Pick<SelectBaseProps, 'error' | 'grow' | 'isMenuHidden' | 'theme'>
+  Pick<SelectBaseProps, 'error' | 'grow' | 'isMenuHidden' | 'isMenuHiding' | 'theme'>
 >(
   {
     ...type.body,
@@ -186,18 +186,18 @@ const SelectButton = styled('button')<
       },
     },
   },
-  ({error, isMenuHidden, theme}) => {
+  ({error, isMenuHidden, isMenuHiding, theme}) => {
     const themedFocusOutlineColor = theme.canvas.palette.common.focusOutline;
     const buttonFocusStyles = {
       borderColor: themedFocusOutlineColor,
       boxShadow: `inset 0 0 0 1px ${themedFocusOutlineColor}`,
     };
 
     if (error === undefined) {
-      // If there isn't an error, apply focus and hover styles if the
-      // menu is hidden (otherwise, if the menu is visible, style
+      // If there isn't an error, apply focus and hover styles if the menu is
+      // hidden or hiding (otherwise, the menu is completely visible: style
       // the button as if it had focus)
-      return isMenuHidden
+      return isMenuHidden || isMenuHiding
         ? {
             '&:focus:not([disabled])': {
               ...buttonFocusStyles,
@@ -353,10 +353,7 @@ export default class SelectBase extends React.Component<SelectBaseProps> {
         value: option.value,
         ...(onOptionSelection
           ? {
-              // mouseDown provides a slightly better UX than click
-              // since visual feedback of selected option is more
-              // immediate
-              onMouseDown: (event: React.MouseEvent) => {
+              onClick: (event: React.MouseEvent) => {
                 event.preventDefault();
                 onOptionSelection(index);
               },
@@ -421,6 +418,7 @@ export default class SelectBase extends React.Component<SelectBaseProps> {
           error={error}
           grow={grow}
           isMenuHidden={isMenuHidden}
+          isMenuHiding={isMenuHiding}
           onKeyDown={onKeyDown}
           // Prevent Firefox from triggering click handler on spacebar during
           // type-ahead when the menu is closed (and, thus, incorrectly displaying

modules/_labs/select/react/lib/SelectOption.tsx

@@ -53,6 +53,7 @@ const Option = styled('li')<SelectOptionProps>(
     listStyle: 'none',
     // In case the content of the option is empty/undefined for some reason
     minHeight: type.body.lineHeight,
+    textAlign: 'left',
   },
   ({disabled, focused, interactive, theme}) => {
     if (disabled) {
@@ -78,14 +79,14 @@ const Option = styled('li')<SelectOptionProps>(
             '&:hover': {
               backgroundColor: commonColors.hoverBackground,
             },
-            '&:active': {
+            '&:active, &:active[aria-selected="true"]': {
               ...activeStyles(theme),
             },
           }
         : {};
       return {
         // Place selected styles after interactive styles to have selected styles
-        // override interactive styles
+        // override interactive styles (subject to CSS specificity rules)
         ...interactiveStyles,
         ...selectedStyles,
       };

modules/_labs/select/react/spec/Select.spec.tsx

@@ -8,7 +8,10 @@ describe('Select', () => {
   const selectButtonRole = 'button';
   const optionRole = 'option';
 
-  const options = [{label: 'E-mail', value: 'email'}, {label: 'Phone', value: 'phone'}];
+  const options = [
+    {label: 'E-mail', value: 'email'},
+    {label: 'Phone', value: 'phone'},
+  ];
 
   afterEach(() => {
     cb.mockReset();
@@ -29,11 +32,11 @@ describe('Select', () => {
     });
   });
 
-  describe('when the mouse button is pressed down on an option with a different value than the current value of the select', () => {
+  describe('when an option with a different value than the current value of the select is clicked', () => {
     it('should call the onChange callback', () => {
       const {getAllByRole, getByRole} = render(<Select onChange={cb} options={options} />);
       fireEvent.click(getByRole(selectButtonRole));
-      fireEvent.mouseDown(getAllByRole(optionRole)[1]);
+      fireEvent.click(getAllByRole(optionRole)[1]);
       expect(cb).toHaveBeenCalledTimes(1);
     });
   });