chore: Release 4.0.0-beta.0

4.0-MIGRATION-GUIDE.md

@@ -0,0 +1,145 @@
+# Canvas Kit 4.0 Migration Guide
+
+Below are the breaking changes made in Canvas Kit v4. Please reach out if you have any questions
+about the update.
+
+CSS users rejoice! :tada: No breaking changes in this release. The following changes all relate to
+our React infrastructure and components.
+
+## Infrastructure Upgrades
+
+Breaking:
+
+- React & ReactDOM upgraded to 16.12 (https://github.com/Workday/canvas-kit/pull/533)
+  - We are now fully adopting hooks, so <= 16.7 is no longer supported
+
+Non-breaking:
+
+- Typescript upgraded to v3.8 (https://github.com/Workday/canvas-kit/pull/533)
+  - [downlevel-dts](https://github.com/sandersn/downlevel-dts) was used to resolve breaking changes
+    in `typescript@3.7`, so older versions of typescript are still supported. However, it is
+    recommended to use v3.8.
+
+## Breaking Component Changes
+
+### Button
+
+We've refactored our Button components to simplify logic and add support for theming.
+
+PRs:
+
+- https://github.com/Workday/canvas-kit/pull/471
+- https://github.com/Workday/canvas-kit/pull/509
+- https://github.com/Workday/canvas-kit/pull/527
+
+#### Changes
+
+- Some of the button variants have been split into different components to prevent invalid API
+  combinations. `DeleteButton`, `HighlightButton`, and `OutlineButton` are now separate components
+  with their own interface. Here are some of the invalid prop combinations that are no longer
+  possible:
+
+  - Delete button with a data label or icon
+  - Dropdown button with a data label or icon
+  - Highlight button with a data label
+  - Highlight button without an icon
+  - Dropdown with variants other than primary and secondary
+  - Small buttons with an icon or data label
+  - Small Highlight button
+  - Small Dropdown button
+  - etc.
+
+  - **Required changes:**
+    - `<Button variant={Button.Variant.Delete}>` > `<DeleteButton>`
+    - `<Button variant={Button.Variant.Highlight}>` > `<HighlightButton>`
+    - `<Button variant={Button.Variant.OutlineSecondary}>` > `<OutlineButton>`
+    - `<Button variant={Button.Variant.OutlinePrimary}>` >
+      `<OutlineButton variant={OutlineButton.Variant.Primary}>`
+    - `<Button variant={Button.Variant.OutlineInverse}>` >
+      `<OutlineButton variant={OutlineButton.Variant.Inverse}>`
+    - All invalid prop combinations (noted above) will need to be remedied
+
+- The majority of the button variant types have changed. `BaseButtonProps` is no longer available as
+  each button variant has their own interface.
+- React >= 16.8 required for hooks
+- Spacing within buttons has been corrected to match the specs. This may cause horizontal flow
+  changes
+- `TextButton` now only allows `TextButtonSize.Small` and `TextButtonSize.Medium`. **Required
+  changes:**
+  - `TextButtonSize.Medium` > `"small"` or `TextButtonSize.Small`
+  - `TextButtonSize.Large` > `"medium"` or `TextButtonSize.Medium`
+- All caps variants for TextButton have been turned into a prop
+  - **Required changes:**
+  - `<TextButton variant={TextButton.Variant.AllCaps}>` > `<TextButton allCaps={true}>`
+  - `<TextButton variant={TextButton.Variant.InverseAllCaps}>` >
+    `<TextButton variant={TextButton.Variant.Inverse} allCaps={true}>`
+- All caps large/medium text buttons now correctly use 16px font (up from 14)
+
+#### Quality of Life changes:
+
+With the new components for variants and the simpler types for sizes, the code for complex buttons
+is much more concise.
+
+Before:
+
+```tsx
+<Button variant={Button.Variant.OutlineSecondary} size={Button.Size.Large}>
+  Label
+</Button>
+```
+
+After:
+
+```tsx
+<OutlineButton size="large">Label</OutlineButton>
+```
+
+---
+
+### IconButtonToggleGroup
+
+This component has been renamed to `SegmentedControl` and has been converted into it's own component
+(`@workday/canvas-kit-react-segmented-control`). `IconButtonToggleGroup` is no longer exported from
+`@workday/canvas-kit-react-button`.
+
+PRs:
+
+- https://github.com/Workday/canvas-kit/pull/505
+- https://github.com/Workday/canvas-kit/pull/524
+
+Before:
+
+```tsx
+import {IconButtonToggleGroup} from '@workday/canvas-kit-react-button';
+
+<IconButtonToggleGroup>
+  <IconButton icon={listViewIcon} title="List View" aria-label="List View" />
+  <IconButton icon={worksheetsIcon} title="Worksheets" aria-label="Worksheets" />
+</IconButtonToggleGroup>;
+```
+
+After:
+
+```tsx
+import {SegmentedControl} from '@workday/canvas-kit-labs-react-segmented-control';
+
+<SegmentedControl>
+  <IconButton icon={listViewIcon} title="List View" aria-label="List View" />
+  <IconButton icon={worksheetsIcon} title="Worksheets" aria-label="Worksheets" />
+</SegmentedControl>;
+```
+
+---
+
+### Modal
+
+Modal now uses React Portals which could cause a visual breaking change related to z-indexing
+
+PRs:
+
+- https://github.com/Workday/canvas-kit/pull/419
+
+---
+
+**More to come! Check out [our 4.0 tracking issue](https://github.com/Workday/canvas-kit/issues/483)
+for all planned changes.**

CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 4.0.0-beta.0 (2020-03-30)
+
+### Infrastructure
+
+- ci: Release canary builds for prerelease branches ([#481](https://github.com/Workday/canvas-kit/pull/481)) [@anicholls](https://github.com/anicholls)
+- ci: Fix prerelease canary builds ([#501](https://github.com/Workday/canvas-kit/pull/501)) [@anicholls](https://github.com/anicholls)
+- feat: Add script for easy promotion of labs components ([#522](https://github.com/Workday/canvas-kit/pull/522)) [@anicholls](https://github.com/anicholls)
+- chore: Manage dependencies ([#533](https://github.com/Workday/canvas-kit/pull/533)) [@anicholls](https://github.com/anicholls)
+
+### Components
+
+- **[BREAKING]** refactor(button): Simplify Button components and prep for theming ([#471](https://github.com/Workday/canvas-kit/pull/471)) [@anicholls](https://github.com/anicholls)
+- **[BREAKING]** refactor: Rename and move IconButtonToggleGroup to SegmentedControl ([#505](https://github.com/Workday/canvas-kit/pull/505)) [@anicholls](https://github.com/anicholls)
+- **[BREAKING]** fix(modal): Use React portals for accessibility fixes ([#419](https://github.com/Workday/canvas-kit/pull/419)) [@NicholasBoll](https://github.com/NicholasBoll)
+- **[BREAKING]** chore: Promote SegmentedControl out of labs ([#524](https://github.com/Workday/canvas-kit/pull/524)) [@anicholls](https://github.com/anicholls)
+- fix(button): Misc. fixes after refactor ([#509](https://github.com/Workday/canvas-kit/pull/509)) [@anicholls](https://github.com/anicholls)
+- feat(button): Add theming support to buttons ([#527](https://github.com/Workday/canvas-kit/pull/527)) [@anicholls](https://github.com/anicholls)
+
 # 3.5.0 (2020-03-12)
 
 ### Infrastructure

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "3.5.0",
+  "version": "4.0.0-beta.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

modules/_canvas-kit-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "3.5.0",
+  "version": "4.0.0-beta.0",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -16,27 +16,27 @@
     "url": "https://github.com/Workday/canvas-kit/tree/master/modules/_canvas-kit-css"
   },
   "dependencies": {
-    "@workday/canvas-kit-css-action-bar": "^3.5.0",
-    "@workday/canvas-kit-css-banner": "^3.5.0",
-    "@workday/canvas-kit-css-button": "^3.5.0",
-    "@workday/canvas-kit-css-card": "^3.5.0",
-    "@workday/canvas-kit-css-checkbox": "^3.5.0",
-    "@workday/canvas-kit-css-common": "^3.5.0",
-    "@workday/canvas-kit-css-core": "^3.5.0",
-    "@workday/canvas-kit-css-form-field": "^3.5.0",
-    "@workday/canvas-kit-css-icon": "^3.5.0",
-    "@workday/canvas-kit-css-layout": "^3.5.0",
-    "@workday/canvas-kit-css-loading-animation": "^3.5.0",
-    "@workday/canvas-kit-css-menu": "^3.5.0",
-    "@workday/canvas-kit-css-modal": "^3.5.0",
-    "@workday/canvas-kit-css-page-header": "^3.5.0",
-    "@workday/canvas-kit-css-popup": "^3.5.0",
-    "@workday/canvas-kit-css-radio": "^3.5.0",
-    "@workday/canvas-kit-css-select": "^3.5.0",
-    "@workday/canvas-kit-css-table": "^3.5.0",
-    "@workday/canvas-kit-css-text-area": "^3.5.0",
-    "@workday/canvas-kit-css-text-input": "^3.5.0",
-    "@workday/canvas-kit-css-tooltip": "^3.5.0"
+    "@workday/canvas-kit-css-action-bar": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-banner": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-button": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-card": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-checkbox": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-common": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-core": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-form-field": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-icon": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-layout": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-loading-animation": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-menu": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-modal": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-page-header": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-popup": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-radio": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-select": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-table": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-text-area": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-text-input": "^4.0.0-beta.0",
+    "@workday/canvas-kit-css-tooltip": "^4.0.0-beta.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

modules/_canvas-kit-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "3.5.0",
+  "version": "4.0.0-beta.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,34 +46,34 @@
     "react": ">= 16.8 < 17"
   },
   "dependencies": {
-    "@workday/canvas-kit-react-action-bar": "^3.5.0",
-    "@workday/canvas-kit-react-avatar": "^3.5.0",
-    "@workday/canvas-kit-react-banner": "^3.5.0",
-    "@workday/canvas-kit-react-button": "^3.5.0",
-    "@workday/canvas-kit-react-card": "^3.5.0",
-    "@workday/canvas-kit-react-checkbox": "^3.5.0",
-    "@workday/canvas-kit-react-color-picker": "^3.5.0",
-    "@workday/canvas-kit-react-common": "^3.5.0",
-    "@workday/canvas-kit-react-cookie-banner": "^3.5.0",
-    "@workday/canvas-kit-react-core": "^3.5.0",
-    "@workday/canvas-kit-react-form-field": "^3.5.0",
-    "@workday/canvas-kit-react-icon": "^3.5.0",
-    "@workday/canvas-kit-react-layout": "^3.5.0",
-    "@workday/canvas-kit-react-loading-animation": "^3.5.0",
-    "@workday/canvas-kit-react-modal": "^3.5.0",
-    "@workday/canvas-kit-react-page-header": "^3.5.0",
-    "@workday/canvas-kit-react-popup": "^3.5.0",
-    "@workday/canvas-kit-react-radio": "^3.5.0",
-    "@workday/canvas-kit-react-segmented-control": "0.0.0",
-    "@workday/canvas-kit-react-select": "^3.5.0",
-    "@workday/canvas-kit-react-side-panel": "^3.5.0",
-    "@workday/canvas-kit-react-skeleton": "^3.5.0",
-    "@workday/canvas-kit-react-status-indicator": "^3.5.0",
-    "@workday/canvas-kit-react-switch": "^3.5.0",
-    "@workday/canvas-kit-react-table": "^3.5.0",
-    "@workday/canvas-kit-react-text-area": "^3.5.0",
-    "@workday/canvas-kit-react-text-input": "^3.5.0",
-    "@workday/canvas-kit-react-toast": "^3.5.0",
-    "@workday/canvas-kit-react-tooltip": "^3.5.0"
+    "@workday/canvas-kit-react-action-bar": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-avatar": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-banner": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-button": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-card": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-checkbox": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-color-picker": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-common": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-cookie-banner": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-core": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-form-field": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-icon": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-layout": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-loading-animation": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-modal": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-page-header": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-popup": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-radio": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-segmented-control": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-select": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-side-panel": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-skeleton": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-status-indicator": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-switch": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-table": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-text-area": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-text-input": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-toast": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-tooltip": "^4.0.0-beta.0"
   }
 }

modules/_labs/color-picker/react/package.json

@@ -1,7 +1,6 @@
-
 {
   "name": "@workday/canvas-kit-labs-react-color-picker",
-  "version": "0.0.0",
+  "version": "4.0.0-beta.0",
   "description": "Color Picker is a component for selecting a color.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,15 +45,15 @@
   "dependencies": {
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
-    "@workday/canvas-kit-labs-react-core": "^3.5.0",
-    "@workday/canvas-kit-react-button": "^3.5.0",
-    "@workday/canvas-kit-react-color-picker": "^3.5.0",
-    "@workday/canvas-kit-react-common": "^3.5.0",
-    "@workday/canvas-kit-react-core": "^3.5.0",
-    "@workday/canvas-kit-react-form-field": "^3.5.0",
-    "@workday/canvas-kit-react-icon": "^3.5.0",
-    "@workday/canvas-kit-react-popup": "^3.5.0",
-    "@workday/canvas-kit-react-text-input": "^3.5.0",
+    "@workday/canvas-kit-labs-react-core": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-button": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-color-picker": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-common": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-core": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-form-field": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-icon": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-popup": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-text-input": "^4.0.0-beta.0",
     "@workday/canvas-system-icons-web": "^1.0.20"
   },
   "peerDependencies": {

modules/_labs/combobox/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react-combobox",
-  "version": "3.5.0",
+  "version": "4.0.0-beta.0",
   "description": "Text input with an autocomplete menu",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,12 +50,12 @@
   "dependencies": {
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
-    "@workday/canvas-kit-labs-react-menu": "^3.5.0",
-    "@workday/canvas-kit-react-button": "^3.5.0",
-    "@workday/canvas-kit-react-card": "^3.5.0",
-    "@workday/canvas-kit-react-common": "^3.5.0",
-    "@workday/canvas-kit-react-core": "^3.5.0",
-    "@workday/canvas-kit-react-text-input": "^3.5.0",
+    "@workday/canvas-kit-labs-react-menu": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-button": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-card": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-common": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-core": "^4.0.0-beta.0",
+    "@workday/canvas-kit-react-text-input": "^4.0.0-beta.0",
     "@workday/canvas-system-icons-web": "^1.0.20",
     "uuid": "^3.3.3"
   }

modules/_labs/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react-core",
-  "version": "3.5.0",
+  "version": "4.0.0-beta.0",
   "description": "A group of core primitives (i.e. colors, text, etc.)",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,7 +50,7 @@
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
     "@workday/canvas-colors-web": "^0.17.13",
-    "@workday/canvas-kit-react-core": "^3.5.0",
+    "@workday/canvas-kit-react-core": "^4.0.0-beta.0",
     "chroma-js": "^2.1.0",
     "emotion-theming": "^10.0.10",
     "lodash": "^4.17.14",