-
Notifications
You must be signed in to change notification settings - Fork 221
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add horizontal start and end label position for form field (#2881)
Fixes: #2809 [category:Components] Release Note: The orientation prop on the FormField component will be updated to accept the following values: `vertical`, `horizontalStart`, and `horizontalEnd`. `horizontal` will still be accepted as a value in v12, but it will be deprecated and slated for removal in a future major release. These changes are intended to provide more flexibility with label alignments on FormField elements. Instances where the orientation prop of the FormField component is set to `horizontal` will automatically default to `horizontalStart` via a codemod. A console warning message will also appear with a message to change the prop value to either horizontalStart or horizontalEnd. Co-authored-by: manuel.carrera <manuel.carrera@workday.com> Co-authored-by: @josh-bagwell <44883293+josh-bagwell@users.noreply.github.com>
- Loading branch information
3 people
authored
Sep 12, 2024
1 parent
3f613f7
commit bd882e1
Showing
43 changed files
with
681 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import {Transform} from 'jscodeshift'; | ||
|
|
||
| import renameFormFieldHorizontal from './renameFormFieldHorizontal'; | ||
|
|
||
| const transform: Transform = (file, api, options) => { | ||
| // These will run in order. If your transform depends on others, place yours after dependent transforms | ||
| const fixes = [ | ||
| // add codemods here | ||
| renameFormFieldHorizontal, | ||
| ]; | ||
| return fixes.reduce((source, fix) => fix({...file, source}, api, options) as string, file.source); | ||
| }; | ||
|
|
||
| export default transform; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import {API, FileInfo, Options, JSXOpeningElement, JSXIdentifier} from 'jscodeshift'; | ||
| import {hasImportSpecifiers} from '../v6/utils'; | ||
| import {getImportRenameMap} from './utils/getImportRenameMap'; | ||
|
|
||
| const formFieldPackage = '@workday/canvas-kit-preview-react/form-field'; | ||
| const packages = [formFieldPackage]; | ||
| const packageImports = ['FormField']; | ||
|
|
||
| export default function transformer(file: FileInfo, api: API, options: Options) { | ||
| const j = api.jscodeshift; | ||
|
|
||
| const root = j(file.source); | ||
|
|
||
| // exit if the named imports aren't found | ||
| if (!hasImportSpecifiers(api, root, packages, packageImports)) { | ||
| return file.source; | ||
| } | ||
|
|
||
| // getImportRenameMap utility will tell us if the file containsCanvasImports | ||
| // and give us an importMap to track what identifiers we need to update | ||
| const {importMap, styledMap} = getImportRenameMap(j, root, '@workday/canvas-kit-preview-react'); | ||
|
|
||
| root | ||
| .find(j.JSXOpeningElement, (value: JSXOpeningElement) => { | ||
| const isCorrectImport = Object.entries(importMap).some( | ||
| ([original, imported]) => | ||
| imported === (value.name as JSXIdentifier).name && packageImports.includes(original) | ||
| ); | ||
|
|
||
| const isCorrectStyled = Object.entries(styledMap).some( | ||
| ([original, styled]) => | ||
| styled === (value.name as JSXIdentifier).name && packageImports.includes(original) | ||
| ); | ||
|
|
||
| return isCorrectImport || isCorrectStyled; | ||
| }) | ||
| .forEach(nodePath => { | ||
| nodePath.node.attributes?.forEach(attr => { | ||
| if (attr.type === 'JSXAttribute') { | ||
| if (attr.name.name === 'orientation') { | ||
| if (attr.value && attr.value.type === 'StringLiteral') { | ||
| attr.value = j.stringLiteral('horizontalStart'); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| return root.toSource(); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import {runInlineTest} from 'jscodeshift/dist/testUtils'; | ||
|
|
||
| export const expectTransformFactory = | ||
| (fn: Function) => (input: string, expected: string, options?: Record<string, any>) => { | ||
| return runInlineTest(fn, options, {source: input}, expected, {parser: 'tsx'}); | ||
| }; |
75 changes: 75 additions & 0 deletions
75
modules/codemod/lib/v12/spec/renameFormFieldHorizontal.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import {expectTransformFactory} from './expectTransformFactory'; | ||
| import transform from '../renameFormFieldHorizontal'; | ||
| import {stripIndent} from 'common-tags'; | ||
|
|
||
| const expectTransform = expectTransformFactory(transform); | ||
|
|
||
| describe('rename horizontal', () => { | ||
| it('should not change non-canvas imports', () => { | ||
| const input = stripIndent` | ||
| import {FormField} from 'any-other-package' | ||
| <> | ||
| <FormField hasError={true} /> | ||
| </> | ||
| `; | ||
|
|
||
| const expected = stripIndent` | ||
| import {FormField} from 'any-other-package' | ||
| <> | ||
| <FormField hasError={true} /> | ||
| </> | ||
| `; | ||
| expectTransform(input, expected); | ||
| }); | ||
|
|
||
| it('should rename orientation horizontal to horizontalStart', () => { | ||
| const input = stripIndent` | ||
| import {FormField} from '@workday/canvas-kit-preview-react/form-field' | ||
| <> | ||
| <FormField orientation="horizontal" /> | ||
| </> | ||
| `; | ||
|
|
||
| const expected = stripIndent` | ||
| import {FormField} from '@workday/canvas-kit-preview-react/form-field' | ||
| <> | ||
| <FormField orientation="horizontalStart" /> | ||
| </> | ||
| `; | ||
| expectTransform(input, expected); | ||
| }); | ||
|
|
||
| it('should change renamed FormField', () => { | ||
| const input = stripIndent` | ||
| import {FormField as CanvasForm} from '@workday/canvas-kit-preview-react/form-field' | ||
| <> | ||
| <CanvasForm orientation="horizontal" /> | ||
| </> | ||
| `; | ||
|
|
||
| const expected = stripIndent` | ||
| import {FormField as CanvasForm} from '@workday/canvas-kit-preview-react/form-field' | ||
| <> | ||
| <CanvasForm orientation="horizontalStart" /> | ||
| </> | ||
| `; | ||
| expectTransform(input, expected); | ||
| }); | ||
|
|
||
| it('should change styled FormField', () => { | ||
| const input = stripIndent` | ||
| import {FormField} from '@workday/canvas-kit-preview-react/form-field' | ||
| const StyledForm = styled(FormField)({color: "#000"}); | ||
| <StyledForm orientation="horizontal" /> | ||
| `; | ||
|
|
||
| const expected = stripIndent` | ||
| import {FormField} from '@workday/canvas-kit-preview-react/form-field' | ||
| const StyledForm = styled(FormField)({color: "#000"}); | ||
| <StyledForm orientation="horizontalStart" /> | ||
| `; | ||
| expectTransform(input, expected); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import {Collection, JSCodeshift, CallExpression} from 'jscodeshift'; | ||
|
|
||
| export function getImportRenameMap( | ||
| j: JSCodeshift, | ||
| root: Collection<any>, | ||
| mainPackage = '@workday/canvas-kit-react', | ||
| packageName = '' | ||
| ) { | ||
| let containsCanvasImports = false; | ||
|
|
||
| // build import name remapping - in case someone renamed imports... | ||
| // i.e. `import { IconButton as StyledIconButton } ...` | ||
| const importMap: Record<string, string> = {}; | ||
| const styledMap: Record<string, string> = {}; | ||
| root.find(j.ImportDeclaration, node => { | ||
| // imports our module | ||
| const value = node.source.value; | ||
| if ( | ||
| typeof value === 'string' && | ||
| (value === mainPackage || value.startsWith(mainPackage) || value === packageName) | ||
| ) { | ||
| containsCanvasImports = true; | ||
| (node.specifiers || []).forEach(specifier => { | ||
| if (specifier.type === 'ImportSpecifier') { | ||
| if (!specifier.local || specifier.local.name === specifier.imported.name) { | ||
| importMap[specifier.imported.name] = specifier.imported.name; | ||
| } else { | ||
| importMap[specifier.imported.name] = specifier.local.name; | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| return false; | ||
| }); | ||
|
|
||
| root | ||
| .find(j.CallExpression, (node: CallExpression) => { | ||
| if ( | ||
| node.callee.type === 'Identifier' && | ||
| node.callee.name === 'styled' && | ||
| node.arguments[0].type === 'Identifier' | ||
| ) { | ||
| return true; | ||
| } | ||
| return false; | ||
| }) | ||
| .forEach(nodePath => { | ||
| if ( | ||
| (nodePath.parent.value.type === 'CallExpression' || | ||
| nodePath.parent.value.type === 'TaggedTemplateExpression') && | ||
| nodePath.parent.parent.value.type === 'VariableDeclarator' && | ||
| nodePath.parent.parent.value.id.type === 'Identifier' | ||
| ) { | ||
| const styledName = nodePath.parent.parent.value.id.name; | ||
|
|
||
| if (nodePath.value.arguments[0].type === 'Identifier') { | ||
| styledMap[nodePath.value.arguments[0].name] = styledName; | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| return {containsCanvasImports, importMap, styledMap}; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.