Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Slug): Add slug prop to TextInput, TextArea, NumberInput, and DatePicker, add revert functionality to Slug #15115

Merged
Merged
Show file tree
Hide file tree
Changes from 31 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
1f503f4
feat(TextInput): support slug prop
tw15egan Nov 2, 2023
cfe410d
fix(TextInput): add types for slug prop
tw15egan Nov 3, 2023
1544cf9
Merge branch 'main' into slug-implementation-exploration
tw15egan Nov 7, 2023
b3959d3
refactor(Slug): remove old file, move demo to form story
tw15egan Nov 7, 2023
d2f3de5
docs(Storybook): update form story
tw15egan Nov 8, 2023
4a726e3
Merge branch 'main' into slug-implementation-exploration
tw15egan Nov 8, 2023
616915f
feat(NumberInput): add slug to NumberInput
tw15egan Nov 8, 2023
6b7efa4
refactor(NumberInput): remove pseudo elements and use box-shadow
tw15egan Nov 8, 2023
2120c22
style(NumberInput): fix issue with z-index, add invalid styles
tw15egan Nov 8, 2023
bb8fec4
feat(DatePicker): add slug prop to DatePickerInput
tw15egan Nov 9, 2023
995f6cc
feat(TextArea): add slug prop to TextArea
tw15egan Nov 9, 2023
ae1aec4
test(snapshot): update snapshots
tw15egan Nov 9, 2023
4c826be
fix(TextArea): remove console warning
tw15egan Nov 9, 2023
1ff3829
style(Fluid): adjust styles for fluid inputs
tw15egan Nov 9, 2023
577f9c9
Merge branch 'main' into slug-implementation-exploration
tw15egan Nov 9, 2023
8376fb5
docs(Storybook): fix ids
tw15egan Nov 9, 2023
367c646
fix(Slug): adjust positioning, add storybook controls
tw15egan Nov 10, 2023
d519c97
fix(Storybook): add story styles to form example
tw15egan Nov 13, 2023
d8c9808
fix(Slug): adjust positioning when invalid, warning state
tw15egan Nov 13, 2023
6635619
style(Slug): adjust padding when slug is present
tw15egan Nov 13, 2023
4602d24
docs(Storybook): add examples with revert functionality
tw15egan Nov 13, 2023
b2a91a7
Merge branch 'main' into slug-implementation-exploration
tw15egan Nov 14, 2023
1290b80
fix(NumberInput): fix type error
tw15egan Nov 14, 2023
19c7a61
refactor(storybook): adjust stories
tw15egan Nov 14, 2023
116ba5c
feat(Slug): add revertLabel prop
tw15egan Nov 14, 2023
4ac3bf2
Merge branch 'main' into slug-implementation-exploration
tw15egan Nov 14, 2023
27e0387
fix(Undo): replace undo, redo with coreect asset
tw15egan Nov 14, 2023
0032999
Merge branch 'main' into slug-implementation-exploration
tw15egan Nov 14, 2023
e5d04c9
fix(Slug): adjust revert positioning, remove margin
tw15egan Nov 14, 2023
b8bb396
Merge branch 'main' into slug-implementation-exploration
tw15egan Nov 15, 2023
aeab814
fix(NumberInput): don't set defaultValue if not provided, remove console
tw15egan Nov 15, 2023
b82a701
chore(files): add ai-gradient to react package
tw15egan Nov 15, 2023
75ee611
test(snapshot): update snapshots
tw15egan Nov 15, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions packages/icons/icons.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16551,9 +16551,6 @@
- revert
- undo
sizes:
- 16
- 20
- 24
- 32
- name: ref-evapotranspiration
friendly_name: Ref evapotranspiration
Expand Down Expand Up @@ -20940,9 +20937,6 @@
- revert
- back
sizes:
- 16
- 20
- 24
- 32
- name: ungroup-objects
friendly_name: Ungroup objects
Expand Down
11 changes: 0 additions & 11 deletions packages/icons/src/svg/16/redo.svg

This file was deleted.

11 changes: 0 additions & 11 deletions packages/icons/src/svg/16/undo.svg

This file was deleted.

14 changes: 0 additions & 14 deletions packages/icons/src/svg/20/redo.svg

This file was deleted.

14 changes: 0 additions & 14 deletions packages/icons/src/svg/20/undo.svg

This file was deleted.

14 changes: 0 additions & 14 deletions packages/icons/src/svg/24/redo.svg

This file was deleted.

11 changes: 0 additions & 11 deletions packages/icons/src/svg/24/undo.svg

This file was deleted.

12 changes: 12 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -2720,6 +2720,9 @@ Map {
],
"type": "oneOf",
},
"slug": Object {
"type": "node",
},
"type": Object {
"type": "string",
},
Expand Down Expand Up @@ -5472,6 +5475,9 @@ Map {
],
"type": "oneOf",
},
"slug": Object {
"type": "node",
},
"step": Object {
"type": "number",
},
Expand Down Expand Up @@ -8086,6 +8092,9 @@ Map {
"rows": Object {
"type": "number",
},
"slug": Object {
"type": "node",
},
"value": Object {
"args": Array [
Array [
Expand Down Expand Up @@ -8423,6 +8432,9 @@ Map {
],
"type": "oneOf",
},
"slug": Object {
"type": "node",
},
"type": Object {
"type": "string",
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,11 @@ interface DatePickerInputProps
*/
size?: 'sm' | 'md' | 'lg';

/**
* Provide a `Slug` component to be rendered inside the `DatePickerInput` component
*/
slug?: ReactNodeLike;

/**
* Specify the type of the `<input>`
*/
Expand Down Expand Up @@ -145,6 +150,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}',
placeholder,
size = 'md',
slug,
type = 'text',
warn,
warnText,
Expand Down Expand Up @@ -172,6 +178,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
const wrapperClasses = cx(`${prefix}--date-picker-input__wrapper`, {
[`${prefix}--date-picker-input__wrapper--invalid`]: invalid,
[`${prefix}--date-picker-input__wrapper--warn`]: warn,
[`${prefix}--date-picker-input__wrapper--slug`]: slug,
});
const labelClasses = cx(`${prefix}--label`, {
[`${prefix}--visually-hidden`]: hideLabel,
Expand Down Expand Up @@ -209,6 +216,14 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
}
const input = <input {...inputProps} />;

// Slug is always size `mini`
let normalizedSlug;
if (slug) {
normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
size: 'mini',
});
}

return (
<div className={containerClasses}>
{labelText && (
Expand All @@ -219,6 +234,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
<div className={wrapperClasses}>
<span>
{input}
{normalizedSlug}
{isFluid && <DatePickerIcon datePickerType={datePickerType} />}
<DatePickerIcon
datePickerType={datePickerType}
Expand Down Expand Up @@ -343,6 +359,11 @@ DatePickerInput.propTypes = {
*/
size: PropTypes.oneOf(['sm', 'md', 'lg']),

/**
* Provide a `Slug` component to be rendered inside the `DatePickerInput` component
*/
slug: PropTypes.node,

/**
* Specify the type of the `<input>`
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ Playground.args = {
disabled: false,
enableCounter: false,
labelText: 'Text Area label',
maxCount: '500',
maxCount: 500,
warn: false,
warnText: 'This is a warning message.',
};
Expand Down
Loading