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

Jump to bottom

feat(react): added disabled prop to file uploader #10613

Merged
merged 10 commits into from
Feb 10, 2022
Merged

feat(react): added disabled prop to file uploader #10613

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
05e7d65
feat(react): added disabled prop to file uploader
TannerS Feb 1, 2022
187b2d4
Merge branch 'main' into tanner_addDisabledPropToFileUploader
Feb 1, 2022
4cc0ad6
test(react): updated FileUploader snapshot
TannerS Feb 2, 2022
6b14aeb
Merge branch 'tanner_addDisabledPropToFileUploader' of github.com:Tan…
TannerS Feb 2, 2022
f490582
chore(fileuploader): add disabled prop arg control to v11 storybook
tay1orjones Feb 2, 2022
1313973
Merge branch 'main' into tanner_addDisabledPropToFileUploader
Feb 2, 2022
6e23117
Merge branch 'main' into tanner_addDisabledPropToFileUploader
Feb 7, 2022
6353233
Merge branch 'main' into tanner_addDisabledPropToFileUploader
Feb 8, 2022
b470924
Merge branch 'main' into tanner_addDisabledPropToFileUploader
Feb 9, 2022
3576f17
Merge branch 'main' into tanner_addDisabledPropToFileUploader
laurenmrice Feb 10, 2022
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
4 changes: 4 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 @@ -2587,6 +2587,7 @@ Map {
"accept": Array [],
"buttonKind": "primary",
"buttonLabel": "",
"disabled": false,
"filenameStatus": "uploading",
"iconDescription": "Provide icon description",
"multiple": false,
Expand Down Expand Up @@ -2622,6 +2623,9 @@ Map {
"className": Object {
"type": "string",
},
"disabled": Object {
"type": "bool",
},
"filenameStatus": Object {
"args": Array [
Array [
Expand Down
1 change: 1 addition & 0 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 @@ -87,6 +87,7 @@ const props = {
),
buttonLabel: text('The button label (buttonLabel)', 'Add file'),
buttonKind: buttonKind || 'primary',
disabled: boolean('Disabled (disabled)', false),
tay1orjones marked this conversation as resolved.
Show resolved Hide resolved
size: select('Button size (size)', sizes, 'default'),
filenameStatus: select(
'Status for file name (filenameStatus)',
Expand Down
21 changes: 19 additions & 2 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 @@ -38,6 +38,11 @@ export default class FileUploader extends React.Component {
*/
className: PropTypes.string,

/**
* Specify whether file input is disabled
*/
disabled: PropTypes.bool,

/**
* Specify the status of the File Upload
*/
Expand Down Expand Up @@ -100,6 +105,7 @@ export default class FileUploader extends React.Component {
static contextType = PrefixContext;

static defaultProps = {
disabled: false,
iconDescription: FeatureFlags.enabled('enable-v11-release')
? undefined
: 'Provide icon description',
Expand Down Expand Up @@ -167,6 +173,7 @@ export default class FileUploader extends React.Component {
iconDescription,
buttonLabel,
buttonKind,
disabled,
filenameStatus,
labelDescription,
labelTitle,
Expand All @@ -186,6 +193,11 @@ export default class FileUploader extends React.Component {
[className]: className,
});

const getHelperLabelClasses = (baseClass) =>
classNames(baseClass, {
[`${prefix}--label-description--disabled`]: disabled,
});

const selectedFileClasses = classNames(`${prefix}--file__selected-file`, {
[`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
[`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm',
Expand All @@ -194,10 +206,15 @@ export default class FileUploader extends React.Component {
return (
<div className={classes} {...other}>
{FeatureFlags.enabled('enable-v11-release') && !labelTitle ? null : (
<p className={`${prefix}--file--label`}>{labelTitle}</p>
<p className={getHelperLabelClasses(`${prefix}--file--label`)}>
{labelTitle}
</p>
)}
<p className={`${prefix}--label-description`}>{labelDescription}</p>
<p className={getHelperLabelClasses(`${prefix}--label-description`)}>
{labelDescription}
</p>
<FileUploaderButton
disabled={disabled}
labelText={buttonLabel}
multiple={multiple}
buttonKind={buttonKind}
Expand Down