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.

Sign up for GitHub

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(FileUploader): FileUploader size prop update #8462

Merged
merged 13 commits into from
May 13, 2021
Merged

feat(FileUploader): FileUploader size prop update #8462

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
ee2016b
feat(Button): start size work on Button
tw15egan Apr 20, 2021
58437a0
feat(Button): finish size prop update
tw15egan Apr 20, 2021
9493fcd
feat(Button): revert xl, 2xl changes
tw15egan Apr 20, 2021
c748c99
feat(Button): add xl, 2xl updates behind feature flag
tw15egan Apr 20, 2021
60fbcc4
feat(FileUploader): update size prop
tw15egan Apr 20, 2021
8bee1f6
chore(storybook): remove old story
tw15egan Apr 26, 2021
d617ef5
test(snapshot): update snapshot tests
tw15egan Apr 26, 2021
31f25f7
test(snapshot): remove snapshot from different pr
tw15egan Apr 26, 2021
def84df
chore(tests): update snapshots
tw15egan May 4, 2021
9784fe9
Merge branch 'main' into file-uploader-size-update
tw15egan May 5, 2021
9abed97
Merge branch 'main' into file-uploader-size-update
tw15egan May 5, 2021
13093c2
Merge branch 'main' into file-uploader-size-update
tw15egan May 10, 2021
12015cf
Merge branch 'main' into file-uploader-size-update
kodiakhq[bot] May 13, 2021
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
11 changes: 9 additions & 2 deletions packages/components/src/components/file-uploader/_file-uploader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}

Expand All @@ -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);
}
Expand Down
12 changes: 12 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2629,6 +2629,9 @@ Map {
"default",
"field",
"small",
"sm",
"md",
"lg",
],
],
"type": "oneOf",
Expand Down Expand Up @@ -2727,6 +2730,9 @@ Map {
"default",
"field",
"small",
"sm",
"md",
"lg",
],
],
"type": "oneOf",
Expand Down Expand Up @@ -2784,6 +2790,9 @@ Map {
"default",
"field",
"small",
"sm",
"md",
"lg",
],
],
"type": "oneOf",
Expand Down Expand Up @@ -2823,6 +2832,9 @@ Map {
"default",
"field",
"small",
"sm",
"md",
"lg",
],
],
"type": "oneOf",
Expand Down
11 changes: 8 additions & 3 deletions packages/react/src/components/FileUploader/FileUploader-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
7 changes: 4 additions & 3 deletions packages/react/src/components/FileUploader/FileUploader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 (
Expand Down
12 changes: 7 additions & 5 deletions packages/react/src/components/FileUploader/FileUploaderButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 <FileUploaderButton>
Expand Down
5 changes: 3 additions & 2 deletions packages/react/src/components/FileUploader/FileUploaderDropContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <FileUploaderButton>
Expand Down
9 changes: 5 additions & 4 deletions packages/react/src/components/FileUploader/FileUploaderItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<span className={classes} {...other}>
Expand Down Expand Up @@ -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
Expand Down