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(FormControls): updated logic for rendering icons #9132

Merged
merged 12 commits into from
May 18, 2023
Merged

feat(FormControls): updated logic for rendering icons #9132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4b331d9
feat(FormControls): updated logic for rendering icons
thatblindgeye May 16, 2023
16e8039
Updated FormSelect
thatblindgeye May 16, 2023
befcfd8
Updated TextArea
thatblindgeye May 16, 2023
90507c3
Updated treeview search markup
thatblindgeye May 16, 2023
fcbac4e
Updated remaining integration tests
thatblindgeye May 16, 2023
a8d554c
Updated autoresize logic
thatblindgeye May 17, 2023
c8d8c8e
Updated snaphots
thatblindgeye May 17, 2023
c342b25
Updated timepicker icon
thatblindgeye May 17, 2023
bddb156
Updated FormControlIcon placement and rendering
thatblindgeye May 17, 2023
8bf1097
Removed placeholder class on Textinput
thatblindgeye May 18, 2023
484d280
Updated snapshots
thatblindgeye May 18, 2023
2f8fd09
Updated snapshots properly
thatblindgeye May 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"tslib": "^2.5.0"
},
"devDependencies": {
"@patternfly/patternfly": "5.0.0-alpha.53",
"@patternfly/patternfly": "5.0.0-alpha.54",
"@rollup/plugin-commonjs": "^25.0.0",
"@rollup/plugin-node-resolve": "^15.0.2",
"@rollup/plugin-replace": "^5.0.2",
Expand Down
8 changes: 4 additions & 4 deletions packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard

// eslint-disable-next-line @typescript-eslint/no-unused-vars
expandContent = (_event: React.MouseEvent<Element, MouseEvent>) => {
this.setState(prevState => ({
this.setState((prevState) => ({
expanded: !prevState.expanded
}));
};
Expand Down Expand Up @@ -183,7 +183,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
>
{variant === 'inline-compact' && (
<GenerateId prefix="">
{id => (
{(id) => (
<React.Fragment>
{!isCode && (
<span className={css(styles.clipboardCopyText)} id={`${textIdPrefix}${id}`}>
Expand Down Expand Up @@ -223,7 +223,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
)}
{variant !== 'inline-compact' && (
<GenerateId prefix="">
{id => (
{(id) => (
<React.Fragment>
<div className={css(styles.clipboardCopyGroup)}>
{variant === 'expansion' && (
Expand All @@ -237,7 +237,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
/>
)}
<TextInput
isReadOnly={isReadOnly || this.state.expanded}
readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
onChange={this.updateText}
value={this.state.text as string | number}
id={`text-input-${id}`}
Expand Down
23 changes: 13 additions & 10 deletions ...rc/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,20 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
<div
class="pf-v5-c-clipboard-copy__group"
>
<input
aria-invalid="false"
aria-label="'Copyable input'"
<div
class="pf-v5-c-form-control"
data-ouia-component-id="OUIA-Generated-TextInputBase-1"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="text-input-0"
type="text"
value="[object Object]"
/>
>
<input
aria-invalid="false"
aria-label="'Copyable input'"
data-ouia-component-id="OUIA-Generated-TextInputBase-1"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="text-input-0"
type="text"
value="[object Object]"
/>
</div>
<button
aria-disabled="false"
aria-label="'Copy to clipboard'"
Expand Down
71 changes: 40 additions & 31 deletions ...ges/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,20 @@ exports[`With popover opened 1`] = `
<div
class="pf-v5-c-input-group__item pf-m-fill"
>
<input
aria-invalid="false"
aria-label="Date picker"
<div
class="pf-v5-c-form-control"
data-ouia-component-id="OUIA-Generated-TextInputBase-4"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
placeholder="YYYY-MM-DD"
type="text"
value=""
/>
>
<input
aria-invalid="false"
aria-label="Date picker"
data-ouia-component-id="OUIA-Generated-TextInputBase-4"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
placeholder="YYYY-MM-DD"
type="text"
value=""
/>
</div>
</div>
<div
class="pf-v5-c-input-group__item"
Expand Down Expand Up @@ -153,16 +156,19 @@ exports[`With popover opened 1`] = `
<div
class="pf-v5-c-calendar-month__header-year"
>
<input
aria-invalid="false"
aria-label="Select year"
<div
class="pf-v5-c-form-control"
data-ouia-component-id="OUIA-Generated-TextInputBase-5"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
type="number"
value="1969"
/>
>
<input
aria-invalid="false"
aria-label="Select year"
data-ouia-component-id="OUIA-Generated-TextInputBase-5"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
type="number"
value="1969"
/>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -772,18 +778,21 @@ exports[`disabled date picker 1`] = `
<div
class="pf-v5-c-input-group__item pf-m-fill"
>
<input
aria-invalid="false"
aria-label="disabled date picker"
class="pf-v5-c-form-control"
data-ouia-component-id="OUIA-Generated-TextInputBase-1"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
disabled=""
placeholder="YYYY-MM-DD"
type="text"
value="2020-11-20"
/>
<div
class="pf-v5-c-form-control pf-m-disabled"
>
<input
aria-invalid="false"
aria-label="disabled date picker"
data-ouia-component-id="OUIA-Generated-TextInputBase-1"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
disabled=""
placeholder="YYYY-MM-DD"
type="text"
value="2020-11-20"
/>
</div>
</div>
<div
class="pf-v5-c-input-group__item"
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/FileUpload/FileUploadField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
<InputGroup>
<InputGroupItem isFill>
<TextInput
isReadOnly // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
readOnlyVariant="plain" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
isDisabled={isDisabled}
id={`${id}-filename`}
name={`${id}-filename`}
Expand Down
50 changes: 28 additions & 22 deletions ...ges/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,24 @@ exports[`simple fileupload 1`] = `
<div
class="pf-v5-c-input-group__item pf-m-fill"
>
<input
aria-describedby="simple-text-file-browse-button"
aria-invalid="false"
aria-label="Drag a file here or browse to upload"
class="pf-v5-c-form-control"
data-ouia-component-id="OUIA-Generated-TextInputBase-1"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="simple-text-file-filename"
name="simple-text-file-filename"
placeholder="Drag a file here or browse to upload"
readonly=""
type="text"
value=""
/>
<div
class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
>
<input
aria-describedby="simple-text-file-browse-button"
aria-invalid="false"
aria-label="Drag a file here or browse to upload"
data-ouia-component-id="OUIA-Generated-TextInputBase-1"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="simple-text-file-filename"
name="simple-text-file-filename"
placeholder="Drag a file here or browse to upload"
readonly=""
type="text"
value=""
/>
</div>
</div>
<div
class="pf-v5-c-input-group__item"
Expand Down Expand Up @@ -66,14 +69,17 @@ exports[`simple fileupload 1`] = `
<div
class="pf-v5-c-file-upload__file-details"
>
<textarea
aria-invalid="false"
aria-label="File upload"
<div
class="pf-v5-c-form-control pf-m-resize-vertical"
id="simple-text-file"
name="simple-text-file"
placeholder=""
/>
>
<textarea
aria-invalid="false"
aria-label="File upload"
id="simple-text-file"
name="simple-text-file"
placeholder=""
/>
</div>
</div>
<input
style="display: none;"
Expand Down
50 changes: 28 additions & 22 deletions ...eact-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,24 @@ exports[`simple fileuploadfield 1`] = `
<div
class="pf-v5-c-input-group__item pf-m-fill"
>
<input
aria-describedby="custom-file-upload-browse-button"
aria-invalid="false"
aria-label="Do something custom with this!"
class="pf-v5-c-form-control"
data-ouia-component-id="OUIA-Generated-TextInputBase-1"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="custom-file-upload-filename"
name="custom-file-upload-filename"
placeholder="Do something custom with this!"
readonly=""
type="text"
value=""
/>
<div
class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
>
<input
aria-describedby="custom-file-upload-browse-button"
aria-invalid="false"
aria-label="Do something custom with this!"
data-ouia-component-id="OUIA-Generated-TextInputBase-1"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="custom-file-upload-filename"
name="custom-file-upload-filename"
placeholder="Do something custom with this!"
readonly=""
type="text"
value=""
/>
</div>
</div>
<div
class="pf-v5-c-input-group__item"
Expand Down Expand Up @@ -64,14 +67,17 @@ exports[`simple fileuploadfield 1`] = `
<div
class="pf-v5-c-file-upload__file-details"
>
<textarea
aria-invalid="false"
aria-label="File upload"
<div
class="pf-v5-c-form-control pf-m-resize-vertical"
id="custom-file-upload"
name="custom-file-upload"
placeholder=""
/>
>
<textarea
aria-invalid="false"
aria-label="File upload"
id="custom-file-upload"
name="custom-file-upload"
placeholder=""
/>
</div>
</div>
<p>
A custom preview of the uploaded file can be passed as children
Expand Down
31 changes: 31 additions & 0 deletions packages/react-core/src/components/FormControl/FormControlIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
import { css } from '@patternfly/react-styles';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';

export const statusIcons = {
success: CheckCircleIcon,
error: ExclamationCircleIcon,
warning: ExclamationTriangleIcon
};

export interface FormControlIconProps extends React.HTMLProps<HTMLDivElement> {
/** Additional class names added to the text input icon wrapper. */
className?: string;
/** A custom icon to render instead of a status icon. */
customIcon?: React.ReactNode;
/** The status icon to render. */
status?: 'success' | 'error' | 'warning';
}

export const FormControlIcon = ({ status, customIcon, className, ...props }: FormControlIconProps) => {
const StatusIcon = status && statusIcons[status];

return (
<div className={css(styles.formControlIcon, status && styles.modifiers.status, className)} {...props}>
{customIcon || <StatusIcon />}
</div>
);
};