Skip to content

Commit

Permalink
fix: Update merge conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
manuel.carrera committed May 17, 2024
2 parents 9e0e5c5 + d3ed489 commit 7aa9e3c
Show file tree
Hide file tree
Showing 100 changed files with 1,629 additions and 681 deletions.
11 changes: 11 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [v10.3.39](https://github.com/Workday/canvas-kit/releases/tag/v10.3.39) (2024-05-15)

### Documentation

- docs: Fix typo ([#2738](https://github.com/Workday/canvas-kit/pull/2738)) ([@aarongarciah](https://github.com/aarongarciah))

### Infrastructure

- chore: SNYK Security upgrade jscodeshift from 0.13.1 to 0.14.0 ([#2739](https://github.com/Workday/canvas-kit/pull/2739)) ([@mannycarrera4](https://github.com/mannycarrera4))


## [v10.3.38](https://github.com/Workday/canvas-kit/releases/tag/v10.3.38) (2024-05-09)

### Documentation
Expand Down
2 changes: 1 addition & 1 deletion lerna.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"packages": [
"modules/**"
],
"version": "10.3.38",
"version": "10.3.39",
"npmClient": "yarn",
"useWorkspaces": true,
"command": {
Expand Down
4 changes: 2 additions & 2 deletions modules/codemod/lib/v11/spec/replaceStylesIconProp.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ describe('replaceStylesIconProp', () => {
<AccentIcon styles={{padding: '1rem'}} />
</>
`;
expectTransform(input, expected); //?
expectTransform(input, expected);
});

it('should rename styles to cs for Svg, SystemIcon, AccentIcon exported from the icon package', () => {
Expand Down Expand Up @@ -75,7 +75,7 @@ describe('replaceStylesIconProp', () => {
<AccentIcon cs={{padding: '1rem'}} />
</>
`;
expectTransform(input, expected); //?
expectTransform(input, expected);
});

it('should handle value as variable', () => {
Expand Down
4 changes: 2 additions & 2 deletions modules/codemod/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@workday/canvas-kit-codemod",
"author": "Workday, Inc. (https://www.workday.com)",
"license": "Apache-2.0",
"version": "10.3.38",
"version": "10.3.39",
"description": "A collection of codemods for use on Workday Canvas Kit packages.",
"main": "dist/es6/index.js",
"sideEffects": false,
Expand Down Expand Up @@ -31,7 +31,7 @@
"homepage": "https://github.com/Workday/canvas-kit#readme",
"dependencies": {
"chalk": "4.1.2",
"jscodeshift": "^0.13.1",
"jscodeshift": "^0.14.0",
"yargs": "^16.2.0"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion modules/css/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@workday/canvas-kit-css",
"version": "10.3.24",
"version": "10.3.39",
"description": "The parent module that contains all Workday Canvas Kit CSS components",
"author": "Workday, Inc. (https://www.workday.com)",
"license": "Apache-2.0",
Expand Down
21 changes: 21 additions & 0 deletions modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -560,6 +560,7 @@ variant prop.
</div>

**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
[#2746](https://github.com/Workday/canvas-kit/pull/274)

`FormField` in [Preview](#preview) is a compound component and we intend to promote it in a future
version to replace the `FormField` in [Main](#main). Because of this, we've refactored how errors
Expand All @@ -574,6 +575,26 @@ are applied to `FormField` in [Preview](#preview) in order to match the API from
- `FormField` does **not** support the `useFieldSet` prop that the `FormField` in [Main](#main)
does. In order to achieve the same behavior, set the `as` prop on the `FormField` element to
`fieldset` and the `as` prop of `FormField.Label` to `legend`.
- The required asterisk is now a pseudo element. While the asterisk was never read out loud by
screen readers, Testing Library required it in the `*ByLabelText` query. `*ByRole` uses the w3c
[accessible name calculation specification](https://www.w3.org/TR/accname-1.2/), but
`*ByLabelText` uses
[textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). Additional
information: https://github.com/testing-library/dom-testing-library/issues/929

v10:

```ts
screen.getByLabelText('Email*'); // Email is a required field and asterisk is included in name
screen.getByRole('textbox', {name: 'Email'}); // correctly ignores the `*`
```

v11:

```ts
screen.getByLabelText('Email');
screen.getByRole('textbox', {name: 'Email'});
```

```tsx
// v10 FormField in Preview
Expand Down
10 changes: 5 additions & 5 deletions modules/docs/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@workday/canvas-kit-docs",
"version": "10.3.38",
"version": "10.3.39",
"description": "Documentation components of Canvas Kit components",
"author": "Workday, Inc. (https://www.workday.com)",
"license": "Apache-2.0",
Expand Down Expand Up @@ -44,10 +44,10 @@
"dependencies": {
"@emotion/styled": "^11.6.0",
"@storybook/csf": "0.0.1",
"@workday/canvas-kit-labs-react": "^10.3.38",
"@workday/canvas-kit-preview-react": "^10.3.38",
"@workday/canvas-kit-react": "^10.3.38",
"@workday/canvas-kit-styling": "^10.3.38",
"@workday/canvas-kit-labs-react": "^10.3.39",
"@workday/canvas-kit-preview-react": "^10.3.39",
"@workday/canvas-kit-react": "^10.3.39",
"@workday/canvas-kit-styling": "^10.3.39",
"@workday/canvas-system-icons-web": "^3.0.0",
"@workday/canvas-tokens-web": "^1.3.1",
"markdown-to-jsx": "^6.10.3",
Expand Down
2 changes: 1 addition & 1 deletion modules/labs-css/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@workday/canvas-kit-labs-css",
"version": "10.3.24",
"version": "10.3.39",
"description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
"author": "Workday, Inc. (https://www.workday.com)",
"license": "Apache-2.0",
Expand Down
4 changes: 2 additions & 2 deletions modules/labs-react/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@workday/canvas-kit-labs-react",
"version": "10.3.38",
"version": "10.3.39",
"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",
Expand Down Expand Up @@ -46,7 +46,7 @@
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@workday/canvas-kit-react": "^10.3.38",
"@workday/canvas-kit-react": "^10.3.39",
"@workday/canvas-system-icons-web": "^3.0.0",
"@workday/design-assets-types": "^0.2.8",
"chroma-js": "^2.1.0",
Expand Down
2 changes: 1 addition & 1 deletion modules/popup-stack/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@workday/canvas-kit-popup-stack",
"version": "10.3.38",
"version": "10.3.39",
"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",
Expand Down
2 changes: 1 addition & 1 deletion modules/preview-css/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@workday/canvas-kit-preview-css",
"version": "10.3.24",
"version": "10.3.39",
"description": "The parent module that contains all Workday Canvas Kit Preview CSS components",
"author": "Workday, Inc. (https://www.workday.com)",
"license": "Apache-2.0",
Expand Down
4 changes: 4 additions & 0 deletions modules/preview-react/form-field/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,6 @@
export * from './lib/FormField';
export * from './lib/hooks/';
export {formFieldStencil} from './lib/formFieldStencil';
export {formFieldContainerStencil} from './lib/FormFieldContainer';
export {formFieldHintStencil} from './lib/FormFieldHint';
export {formFieldLabelStencil} from './lib/FormFieldLabel';
57 changes: 28 additions & 29 deletions modules/preview-react/form-field/lib/FormField.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,24 @@
import React from 'react';

import {createContainer, GrowthBehavior} from '@workday/canvas-kit-react/common';
import {Flex, FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
import {createStencil} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';
import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';

import {useFormFieldModel, useFormFieldOrientation} from './hooks';
import {useFormFieldModel} from './hooks';
import {FormFieldInput} from './FormFieldInput';
import {FormFieldLabel} from './FormFieldLabel';
import {FormFieldHint} from './FormFieldHint';
import {FormFieldContainer} from './FormFieldContainer';
import {formFieldStencil} from './formFieldStencil';

export interface FormFieldProps extends FlexProps, GrowthBehavior {
/**
* The direction the child elements should stack
* @default vertical
*/
orientation?: 'vertical' | 'horizontal';
children: React.ReactNode;
}

const formFieldStencil = createStencil({
base: {
border: 'none',
padding: system.space.zero,
margin: `${system.space.zero} ${system.space.zero} ${system.space.x6}`,
},
modifiers: {
grow: {
true: {
width: '100%',
'[data-width="ck-formfield-width"]': {
width: '100%',
},
},
},
},
});
/**
* Use `FormField` to wrap input components to make them accessible. You can customize the field
* by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.
Expand All @@ -42,6 +29,8 @@ const formFieldStencil = createStencil({
* <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
* </FormField>
* ```
*
* @stencil formFieldStencil
*/
export const FormField = createContainer('div')({
displayName: 'FormField',
Expand Down Expand Up @@ -70,6 +59,8 @@ export const FormField = createContainer('div')({
* <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
* </FormField>
* ```
*
* @stencil formFieldLabelStencil
*/
Label: FormFieldLabel,
/**
Expand All @@ -83,6 +74,8 @@ export const FormField = createContainer('div')({
* <FormField.Hint>This is your hint text</FormField.Hint>
* </FormField>
* ```
*
* @stencil formFieldHintStencil
*/
Hint: FormFieldHint,
/**
Expand All @@ -97,19 +90,25 @@ export const FormField = createContainer('div')({
* </FormField.Container>
* </FormField>
* ```
*
* @stencil formFieldContainerStencil
*/
Container: FormFieldContainer,
},
})<FormFieldProps>(({children, ...elemProps}, Element, model) => {
const layoutProps = useFormFieldOrientation(model.state.orientation);

})<FormFieldProps>(({children, grow, orientation, ...elemProps}, Element, model) => {
return (
<Flex
as={Element}
{...layoutProps}
{...mergeStyles(elemProps, formFieldStencil({grow: elemProps.grow}))}
<Element
{...mergeStyles(
elemProps,
formFieldStencil({
grow,
orientation,
error: model.state.error,
required: model.state.isRequired,
})
)}
>
{children}
</Flex>
</Element>
);
});
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {handleCsProp, CSProps, createStencil} from '@workday/canvas-kit-styling'

import {useFormFieldModel} from './hooks';

const formFieldContainerStencil = createStencil({
export const formFieldContainerStencil = createStencil({
base: {
display: 'flex',
flexDirection: 'column',
Expand Down
52 changes: 24 additions & 28 deletions modules/preview-react/form-field/lib/FormFieldHint.tsx
Original file line number Diff line number Diff line change
@@ -1,45 +1,41 @@
import React from 'react';

import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
import {system, brand} from '@workday/canvas-tokens-web';
import {createStencil} from '@workday/canvas-kit-styling';
import {createStencil, parentModifier} from '@workday/canvas-kit-styling';
import {Text, textStencil} from '@workday/canvas-kit-react/text';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

import {useFormFieldHint, useFormFieldModel} from './hooks';
import {Subtext} from '@workday/canvas-kit-react/text';
import {mergeStyles} from '@workday/canvas-kit-react/layout';
import {formFieldStencil} from './formFieldStencil';

const formFieldHintStencil = createStencil({
export const formFieldHintStencil = createStencil({
extends: textStencil,
base: {
margin: `${system.space.x2} ${system.space.zero} ${system.space.zero}`,
},
modifiers: {
error: {
error: {
color: brand.error.base,
},
alert: {},

[parentModifier(formFieldStencil.modifiers.error.error)]: {
color: brand.error.base,
},
},
defaultModifiers: {
typeLevel: 'subtext.medium',
},
});

export const FormFieldHint = createSubcomponent('p')({
displayName: 'FormField.Hint',
modelHook: useFormFieldModel,
elemPropsHook: useFormFieldHint,
})<Omit<ExtractProps<typeof Subtext, never>, 'size'>>(
({children, ...elemProps}, Element, model) => {
if (!children) {
// If there is no hint text just skip rendering
return null;
}

return (
<Subtext
as={Element}
size="medium"
{...mergeStyles(elemProps, formFieldHintStencil({error: model.state.error}))}
>
{children}
</Subtext>
);
})<ExtractProps<typeof Text, never>>(({children, typeLevel, variant, ...elemProps}, Element) => {
if (!children) {
// If there is no hint text just skip rendering
return null;
}
);

return (
<Element {...mergeStyles(elemProps, formFieldHintStencil({typeLevel, variant}))}>
{children}
</Element>
);
});

0 comments on commit 7aa9e3c

Please sign in to comment.