Skip to content

Commit

Permalink
fix: Clean up Select file structure and move examples to main react (#…
Browse files Browse the repository at this point in the history 
…2992)

Some file clean up and documentation

[category:Components]

Co-authored-by: manuel.carrera <[email protected]>
  • Loading branch information
@mannycarrera4
mannycarrera4 and manuel.carrera authored Oct 21, 2024
1 parent fa261ae commit 032e51b
Show file tree
Hide file tree
Showing 7 changed files with 247 additions and 160 deletions.
7 changes: 1 addition & 6 deletions ..._examples/stories/mdx/FormsWithFormik.mdx → ..._examples/stories/mdx/FormsWithFormik.mdx
View file
Original file line number Diff line number Diff line change
@@ -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} />
150 changes: 111 additions & 39 deletions modules/react/_examples/stories/mdx/examples/Density.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ const formStyles = createStyles({
const formFieldGroupListStyles = createStyles({
display: 'inline-flex',
flexDirection: 'row',
padding: system.space.zero,
flexWrap: 'wrap',
});

Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
0 ...stories/mdx/examples/SelectWithFormik.tsx → ...stories/mdx/examples/SelectWithFormik.tsx
View file
File renamed without changes.
120 changes: 5 additions & 115 deletions modules/react/select/lib/Select.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<typeof TextInput>, 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,
})<SelectInputProps>(
(
{placeholder = 'Choose an option', inputStartIcon, formInputProps, width, ...elemProps},
Element,
model
) => {
return (
<InputGroup data-width="ck-formfield-width">
{inputStartIcon && model.state.selectedIds.length > 0 && (
<InputGroup.InnerStart data-part="select-start-icon-container" {...selectIconsStencil()}>
<SystemIcon data-part="select-start-icon" icon={inputStartIcon} />
</InputGroup.InnerStart>
)}
{/* Hidden input to handle ids */}
<InputGroup.Input
data-part="select-hidden-input"
{...formInputProps}
{...hiddenSelectInputStencil()}
/>
{/* Visual input */}
<InputGroup.Input
as={Element}
placeholder={placeholder}
data-part="select-visual-input"
{...elemProps}
{...mergeStyles(elemProps, selectInputStencil())}
/>
<InputGroup.InnerEnd data-part="select-caret-container">
<SystemIcon data-part="select-caret-icon" icon={caretDownSmallIcon} />
</InputGroup.InnerEnd>
</InputGroup>
);
}
);

export const SelectItem = createSubcomponent('li')({
modelHook: useSelectModel,
subComponents: {
Icon: Combobox.Menu.Item.Icon,
},
})<ExtractProps<typeof Combobox.Menu.Item>>(({children, ...elemProps}, Element, _model) => {
return (
<Combobox.Menu.Item as={Element} {...elemProps}>
{children}
</Combobox.Menu.Item>
);
});

const selectCardStyles = createStyles({
maxHeight: px2rem(300),
});

export const SelectCard = createSubcomponent('div')({
modelHook: useSelectModel,
elemPropsHook: useSelectCard,
})<ExtractProps<typeof Combobox.Menu.Card>>(({children, ...elemProps}, Element) => {
return (
<Combobox.Menu.Card as={Element} {...mergeStyles(elemProps, selectCardStyles)}>
{children}
</Combobox.Menu.Card>
);
});
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<typeof Combobox> {}
/**
Expand Down
23 changes: 23 additions & 0 deletions modules/react/select/lib/SelectCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
})<ExtractProps<typeof Combobox.Menu.Card>>(({children, ...elemProps}, Element) => {
return (
<Combobox.Menu.Card as={Element} {...mergeStyles(elemProps, selectCardStyles)}>
{children}
</Combobox.Menu.Card>
);
});
Loading

0 comments on commit 032e51b

Please sign in to comment.