Merge branch 'master' into custom-styles-button-update-24-09

Workday · Oct 21, 2024 · 6fac4a9 · 6fac4a9
2 parents c61de61 + 6350b96
commit 6fac4a9
Show file tree

Hide file tree

Showing 21 changed files with 280 additions and 185 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/..._examples/stories/mdx/FormsWithFormik.mdx → ..._examples/stories/mdx/FormsWithFormik.mdx b/..._examples/stories/mdx/FormsWithFormik.mdx → ..._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';
 
-<Meta title="Examples/Preview/Forms/With Formik" />
+<Meta title="Examples/Forms/Select With Formik" />
 
 # Canvas Kit Examples
 
 ## Select Using Formik
 
 <ExampleCodeBlock code={SelectWithFormik} />
-
-## Controlled Text Inputs Using Formik
-
-<ExampleCodeBlock code={TextInputWithFormik} />
diff --git 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 = () => {
             <FormField
               orientation={labelOrientation}
               grow
-              cs={formFieldStencil({density})}
+              cs={formFieldStencil({density, labelOrientation})}
               id="foo"
             >
               <FormField.Label>Choose Country</FormField.Label>
@@ -300,67 +345,94 @@ export const Density = () => {
                 </Select.Popper>
               </Select>
             </FormField>
-            <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+            <FormField
+              grow
+              orientation={labelOrientation}
+              cs={formFieldStencil({density, labelOrientation})}
+            >
               <FormField.Label>Full Name</FormField.Label>
               <FormField.Input as={TextInput} cs={inputStencil({density})} />
             </FormField>
-            <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+            <FormField
+              grow
+              orientation={labelOrientation}
+              cs={formFieldStencil({density, labelOrientation})}
+            >
               <FormField.Label>Phone Number</FormField.Label>
               <FormField.Input as={TextInput} cs={inputStencil({density})} />
             </FormField>
-            <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+            <FormField
+              grow
+              orientation={labelOrientation}
+              cs={formFieldStencil({density, labelOrientation})}
+            >
               <FormField.Label>Street Address</FormField.Label>
               <FormField.Input as={TextInput} cs={inputStencil({density})} />
             </FormField>
-            <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+            <FormField
+              grow
+              orientation={labelOrientation}
+              cs={formFieldStencil({density, labelOrientation})}
+            >
               <FormField.Label>City</FormField.Label>
               <FormField.Input as={TextInput} cs={inputStencil({density})} />
             </FormField>
             <div {...sideBySideInputs({labelOrientation: labelOrientation, density})}>
-              <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+              <FormField
+                grow
+                orientation={labelOrientation}
+                cs={formFieldStencil({density, labelOrientation})}
+              >
                 <FormField.Label>State</FormField.Label>
                 <FormField.Input as={TextInput} cs={inputStencil({density})} />
               </FormField>
               <FormField
                 grow
                 orientation={labelOrientation}
-                cs={[formFieldStencil({density}), zipCodeContainerStyles]}
+                cs={[formFieldStencil({density, labelOrientation}), zipCodeContainerStyles]}
               >
                 <FormField.Label>Zip Code</FormField.Label>
                 <FormField.Input cs={[inputStencil({density}), zipCodeInput]} as={TextInput} />
               </FormField>
             </div>
-            <FormField orientation={labelOrientation} cs={formFieldStencil({density})}>
+            <FormField
+              orientation={labelOrientation}
+              cs={formFieldStencil({density, labelOrientation})}
+            >
               <FormField.Label>Enable Fast Shipping</FormField.Label>
               <FormField.Field>
                 <FormField.Input as={Switch} />
               </FormField.Field>
             </FormField>
-            <FormFieldGroup cs={formFieldStencil({density})} orientation={labelOrientation}>
+            <FormFieldGroup
+              cs={formFieldStencil({density, labelOrientation})}
+              orientation={labelOrientation}
+            >
               <FormFieldGroup.Label>Credit Card</FormFieldGroup.Label>
-
-              <FormFieldGroup.List cs={formFieldGroupListStyles}>
-                <FormFieldGroup.Input
-                  as={TextInput}
-                  placeholder="XXXX"
-                  cs={[inputStencil({density}), creditCardInputStyles]}
-                />
-                <FormFieldGroup.Input
-                  as={TextInput}
-                  placeholder="XXXX"
-                  cs={[inputStencil({density}), creditCardInputStyles]}
-                />
-                <FormFieldGroup.Input
-                  as={TextInput}
-                  placeholder="XXXX"
-                  cs={[inputStencil({density}), creditCardInputStyles]}
-                />
-                <FormFieldGroup.Input
-                  cs={[inputStencil({density}), creditCardInputStyles]}
-                  placeholder="XXXX"
-                  as={TextInput}
-                />
-              </FormFieldGroup.List>
+              <FormFieldGroup.Field>
+                <FormFieldGroup.List cs={formFieldGroupListStyles}>
+                  <FormFieldGroup.Input
+                    as={TextInput}
+                    placeholder="XXXX"
+                    cs={creditCardInputStencil({density})}
+                  />
+                  <FormFieldGroup.Input
+                    as={TextInput}
+                    placeholder="XXXX"
+                    cs={creditCardInputStencil({density})}
+                  />
+                  <FormFieldGroup.Input
+                    as={TextInput}
+                    placeholder="XXXX"
+                    cs={creditCardInputStencil({density})}
+                  />
+                  <FormFieldGroup.Input
+                    cs={creditCardInputStencil({density})}
+                    placeholder="XXXX"
+                    as={TextInput}
+                  />
+                </FormFieldGroup.List>
+              </FormFieldGroup.Field>
             </FormFieldGroup>
           </div>
         </form>

diff --git a/...stories/mdx/examples/SelectWithFormik.tsx → ...stories/mdx/examples/SelectWithFormik.tsx b/...stories/mdx/examples/SelectWithFormik.tsx → ...stories/mdx/examples/SelectWithFormik.tsx
diff --git 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",