Skip to content

fix(input): remove css variable and update helper text to use valid highlight in ionic theme #30272

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
merged 14 commits into from
Mar 25, 2025
Merged

fix(input): remove css variable and update helper text to use valid highlight in ionic theme #30272

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
0e55445
fix(input): remove --text-color-invalid var
brandyscarney Mar 19, 2025
a2d2cd6
style: remove redundant code
brandyscarney Mar 20, 2025
1c89846
refactor(input): split common and native styles
brandyscarney Mar 20, 2025
bb5ff9e
fix(input): use valid highlight color for helper text
brandyscarney Mar 20, 2025
5cbfbad
style: lint
brandyscarney Mar 20, 2025
7308cc3
chore(): add updated snapshots
brandyscarney Mar 20, 2025
d3a228b
chore: build and move code around
brandyscarney Mar 20, 2025
419af0d
style: lint take 47
brandyscarney Mar 20, 2025
ad08ec1
Merge branch 'next' into FW-6389-input
brandyscarney Mar 20, 2025
3e6fc13
fix(input): use correct colors for helper/error disabled states
brandyscarney Mar 21, 2025
2636f07
test(input): add readonly color
brandyscarney Mar 21, 2025
e6bf8f2
chore(): add updated snapshots
brandyscarney Mar 21, 2025
1619a6c
Merge branch 'next' into FW-6389-input
brandyscarney Mar 24, 2025
cf2683e
Merge branch 'next' into FW-6389-input
brandyscarney Mar 25, 2025
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
3 changes: 0 additions & 3 deletions core/api.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -989,9 +989,6 @@ ion-input,css-prop,--placeholder-font-weight,md
ion-input,css-prop,--placeholder-opacity,ionic
ion-input,css-prop,--placeholder-opacity,ios
ion-input,css-prop,--placeholder-opacity,md
ion-input,css-prop,--text-color-invalid,ionic
ion-input,css-prop,--text-color-invalid,ios
ion-input,css-prop,--text-color-invalid,md

ion-input-password-toggle,shadow
ion-input-password-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
Expand Down
5 changes: 0 additions & 5 deletions core/src/components/input/input.ionic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
--highlight-color-invalid: #{globals.$ion-semantics-danger-800};
--placeholder-color: #{globals.$ion-primitives-neutral-800};
--placeholder-opacity: 1;
--text-color-invalid: #{globals.$ion-semantics-danger-800};
--background: #{globals.$ion-primitives-base-white};

font-size: globals.$ion-font-size-350;
Expand Down Expand Up @@ -153,10 +152,6 @@
color: globals.$ion-semantics-success-900;
}

:host(.ion-touched.ion-invalid) .error-text {
color: var(--text-color-invalid);
Copy link
Member Author

@brandyscarney brandyscarney Mar 20, 2025

Choose a reason for hiding this comment

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

This code can be removed because the common file has this:

.input-bottom .error-text {
  color: var(--highlight-color-invalid);
}

}

:host(.has-focus.ion-valid),
:host(.ion-touched.ion-invalid) {
--border-width: #{globals.$ion-border-size-025};
Expand Down
1 change: 0 additions & 1 deletion core/src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
* @prop --highlight-color-focused: The color of the highlight on the input when focused
* @prop --highlight-color-valid: The color of the highlight on the input when valid
* @prop --highlight-color-invalid: The color of the highlight on the input when invalid
* @prop --text-color-invalid: The color of the error text on the input when invalid. Only applies to ionic theme.
*
* @prop --border-color: Color of the border below the input when using helper text, error text, or counter
* @prop --border-radius: Radius of the input. A large radius may display unevenly when using fill="outline"; if needed, use shape="round" instead or increase --padding-start.
Expand Down
Loading