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

fix(ui5-switch): align 'off' text in RTL, add compact mode params #7603

Merged
merged 17 commits into from
Nov 21, 2023
Merged

fix(ui5-switch): align 'off' text in RTL, add compact mode params #7603

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
75673ef
fix(ui5-switch): align 'off' text in RTL, add compact mode params
hinzzx Sep 19, 2023
109e953
fix(ui5-switch): move rtl styles to rtl-parameters.css
hinzzx Oct 1, 2023
9a9ab82
fix(ui5-switch): remove redunant comments
hinzzx Oct 1, 2023
1bab970
fix(ui5-switch): remove redunant comments
hinzzx Oct 1, 2023
09d6562
fix(ui5-switch): remove unused vars
hinzzx Nov 10, 2023
85c4503
fix(ui5-switch): draft test commit for review
hinzzx Nov 13, 2023
ba24ad6
Revert "fix(ui5-switch): draft test commit for review"
hinzzx Nov 14, 2023
47d5443
Revert "fix(ui5-switch): remove unused vars"
hinzzx Nov 14, 2023
cc01145
Revert "fix(ui5-switch): remove redunant comments"
hinzzx Nov 14, 2023
bcba08a
revert(ui5-switch): revert previous commits
hinzzx Nov 14, 2023
92a7d6d
fix(ui5-switch): remove body tags
hinzzx Nov 14, 2023
e47e0f1
fix(ui5-switch): add missed paramteres for horizon themes
hinzzx Nov 14, 2023
62d3679
fix(ui5-switch): remove most of the rtl selectors
hinzzx Nov 15, 2023
10c3988
fix(ui5-switch): remove unused variables from params
hinzzx Nov 15, 2023
541d716
chore: cmt css-vars-usage
ilhan007 Nov 21, 2023
5dc9095
Merge branch 'main' into sw-test-st
ilhan007 Nov 21, 2023
f789eb5
Merge branch 'main' into switch-fix
ilhan007 Nov 21, 2023
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
42 changes: 17 additions & 25 deletions packages/main/src/themes/Switch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@
.ui5-switch-handle,
.ui5-switch-text {
left: var(--_ui5_switch_handle_left);
right: var(--_ui5_switch_handle_right);
top: 50%;
transform: translateY(-50%);
}
Expand Down Expand Up @@ -142,6 +143,7 @@
height: 0;
margin: 0;
visibility: hidden;
appearance: none;
-webkit-appearance: none;
}

Expand All @@ -161,6 +163,7 @@
.ui5-switch-root.ui5-switch--checked.ui5-switch--semantic .ui5-switch-text--on,
.ui5-switch-root.ui5-switch--checked.ui5-switch-desktop.ui5-switch--no-label .ui5-switch-text--on {
left: var(--_ui5_switch_text_active_left);
right: var(--_ui5_switch_text_active_right_alternate);
}
.ui5-switch-root:not(.ui5-switch--checked).ui5-switch--semantic .ui5-switch-text--off,
.ui5-switch-root:not(.ui5-switch--checked).ui5-switch-desktop.ui5-switch--no-label .ui5-switch-text--off {
Expand Down Expand Up @@ -257,6 +260,18 @@
transform: var(--_ui5_switch_transform);
}

.ui5-switch-root.ui5-switch-desktop.ui5-switch--no-label.ui5-switch--checked .ui5-switch-slider,
.ui5-switch-root.ui5-switch-desktop.ui5-switch--checked.ui5-switch--semantic .ui5-switch-slider {
right: var(--test_var); /* 0.225rem horizon rtl compact scenario,
0.375 for the base one ( 0.325rem for base for rtl compact -> .ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider )
} */
}


.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider {
right: var(--test_var1);
}

