feat(ui5-switch): implement sap_horizon theme #4156

Todor-ads · 2021-10-22T14:01:10Z

feat(ui5-switch): implement sap_horizon theme

tsanislavgatev · 2021-10-25T06:01:02Z

packages/main/src/Switch.hbs

 				{{/if}}

 				<span class="ui5-switch-handle" part="handle">
-					<ui5-icon
+					{{!-- <ui5-icon


Remove commented code

tsanislavgatev · 2021-10-25T14:09:11Z

The icons in the slider are higher.(Not centered in the middle of the line)

tsanislavgatev · 2021-10-25T14:52:43Z

The focus is lost on fiori_3_dark, fiori_3 and belize.
The one with the line, looks broken in compact on horizon.

tsanislavgatev · 2021-10-27T13:45:30Z

On fiori_3 compact, the no label switch is now wider. I guess this is an issue. Also on horizon they are bigger than the ones pointed in the specification.
Also compared to ui5, the focus is closer to the switch itself, and the green/red ones, are with quite more pale colors, can we please check this?

ilhan007 · 2021-10-28T05:35:41Z

packages/main/src/Switch.hbs

 				{{/if}}

-				<span class="ui5-switch-handle" part="handle">
-					<ui5-icon
-						name="{{sapNextIcon}}"


Hi Todor, that icon has been added for the Alpha Figma Design (you can check it with ?sap-ui-theme=sap_horizon_exp). I know that in sap_horizon you have to remove it, but let's keep it for the experimental version sap_horizon_exp, note the _exp at the end.

This is how you can do it:

First, bring it back to the template

add a CSS class to the ui5-icon,

apply styles like .class {display: var(--_ui5_switch_handle_icon)}

declare the used variable in base parameters as
--_ui5_switch_handle_icon: none (this will hide it in all the themes)

and overwrite the variable in sap_horizon_exp/Switch-parameters as
--_ui5_switch_handle_icon: inline-block (this will show it only in sap_horizon_exp)

*You can think for appropriate class and variable names
*In future based on how the design evolves we will either remove this icon, or make it visible by default.

* fix(ui5-combobox): Autocomplete on Safari Safari losses input's text highlighting after invalidation of the ComboBox web component. In order to restore the highlighting we need to duplicate the highligh functionality onAfterRendering * fix(ui5-combobox): Autocomplete on Safari Safari losses input's text highlighting after invalidation of the ComboBox web component. In order to restore the highlighting we need to duplicate the highligh functionality onAfterRendering * fix(ui5-combobox): Autocomplete on Safari Safari losses input's text highlighting after invalidation of the ComboBox web component. In order to restore the highlighting we need to duplicate the highligh functionality onAfterRendering

* Update 01-first-steps.md * Update 02-importing-components.md * Update 03-understanding-components-APIs.md * Update 02-importing-components.md * Update 04-using-icons.md * Update 05-using-assets.md * Update 06-using-features.md * Update 07-wrapping-up.md * Update README.md * Update README.md * Update 01-configuration.md * Update 02-RTL-and-compact-mode.md * Update 02-RTL-and-compact-mode.md * Update 04-OpenUI5-integration.md * Update 05-other-framework-level-APIs.md * Update README.md * Update 01-theme.md * Update 02-fonts.md * Update README.md * Update 01-theme.md * Update 03-scoping.md * Update README.md * Update 01-React.md * Update 02-Angular.md * Update 03-Vue.md * Update 01-custom-UI5-Web-Components-Packages.md * Update 01-first-steps.md * Update 02-importing-components.md * Update 01-configuration.md * Update 02-fonts.md * Update 02-custom-UI5-Web-Components.md * Update 03-understanding-components-metadata.md * Update 04-testing-UI5-Web-Components.md * Update README.md * Update 01-development-workflow.md * Update 03-playground-app.md * Update 01-development-workflow.md * Update FAQ.md * Update 01-development-workflow.md * Update README.md * Update 04-using-icons.md * Update 01-development-workflow.md

The usage of suggestion-scroll is unclear and there is no UX pattern where such an event is needed. However, in order to keep the event compatible with frameworks, we've decided on making it protected. BREAKING CHANGE: The "suggestion-scroll" event has been removed as there is no such UX specified.

* Sliders Fiori Next Implementation * Add new hover/active/focus styles * Fix handle hover border * Fix Fiori 3 Interaction states * Restore HTML markup * Add interaction states of the range slider handles * Range slider interaction states CSS improvements * Fix startpoint dot of the range slider, fix tooltip background to white

There is new font face, added for Fiori Next and will be used mainly for important texts as Page, Bar headings/titles. Still, the font is not available on ui5.sap.com, so we are using the nightly OpenUI5 build openui5nightly.hana.ondemand.com

* Sliders Fiori Next Implementation * Add new hover/active/focus styles * Fix handle hover border * Fix Fiori 3 Interaction states * Restore HTML markup * Add interaction states of the range slider handles * Range slider interaction states CSS improvements * Replace the font icon with svg one * Fix range slider interactions

Previously the card did not provide a way to label the static content in the component and to be announced by screen readers and adding accessibleNameRef, solves this issue. NOTE: everything added in accessibleNameRef will be read on focusing the card Fixes: #3681

There are no more console warnings when deregistering resize handlers Fixes #4131

#4158)

This reverts commit 3e69691.

This reverts commit 369d540.

This reverts commit 4cefe31.

This reverts commit 787306f.

This reverts commit 9387968.

This reverts commit c8768de.

…one (#4145)" This reverts commit fd6983e.

This reverts commit 28597d2.

This reverts commit e7805da.

…4132)" This reverts commit 97d2b66.

…4141)" This reverts commit e0df75f.

This reverts commit 2f1ea90.

This reverts commit c2992e3.

This reverts commit 90411f4.

This reverts commit 55b7ed4.

packages/main/src/Switch.hbs

packages/main/src/themes/Switch.css

tsanislavgatev · 2021-10-28T14:06:55Z

packages/main/src/themes/sap_horizon/Switch-parameters.css

@@ -0,0 +1,29 @@
+@import "../base/Switch-parameters.css";
+:root {
+	--_ui5_switch_track_semantic_success_backgroud_color: #deeea9;


Not a fan of the hardcoded values, but in UI5 are done with lighten/darken functions which are not available in CSS, we can use these for the moment and then update them when the parameters are ready

tsanislavgatev · 2021-10-28T14:26:47Z

Overall the change looks good to me.

outdated

ilhan007

Looks good to me

implement sap_horizon theme

0d126c2

Todor-ads requested a review from tsanislavgatev October 22, 2021 14:01

Todor-ads added the sap_horizon label Oct 22, 2021

ilhan007 changed the title ~~implement sap_horizon theme~~ feat(ui5-switch): implement sap_horizon theme Oct 25, 2021

tsanislavgatev previously requested changes Oct 25, 2021

View reviewed changes

Todor-ads added 2 commits October 26, 2021 08:40

fixed comments

fb2c4a1

fixed comments

1c7fb07

fixed comments

13a802d

ilhan007 reviewed Oct 28, 2021

View reviewed changes

Todor-ads and others added 18 commits October 28, 2021 11:36

fixed comments

922fba8

refactor(framework): Simplify i18nBundle usage (#4128)

90411f4

chore: rename theme-base to theming (#4133)

c2992e3

feat(framework): allow using a custom i18n library (#4119)

e7805da

feat: load "72Black" font face (#4139)

28597d2

There is new font face, added for Fiori Next and will be used mainly for important texts as Page, Bar headings/titles. Still, the font is not available on ui5.sap.com, so we are using the nightly OpenUI5 build openui5nightly.hana.ondemand.com

chore: fix github start button on landing page (#4146)

c8768de

refactor: CSP-compliance part 1 (#4144)

787306f

refactor: CSP-compliance part 2 (#4149)

4cefe31

refactor: CSP-compliance part 3 (#4153)

369d540

refactor: allow single quotes for style in hbs (#4154)

3e69691

fix(ui5-dialog): fix resize handler console warning (#4138)

e80c74e

There are no more console warnings when deregistering resize handlers Fixes #4131

fix(framework): removing the base theme works with adopted stylesheets (

60603b5

#4158)

Todor-ads added 16 commits October 28, 2021 11:58

Revert "refactor: allow single quotes for style in hbs (#4154)"

367313b

This reverts commit 3e69691.

Revert "refactor: CSP-compliance part 3 (#4153)"

c460c64

This reverts commit 369d540.

Revert "refactor: CSP-compliance part 2 (#4149)"

87729a9

This reverts commit 4cefe31.

Revert "refactor: CSP-compliance part 1 (#4144)"

7d33db9

This reverts commit 787306f.

Revert "fix(ui5-card): allow accessibleNameRef to be used (#4118)"

695b500

This reverts commit 9387968.

Revert "chore: fix github start button on landing page (#4146)"

1234653

This reverts commit c8768de.

Revert "fix[ui5-slider, ui5-range-slider] Replace font icon with SVG …

243548a

…one (#4145)" This reverts commit fd6983e.

Revert "feat: load "72Black" font face (#4139)"

6c74a5d

This reverts commit 28597d2.

Revert "feat(framework): allow using a custom i18n library (#4119)"

d9f1b59

This reverts commit e7805da.

Revert "feat(ui5-slider, ui5-range-slider)Fiori Next Implementation (#…

a59fe66

…4132)" This reverts commit 97d2b66.

Revert "refactor(ui5-input): make suggestion-scroll event protected (#…

78ed035

…4141)" This reverts commit e0df75f.

Revert "docs: UA review (#4134)"

f45b776

This reverts commit 2f1ea90.

Revert "chore: rename theme-base to theming (#4133)"

89291a9

This reverts commit c2992e3.

Revert "refactor(framework): Simplify i18nBundle usage (#4128)"

712dd63

This reverts commit 90411f4.

Revert "fix(ui5-combobox): Autocomplete on Safari (#3999)"

1766290

This reverts commit 55b7ed4.

fixed merge

75e8767

tsanislavgatev reviewed Oct 28, 2021

View reviewed changes

packages/main/src/Switch.hbs Outdated Show resolved Hide resolved

packages/main/src/themes/Switch.css Outdated Show resolved Hide resolved

packages/main/src/themes/Switch.css Show resolved Hide resolved

packages/main/src/themes/Switch.css Outdated Show resolved Hide resolved

fixed comments

82b1fc8

tsanislavgatev reviewed Oct 28, 2021

View reviewed changes

tsanislavgatev self-requested a review October 28, 2021 14:26

Todor-ads and others added 5 commits November 1, 2021 11:37

the focus in the horizon_exp topic has been fixed (on Cozy size)

5885dcf

Merge branch 'master' into switch_horizon

a094cdb

fixed comments

f038d22

merge conflicts

e1af34f

merge master

e180e3e

ilhan007 approved these changes Nov 3, 2021

View reviewed changes

ilhan007 merged commit e3f82a8 into master Nov 3, 2021

ilhan007 deleted the switch_horizon branch November 3, 2021 05:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui5-switch): implement sap_horizon theme #4156

feat(ui5-switch): implement sap_horizon theme #4156

Todor-ads commented Oct 22, 2021

tsanislavgatev Oct 25, 2021

tsanislavgatev commented Oct 25, 2021

tsanislavgatev commented Oct 25, 2021

tsanislavgatev commented Oct 27, 2021

ilhan007 Oct 28, 2021 •

edited

Loading

Todor-ads Oct 28, 2021

tsanislavgatev Oct 28, 2021

tsanislavgatev commented Oct 28, 2021

ilhan007 left a comment

feat(ui5-switch): implement sap_horizon theme #4156

feat(ui5-switch): implement sap_horizon theme #4156

Conversation

Todor-ads commented Oct 22, 2021

tsanislavgatev Oct 25, 2021

Choose a reason for hiding this comment

tsanislavgatev commented Oct 25, 2021

tsanislavgatev commented Oct 25, 2021

tsanislavgatev commented Oct 27, 2021

ilhan007 Oct 28, 2021 • edited Loading

Choose a reason for hiding this comment

Todor-ads Oct 28, 2021

Choose a reason for hiding this comment

tsanislavgatev Oct 28, 2021

Choose a reason for hiding this comment

tsanislavgatev commented Oct 28, 2021

ilhan007 left a comment

Choose a reason for hiding this comment

ilhan007 Oct 28, 2021 •

edited

Loading