Skip to content

feat(MultipleFileUpload): update for penta #10031

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

Merged
thatblindgeye merged 2 commits into from
Jan 31, 2024
Merged

feat(MultipleFileUpload): update for penta #10031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0e4081
feat(MultipleFileUpload): update for penta
wise-king-sullyman Jan 22, 2024
8e5971c
chore(MultipleFileUpload): swap hardcoded class names with partial vars
wise-king-sullyman Jan 26, 2024
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: 2 additions & 2 deletions packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa

const toggle = (
<div className={styles.multipleFileUploadStatusProgress}>
<div className={styles.multipleFileUploadStatusProgressIcon}>{icon}</div>
<div className={styles.multipleFileUploadStatusItemProgressText}>{statusToggleText}</div>
<div className={`${styles.multipleFileUploadStatusProgress}-icon`}>{icon}</div>
<div className={`${styles.multipleFileUploadStatusProgress}-text`}>{statusToggleText}</div>
</div>
);

Expand Down
7 changes: 3 additions & 4 deletions packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
import { Progress } from '../Progress';
import { Button } from '../Button';
import FileIcon from '@patternfly/react-icons/dist/esm/icons/file-icon';
import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';

/** Automatically reads an uploaded file to render a visual representation of it, including
* its name, size, and read status. This sub-component also allows custom reading of files
Expand Down Expand Up @@ -165,10 +165,9 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
helperText={progressHelperText}
/>
</div>
{/* TODO: Update with issue #9997. Removed class "styles.multipleFileUploadStatusItemClose" that no longer exists */}
<div>
<div className={`${styles.multipleFileUploadStatusItem}-close`}>
<Button variant="plain" aria-label={buttonAriaLabel} onClick={onClearClick}>
<TimesCircleIcon />
<TimesIcon />
</Button>
</div>
</li>
Expand Down
8 changes: 4 additions & 4 deletions ...ponents/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
class="pf-v5-c-multiple-file-upload__status-progress-icon"
/>
<div
class="pf-v5-c-multiple-file-upload__status-item-progress-text"
class="pf-v5-c-multiple-file-upload__status-progress-text"
/>
</div>
</span>
Expand Down Expand Up @@ -121,7 +121,7 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
</svg>
</div>
<div
class="pf-v5-c-multiple-file-upload__status-item-progress-text"
class="pf-v5-c-multiple-file-upload__status-progress-text"
/>
</div>
</span>
Expand Down Expand Up @@ -186,7 +186,7 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
class="pf-v5-c-multiple-file-upload__status-progress-icon"
/>
<div
class="pf-v5-c-multiple-file-upload__status-item-progress-text"
class="pf-v5-c-multiple-file-upload__status-progress-text"
>
test
</div>
Expand Down Expand Up @@ -253,7 +253,7 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
class="pf-v5-c-multiple-file-upload__status-progress-icon"
/>
<div
class="pf-v5-c-multiple-file-upload__status-item-progress-text"
class="pf-v5-c-multiple-file-upload__status-progress-text"
/>
</div>
</span>
Expand Down
64 changes: 40 additions & 24 deletions ...nts/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,9 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
</div>
</div>
</div>
<div>
<div
class="pf-v5-c-multiple-file-upload__status-item-close"
>
<button
aria-disabled="false"
aria-label="buttonAriaLabel"
Expand All @@ -101,11 +103,11 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
viewBox="0 0 352 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
</button>
Expand Down Expand Up @@ -196,7 +198,9 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
</div>
</div>
</div>
<div>
<div
class="pf-v5-c-multiple-file-upload__status-item-close"
>
<button
aria-disabled="false"
aria-label="Remove from list"
Expand All @@ -212,11 +216,11 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
viewBox="0 0 352 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
</button>
Expand Down Expand Up @@ -309,7 +313,9 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
</div>
</div>
</div>
<div>
<div
class="pf-v5-c-multiple-file-upload__status-item-close"
>
<button
aria-disabled="false"
aria-label="Remove from list"
Expand All @@ -325,11 +331,11 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
viewBox="0 0 352 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
</button>
Expand Down Expand Up @@ -422,7 +428,9 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
</div>
</div>
</div>
<div>
<div
class="pf-v5-c-multiple-file-upload__status-item-close"
>
<button
aria-disabled="false"
aria-label="Remove from list"
Expand All @@ -438,11 +446,11 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
viewBox="0 0 352 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
</button>
Expand Down Expand Up @@ -552,7 +560,9 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
</div>
</div>
</div>
<div>
<div
class="pf-v5-c-multiple-file-upload__status-item-close"
>
<button
aria-disabled="false"
aria-label="Remove from list"
Expand All @@ -568,11 +578,11 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
viewBox="0 0 352 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
</button>
Expand Down Expand Up @@ -665,7 +675,9 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
</div>
</div>
</div>
<div>
<div
class="pf-v5-c-multiple-file-upload__status-item-close"
>
<button
aria-disabled="false"
aria-label="Remove from list"
Expand All @@ -681,11 +693,11 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
viewBox="0 0 352 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
</button>
Expand Down Expand Up @@ -776,7 +788,9 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
</div>
</div>
</div>
<div>
<div
class="pf-v5-c-multiple-file-upload__status-item-close"
>
<button
aria-disabled="false"
aria-label="Remove from list"
Expand All @@ -792,11 +806,11 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
viewBox="0 0 352 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
</button>
Expand Down Expand Up @@ -889,7 +903,9 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
</div>
</div>
</div>
<div>
<div
class="pf-v5-c-multiple-file-upload__status-item-close"
>
<button
aria-disabled="false"
aria-label="Remove from list"
Expand All @@ -905,11 +921,11 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
viewBox="0 0 352 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
</button>
Expand Down