From 032e51bbff20038cf0317c04685d8ec782008b8a Mon Sep 17 00:00:00 2001 From: Manuel Carrera Date: Mon, 21 Oct 2024 14:27:35 -0600 Subject: [PATCH 1/2] fix: Clean up Select file structure and move examples to main react (#2992) Some file clean up and documentation [category:Components] Co-authored-by: manuel.carrera --- .../_examples/stories/mdx/FormsWithFormik.mdx | 7 +- .../stories/mdx/examples/Density.tsx | 150 +++++++++++++----- .../stories/mdx/examples/SelectWithFormik.tsx | 0 modules/react/select/lib/Select.tsx | 120 +------------- modules/react/select/lib/SelectCard.tsx | 23 +++ modules/react/select/lib/SelectInput.tsx | 89 +++++++++++ modules/react/select/lib/SelectItem.tsx | 18 +++ 7 files changed, 247 insertions(+), 160 deletions(-) rename modules/{preview-react => react}/_examples/stories/mdx/FormsWithFormik.mdx (50%) rename modules/{preview-react => react}/_examples/stories/mdx/examples/SelectWithFormik.tsx (100%) create mode 100644 modules/react/select/lib/SelectCard.tsx create mode 100644 modules/react/select/lib/SelectInput.tsx create mode 100644 modules/react/select/lib/SelectItem.tsx diff --git a/modules/preview-react/_examples/stories/mdx/FormsWithFormik.mdx b/modules/react/_examples/stories/mdx/FormsWithFormik.mdx similarity index 50% rename from modules/preview-react/_examples/stories/mdx/FormsWithFormik.mdx rename to modules/react/_examples/stories/mdx/FormsWithFormik.mdx index 6b4a1321d1..28343af8a2 100644 --- a/modules/preview-react/_examples/stories/mdx/FormsWithFormik.mdx +++ b/modules/react/_examples/stories/mdx/FormsWithFormik.mdx @@ -1,15 +1,10 @@ import {ExampleCodeBlock} from '@workday/canvas-kit-docs'; import {SelectWithFormik} from './examples/SelectWithFormik'; -import {TextInputWithFormik} from './examples/TextInputWithFormik'; - + # Canvas Kit Examples ## Select Using Formik - -## Controlled Text Inputs Using Formik - - diff --git a/modules/react/_examples/stories/mdx/examples/Density.tsx b/modules/react/_examples/stories/mdx/examples/Density.tsx index 1d9ecdf275..edbd9e842e 100644 --- a/modules/react/_examples/stories/mdx/examples/Density.tsx +++ b/modules/react/_examples/stories/mdx/examples/Density.tsx @@ -17,7 +17,6 @@ const formStyles = createStyles({ const formFieldGroupListStyles = createStyles({ display: 'inline-flex', flexDirection: 'row', - padding: system.space.zero, flexWrap: 'wrap', }); @@ -109,13 +108,50 @@ const formFieldStencil = createStencil({ gap: system.space.x2, }, }, + labelOrientation: { + horizontalStart: {}, + horizontalEnd: {}, + vertical: {}, + }, }, -}); - -const creditCardInputStyles = createStyles({ - width: calc.add(system.space.x10, system.space.x10), - minWidth: calc.add(system.space.x10, system.space.x10), - textAlign: 'center', + compound: [ + { + modifiers: {labelOrientation: 'horizontalStart', density: 'high'}, + styles: { + gap: system.space.x4, + }, + }, + { + modifiers: {labelOrientation: 'horizontalStart', density: 'medium'}, + styles: { + gap: system.space.x6, + }, + }, + { + modifiers: {labelOrientation: 'horizontalStart', density: 'low'}, + styles: { + gap: system.space.x8, + }, + }, + { + modifiers: {labelOrientation: 'horizontalEnd', density: 'high'}, + styles: { + gap: system.space.x4, + }, + }, + { + modifiers: {labelOrientation: 'horizontalEnd', density: 'medium'}, + styles: { + gap: system.space.x6, + }, + }, + { + modifiers: {labelOrientation: 'horizontalEnd', density: 'low'}, + styles: { + gap: system.space.x8, + }, + }, + ], }); const selectStencil = createStencil({ @@ -167,6 +203,15 @@ const inputStencil = createStencil({ }, }); +const creditCardInputStencil = createStencil({ + extends: inputStencil, + base: { + width: calc.add(system.space.x10, system.space.x10), + minWidth: calc.add(system.space.x10, system.space.x10), + textAlign: 'center', + }, +}); + const flexContainerStencil = createStencil({ base: { display: 'flex', @@ -283,7 +328,7 @@ export const Density = () => { Choose Country @@ -300,67 +345,94 @@ export const Density = () => { - + Full Name - + Phone Number - + Street Address - + City
- + State Zip Code
- + Enable Fast Shipping - + Credit Card - - - - - - - + + + + + + + + diff --git a/modules/preview-react/_examples/stories/mdx/examples/SelectWithFormik.tsx b/modules/react/_examples/stories/mdx/examples/SelectWithFormik.tsx similarity index 100% rename from modules/preview-react/_examples/stories/mdx/examples/SelectWithFormik.tsx rename to modules/react/_examples/stories/mdx/examples/SelectWithFormik.tsx diff --git a/modules/react/select/lib/Select.tsx b/modules/react/select/lib/Select.tsx index a6e521007b..7ce3fb8178 100644 --- a/modules/react/select/lib/Select.tsx +++ b/modules/react/select/lib/Select.tsx @@ -1,121 +1,11 @@ import React from 'react'; -import {CanvasSystemIcon} from '@workday/design-assets-types'; -import {caretDownSmallIcon} from '@workday/canvas-system-icons-web'; + import {Combobox} from '@workday/canvas-kit-react/combobox'; -import {createStencil, createStyles, CSProps, px2rem} from '@workday/canvas-kit-styling'; -import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input'; -import {mergeStyles} from '@workday/canvas-kit-react/layout'; -import {SystemIcon} from '@workday/canvas-kit-react/icon'; -import {useSelectCard} from './hooks/useSelectCard'; -import {useSelectInput} from './hooks/useSelectInput'; import {useSelectModel} from './hooks/useSelectModel'; -import {createSubcomponent, ExtractProps, createContainer} from '@workday/canvas-kit-react/common'; -import {system} from '@workday/canvas-tokens-web'; - -export interface SelectInputProps extends ExtractProps, CSProps { - /** - * The Icon to render at the start of the `input`. Use this prop if your options - * include icons that you would like to render in the `input` when selected. - * ** Note:An option must be selected in order to render and icon.** - */ - inputStartIcon?: CanvasSystemIcon; -} - -const selectInputStencil = createStencil({ - base: { - caretColor: 'transparent', - cursor: 'default', - '&::selection': { - backgroundColor: 'transparent', - }, - }, -}); - -const selectIconsStencil = createStencil({ - base: { - position: 'absolute', - pointerEvents: 'none', - }, -}); - -const hiddenSelectInputStencil = createStencil({ - base: { - position: 'absolute', - top: system.space.zero, - bottom: system.space.zero, - left: system.space.zero, - right: system.space.zero, - opacity: system.opacity.zero, - cursor: 'default', - pointerEvents: 'none', - }, -}); - -export const SelectInput = createSubcomponent(TextInput)({ - modelHook: useSelectModel, - elemPropsHook: useSelectInput, -})( - ( - {placeholder = 'Choose an option', inputStartIcon, formInputProps, width, ...elemProps}, - Element, - model - ) => { - return ( - - {inputStartIcon && model.state.selectedIds.length > 0 && ( - - - - )} - {/* Hidden input to handle ids */} - - {/* Visual input */} - - - - - - ); - } -); - -export const SelectItem = createSubcomponent('li')({ - modelHook: useSelectModel, - subComponents: { - Icon: Combobox.Menu.Item.Icon, - }, -})>(({children, ...elemProps}, Element, _model) => { - return ( - - {children} - - ); -}); - -const selectCardStyles = createStyles({ - maxHeight: px2rem(300), -}); - -export const SelectCard = createSubcomponent('div')({ - modelHook: useSelectModel, - elemPropsHook: useSelectCard, -})>(({children, ...elemProps}, Element) => { - return ( - - {children} - - ); -}); +import {ExtractProps, createContainer} from '@workday/canvas-kit-react/common'; +import {SelectInput} from './SelectInput'; +import {SelectCard} from './SelectCard'; +import {SelectItem} from './SelectItem'; export interface SelectProps extends ExtractProps {} /** diff --git a/modules/react/select/lib/SelectCard.tsx b/modules/react/select/lib/SelectCard.tsx new file mode 100644 index 0000000000..8ffb2b068f --- /dev/null +++ b/modules/react/select/lib/SelectCard.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +import {Combobox} from '@workday/canvas-kit-react/combobox'; +import {createStyles, px2rem} from '@workday/canvas-kit-styling'; +import {mergeStyles} from '@workday/canvas-kit-react/layout'; +import {useSelectCard} from './hooks/useSelectCard'; +import {useSelectModel} from './hooks/useSelectModel'; +import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; + +const selectCardStyles = createStyles({ + maxHeight: px2rem(300), +}); + +export const SelectCard = createSubcomponent('div')({ + modelHook: useSelectModel, + elemPropsHook: useSelectCard, +})>(({children, ...elemProps}, Element) => { + return ( + + {children} + + ); +}); diff --git a/modules/react/select/lib/SelectInput.tsx b/modules/react/select/lib/SelectInput.tsx new file mode 100644 index 0000000000..e76bd43c91 --- /dev/null +++ b/modules/react/select/lib/SelectInput.tsx @@ -0,0 +1,89 @@ +import React from 'react'; +import {CanvasSystemIcon} from '@workday/design-assets-types'; +import {caretDownSmallIcon} from '@workday/canvas-system-icons-web'; +import {createStencil, CSProps} from '@workday/canvas-kit-styling'; +import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input'; +import {mergeStyles} from '@workday/canvas-kit-react/layout'; +import {SystemIcon} from '@workday/canvas-kit-react/icon'; + +import {useSelectInput} from './hooks/useSelectInput'; +import {useSelectModel} from './hooks/useSelectModel'; +import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; +import {system} from '@workday/canvas-tokens-web'; + +export interface SelectInputProps extends ExtractProps, CSProps { + /** + * The Icon to render at the start of the `input`. Use this prop if your options + * include icons that you would like to render in the `input` when selected. + * ** Note:An option must be selected in order to render and icon.** + */ + inputStartIcon?: CanvasSystemIcon; +} + +const selectInputStencil = createStencil({ + base: { + caretColor: 'transparent', + cursor: 'default', + '&::selection': { + backgroundColor: 'transparent', + }, + }, +}); + +const selectIconsStencil = createStencil({ + base: { + position: 'absolute', + pointerEvents: 'none', + }, +}); + +const hiddenSelectInputStencil = createStencil({ + base: { + position: 'absolute', + top: system.space.zero, + bottom: system.space.zero, + left: system.space.zero, + right: system.space.zero, + opacity: system.opacity.zero, + cursor: 'default', + pointerEvents: 'none', + }, +}); + +export const SelectInput = createSubcomponent(TextInput)({ + modelHook: useSelectModel, + elemPropsHook: useSelectInput, +})( + ( + {placeholder = 'Choose an option', inputStartIcon, formInputProps, width, ...elemProps}, + Element, + model + ) => { + return ( + + {inputStartIcon && model.state.selectedIds.length > 0 && ( + + + + )} + {/* Hidden input to handle ids */} + + {/* Visual input */} + + + + + + ); + } +); diff --git a/modules/react/select/lib/SelectItem.tsx b/modules/react/select/lib/SelectItem.tsx new file mode 100644 index 0000000000..63708b4996 --- /dev/null +++ b/modules/react/select/lib/SelectItem.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import {Combobox} from '@workday/canvas-kit-react/combobox'; +import {useSelectModel} from './hooks/useSelectModel'; +import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; + +export const SelectItem = createSubcomponent('li')({ + modelHook: useSelectModel, + subComponents: { + Icon: Combobox.Menu.Item.Icon, + }, +})>(({children, ...elemProps}, Element, _model) => { + return ( + + {children} + + ); +}); From 6350b962eb767056c20a7ea0a8a74a8a924b6e73 Mon Sep 17 00:00:00 2001 From: alanbsmith Date: Mon, 21 Oct 2024 20:29:19 +0000 Subject: [PATCH 2/2] chore: Release v12.0.1 [skip release] --- CHANGELOG.md | 8 ++++++++ lerna.json | 2 +- modules/codemod/package.json | 2 +- modules/css/package.json | 2 +- modules/docs/package.json | 10 +++++----- modules/labs-css/package.json | 2 +- modules/labs-react/package.json | 6 +++--- modules/popup-stack/package.json | 2 +- modules/preview-css/package.json | 2 +- modules/preview-react/package.json | 6 +++--- modules/react-fonts/package.json | 2 +- modules/react/package.json | 6 +++--- modules/styling-transform/package.json | 4 ++-- modules/styling/package.json | 4 ++-- 14 files changed, 33 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f544c13b42..aba28ef425 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [v12.0.1](https://github.com/Workday/canvas-kit/releases/tag/v12.0.1) (2024-10-21) + +### Components + +- chore: Update deprecated urls to CodeshiftCommunity ([#2977](https://github.com/Workday/canvas-kit/pull/2977)) ([@danieldelcore](https://github.com/danieldelcore)) +- fix: Clean up Select file structure and move examples to main react ([#2992](https://github.com/Workday/canvas-kit/pull/2992)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera) + + ## [v12.0.0](https://github.com/Workday/canvas-kit/releases/tag/v12.0.0) (2024-10-16) ### BREAKING CHANGES diff --git a/lerna.json b/lerna.json index 00c772f758..4ba69c8c06 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "modules/**" ], - "version": "12.0.0", + "version": "12.0.1", "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/modules/codemod/package.json b/modules/codemod/package.json index e50340de2d..d0678c92b0 100644 --- a/modules/codemod/package.json +++ b/modules/codemod/package.json @@ -2,7 +2,7 @@ "name": "@workday/canvas-kit-codemod", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", - "version": "12.0.0", + "version": "12.0.1", "description": "A collection of codemods for use on Workday Canvas Kit packages.", "main": "dist/es6/index.js", "sideEffects": false, diff --git a/modules/css/package.json b/modules/css/package.json index 5f3fd86797..b9db568328 100644 --- a/modules/css/package.json +++ b/modules/css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-css", - "version": "12.0.0", + "version": "12.0.1", "description": "The parent module that contains all Workday Canvas Kit CSS components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/docs/package.json b/modules/docs/package.json index 536ce1cef9..6d86eecf9c 100644 --- a/modules/docs/package.json +++ b/modules/docs/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-docs", - "version": "12.0.0", + "version": "12.0.1", "description": "Documentation components of Canvas Kit components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -44,10 +44,10 @@ "dependencies": { "@emotion/styled": "^11.6.0", "@storybook/csf": "0.0.1", - "@workday/canvas-kit-labs-react": "^12.0.0", - "@workday/canvas-kit-preview-react": "^12.0.0", - "@workday/canvas-kit-react": "^12.0.0", - "@workday/canvas-kit-styling": "^12.0.0", + "@workday/canvas-kit-labs-react": "^12.0.1", + "@workday/canvas-kit-preview-react": "^12.0.1", + "@workday/canvas-kit-react": "^12.0.1", + "@workday/canvas-kit-styling": "^12.0.1", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "markdown-to-jsx": "^7.2.0", diff --git a/modules/labs-css/package.json b/modules/labs-css/package.json index eb4be24455..fefb918d96 100644 --- a/modules/labs-css/package.json +++ b/modules/labs-css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-labs-css", - "version": "12.0.0", + "version": "12.0.1", "description": "The parent module that contains all Workday Canvas Kit Labs CSS components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json index a8bfd19061..872821bf80 100644 --- a/modules/labs-react/package.json +++ b/modules/labs-react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-labs-react", - "version": "12.0.0", + "version": "12.0.1", "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -46,8 +46,8 @@ "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^12.0.0", - "@workday/canvas-kit-styling": "^12.0.0", + "@workday/canvas-kit-react": "^12.0.1", + "@workday/canvas-kit-styling": "^12.0.1", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "@workday/design-assets-types": "^0.2.8", diff --git a/modules/popup-stack/package.json b/modules/popup-stack/package.json index 3a4962f2f9..ff20e4aca2 100644 --- a/modules/popup-stack/package.json +++ b/modules/popup-stack/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-popup-stack", - "version": "12.0.0", + "version": "12.0.1", "description": "Stack for managing popup UIs to coordinate global concerns like escape key handling and rendering order", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/preview-css/package.json b/modules/preview-css/package.json index 0c51b62402..10fa5cd062 100644 --- a/modules/preview-css/package.json +++ b/modules/preview-css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-preview-css", - "version": "12.0.0", + "version": "12.0.1", "description": "The parent module that contains all Workday Canvas Kit Preview CSS components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json index 91c18c8868..db136f30a8 100644 --- a/modules/preview-react/package.json +++ b/modules/preview-react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-preview-react", - "version": "12.0.0", + "version": "12.0.1", "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -46,8 +46,8 @@ "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^12.0.0", - "@workday/canvas-kit-styling": "^12.0.0", + "@workday/canvas-kit-react": "^12.0.1", + "@workday/canvas-kit-styling": "^12.0.1", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "@workday/design-assets-types": "^0.2.8" diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json index 895a787e33..8a66575cca 100644 --- a/modules/react-fonts/package.json +++ b/modules/react-fonts/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-react-fonts", - "version": "12.0.0", + "version": "12.0.1", "description": "Fonts for canvas-kit-react", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/react/package.json b/modules/react/package.json index 4710138770..6198f14d5b 100644 --- a/modules/react/package.json +++ b/modules/react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-react", - "version": "12.0.0", + "version": "12.0.1", "description": "The parent module that contains all Workday Canvas Kit React components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -49,8 +49,8 @@ "@emotion/styled": "^11.6.0", "@popperjs/core": "^2.5.4", "@workday/canvas-colors-web": "^2.0.0", - "@workday/canvas-kit-popup-stack": "^12.0.0", - "@workday/canvas-kit-styling": "^12.0.0", + "@workday/canvas-kit-popup-stack": "^12.0.1", + "@workday/canvas-kit-styling": "^12.0.1", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "@workday/design-assets-types": "^0.2.8", diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json index 5d9047dcaf..698566b2bf 100644 --- a/modules/styling-transform/package.json +++ b/modules/styling-transform/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-styling-transform", - "version": "12.0.0", + "version": "12.0.1", "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -34,7 +34,7 @@ ], "dependencies": { "@emotion/serialize": "^1.0.2", - "@workday/canvas-kit-styling": "^12.0.0", + "@workday/canvas-kit-styling": "^12.0.1", "@workday/canvas-tokens-web": "^2.0.1", "stylis": "4.0.13", "ts-node": "^10.9.1", diff --git a/modules/styling/package.json b/modules/styling/package.json index ecca59ef13..397bf99af4 100644 --- a/modules/styling/package.json +++ b/modules/styling/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-styling", - "version": "12.0.0", + "version": "12.0.1", "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -53,7 +53,7 @@ "@emotion/react": "^11.7.1", "@emotion/serialize": "^1.0.2", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^12.0.0", + "@workday/canvas-kit-react": "^12.0.1", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "typescript": "5.0"