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

refactor(ui5-input): style icon slot content by default #8995

Closed
wants to merge 9 commits into from
Closed

refactor(ui5-input): style icon slot content by default #8995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
34f82ae
WIP: ui5-input icon styles
nnaydenow May 17, 2024
55e8d57
Merge remote-tracking branch 'origin/main' into icons-input-1
nnaydenow Jun 20, 2024
c9a8938
chore: cleanup
nnaydenow Jun 20, 2024
e6db6da
chore: cleanup
nnaydenow Jun 20, 2024
7435a20
chore: format hbs
nnaydenow Jun 20, 2024
25f16dd
chore: fix tests
nnaydenow Jun 20, 2024
25f655c
chore: restore NotificationListItem.html
nnaydenow Jun 20, 2024
bdd9e63
Merge remote-tracking branch 'origin/main' into icons-input-1
nnaydenow Jun 20, 2024
506a061
chore: changes
nnaydenow Jul 1, 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
33 changes: 17 additions & 16 deletions packages/main/src/ComboBox.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,26 +29,27 @@
/>

{{#if _effectiveShowClearIcon}}
<div @click={{_clear}} class="ui5-input-clear-icon-wrapper inputIcon" tabindex="-1">
<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
<div @click={{_clear}} class="ui5-input-clear-icon-wrapper" tabindex="-1">
<ui5-icon tabindex="-1" class="ui5-input-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
</div>
{{/if}}

{{#if icon}}
<slot name="icon"></slot>
{{/if}}
<div class="ui5-input-icon-root">
{{#if icon.length}}
<slot name="icon"></slot>
{{/if}}

{{#unless readonly}}
<ui5-icon
name="slim-arrow-down"
slot="icon"
tabindex="-1"
class="inputIcon"
?pressed="{{_iconPressed}}"
@click="{{_arrowClick}}"
accessible-name="{{_iconAccessibleNameText}}"
></ui5-icon>
{{/unless}}
{{#unless readonly}}
<ui5-icon
name="slim-arrow-down"
tabindex="-1"
class="ui5-input-icon"
?pressed="{{_iconPressed}}"
@click="{{_arrowClick}}"
accessible-name="{{_iconAccessibleNameText}}"
></ui5-icon>
{{/unless}}
</div>
</div>

{{>include "./ComboBoxPopover.hbs"}}
1 change: 0 additions & 1 deletion packages/main/src/DatePickerInput.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
mode={{_iconMode}}
show-tooltip
@click="{{_togglePicker}}"
class="inputIcon"
?pressed="{{open}}"
></ui5-icon>
{{/unless}}
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/Input.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@
/>

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

Expand Down
4 changes: 3 additions & 1 deletion packages/main/src/Input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -524,6 +524,8 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement

/**
* Defines the icon to be displayed in the component.
*
* **Note:** It is recommended to hide the icon when the component is in readonly state
Copy link
Contributor

Choose a reason for hiding this comment

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

IMO there will also be cases for users to add decorative icons intentionally (to serve as a visual label) and this statement is not okay in the case. Better to try to fix the issues for the readonly case than restrict the user.

* @public
*/
@slot()
Expand Down Expand Up @@ -1477,7 +1479,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
}

get iconsCount(): number {
const slottedIconsCount = this.icon ? this.icon.length : 0;
const slottedIconsCount = this.icon.length;
const clearIconCount = Number(this._effectiveShowClearIcon) ?? 0;
return slottedIconsCount + clearIconCount;
}
Expand Down
36 changes: 19 additions & 17 deletions packages/main/src/MultiComboBox.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,27 +79,29 @@
/>

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

{{#if icon}}
<slot name="icon"></slot>
{{/if}}
<div class="ui5-input-icon-root">
{{#if icon}}
<slot name="icon"></slot>
{{/if}}

{{#unless readonly}}
<ui5-icon name="slim-arrow-down"
class="inputIcon"
slot="icon"
tabindex="-1"
@click="{{togglePopoverByDropdownIcon}}"
@mousedown="{{_onIconMousedown}}"
@focusin="{{_forwardFocusToInner}}"
?pressed="{{open}}"
accessible-name="{{_iconAccessibleNameText}}"
></ui5-icon>
{{/unless}}
{{#unless readonly}}
<ui5-icon name="slim-arrow-down"
class="ui5-input-icon"
slot="icon"
tabindex="-1"
@click="{{togglePopoverByDropdownIcon}}"
@mousedown="{{_onIconMousedown}}"
@focusin="{{_forwardFocusToInner}}"
?pressed="{{open}}"
accessible-name="{{_iconAccessibleNameText}}"
></ui5-icon>
{{/unless}}
</div>
</div>

{{>include "./MultiComboBoxPopover.hbs"}}
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 @@ -25,7 +25,7 @@
@click={{valueHelpPress}}
@mousedown={{valueHelpMouseDown}}
@mouseup={{valueHelpMouseUp}}
class="inputIcon"
class="ui5-input-icon"
name="value-help"
></ui5-icon>
{{/if}}
Expand Down
12 changes: 7 additions & 5 deletions packages/main/src/Select.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,13 @@
</div>

{{#unless readonly}}
<ui5-icon
name="slim-arrow-down"
class="inputIcon"
?pressed="{{_iconPressed}}"
></ui5-icon>
<div class="ui5-input-icon-root">
<ui5-icon
name="slim-arrow-down"
class="ui5-input-icon"
?pressed="{{_iconPressed}}"
></ui5-icon>
</div>
{{/unless}}

{{#if hasValueState}}
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}}"
class="inputIcon"
class="ui5-input-icon"
show-tooltip
?clickable="{{_decIconClickable}}"
></ui5-icon>
Expand Down Expand Up @@ -70,7 +70,7 @@
@mousedown="{{_incSpin}}"
@mouseup="{{_resetSpin}}"
@mouseout="{{_resetSpinOut}}"
class="inputIcon"
class="ui5-input-icon"
show-tooltip
?clickable="{{_incIconClickable}}"
></ui5-icon>
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TimePicker.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
show-tooltip
@click="{{_togglePicker}}"
?pressed="{{open}}"
class="ui5-time-picker-input-icon-button inputIcon"
class="ui5-time-picker-input-icon-button"
></ui5-icon>
{{/unless}}
</ui5-input>
Expand Down
123 changes: 0 additions & 123 deletions packages/main/src/themes/Input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,129 +368,6 @@
box-shadow: var(--sapField_Hover_InformationShadow);
}

/* Input Icon */

.ui5-input-icon-root {
min-width: var(--_ui5_input_icon_min_width);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

/* TODO: Remove this after parser is fixed
- this statement is transformed to [ui5-multi-combobox] [ui5-icon] which
affects all icons in the combobox incuding these in the list items
*/
::slotted([ui5-icon][slot="icon"]) {
align-self: start;
padding: var(--_ui5_input_custom_icon_padding);
/* Normalize like libraries overrule the selector, thefore we need !important */
box-sizing: content-box !important;
}

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

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

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

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

:host([value-state="Negative"]) ::slotted(.inputIcon[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(.inputIcon[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);
}

:host([value-state="Information"]) ::slotted([ui5-icon][slot="icon"]) {
padding: var(--_ui5_input_information_custom_icon_padding);
}

:host([value-state="Information"][focused]) ::slotted([ui5-icon][slot="icon"]) {
padding: var(--_ui5_input_information_custom_focused_icon_padding);
}

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

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

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

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

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

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

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

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

.ui5-input-clear-icon-wrapper {
height: var(--_ui5_input_icon_wrapper_height);
padding: 0;
width: var(--_ui5_input_icon_width);
min-width: var(--_ui5_input_icon_width);
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}

:host([value-state]:not([value-state="None"]):not([value-state="Positive"])) .ui5-input-clear-icon-wrapper {
height: var(--_ui5_input_icon_wrapper_state_height);
vertical-align: top;
}

:host([value-state="Positive"]) .ui5-input-clear-icon-wrapper {
height: var(--_ui5_input_icon_wrapper_success_state_height);
}

[ui5-icon].ui5-input-clear-icon {
padding: 0;
color: inherit;
}

/* Chrome, Safari, Edge, Opera */
[inner-input]::-webkit-outer-spin-button,
Expand Down
Loading
Loading