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

Enhancement/input component hiding of error icon #318

Closed
wants to merge 5 commits into from
Closed

Enhancement/input component hiding of error icon #318

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b7840f6
add hideErrorIcon to input component
FatumaA Jan 22, 2022
ab58d9a
make error icon on InputNumber optional
FatumaA Jan 22, 2022
4097e9e
make errorIcon on Select in error state optional
FatumaA Jan 22, 2022
242e7b7
remove repeat conditions on input number errorstate check
FatumaA Jan 22, 2022
fff95a3
add showErrorIcon check that determines if errorIcon is shown
FatumaA Jan 23, 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
5 changes: 4 additions & 1 deletion src/components/Input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export interface Props
descriptionText?: string | React.ReactNode | undefined
disabled?: boolean
error?: string
hideErrorIcon?: boolean
icon?: any
inputRef?: string
label?: string
Expand All @@ -40,6 +41,7 @@ function Input({
descriptionText,
disabled,
error,
hideErrorIcon = false,
icon,
id = '',
name = '',
Expand Down Expand Up @@ -140,6 +142,7 @@ function Input({
layout={layout}
id={id}
error={error}
hideErrorIcon={hideErrorIcon}
descriptionText={descriptionText}
style={style}
size={size}
Expand Down Expand Up @@ -167,7 +170,7 @@ function Input({
{icon && <InputIconContainer icon={icon} />}
{copy || error || actions ? (
<div className={__styles.actions_container}>
{error && <InputErrorIcon size={size} />}
{error && !hideErrorIcon && <InputErrorIcon size={size} />}
{copy && !hidden ? (
<Button
size="tiny"
Expand Down
9 changes: 6 additions & 3 deletions src/components/InputNumber/InputNumber.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export interface Props {
descriptionText?: string
disabled?: boolean
error?: string
hideErrorIcon?: boolean
icon?: any
id?: string
inputRef?: React.RefObject<HTMLInputElement>
Expand Down Expand Up @@ -52,6 +53,7 @@ function InputNumber({
descriptionText,
disabled,
error,
hideErrorIcon = false,
icon,
id = '',
inputRef,
Expand Down Expand Up @@ -173,6 +175,7 @@ function InputNumber({
layout={layout}
id={id}
error={error}
hideErrorIcon={hideErrorIcon}
descriptionText={descriptionText}
style={style}
size={size}
Expand Down Expand Up @@ -214,11 +217,11 @@ function InputNumber({
/>
</div> */}
{icon && <InputIconContainer icon={icon} />}
{error ? (
{error && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the logic is possibly wrong here, as error could be defined and hideErrorIcon could be true.
But then. the <div> below this line will still get rendered.

Might need to have a variable above like, const showErrorIcon = error && !hideErrorIcon and then use that variable instead of error on line 220.

I think the same can be applied to all files you've changed.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've made the requested changes in the last commit

<div className={__styles.actions_container}>
{error && <InputErrorIcon size={size} />}
{!hideErrorIcon && <InputErrorIcon size={size} />}
</div>
) : null}
)}
</div>
</FormLayout>
</div>
Expand Down
5 changes: 4 additions & 1 deletion src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export interface Props
children: React.ReactNode
descriptionText?: string
error?: string
hideErrorIcon?: boolean
icon?: any
inputRef?: string
label?: string
Expand All @@ -51,6 +52,7 @@ function Select({
descriptionText,
disabled,
error,
hideErrorIcon = false,
icon,
id = '',
inputRef,
Expand Down Expand Up @@ -123,6 +125,7 @@ function Select({
layout={layout}
id={id}
error={error}
hideErrorIcon={hideErrorIcon}
descriptionText={descriptionText}
className={className}
style={style}
Expand Down Expand Up @@ -150,7 +153,7 @@ function Select({
{icon && <InputIconContainer icon={icon} />}
{error && (
<div className={__styles.actions_container}>
{error && <InputErrorIcon size={size} />}
{error && !hideErrorIcon && <InputErrorIcon size={size} />}
</div>
)}
<span className={__styles.chevron_container}>
Expand Down
2 changes: 2 additions & 0 deletions src/lib/Layout/FormLayout/FormLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ type Props = {
className?: string
descriptionText?: string | React.ReactNode
error?: string | React.ReactNode
hideErrorIcon?: boolean
id?: string
label?: string | React.ReactNode
labelOptional?: string | React.ReactNode
Expand All @@ -30,6 +31,7 @@ export function FormLayout({
className,
descriptionText,
error,
hideErrorIcon = false,
id,
label,
labelOptional,
Expand Down