/* switch semantic icon and type noLabel icon in horizon theme */
.ui5-switch-text .ui5-switch-text--on .ui5-switch-no-label-icon,
.ui5-switch-root.ui5-switch--semantic .ui5-switch-text,
Expand Down Expand Up @@ -338,6 +353,7 @@
overflow: var(--_ui5_switch_text_overflow);
text-overflow: ellipsis;
left: var(--_ui5_switch_text_active_left_alternate);
right: var(--_ui5_switch_text_active_right);
}
.ui5-switch-root .ui5-switch-text--off {
color: var(--_ui5_switch_text_inactive_color);
Expand All @@ -355,28 +371,4 @@
.ui5-switch-root .ui5-switch-no-label-icon-off,
.ui5-switch-root .ui5-switch-icon-off {
color: var(--_ui5_switch_text_inactive_color);
}

/* RTL */
[dir="rtl"].ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider {
transform: var(--_ui5_switch_rtl_transform_with_label);
}

[dir="rtl"].ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
hinzzx marked this conversation as resolved.
Show resolved Hide resolved
transform: var(--_ui5_switch_rtl_transform);
}

[dir="rtl"].ui5-switch-root .ui5-switch-handle {
left: auto;
right: var(--_ui5_switch_handle_left);
}

[dir="rtl"].ui5-switch-root .ui5-switch-text--on {
right: var(--_ui5_switch_text_active_left);
left: var(--_ui5_switch_text_active_right);
}

[dir="rtl"].ui5-switch-root .ui5-switch-text--off {
right: var(--_ui5_switch_text_inactive_left);
left: var(--_ui5_switch_text_inactive_right);
}
}
10 changes: 4 additions & 6 deletions packages/main/src/themes/base/Switch-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,6 @@
--_ui5_switch_transform: translateX(100%) translateX(-1.875rem);
--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);

--_ui5_switch_rtl_transform: translateX(-100%) translateX(1.875rem);
--_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem);

/* switch track */
--_ui5_switch_track_with_label_width: 100%;
--_ui5_switch_track_with_label_height: 1.375rem;
Expand Down Expand Up @@ -117,7 +114,7 @@

--_ui5_switch_text_inactive_left: auto;
--_ui5_switch_text_inactive_left_alternate: auto;
--_ui5_switch_text_inactive_right: 0.125rem;
--_ui5_switch_text_inactive_right: 0.1875rem;
--_ui5_switch_text_inactive_right_alternate: 0.125rem;
--_ui5_switch_text_active_left: calc(-100% + 2rem);
--_ui5_switch_text_active_left_alternate: calc(-100% + 2rem);
Expand All @@ -136,6 +133,9 @@

--_ui5_switch_icon_width: 0.75rem;
--_ui5_switch_icon_height: 0.75rem;

--_ui5_switch_handle_right: auto;
--_ui5_switch_text_active_right_alternate: auto;
}

[data-ui5-compact-size],
Expand All @@ -148,8 +148,6 @@
--_ui5_switch_root_outline_bottom: 0;
--_ui5_switch_transform: translateX(100%) translateX(-1.5rem);
--_ui5_switch_transform_with_label: translateX(100%) translateX( -1.5rem);
--_ui5_switch_rtl_transform: translateX(1.5rem) translateX(-100%);
--_ui5_switch_rtl_transform_with_label: translateX(1.5rem) translateX(-100%);
--_ui5_switch_track_with_label_width: 100%;
--_ui5_switch_track_with_label_height: 1.375rem;
--_ui5_switch_track_width: 100%;
Expand Down
24 changes: 24 additions & 0 deletions packages/main/src/themes/base/rtl-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
:root, [dir="ltr"] {
--test_var: 0;
--test_var1: 0;

--_ui5_rotation_90deg: rotate(90deg);
--_ui5_rotation_minus_90deg: rotate(-90deg);

Expand Down Expand Up @@ -58,4 +61,25 @@
--_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
--_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
--_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);

