Skip to content

fix(input, input-number, input-text): ensure overlay does not obscure input icon #12716

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
josercarcamo merged 3 commits into from
Aug 20, 2025
Merged

fix(input, input-number, input-text): ensure overlay does not obscure input icon #12716

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
467db3a
fix(input): ensure overlay does not obscure input icon
josercarcamo Aug 15, 2025
8084086
Added same solution to input-text and input-number
josercarcamo Aug 18, 2025
d80604f
Addressed code review comments
josercarcamo Aug 20, 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
7 changes: 7 additions & 0 deletions packages/calcite-components/src/components/input-number/input-number.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@
* @prop --calcite-input-suffix-text-color: Specifies the text color of the suffix element.
*/

// AUTO-GENERATED — do not modify. Changes will be overwritten.
//
// Internal CSS custom properties for component use only. Overwriting is not recommended.
//
// --calcite-internal-input-number-alignment

:host {
@apply block;
}
Expand Down Expand Up @@ -192,6 +198,7 @@ input:focus {
inline-flex
flex-1
items-center;
isolation: isolate;
}

.icon {
Expand Down
12 changes: 12 additions & 0 deletions packages/calcite-components/src/components/input-number/input-number.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,3 +237,15 @@ export const alignmentAllOptions = (): string => html`
<calcite-input-number alignment="end" placeholder="Placeholder text"></calcite-input-number>
</div>
`;

export const overlayDoesNotObscureIcon = (): string =>
html` <style>
.overlay {
position: absolute;
inset: 0;
background-color: white;
opacity: 0.75;
}
</style>
<calcite-input-number icon="check-square-f"></calcite-input-number>
<div class="overlay"></div>`;
7 changes: 7 additions & 0 deletions packages/calcite-components/src/components/input-text/input-text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@
* @prop --calcite-input-text-text-color-focus: Specifies the component's text color when focused.
*/

// AUTO-GENERATED — do not modify. Changes will be overwritten.
//
// Internal CSS custom properties for component use only. Overwriting is not recommended.
//
// --calcite-internal-input-text-alignment

:host {
@apply block;
}
Expand Down Expand Up @@ -224,6 +230,7 @@ input:focus {
inline-flex
flex-1
items-center;
isolation: isolate;
}

.icon {
Expand Down
12 changes: 12 additions & 0 deletions packages/calcite-components/src/components/input-text/input-text.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,3 +187,15 @@ export const alignmentAllOptions = (): string => html`
<calcite-input-text alignment="end" placeholder="Placeholder text"></calcite-input-text>
</div>
`;

export const overlayDoesNotObscureIcon = (): string =>
html` <style>
.overlay {
position: absolute;
inset: 0;
background-color: white;
opacity: 0.75;
}
</style>
<calcite-input-text icon="check-square-f"></calcite-input-text>
<div class="overlay"></div>`;
1 change: 1 addition & 0 deletions packages/calcite-components/src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,7 @@ input:focus {
inline-flex
flex-1
items-center;
isolation: isolate;
}

.icon {
Expand Down
12 changes: 12 additions & 0 deletions packages/calcite-components/src/components/input/input.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,3 +260,15 @@ export const fontSizeSetAtRoot = (): string =>
<calcite-input placeholder="Placeholder" prefix-text="Prefix" suffix-text="Suffix" type="text" icon="search">
<calcite-button slot="action"> Search </calcite-button>
</calcite-input>`;

export const overlayDoesNotObscureIcon = (): string =>
html` <style>
.overlay {
position: absolute;
inset: 0;
background-color: white;
opacity: 0.75;
}
</style>
<calcite-input icon="check-square-f"></calcite-input>
<div class="overlay"></div>`;
Loading