From 36087e54a8384e716d5eb123fa0116737c5b2488 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 12 May 2021 17:38:50 -0700 Subject: [PATCH] feat(FileUploader): FileUploader size prop update (#8462) * feat(Button): start size work on Button * feat(Button): finish size prop update * feat(Button): revert xl, 2xl changes * feat(Button): add xl, 2xl updates behind feature flag * feat(FileUploader): update size prop * chore(storybook): remove old story * test(snapshot): update snapshot tests * test(snapshot): remove snapshot from different pr * chore(tests): update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../src/components/file-uploader/_file-uploader.scss | 11 +++++++++-- .../__tests__/__snapshots__/PublicAPI-test.js.snap | 12 ++++++++++++ .../components/FileUploader/FileUploader-story.js | 11 ++++++++--- .../src/components/FileUploader/FileUploader.js | 7 ++++--- .../components/FileUploader/FileUploaderButton.js | 12 +++++++----- .../FileUploader/FileUploaderDropContainer.js | 5 +++-- .../src/components/FileUploader/FileUploaderItem.js | 9 +++++---- 7 files changed, 48 insertions(+), 19 deletions(-) diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss index 150406e97b75..22936e4ca9c0 100644 --- a/packages/components/src/components/file-uploader/_file-uploader.scss +++ b/packages/components/src/components/file-uploader/_file-uploader.scss @@ -162,7 +162,9 @@ } } - .#{$prefix}--file__selected-file--field { + // V11: Remove --field + .#{$prefix}--file__selected-file--field, + .#{$prefix}--file__selected-file--md { min-height: rem(40px); gap: $carbon--spacing-03 $carbon--spacing-05; } @@ -192,7 +194,9 @@ padding: $carbon--spacing-02 0; } - .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field { + // V11: Remove --field + .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field, + .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md { padding: $carbon--spacing-03 0; } @@ -206,7 +210,10 @@ padding-top: rem(7px); } + // V11: Remove --field .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field + .#{$prefix}--form-requirement, + .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md .#{$prefix}--form-requirement { padding-top: rem(11px); } diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index b5d8791e8f82..993068d41e0c 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -2633,6 +2633,9 @@ Map { "default", "field", "small", + "sm", + "md", + "lg", ], ], "type": "oneOf", @@ -2731,6 +2734,9 @@ Map { "default", "field", "small", + "sm", + "md", + "lg", ], ], "type": "oneOf", @@ -2788,6 +2794,9 @@ Map { "default", "field", "small", + "sm", + "md", + "lg", ], ], "type": "oneOf", @@ -2827,6 +2836,9 @@ Map { "default", "field", "small", + "sm", + "md", + "lg", ], ], "type": "oneOf", diff --git a/packages/react/src/components/FileUploader/FileUploader-story.js b/packages/react/src/components/FileUploader/FileUploader-story.js index 15102cc66081..5fec56a7069d 100644 --- a/packages/react/src/components/FileUploader/FileUploader-story.js +++ b/packages/react/src/components/FileUploader/FileUploader-story.js @@ -34,11 +34,16 @@ const buttonKinds = { 'Danger Primary (danger--primary)': 'danger--primary', 'Tertiary (tertiary)': 'tertiary', }; + const sizes = { - Default: 'default', - Field: 'field', - Small: 'small', + 'Compat check - Field': 'field', + 'Compat check - Small': 'small', + 'Compat check - default': 'default', + 'Small (sm)': 'sm', + 'Medium (md)': 'md', + 'Large (lg) - Default': 'lg', }; + const filenameStatuses = { 'Edit (edit)': 'edit', 'Complete (complete)': 'complete', diff --git a/packages/react/src/components/FileUploader/FileUploader.js b/packages/react/src/components/FileUploader/FileUploader.js index f7604fd7406d..f2c4b77bedb0 100644 --- a/packages/react/src/components/FileUploader/FileUploader.js +++ b/packages/react/src/components/FileUploader/FileUploader.js @@ -91,8 +91,9 @@ export default class FileUploader extends React.Component { /** * Specify the size of the FileUploaderButton, from a list of available * sizes. For `default` buttons, this prop can remain unspecified. + * V11: `default`, `field`, and `small` will be removed */ - size: PropTypes.oneOf(['default', 'field', 'small']), + size: PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']), }; static defaultProps = { @@ -179,8 +180,8 @@ export default class FileUploader extends React.Component { }); const selectedFileClasses = classNames(`${prefix}--file__selected-file`, { - [`${prefix}--file__selected-file--field`]: size === 'field', - [`${prefix}--file__selected-file--sm`]: size === 'small', + [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md', + [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm', }); return ( diff --git a/packages/react/src/components/FileUploader/FileUploaderButton.js b/packages/react/src/components/FileUploader/FileUploaderButton.js index 7fde4d3fa390..be924c86077f 100644 --- a/packages/react/src/components/FileUploader/FileUploaderButton.js +++ b/packages/react/src/components/FileUploader/FileUploaderButton.js @@ -40,8 +40,9 @@ function FileUploaderButton({ const classes = cx(`${prefix}--btn`, className, { [`${prefix}--btn--${buttonKind}`]: buttonKind, [`${prefix}--btn--disabled`]: disabled, - [`${prefix}--btn--field`]: size === 'field', - [`${prefix}--btn--sm`]: size === 'small', + // V11: remove field, small + [`${prefix}--btn--md`]: size === 'field' || size === 'md', + [`${prefix}--btn--sm`]: size === 'small' || size === 'sm', }); // Adjust label text state based on changes to the labelText prop @@ -174,10 +175,11 @@ FileUploaderButton.propTypes = { role: PropTypes.string, /** - * Specify the size of the button, from a list of available sizes. - * For `default` buttons, this prop can remain unspecified. + * Specify the size of the FileUploaderButton, from a list of available + * sizes. For `default` buttons, this prop can remain unspecified. + * V11: `default`, `field`, and `small` will be removed */ - size: PropTypes.oneOf(['default', 'field', 'small']), + size: PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']), /** * Provide a custom tabIndex value for the diff --git a/packages/react/src/components/FileUploader/FileUploaderDropContainer.js b/packages/react/src/components/FileUploader/FileUploaderDropContainer.js index 31f17d741f54..6144822ec960 100644 --- a/packages/react/src/components/FileUploader/FileUploaderDropContainer.js +++ b/packages/react/src/components/FileUploader/FileUploaderDropContainer.js @@ -186,9 +186,10 @@ FileUploaderDropContainer.propTypes = { /** * Specify the size of the uploaded items, from a list of available - * sizes. For `default` size, this prop can remain unspecified. + * sizes. For `default` buttons, this prop can remain unspecified. + * V11: `default`, `field`, and `small` will be removed */ - size: PropTypes.oneOf(['default', 'field', 'small']), + size: PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']), /** * Provide a custom tabIndex value for the diff --git a/packages/react/src/components/FileUploader/FileUploaderItem.js b/packages/react/src/components/FileUploader/FileUploaderItem.js index 0f9954c9a9fd..4a32d059d4a0 100644 --- a/packages/react/src/components/FileUploader/FileUploaderItem.js +++ b/packages/react/src/components/FileUploader/FileUploaderItem.js @@ -30,8 +30,8 @@ function FileUploaderItem({ const { current: id } = useRef(uuid || uid()); const classes = cx(`${prefix}--file__selected-file`, { [`${prefix}--file__selected-file--invalid`]: invalid, - [`${prefix}--file__selected-file--field`]: size === 'field', - [`${prefix}--file__selected-file--sm`]: size === 'small', + [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md', + [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm', }); return ( @@ -107,9 +107,10 @@ FileUploaderItem.propTypes = { /** * Specify the size of the uploaded items, from a list of available - * sizes. For `default` size, this prop can remain unspecified. + * sizes. For `default` buttons, this prop can remain unspecified. + * V11: `default`, `field`, and `small` will be removed */ - size: PropTypes.oneOf(['default', 'field', 'small']), + size: PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']), /** * Status of the file upload