--_ui5_switch_handle_right: -0.0625rem;
--_ui5_switch_transform_with_label: translateX(-100%) translateX(1.875rem);
--_ui5_switch_transform: translateX(-100%) translateX(1.875rem);
--_ui5_switch_text_active_right: calc(-100% + 2rem);
--_ui5_switch_text_active_left_alternate: auto;
--_ui5_switch_text_inactive_left_alternate: 0.125rem;
--_ui5_switch_text_inactive_right_alternate: auto;
--_ui5_switch_text_inactive_left: 0.125rem;
--_ui5_switch_text_inactive_right: auto;
--_ui5_switch_text_active_left: auto;
--_ui5_switch_text_active_right_alternate: calc(-100% + 2rem);
}

[dir="rtl"][data-ui5-compact-size],
[dir="rtl"] .ui5-content-density-compact,
[dir="rtl"] .sapUiSizeCompact {
--test_var: 0.375rem;
--test_var1: 0.345rem;

--_ui5_switch_text_active_right_alternate: calc(-100% + 1.575rem);
}
3 changes: 3 additions & 0 deletions packages/main/src/themes/base/sizes-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,9 @@
[data-ui5-compact-size],
.ui5-content-density-compact,
.sapUiSizeCompact {

--_ui5_switch_text_active_left_alternate: calc(-100% + 1.575rem);

--_ui5_button_base_height: var(--sapElement_Compact_Height);
--_ui5_button_base_padding: 0.4375rem;
--_ui5_button_base_min_width: 2rem;
Expand Down
5 changes: 0 additions & 5 deletions packages/main/src/themes/sap_horizon/Switch-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,6 @@
--_ui5_switch_transform: translateX(100%) translateX(-1.625rem);
--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);

--_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem);
--_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem);

/* track */
--_ui5_switch_track_width: 2.5rem;
--_ui5_switch_track_height: 1.5rem;
Expand Down Expand Up @@ -137,8 +134,6 @@
--_ui5_switch_root_outline_bottom: 0.25rem;
--_ui5_switch_transform: translateX(100%) translateX(-1.375rem);
--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);
--_ui5_switch_rtl_transform: translateX(1.375rem) translateX(-100%);
--_ui5_switch_rtl_transform_with_label: translateX(1.875rem) translateX(-100%);
--_ui5_switch_track_width: 2rem;
--_ui5_switch_track_height: 1.25rem;
--_ui5_switch_track_with_label_width: 2.75rem;
Expand Down
27 changes: 27 additions & 0 deletions packages/main/src/themes/sap_horizon/rtl-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,33 @@
@import "../base/rtl-parameters.css";

:root {
--test_var: 0;
}

[dir="rtl"] {
--_ui5_segmented_btn_item_border_left: 0.0625rem;
--_ui5_segmented_btn_item_border_right: 0.0625rem;

--_ui5_switch_handle_left: -0.0625rem;
--_ui5_switch_handle_right: 0.0625rem;

--_ui5_switch_text_inactive_left: auto;
--_ui5_switch_text_inactive_right: 0.1875rem;
--_ui5_switch_text_inactive_left_alternate: auto;
--_ui5_switch_text_inactive_right_alternate: 0;

--_ui5_switch_text_active_left_alternate: 0.0625rem;
--_ui5_switch_text_active_right: 0.0625rem;
--_ui5_switch_text_active_right_alternate: 0.1875rem;

--_ui5_switch_transform: translateX(-100%) translateX(1.625rem);
}

[dir="rtl"][data-ui5-compact-size],
[dir="rtl"] .ui5-content-density-compact,
[dir="rtl"] .sapUiSizeCompact {
--test_var: 0.225rem;
--test_var1: 0;

--_ui5_switch_text_active_right_alternate: calc(-100% + 2.075rem);
}
3 changes: 3 additions & 0 deletions packages/main/src/themes/sap_horizon/sizes-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@
[data-ui5-compact-size],
.ui5-content-density-compact,
.sapUiSizeCompact {

--_ui5_switch_text_active_left_alternate: calc(-100% + 2.675rem);

--_ui5_textarea_padding_top: 0.1875rem;
--_ui5_textarea_padding_bottom: 0.125rem;
--_ui5_checkbox_focus_position: 0.25rem;
Expand Down
4 changes: 0 additions & 4 deletions packages/main/src/themes/sap_horizon_dark/Switch-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,6 @@
--_ui5_switch_transform: translateX(100%) translateX(-1.625rem);
--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);

