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

feat(ui5-input): allow custom icon styling #8881

Merged
merged 10 commits into from
May 14, 2024
Merged

feat(ui5-input): allow custom icon styling #8881

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7df09b7
feat(ui5-input): allow custom icon styling
Apr 30, 2024
d337e31
feat(ui5-input): align componets
Apr 30, 2024
2d05381
Merge branch 'main' into input-icon-common-css
elenastoyanovaa Apr 30, 2024
ae66bdb
Update TimePicker.hbs
elenastoyanovaa Apr 30, 2024
53748fa
Update MultiComboBox.spec.js
elenastoyanovaa Apr 30, 2024
6a06b3f
Merge remote-tracking branch 'origin/main' into input-icon-common-css
May 14, 2024
dbb4ebe
feat(ui5-input): allow custom icon styling
May 14, 2024
08d5ed5
feat(ui5-input): allow custom icon styling
May 14, 2024
eb5e70f
feat(ui5-input): allow custom icon styling
May 14, 2024
d7ad68b
Update InputIcon.css
elenastoyanovaa May 14, 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/main/src/ComboBox.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
/>

{{#if _effectiveShowClearIcon}}
<div @click={{_clear}} class="ui5-input-clear-icon-wrapper" input-icon tabindex="-1">
<div @click={{_clear}} class="ui5-input-clear-icon-wrapper input-icon" tabindex="-1">
<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
</div>
{{/if}}
Expand All @@ -42,7 +42,7 @@
name="slim-arrow-down"
slot="icon"
tabindex="-1"
input-icon
class="input-icon"
?pressed="{{_iconPressed}}"
@click="{{_arrowClick}}"
accessible-name="{{_iconAccessibleNameText}}"
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/DatePickerInput.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
mode={{_iconMode}}
show-tooltip
@click="{{togglePicker}}"
input-icon
class="input-icon"
?pressed="{{_isPickerOpen}}"
></ui5-icon>
{{/unless}}
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/Input.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
/>

{{#if _effectiveShowClearIcon}}
<div @click={{_clear}} @mousedown={{_iconMouseDown}} class="ui5-input-clear-icon-wrapper" input-icon tabindex="-1">
<div @click={{_clear}} @mousedown={{_iconMouseDown}} class="ui5-input-clear-icon-wrapper input-icon" tabindex="-1">
<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
</div>
{{/if}}
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/MultiComboBox.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
/>

{{#if _effectiveShowClearIcon}}
<div @click={{_clear}} class="ui5-input-clear-icon-wrapper" input-icon tabindex="-1" @mousedown={{_iconMouseDown}}>
<div @click={{_clear}} class="ui5-input-clear-icon-wrapper input-icon" tabindex="-1" @mousedown={{_iconMouseDown}}>
<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
</div>
{{/if}}
Expand All @@ -73,7 +73,7 @@

{{#unless readonly}}
<ui5-icon name="slim-arrow-down"
input-icon
class="input-icon"
slot="icon"
tabindex="-1"
@click="{{togglePopoverByDropdownIcon}}"
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/MultiInput.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
@click={{valueHelpPress}}
@mousedown={{valueHelpMouseDown}}
@mouseup={{valueHelpMouseUp}}
input-icon
class="input-icon"
name="value-help"
></ui5-icon>
{{/if}}
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/Select.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
{{#unless readonly}}
<ui5-icon
name="slim-arrow-down"
input-icon
class="input-icon"
?pressed="{{_iconPressed}}"
></ui5-icon>
{{/unless}}
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/StepInput.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
@mousedown="{{_decSpin}}"
@mouseup="{{_resetSpin}}"
@mouseout="{{_resetSpinOut}}"
input-icon
class="input-icon"
show-tooltip
?clickable="{{_decIconClickable}}"
></ui5-icon>
Expand Down Expand Up @@ -70,7 +70,7 @@
@mousedown="{{_incSpin}}"
@mouseup="{{_resetSpin}}"
@mouseout="{{_resetSpinOut}}"
input-icon
class="input-icon"
show-tooltip
?clickable="{{_incIconClickable}}"
></ui5-icon>
Expand Down
5 changes: 2 additions & 3 deletions packages/main/src/TimePicker.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,11 @@
tabindex="-1"
show-tooltip
@click="{{togglePicker}}"
input-icon
?pressed="{{_isPickerOpen}}"
class="ui5-time-picker-input-icon-button"
class="ui5-time-picker-input-icon-button input-icon"
></ui5-icon>
{{/unless}}
</ui5-input>
</div>

{{>include "./TimePickerPopover.hbs"}}
{{>include "./TimePickerPopover.hbs"}}
Empty file removed packages/main/src/styles/Input.module.css
View file
Open in desktop
Empty file.
1 change: 1 addition & 0 deletions packages/main/src/styles/InputIcon.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "../themes/InputIcon.css";
elenastoyanovaa marked this conversation as resolved.
Show resolved Hide resolved
40 changes: 20 additions & 20 deletions packages/main/src/themes/Input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,31 +389,31 @@
box-sizing: content-box !important;
}

:host([value-state="Negative"]) [input-icon],
:host([value-state="Critical"]) [input-icon]{
:host([value-state="Negative"]) .input-icon,
:host([value-state="Critical"]) .input-icon{
padding: var(--_ui5_input_error_warning_icon_padding);
}

:host([value-state="Negative"][focused]) [input-icon],
:host([value-state="Critical"][focused]) [input-icon]{
:host([value-state="Negative"][focused]) .input-icon,
:host([value-state="Critical"][focused]) .input-icon{
padding: var(--_ui5_input_error_warning_focused_icon_padding);
}

:host([value-state="Information"]) [input-icon] {
:host([value-state="Information"]) .input-icon {
padding: var(--_ui5_input_information_icon_padding);
}

:host([value-state="Information"][focused]) [input-icon] {
:host([value-state="Information"][focused]) .input-icon {
padding: var(--_ui5_input_information_focused_icon_padding);
}

:host([value-state="Negative"]) ::slotted([input-icon][ui5-icon]),
:host([value-state="Negative"]) ::slotted(.input-icon[ui5-icon]),
:host([value-state="Negative"]) ::slotted([ui5-icon][slot="icon"]),
:host([value-state="Critical"]) ::slotted([ui5-icon][slot="icon"]) {
padding: var(--_ui5_input_error_warning_custom_icon_padding);
}

:host([value-state="Negative"][focused]) ::slotted([input-icon][ui5-icon]),
:host([value-state="Negative"][focused]) ::slotted(.input-icon[ui5-icon]),
:host([value-state="Negative"][focused]) ::slotted([ui5-icon][slot="icon"]),
:host([value-state="Critical"][focused]) ::slotted([ui5-icon][slot="icon"]) {
padding: var(--_ui5_input_error_warning_custom_focused_icon_padding);
Expand All @@ -427,43 +427,43 @@
padding: var(--_ui5_input_information_custom_focused_icon_padding);
}

:host([value-state="Negative"]) [input-icon]:active,
:host([value-state="Negative"]) [input-icon][pressed] {
:host([value-state="Negative"]) .input-icon:active,
:host([value-state="Negative"]) .input-icon[pressed] {
box-shadow: var(--_ui5_input_error_icon_box_shadow);
color: var(--_ui5_input_icon_error_pressed_color);
}

:host([value-state="Negative"]) [input-icon]:not([pressed]):not(:active):hover {
:host([value-state="Negative"]) .input-icon:not([pressed]):not(:active):hover {
box-shadow: var(--_ui5_input_error_icon_box_shadow);
}

:host([value-state="Critical"]) [input-icon]:active,
:host([value-state="Critical"]) [input-icon][pressed] {
:host([value-state="Critical"]) .input-icon:active,
:host([value-state="Critical"]) .input-icon[pressed] {
box-shadow: var(--_ui5_input_warning_icon_box_shadow);
color: var(--_ui5_input_icon_warning_pressed_color);
}

:host([value-state="Critical"]) [input-icon]:not([pressed]):not(:active):hover {
:host([value-state="Critical"]) .input-icon:not([pressed]):not(:active):hover {
box-shadow: var(--_ui5_input_warning_icon_box_shadow);
}

:host([value-state="Information"]) [input-icon]:active,
:host([value-state="Information"]) [input-icon][pressed] {
:host([value-state="Information"]) .input-icon:active,
:host([value-state="Information"]) .input-icon[pressed] {
box-shadow: var(--_ui5_input_information_icon_box_shadow);
color: var(--_ui5_input_icon_information_pressed_color);
}

:host([value-state="Information"]) [input-icon]:not([pressed]):not(:active):hover {
:host([value-state="Information"]) .input-icon:not([pressed]):not(:active):hover {
box-shadow: var(--_ui5_input_information_icon_box_shadow);
}

:host([value-state="Positive"]) [input-icon]:active,
:host([value-state="Positive"]) [input-icon][pressed] {
:host([value-state="Positive"]) .input-icon:active,
:host([value-state="Positive"]) .input-icon[pressed] {
box-shadow: var(--_ui5_input_success_icon_box_shadow);
color: var(--_ui5_input_icon_success_pressed_color);
}

:host([value-state="Positive"]) [input-icon]:not([pressed]):not(:active):hover {
:host([value-state="Positive"]) .input-icon:not([pressed]):not(:active):hover {
box-shadow: var(--_ui5_input_success_icon_box_shadow);
}

Expand Down
17 changes: 5 additions & 12 deletions packages/main/src/themes/InputIcon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
/*
This CSS file enables visual alignment of all icons within input elements.
API:
- add input-icon attribute to an icon
- [Optional] pressed attribute set to the icon will enable additional styling (check MultiComboBox, Select, etc.)
*/

[input-icon] {
.input-icon {
color: var(--_ui5_input_icon_color);
cursor: pointer;
outline: none;
Expand All @@ -16,26 +9,26 @@
border-radius: var(--_ui5_input_icon_border_radius);
}

[input-icon][pressed] {
.input-icon [pressed] {
background: var(--_ui5_input_icon_pressed_bg);
box-shadow: var(--_ui5_input_icon_box_shadow);
border-inline-start: var(--_ui5_select_hover_icon_left_border);
color: var(--_ui5_input_icon_pressed_color);
}

[input-icon]:active {
.input-icon:active {
background-color: var(--sapButton_Active_Background);
box-shadow: var(--_ui5_input_icon_box_shadow);
border-inline-start: var(--_ui5_select_hover_icon_left_border);
color: var(--_ui5_input_icon_pressed_color);
}

[input-icon]:not([pressed]):not(:active):hover {
.input-icon:not([pressed]):not(:active):hover {
background: var(--_ui5_input_icon_hover_bg);
box-shadow: var(--_ui5_input_icon_box_shadow);
}

[input-icon]:hover {
.input-icon:hover {
border-inline-start: var(--_ui5_select_hover_icon_left_border);
box-shadow: var(--_ui5_input_icon_box_shadow);
}
31 changes: 15 additions & 16 deletions packages/main/src/themes/InputSharedStyles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,19 @@
border-color: var(--_ui5_input_disabled_border_color);
}

:host([value-state="Negative"]) [input-icon]:not([pressed]):not(:active):hover {
:host([value-state="Negative"]) .input-icon:not([pressed]):not(:active):hover {
box-shadow: var(--_ui5_input_error_icon_box_shadow);
}

:host([value-state="Critical"]) [input-icon]:not([pressed]):not(:active):hover {
:host([value-state="Critical"]) .input-icon:not([pressed]):not(:active):hover {
box-shadow: var(--_ui5_input_warning_icon_box_shadow);
}

:host([value-state="Information"]) [input-icon]:not([pressed]):not(:active):hover {
:host([value-state="Information"]) .input-icon:not([pressed]):not(:active):hover {
box-shadow: var(--_ui5_input_information_icon_box_shadow);
}


:host([value-state="Positive"]) [input-icon]:not([pressed]):not(:active):hover {
:host([value-state="Positive"]) .input-icon:not([pressed]):not(:active):hover {
box-shadow: var(--_ui5_input_success_icon_box_shadow);
}

Expand Down Expand Up @@ -65,35 +64,35 @@
box-shadow: var(--sapField_InformationShadow);
}

:host([value-state="Negative"]) [input-icon]:active,
:host([value-state="Negative"]) [input-icon][pressed] {
:host([value-state="Negative"]) .input-icon:active,
:host([value-state="Negative"]) .input-icon[pressed] {
box-shadow: var(--_ui5_input_error_icon_box_shadow);
color: var(--_ui5_input_icon_error_pressed_color);
}

:host([value-state="Critical"]) [input-icon]:active,
:host([value-state="Critical"]) [input-icon][pressed] {
:host([value-state="Critical"]) .input-icon:active,
:host([value-state="Critical"]) .input-icon[pressed] {
box-shadow: var(--_ui5_input_warning_icon_box_shadow);
color: var(--_ui5_input_icon_warning_pressed_color);
}

:host([value-state="Information"]) [input-icon]:active,
:host([value-state="Information"]) [input-icon][pressed] {
:host([value-state="Information"]) .input-icon:active,
:host([value-state="Information"]) .input-icon[pressed] {
box-shadow: var(--_ui5_input_information_icon_box_shadow);
color: var(--_ui5_input_icon_information_pressed_color);
}

:host([value-state="Positive"]) [input-icon]:active,
:host([value-state="Positive"]) [input-icon][pressed] {
:host([value-state="Positive"]) .input-icon:active,
:host([value-state="Positive"]) .input-icon[pressed] {
box-shadow: var(--_ui5_input_success_icon_box_shadow);
color: var(--_ui5_input_icon_success_pressed_color);
}

:host([value-state="Negative"]) [input-icon],
:host([value-state="Critical"]) [input-icon]{
:host([value-state="Negative"]) .input-icon,
:host([value-state="Critical"]) .input-icon {
padding: var(--_ui5_input_error_warning_icon_padding);
}

:host([value-state="Information"]) [input-icon] {
:host([value-state="Information"]) .input-icon {
padding: var(--_ui5_input_information_icon_padding);
}
6 changes: 3 additions & 3 deletions packages/main/src/themes/ResponsivePopoverCommon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@

}

.input-root-phone [value-state="Negative"] [input-icon][data-ui5-compact-size],
.input-root-phone [value-state="Positive"] [input-icon][data-ui5-compact-size],
.input-root-phone [value-state="Critical"] [input-icon][data-ui5-compact-size] {
.input-root-phone [value-state="Negative"] .input-icon[data-ui5-compact-size],
.input-root-phone [value-state="Positive"] .input-icon[data-ui5-compact-size],
.input-root-phone [value-state="Critical"] .input-icon[data-ui5-compact-size] {
padding: .1875rem .5rem
}

Expand Down
19 changes: 7 additions & 12 deletions packages/main/test/pages/ComponentStyles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,15 @@
</head>

<body>
<!-- <div id="input">
<ui5-title level="H2">Input</ui5-title>
</div>
<ui5-input value="Some initial value" show-clear-icon >
<ui5-icon id="custom-icon" name="search" slot="icon"></ui5-icon>
</ui5-input>
<script type="module">
import inputCss from "../../dist/styles/Input.module.css";
import inputCss from "@ui5/webcomponents/dist/styles/InputIcon.module.css";

input.innerHTML += `<ui5-input>
<ui5-icon name="search" slot="icon" class=${inputCss.inputIcon}></ui5-icon>
</ui5-input>
<br />
<ui5-input value="Some initial value" show-clear-icon >
<ui5-icon name="search" slot="icon"class=${inputCss.inputIcon}></ui5-icon>
</ui5-input>`
</script> -->
const input = document.getElementById("custom-icon");
input.classList.add(inputCss["input-icon"]);
</script>
</body>

</html>
Loading