feat(ui5-rating-indicator): implement small icons for readonly and di…

…sabled (#5233) * fix(ui5-rating-indicator): implement small icons when readonly or disabled * fix(ui5-rating-indicator): implement small icons when readonly or disabled * fix selector * fix(ui5-rating-indicator): apply correct spacings * fix(ui5-rating-indicator): revert sample changes in order to test * fix(ui5-rating-indicator): apply outline offset * fix(ui5-rating-indicator): replace px with rems
SAP · May 25, 2022 · 405a598 · 405a598
1 parent 24401b2
commit 405a598
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 10 deletions.
diff --git a/packages/main/src/RatingIndicator.hbs b/packages/main/src/RatingIndicator.hbs
@@ -32,7 +32,11 @@
 					</div>
 				</li>
 			{{else if ../readonly}}
-				<li class="ui5-rating-indicator-item ui5-rating-indicator-readonly-item-unsel">
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
+			{{else if ../disabled}}
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
 					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
 				</li>
 			{{else}}

diff --git a/packages/main/src/themes/RatingIndicator.css b/packages/main/src/themes/RatingIndicator.css
@@ -15,8 +15,11 @@
 	cursor: initial;
 }
 
-:host([readonly]) .ui5-rating-indicator-readonly-item-unsel {
-	color: var(--sapContent_UnratedColor);
+:host([disabled]) .ui5-rating-indicator-item-unsel,
+:host([readonly]) .ui5-rating-indicator-item-unsel {
+	padding-inline: var(--_ui5_rating_indicator_readonly_item_spacing);
+	width: var(--_ui5_rating_indicator_readonly_item_width);
+	height: var(--_ui5_rating_indicator_readonly_item_height);
 }
 
 :host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover {
@@ -25,6 +28,7 @@
 
 :host([_focused]) {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: var(--_ui5_rating_indicator_outline_offset);
 	border-radius: var(--_ui5_rating_indicator_border_radius);
 }
 
@@ -41,6 +45,7 @@
 .ui5-rating-indicator-list {
 	list-style-type: none;
 	display: flex;
+	align-items: center;
 	margin: 0;
 	padding: 0;
 }
@@ -49,8 +54,6 @@
 	position: relative;
 	width: var(--_ui5_rating_indicator_item_width);
 	height: var(--_ui5_rating_indicator_item_height);
-	min-width: var(--_ui5_rating_indicator_item_width);
-    min-height: var(--_ui5_rating_indicator_item_height);
 }
 
 .ui5-rating-indicator-item:not(:last-child) {

diff --git a/packages/main/src/themes/base/RatingIndicator-parameters.css b/packages/main/src/themes/base/RatingIndicator-parameters.css
@@ -1,7 +1,11 @@
 :root {
 	--_ui5_rating_indicator_border_radius: 0px;
+	--_ui5_rating_indicator_outline_offset: 0px;
 	--_ui5_rating_indicator_item_height: 1em;
 	--_ui5_rating_indicator_item_width: 1em;
+	--_ui5_rating_indicator_readonly_item_height: 1em;
+	--_ui5_rating_indicator_readonly_item_width: 1em;
+	--_ui5_rating_indicator_readonly_item_spacing: 0px;
 	--_ui5_rating_indicator_component_spacing: 0.5rem 0px;
 }
 
@@ -10,5 +14,7 @@
 .sapUiSizeCompact {
 	--_ui5_rating_indicator_item_height: 0.67em;
 	--_ui5_rating_indicator_item_width: 0.67em;
+	--_ui5_rating_indicator_readonly_item_height: 0.67em;
+	--_ui5_rating_indicator_readonly_item_width: 0.67em;
 	--_ui5_rating_indicator_component_spacing: 0.8125rem 0px;
 }
diff --git a/packages/main/src/themes/sap_horizon/RatingIndicator-parameters.css b/packages/main/src/themes/sap_horizon/RatingIndicator-parameters.css
@@ -1,3 +1,17 @@
+@import "../base/RatingIndicator-parameters.css";
+
 :root {
 	--_ui5_rating_indicator_border_radius: 0.25rem;
+	--_ui5_rating_indicator_outline_offset: 0.125rem;
+	--_ui5_rating_indicator_readonly_item_height: 0.75em;
+	--_ui5_rating_indicator_readonly_item_width: 0.75em;
+	--_ui5_rating_indicator_readonly_item_spacing: 0.1875rem 0.1875rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_rating_indicator_readonly_item_height: 0.5em;
+	--_ui5_rating_indicator_readonly_item_width: 0.5em;
+	--_ui5_rating_indicator_readonly_item_spacing: 0.125rem 0.125rem;
 }
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -32,7 +32,6 @@
 @import "../base/PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
-@import "../base/RatingIndicator-parameters.css";
 @import "./RatingIndicator-parameters.css";
 @import "./SegmentedButtton-parameters.css";
 @import "./RadioButton-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_dark/RatingIndicator-parameters.css b/packages/main/src/themes/sap_horizon_dark/RatingIndicator-parameters.css
@@ -1,3 +1,17 @@
+@import "../base/RatingIndicator-parameters.css";
+
 :root {
 	--_ui5_rating_indicator_border_radius: 0.25rem;
+	--_ui5_rating_indicator_outline_offset: 0.125rem;
+	--_ui5_rating_indicator_readonly_item_height: 0.75em;
+	--_ui5_rating_indicator_readonly_item_width: 0.75em;
+	--_ui5_rating_indicator_readonly_item_spacing: 0.1875rem 0.1875rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_rating_indicator_readonly_item_height: 0.5em;
+	--_ui5_rating_indicator_readonly_item_width: 0.5em;
+	--_ui5_rating_indicator_readonly_item_spacing: 0.125rem 0.125rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -33,7 +33,6 @@
 @import "../sap_horizon/ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
 @import "./RatingIndicator-parameters.css";
-@import "../base/RatingIndicator-parameters.css";
 @import "./SegmentedButtton-parameters.css";
 @import "./RadioButton-parameters.css";
 @import "./Switch-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_exp/RatingIndicator-parameters.css b/packages/main/src/themes/sap_horizon_exp/RatingIndicator-parameters.css
@@ -0,0 +1,16 @@
+@import "../base/RatingIndicator-parameters.css";
+
+:root {
+	--_ui5_rating_indicator_border_radius: 0.25rem;
+	--_ui5_rating_indicator_readonly_item_height: 0.75em;
+	--_ui5_rating_indicator_readonly_item_width: 0.75em;
+	--_ui5_rating_indicator_readonly_item_spacing: 0.25em;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_rating_indicator_readonly_item_height: 0.5em;
+	--_ui5_rating_indicator_readonly_item_width: 0.5em;
+	--_ui5_rating_indicator_readonly_item_spacing: 0.125em;
+}
diff --git a/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css
@@ -26,7 +26,7 @@
 @import "./Popover-parameters.css";
 @import "../base/ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
-@import "../base/RatingIndicator-parameters.css";
+@import "./RatingIndicator-parameters.css";
 @import "./Select-parameters.css";
 @import "./Switch-parameters.css";
 @import "./TabContainer-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcb/RatingIndicator-parameters.css b/packages/main/src/themes/sap_horizon_hcb/RatingIndicator-parameters.css
@@ -0,0 +1,16 @@
+@import "../base/RatingIndicator-parameters.css";
+
+:root {
+	--_ui5_rating_indicator_border_radius: 0.25rem;
+	--_ui5_rating_indicator_readonly_item_height: 0.75em;
+	--_ui5_rating_indicator_readonly_item_width: 0.75em;
+	--_ui5_rating_indicator_readonly_item_spacing: 0.1875rem 0.1875rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_rating_indicator_readonly_item_height: 0.5em;
+	--_ui5_rating_indicator_readonly_item_width: 0.5em;
+	--_ui5_rating_indicator_readonly_item_spacing: 0.125rem 0.125rem;
+}
diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -30,7 +30,7 @@
 @import "../base/PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters";
 @import "./RadioButton-parameters.css";
-@import "../base/RatingIndicator-parameters.css";
+@import "./RatingIndicator-parameters.css";
 @import "./SegmentedButtton-parameters.css";
 @import "./Select-parameters.css";
 @import "./SplitButton-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcw/RatingIndicator-parameters.css b/packages/main/src/themes/sap_horizon_hcw/RatingIndicator-parameters.css
@@ -0,0 +1,16 @@
+@import "../base/RatingIndicator-parameters.css";
+
+:root {
+	--_ui5_rating_indicator_border_radius: 0.25rem;
+	--_ui5_rating_indicator_readonly_item_height: 0.75em;
+	--_ui5_rating_indicator_readonly_item_width: 0.75em;
+	--_ui5_rating_indicator_readonly_item_spacing: 0.1875rem 0.1875rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_rating_indicator_readonly_item_height: 0.5em;
+	--_ui5_rating_indicator_readonly_item_width: 0.5em;
+	--_ui5_rating_indicator_readonly_item_spacing: 0.125rem 0.125rem;
+}
diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -30,7 +30,7 @@
 @import "../base/PopupsCommon-parameters.css";
 @import "../sap_horizon_hcb/ProgressIndicator-parameters";
 @import "./RadioButton-parameters.css";
-@import "../base/RatingIndicator-parameters.css";
+@import "./RatingIndicator-parameters.css";
 @import "./SegmentedButtton-parameters.css";
 @import "./Select-parameters.css";
 @import "./SplitButton-parameters.css";