--_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem);
--_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem);

/* track */
--_ui5_switch_track_width: 2.5rem;
Expand Down Expand Up @@ -135,8 +133,6 @@
--_ui5_switch_root_outline_bottom: 0.25rem;
--_ui5_switch_transform: translateX(100%) translateX(-1.375rem);
--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);
--_ui5_switch_rtl_transform: translateX(1.375rem) translateX(-100%);
--_ui5_switch_rtl_transform_with_label: translateX(1.875rem) translateX(-100%);
--_ui5_switch_track_width: 2rem;
--_ui5_switch_track_height: 1.25rem;
--_ui5_switch_track_with_label_width: 2.75rem;
Expand Down
23 changes: 23 additions & 0 deletions packages/main/src/themes/sap_horizon_dark/rtl-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,27 @@
[dir="rtl"] {
--_ui5_segmented_btn_item_border_left: 0.0625rem;
--_ui5_segmented_btn_item_border_right: 0.0625rem;

--_ui5_switch_handle_left: -0.0625rem;
--_ui5_switch_handle_right: 0.0625rem;

--_ui5_switch_text_inactive_left: auto;
--_ui5_switch_text_inactive_right: 0.1875rem;
--_ui5_switch_text_inactive_left_alternate: auto;
--_ui5_switch_text_inactive_right_alternate: 0;

--_ui5_switch_text_active_left_alternate: 0.0625rem;
--_ui5_switch_text_active_right: 0.0625rem;
--_ui5_switch_text_active_right_alternate: 0.1875rem;

--_ui5_switch_transform: translateX(-100%) translateX(1.625rem);
}

[dir="rtl"][data-ui5-compact-size],
[dir="rtl"] .ui5-content-density-compact,
[dir="rtl"] .sapUiSizeCompact {
--test_var: 0.225rem;
--test_var1: 0;

--_ui5_switch_text_active_right_alternate: calc(-100% + 2.075rem);
}
5 changes: 0 additions & 5 deletions packages/main/src/themes/sap_horizon_dark_exp/Switch-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,6 @@
--_ui5_switch_transform: translateX(100%) translateX(-1.625rem);
--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);

--_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem);
--_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem);

/* track */
--_ui5_switch_track_width: 2.5rem;
--_ui5_switch_track_height: 1.5rem;
Expand Down Expand Up @@ -132,8 +129,6 @@
--_ui5_switch_root_outline_bottom: 0.25rem;
--_ui5_switch_transform: translateX(100%) translateX(-1.375rem);
--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);
--_ui5_switch_rtl_transform: translateX(1.375rem) translateX(-100%);
--_ui5_switch_rtl_transform_with_label: translateX(1.875rem) translateX(-100%);
--_ui5_switch_track_width: 2rem;
--_ui5_switch_track_height: 1.25rem;
--_ui5_switch_track_with_label_width: 2.75rem;
Expand Down
14 changes: 14 additions & 0 deletions packages/main/src/themes/sap_horizon_dark_exp/rtl-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,18 @@
[dir="rtl"] {
--_ui5_segmented_btn_item_border_left: 0.0625rem;
--_ui5_segmented_btn_item_border_right: 0.0625rem;

--_ui5_switch_handle_left: -0.0625rem;
--_ui5_switch_handle_right: 0.0625rem;

--_ui5_switch_text_inactive_left: auto;
--_ui5_switch_text_inactive_right: 0.1875rem;
--_ui5_switch_text_inactive_left_alternate: auto;
--_ui5_switch_text_inactive_right_alternate: 0;

--_ui5_switch_text_active_left_alternate: 0.0625rem;
--_ui5_switch_text_active_right: 0.0625rem;
--_ui5_switch_text_active_right_alternate: 0.1875rem;

--_ui5_switch_transform: translateX(-100%) translateX(1.625rem);
}
5 changes: 0 additions & 5 deletions packages/main/src/themes/sap_horizon_exp/Switch-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,6 @@
--_ui5_switch_transform: translateX(100%) translateX(-1.625rem);
--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);

