From c957fabc3c9fb49b646b6b39461ce9cf667049c4 Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Wed, 11 Mar 2020 14:23:04 -0700 Subject: [PATCH 1/8] fix(button): Fix type errors in IconButton stories --- .../button/react/stories/stories_IconButton.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/modules/button/react/stories/stories_IconButton.tsx b/modules/button/react/stories/stories_IconButton.tsx index 09f24566db..310912cb74 100644 --- a/modules/button/react/stories/stories_IconButton.tsx +++ b/modules/button/react/stories/stories_IconButton.tsx @@ -33,7 +33,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module) .addParameters({component: IconButton}) .addDecorator(withReadme(README)) .add('Circle', () => { - const [toggled, setToggled] = React.useState(); + const [toggled, setToggled] = React.useState(); const handleToggle = () => { setToggled(!toggled); }; @@ -82,7 +82,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module) ); }) .add('Square', () => { - const [toggled, setToggled] = React.useState(); + const [toggled, setToggled] = React.useState(); const handleToggle = () => { setToggled(!toggled); }; @@ -131,7 +131,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module) ); }) .add('Square Filled', () => { - const [toggled, setToggled] = React.useState(); + const [toggled, setToggled] = React.useState(); const handleToggle = () => { setToggled(!toggled); }; @@ -178,7 +178,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module) ); }) .add('Plain', () => { - const [toggled, setToggled] = React.useState(); + const [toggled, setToggled] = React.useState(); const handleToggle = () => { setToggled(!toggled); }; @@ -225,7 +225,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module) ); }) .add('Circle Filled', () => { - const [toggled, setToggled] = React.useState(); + const [toggled, setToggled] = React.useState(); const handleToggle = () => { setToggled(!toggled); }; @@ -272,7 +272,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module) ); }) .add('Inverse', () => { - const [toggled, setToggled] = React.useState(); + const [toggled, setToggled] = React.useState(); const handleToggle = () => { setToggled(!toggled); }; @@ -325,7 +325,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module) ); }) .add('Inverse Filled', () => { - const [toggled, setToggled] = React.useState(); + const [toggled, setToggled] = React.useState(); const handleToggle = () => { setToggled(!toggled); }; From 8b4257c1fac5114199a5354fb08ffb1769dddb8e Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Wed, 11 Mar 2020 14:35:41 -0700 Subject: [PATCH 2/8] fix(button): Fix incorrect package.json fields --- modules/button/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/button/react/package.json b/modules/button/react/package.json index 9cd1a84e06..2af373396c 100644 --- a/modules/button/react/package.json +++ b/modules/button/react/package.json @@ -11,7 +11,7 @@ "types": "dist/es6/index.d.ts", "repository": { "type": "git", - "url": "https://github.com/Workday/canvas-kit/tree/master/modules/_labs/button/react" + "url": "https://github.com/Workday/canvas-kit/tree/master/modules/button/react" }, "files": [ "dist/", From b4d5669cc5e1b8e2eb7cf3c7dbc197f623b738fa Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Wed, 11 Mar 2020 15:24:53 -0700 Subject: [PATCH 3/8] fix(button): Add missing default export --- modules/button/react/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/button/react/index.ts b/modules/button/react/index.ts index d5d3252c25..a0fdddba14 100644 --- a/modules/button/react/index.ts +++ b/modules/button/react/index.ts @@ -1,4 +1,4 @@ -export {default as Button, default as beta_Button, ButtonProps} from './lib/Button'; +export {default, default as Button, default as beta_Button, ButtonProps} from './lib/Button'; export {default as DeleteButton, DeleteButtonProps} from './lib/DeleteButton'; export {default as deprecated_Button, DeprecatedButtonProps} from './lib/deprecated_Button'; From de91c4d9e68ad22bd15e5f9f5d19d49e47f215a7 Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Wed, 11 Mar 2020 16:07:51 -0700 Subject: [PATCH 4/8] docs(button): Fix button css readme --- modules/button/css/README.md | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/modules/button/css/README.md b/modules/button/css/README.md index 86705b69c7..9a7cde98c6 100644 --- a/modules/button/css/README.md +++ b/modules/button/css/README.md @@ -47,10 +47,10 @@ to use the class name `wdc-btn-deprecated` for the old styling. Note: this will in a future release. ```html - + - - + + ``` --- @@ -284,7 +284,9 @@ Apply primary styling to the button by adding `.wdc-btn-primary` to the buttons ``` ### Text Button -> Use by adding `.wdc-btn-text` when you want text to behave like a button. If you want display text on a dark background you can use `.wdc-btn-text-inverse`. + +> Use by adding `.wdc-btn-text` when you want text to behave like a button. If you want display text +> on a dark background you can use `.wdc-btn-text-inverse`. ```html @@ -293,7 +295,10 @@ Apply primary styling to the button by adding `.wdc-btn-primary` to the buttons ``` ### Inline Icon -You can use a [System Icon](../../icon/css/README.md) either before or after the text of Primary, Secondary, Delete and Text buttons. The class `.wdc-icon-position-left` (default) or `.wdc-icon-position-right` adjust the margin of the icon. + +You can use a [System Icon](../../icon/css/README.md) either before or after the text of Primary, +Secondary, Delete and Text buttons. The class `.wdc-icon-position-left` (default) or +`.wdc-icon-position-right` adjust the margin of the icon. `System Icon` requires a JavaScript import for the injector: @@ -309,11 +314,11 @@ initializeIcons(); - Continue + Continue + ``` - **Accessibility note**: When an attached menu is displayed, add `aria-expanded="true"` to the button. From d66891e5513fa75698d6b92ded937b57d84f2c5b Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Wed, 11 Mar 2020 16:10:12 -0700 Subject: [PATCH 5/8] fix(popup): Fix popup after button refactor --- modules/popup/react/lib/Popup.tsx | 12 ++++++------ modules/popup/react/stories/stories.tsx | 26 ++++++++----------------- 2 files changed, 14 insertions(+), 24 deletions(-) diff --git a/modules/popup/react/lib/Popup.tsx b/modules/popup/react/lib/Popup.tsx index 7e1fdcacd6..3bed6f93fc 100644 --- a/modules/popup/react/lib/Popup.tsx +++ b/modules/popup/react/lib/Popup.tsx @@ -4,7 +4,7 @@ import {keyframes} from '@emotion/core'; import uuid from 'uuid/v4'; import Card from '@workday/canvas-kit-react-card'; -import {IconButton, IconButtonSize} from '@workday/canvas-kit-react-button'; +import {IconButton} from '@workday/canvas-kit-react-button'; import {CanvasDepthValue, spacing} from '@workday/canvas-kit-react-core'; import {TransformOrigin, getTranslateFromOrigin} from '@workday/canvas-kit-react-common'; import {xIcon} from '@workday/canvas-system-icons-web'; @@ -27,10 +27,10 @@ export interface PopupProps extends React.HTMLAttributes { */ transformOrigin: TransformOrigin; /** - * The size of the Popup close button. Accepts `Small` or `Medium`. - * @default IconButtonSize.Medium + * The size of the Popup close button. Accepts `small` or `medium`. + * @default 'medium' */ - closeIconSize: IconButtonSize; + closeIconSize: 'small' | 'medium'; /** * The ref to the underlying popup container element. Use this to check click targets against when closing the Popup. */ @@ -106,7 +106,7 @@ export default class Popup extends React.Component { static defaultProps = { padding: Popup.Padding.l, - closeIconSize: IconButton.Size.Medium, + closeIconSize: 'medium', closeLabel: 'Close', transformOrigin: { horizontal: 'center', @@ -144,7 +144,7 @@ export default class Popup extends React.Component { { const {anchorEl, open} = this.state; return (
- + Delete Item { Are you sure you'd like to delete the item titled 'My Item'?
- - + + @@ -90,12 +82,10 @@ storiesOf('Components|Popups/Popup/React', module) Are you sure you'd like to delete the item titled 'My Item'? - - + + ), { From 4d75bc4089a388afd0a34cb34e5e948b4f48f944 Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Wed, 11 Mar 2020 16:12:29 -0700 Subject: [PATCH 6/8] fix: Use css buttons for popup and modal css stories --- modules/modal/css/stories.tsx | 20 ++++++++++---------- modules/popup/css/stories.tsx | 20 ++++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/modules/modal/css/stories.tsx b/modules/modal/css/stories.tsx index b7448fd6e7..32831a34d3 100644 --- a/modules/modal/css/stories.tsx +++ b/modules/modal/css/stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {storiesOf} from '@storybook/react'; import withReadme from 'storybook-readme/with-readme'; import README from './README.md'; -import {beta_Button as Button} from '@workday/canvas-kit-react-button'; +import '@workday/canvas-kit-css-button/index.scss'; import './index.scss'; // @ts-ignore import initializeIcons from '../../icon/css/lib/canvas-kit-css-icon'; @@ -28,9 +28,9 @@ class ModalWrapper extends React.Component<{}, ModalWrapperState> { const {open} = this.state; return (
- + {open ? (
{
Are you sure you'd like to delete the item titled 'My Item'?
- - + +
) : null} diff --git a/modules/popup/css/stories.tsx b/modules/popup/css/stories.tsx index 1754365689..aba60825c5 100644 --- a/modules/popup/css/stories.tsx +++ b/modules/popup/css/stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {storiesOf} from '@storybook/react'; import withReadme from 'storybook-readme/with-readme'; import README from './README.md'; -import {beta_Button as Button} from '@workday/canvas-kit-react-button'; +import '@workday/canvas-kit-css-button/index.scss'; import './index.scss'; // @ts-ignore import initializeIcons from '../../icon/css/lib/canvas-kit-css-icon'; @@ -34,9 +34,9 @@ class PopupWrapper extends React.Component<{}, PopupWrapperState> { position: 'relative', }} > - + {open ? (
{
Are you sure you'd like to delete the item titled 'My Item'?
- - + +
) : null}
From 6a39ae981dee239087c38193b6ccdf759cdef8df Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Wed, 11 Mar 2020 16:13:24 -0700 Subject: [PATCH 7/8] fix(toast): Fix toast icon size after button refactor --- modules/toast/react/lib/Toast.tsx | 3 +-- modules/toast/react/package.json | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/modules/toast/react/lib/Toast.tsx b/modules/toast/react/lib/Toast.tsx index e3da02983b..43fda54aa2 100644 --- a/modules/toast/react/lib/Toast.tsx +++ b/modules/toast/react/lib/Toast.tsx @@ -5,7 +5,6 @@ import {SystemIcon} from '@workday/canvas-kit-react-icon'; import {checkIcon} from '@workday/canvas-system-icons-web'; import {CanvasSystemIcon} from '@workday/design-assets-types'; import {TransformOrigin} from '@workday/canvas-kit-react-common'; -import {IconButtonSize} from '@workday/canvas-kit-react-button'; import styled from '@emotion/styled'; export interface ToastProps { @@ -96,7 +95,7 @@ export default class Toast extends React.Component { transformOrigin={transformOrigin} padding={PopupPadding.s} handleClose={onClose} - closeIconSize={IconButtonSize.Small} + closeIconSize="small" {...elemProps} > diff --git a/modules/toast/react/package.json b/modules/toast/react/package.json index 77065b5a27..8a293c16cf 100644 --- a/modules/toast/react/package.json +++ b/modules/toast/react/package.json @@ -41,7 +41,6 @@ "dependencies": { "@emotion/core": "^10.0.28", "@emotion/styled": "^10.0.27", - "@workday/canvas-kit-react-button": "^3.5.0", "@workday/canvas-kit-react-common": "^3.5.0", "@workday/canvas-kit-react-core": "^3.5.0", "@workday/canvas-kit-react-icon": "^3.5.0", From 0eedf4cb182d998ebd68dc1e5dcb8178400dd0d3 Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Fri, 13 Mar 2020 12:29:35 -0700 Subject: [PATCH 8/8] refactor(pagination): Use correct font size & weight after refactor --- modules/_labs/pagination/react/lib/Pages.tsx | 34 +++++++++----------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/modules/_labs/pagination/react/lib/Pages.tsx b/modules/_labs/pagination/react/lib/Pages.tsx index 6dae2fdd56..e7ac877444 100644 --- a/modules/_labs/pagination/react/lib/Pages.tsx +++ b/modules/_labs/pagination/react/lib/Pages.tsx @@ -1,5 +1,6 @@ /** @jsx jsx */ import {css, jsx} from '@emotion/core'; +import styled from '@emotion/styled'; import range from 'lodash/range'; import React from 'react'; @@ -15,27 +16,24 @@ interface PagesProps { pageButtonAriaLabel: (page: number, selected: boolean) => string; } -const noPointerEvents = css({ +const ellipsisStyle = css({ pointerEvents: 'none', -}); - -const autoWidth = css({ - width: 'auto', -}); - -const ellipsisStyle = css(noPointerEvents, { width: canvas.spacing.l, textAlign: 'center', display: 'inline-block', }); -const noTransitions = css(autoWidth, { - '&:not(:hover)': {transition: 'none !important'}, -}); - -const activeStyling = css(noPointerEvents, noTransitions, autoWidth, { - color: canvas.colors.frenchVanilla100, -}); +const PageButton = styled(IconButton)<{current: boolean}>( + { + width: 'auto', + ...type.small, + }, + ({current}) => ({ + color: current ? canvas.colors.frenchVanilla100 : undefined, + pointerEvents: current ? 'none' : undefined, + '&:not(:hover)': {transition: current ? 'none !important' : undefined}, + }) +); /** * Given some information about the page, return a tuple of left and right number @@ -74,7 +72,7 @@ export function getPages(total: number, current: number, isMobile: boolean): [nu const Pages = ({total, current, onPageClick, isMobile, pageButtonAriaLabel}: PagesProps) => { const pageToButton = (page: number) => ( - onPageClick(page)} toggled={page === current} - css={page === current ? activeStyling : noTransitions} + current={page === current} > {page} - + ); const [left, right] = getPages(total, current, isMobile);