refactor(ui5-tab): rename iconColor to semanticColor (#518)

SAP · Jun 6, 2019 · 5709e31 · 5709e31
1 parent 08e0569
commit 5709e31
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 27 deletions.
diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js
@@ -1,6 +1,6 @@
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import TabBase from "./TabBase.js";
-import IconColor from "./types/IconColor.js";
+import SemanticColor from "./types/SemanticColor.js";
 import Icon from "./Icon.js";
 import TabRenderer from "./build/compiled/TabRenderer.lit.js";
 
@@ -31,7 +31,7 @@ const metadata = {
 		/**
 		 * The text to be displayed for the item.
 		 * @type {string}
-		 * @defaultvalue: ""
+		 * @defaultvalue ""
 		 * @public
 		 */
 		text: {
@@ -51,37 +51,45 @@ const metadata = {
 		/**
 		 * Represents the "additionalText" text, which is displayed in the tab filter.
 		 * @type {string}
-		 * @defaultvalue: ""
+		 * @defaultvalue ""
 		 * @public
 		 */
 		additionalText: {
 			type: String,
 		},
 
 		/**
-		 * Specifies the icon to be displayed for the tab filter.
+		 * Defines the icon source URI to be displayed as graphical element within the <code>ui5-tab</code>.
+		 * The SAP-icons font provides numerous built-in icons.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 *
 		 * @type {string}
+		 * @defaultvalue ""
 		 * @public
 		 */
 		icon: {
 			type: String,
 		},
 
 		/**
-		 * Specifies the icon color.
-		 *
-		 * If an icon font is used, the color can be chosen from the icon colors
-		 * (sap.ui.core.IconColor).
-		 * Possible semantic colors are: Neutral, Positive, Critical, Negative.
-		 * Instead of the semantic icon color the brand color can be used, this is named Default.
-		 * Semantic colors and brand colors should not be mixed up inside one IconTabBar.
-		 * @type {IconColor}
+		 * Defines the <code>ui5-tab</code> semantic color.
+		 * The color is applied to:
+		 * <ul>
+		 * <li>the <code>ui5-tab</code> icon</li>
+		 * <li>the <code>text</code> when <code>ui5-tab</code> overflows</li>
+		 * <li>the tab selection line</li>
+		 * </ul>
+		 * <br>
+		 * Available semantic colors are: <code>"Default"</code>, <code>"Neutral", <code>"Positive"</code>, <code>"Critical"</code> and <code>"Negative"</code>.
+		 * <br><br>
+		 * <b>Note:</b> The color value depends on the current theme.
+		 * @type {string}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
-		iconColor: {
-			type: IconColor,
-			defaultValue: IconColor.Default,
+		semanticColor: {
+			type: SemanticColor,
+			defaultValue: SemanticColor.Default,
 		},
 
 		/**

diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js
@@ -11,7 +11,7 @@ import Icon from "./Icon.js";
 import List from "./List.js";
 import Popover from "./Popover.js";
 import TabBase from "./TabBase.js";
-import IconColor from "./types/IconColor.js";
+import SemanticColor from "./types/SemanticColor.js";
 
 // Styles
 import tabContainerCss from "./themes/TabContainer.css.js";
@@ -504,8 +504,8 @@ const calculateHeaderItemClasses = (item, mixedMode) => {
 		classes.push("ui5-tc__headerItem--mixedMode");
 	}
 
-	if (item.iconColor !== IconColor.Default) {
-		classes.push(`ui5-tc__headerItem--${item.iconColor.toLowerCase()}`);
+	if (item.semanticColor !== SemanticColor.Default) {
+		classes.push(`ui5-tc__headerItem--${item.semanticColor.toLowerCase()}`);
 	}
 
 	return classes.join(" ");
@@ -526,8 +526,8 @@ const calculateHeaderItemIconClasses = item => {
 const calculateHeaderItemSemanticIconClasses = item => {
 	const classes = ["ui5-tc-headerItemSemanticIcon"];
 
-	if (item.iconColor !== IconColor.Default) {
-		classes.push(`ui5-tc-headerItemSemanticIcon--${item.iconColor.toLowerCase()}`);
+	if (item.semanticColor !== SemanticColor.Default) {
+		classes.push(`ui5-tc-headerItemSemanticIcon--${item.semanticColor.toLowerCase()}`);
 	}
 
 	return classes.join(" ");
@@ -548,8 +548,8 @@ const calculateHeaderItemAdditionalTextClasses = item => {
 const calculateOverflowItemClasses = item => {
 	const classes = ["ui5-tc__overflowItem"];
 
-	if (item.iconColor !== IconColor.Default) {
-		classes.push(`ui5-tc__overflowItem--${item.iconColor.toLowerCase()}`);
+	if (item.semanticColor !== SemanticColor.Default) {
+		classes.push(`ui5-tc__overflowItem--${item.semanticColor.toLowerCase()}`);
 	}
 
 	if (item.disabled) {

diff --git a/packages/main/src/types/IconColor.js → packages/main/src/types/SemanticColor.js b/packages/main/src/types/IconColor.js → packages/main/src/types/SemanticColor.js
@@ -1,6 +1,6 @@
 import DataType from "@ui5/webcomponents-base/src/types/DataType.js";
 
-const IconColors = {
+const SemanticColors = {
 	/**
 	 * Default color (brand color)
 	 * @public
@@ -33,12 +33,12 @@ const IconColors = {
 };
 
 
-class IconColor extends DataType {
+class SemanticColor extends DataType {
 	static isValid(value) {
-		return !!IconColors[value];
+		return !!SemanticColors[value];
 	}
 }
 
-IconColor.generataTypeAcessors(IconColors);
+SemanticColor.generataTypeAcessors(SemanticColors);
 
-export default IconColor;
+export default SemanticColor;