--_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem);
--_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem);

/* track */
--_ui5_switch_track_width: 2.5rem;
--_ui5_switch_track_height: 1.5rem;
Expand Down Expand Up @@ -134,8 +131,6 @@
--_ui5_switch_root_outline_bottom: 0.25rem;
--_ui5_switch_transform: translateX(100%) translateX(-1.375rem);
--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);
--_ui5_switch_rtl_transform: translateX(1.375rem) translateX(-100%);
--_ui5_switch_rtl_transform_with_label: translateX(1.875rem) translateX(-100%);
--_ui5_switch_track_width: 2rem;
--_ui5_switch_track_height: 1.25rem;
--_ui5_switch_track_with_label_width: 2.75rem;
Expand Down
14 changes: 14 additions & 0 deletions packages/main/src/themes/sap_horizon_exp/rtl-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,18 @@
[dir="rtl"] {
--_ui5_segmented_btn_item_border_left: 0.0625rem;
--_ui5_segmented_btn_item_border_right: 0.0625rem;

--_ui5_switch_handle_left: -0.0625rem;
--_ui5_switch_handle_right: 0.0625rem;

--_ui5_switch_text_inactive_left: auto;
--_ui5_switch_text_inactive_right: 0.1875rem;
--_ui5_switch_text_inactive_left_alternate: auto;
--_ui5_switch_text_inactive_right_alternate: 0;

--_ui5_switch_text_active_left_alternate: 0.0625rem;
--_ui5_switch_text_active_right: 0.0625rem;
--_ui5_switch_text_active_right_alternate: 0.1875rem;

--_ui5_switch_transform: translateX(-100%) translateX(1.625rem);
}
29 changes: 24 additions & 5 deletions packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,6 @@
--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);
--_ui5_switch_compact_transform_with_label: translateX(100%) translateX(-1.875rem);

--_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem);
--_ui5_switch_compact_rtl_transform: translateX(1.375rem) translateX(-100%);
--_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem);
--_ui5_switch_compact_rtl_transform_with_label: translateX(1.875rem) translateX(-100%);

/* track */
--_ui5_switch_track_width: 2.5rem;
--_ui5_switch_track_compact_width: 2rem;
Expand Down Expand Up @@ -143,4 +138,28 @@

--_ui5_switch_icon_width: 1rem;
--_ui5_switch_icon_height: 1rem;
}

[data-ui5-compact-size],
.ui5-content-density-compact,
.sapUiSizeCompact {
--_ui5_switch_width: 3rem;
--_ui5_switch_min_width: none;
--_ui5_switch_with_label_width: 3.75rem;
--_ui5_switch_root_outline_top: 0.25rem;
--_ui5_switch_root_outline_bottom: 0.25rem;
--_ui5_switch_transform: translateX(100%) translateX(-1.375rem);
--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);
--_ui5_switch_track_width: 2rem;
--_ui5_switch_track_height: 1.25rem;
--_ui5_switch_track_with_label_width: 2.75rem;
--_ui5_switch_track_with_label_height: 1.25rem;
--_ui5_switch_handle_width: 1.25rem;
--_ui5_switch_handle_height: 1rem;
--_ui5_switch_handle_with_label_width: 1.75rem;
--_ui5_switch_handle_with_label_height: 1rem;
--_ui5_switch_text_font_size: var(--sapFontSize);
--_ui5_switch_text_width: 1rem;
--_ui5_switch_text_active_left: 0.1875rem;
--_ui5_switch_text_active_left_alternate: 0.0625rem;
}
Loading
Loading