fix(ui5-select): enable setting css width height and border to host

#328
SAP · Apr 17, 2019 · 3a0f486 · 3a0f486
1 parent 0333f74
commit 3a0f486
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 21 deletions.
diff --git a/packages/base/src/WebComponent.js b/packages/base/src/WebComponent.js
@@ -1,4 +1,4 @@
-import { getWCNoConflict } from "./Configuration";
+import { getWCNoConflict, getCompactSize } from "./Configuration";
 import DOMObserver from "./compatibility/DOMObserver";
 import ShadowDOM from "./compatibility/ShadowDOM";
 import WebComponentMetadata from "./WebComponentMetadata";
@@ -78,6 +78,12 @@ class WebComponent extends HTMLElement {
 	}
 
 	async _initializeShadowRoot() {
+		const isCompact = getCompactSize();
+
+		if (isCompact) {
+			this.setAttribute("data-ui5-compact", "")
+		}
+
 		if (this.constructor.getMetadata().getNoShadowDOM()) {
 			return Promise.resolve();
 		}
@@ -213,6 +219,12 @@ class WebComponent extends HTMLElement {
 
 	_updateAttribute(name, newValue) {
 		if (!WebComponentMetadata.isPublicProperty(name)) {
+			const propData = this.constructor.getMetadata().getProperties()[name];
+
+			if (propData.writeInDom) {
+				this[newValue ? "setAttribute" : "removeAttribute"](`data-ui5-${name}`, "");
+			}
+
 			return;
 		}
 

diff --git a/packages/main/config/postcss.components/postcss.config.js b/packages/main/config/postcss.components/postcss.config.js
@@ -4,14 +4,17 @@ const postcssCSStoESM = require('../../lib/postcss-css-to-esm/index.js');
 const cssnano = require('cssnano');
 
 module.exports = {
-  plugins: [
-    postcssNesting(),
-    postcssAddFallback({importFrom: "./dist/css/themes-next/sap_fiori_3/parameters-bundle.css"}),
-	cssnano({preset: [
-		'default', {
-			mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-		},
-	]}, ),
-    postcssCSStoESM(),
-  ]
+	plugins: [
+		postcssNesting(),
+		postcssAddFallback({ importFrom: "./dist/css/themes-next/sap_fiori_3/parameters-bundle.css" }),
+		cssnano({
+			preset: [
+				'default', {
+					mergeRules: false, // https://github.com/cssnano/cssnano/issues/675
+					mergeLonghand: false,
+				},
+			]
+		}),
+		postcssCSStoESM(),
+	]
 };
diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js
@@ -85,6 +85,7 @@ const metadata = {
 		_opened: {
 			type: Boolean,
 			defaultValue: false,
+			writeInDom: true,
 		},
 
 		_focused: {

diff --git a/packages/main/src/themes-next/Select.css b/packages/main/src/themes-next/Select.css
@@ -1,23 +1,40 @@
 :host(ui5-select) {
 	display: inline-block;
 	width: 100%;
+
+	border: 1px solid var(--sapUiFieldBorderColor);
+	overflow: hidden;
+	box-sizing: border-box;
+	height: 2.25rem;
 }
 
 ui5-select {
 	display: inline-block;
 	width: 100%;
+
+	border: 1px solid var(--sapUiFieldBorderColor);
+	overflow: hidden;
+	box-sizing: border-box;
+	height: 2.25rem;
+}
+
+:host(ui5-select:not([disabled]):not([value-state]):not([data-ui5-_opened]):hover) {
+	border: 1px solid var(--sapUiFieldHoverBorderColor);
+}
+
+ui5-select:not([disabled]):not([value-state]):not([data-ui5-_opened]):hover {
+	border: 1px solid var(--sapUiFieldHoverBorderColor);
 }
 
 .sapWCSelect {
-	height: 2.25rem;
 	max-width: 100%;
 	min-width: 5rem;
+	height: 100%;
 	position: relative;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	background-color: var(--sapUiFieldBackground);
-	border: 1px solid var(--sapUiFieldBorderColor);
 	box-sizing: border-box;
 	padding-left: 0.5rem;
 	cursor: pointer;
@@ -27,7 +44,6 @@ ui5-select {
 /* Hovered */
 .sapWCSelect:hover:not(.sapWCSelectDisabled):not(.sapWCSelectState):not(.sapWCSelectOpened) {
 	background-color: var(--sapUiFieldHoverBackground);
-	border: 1px solid var(--sapUiFieldHoverBorderColor); 
 }
 
 /* Hovered Icon */
@@ -44,9 +60,17 @@ ui5-select {
 /* Disabled */
 .sapWCSelect.sapWCSelectDisabled {
 	background: var(--_ui5_select_disabled_background);
-	border-color: var(--_ui5_select_disabled_border_color);
 	cursor: default;
+}
+
+:host(ui5-select[disabled]) {
+	opacity: 0.5;
+	border-color: var(--_ui5_select_disabled_border_color);
+}
+
+ui5-select[disabled] {
 	opacity: 0.5;
+	border-color: var(--_ui5_select_disabled_border_color);
 }
 
 /* Focused */
@@ -88,32 +112,67 @@ ui5-select {
 }
 
  /* States */
-.sapWCSelectState {
+ :host(ui5-select[value-state]:not([value-state="None"])) {
 	border-style: solid;
 	border-width: 0.125rem;
 }
 
-.sapWCSelectError {
+ui5-select[value-state]:not([value-state="None"]) {
+	border-style: solid;
+	border-width: 0.125rem;
+}
+
+:host(ui5-select[value-state="Error"]:not([disabled])) {
 	border: var(--_ui5_select_state_error_warning_border_width) var(--_ui5_select_state_error_warning_border_style) var(--sapUiFieldInvalidColor);
+}
+
+ui5-select[value-state="Error"]:not([disabled]) {
+	border: var(--_ui5_select_state_error_warning_border_width) var(--_ui5_select_state_error_warning_border_style) var(--sapUiFieldInvalidColor);
+}
+
+:host(ui5-select[value-state="Warning"]:not([disabled])) {
+	border: var(--_ui5_select_state_error_warning_border_width) var(--_ui5_select_state_error_warning_border_style) var(--sapUiFieldWarningColor);
+}
+
+ui5-select[value-state="Warning"]:not([disabled]) {
+	border: var(--_ui5_select_state_error_warning_border_width) var(--_ui5_select_state_error_warning_border_style) var(--sapUiFieldWarningColor);
+}
+
+:host(ui5-select[value-state="Success"]:not([disabled])) {
+	border-color: var(--sapUiFieldSuccessColor);
+}
+
+ui5-select[value-state="Success"]:not([disabled]) {
+	border-color: var(--sapUiFieldSuccessColor);
+}
+
+.sapWCSelectError {
 	background-color: var(--sapUiFieldInvalidBackground);
 }
 
 .sapWCSelectWarning {
-	border: var(--_ui5_select_state_error_warning_border_width) var(--_ui5_select_state_error_warning_border_style) var(--sapUiFieldWarningColor);
 	background-color: var(--sapUiFieldWarningBackground);
 }
 
 .sapWCSelectSuccess {
 	background-color: var(--sapUiFieldSuccessBackground);
-	border-color: var(--sapUiFieldSuccessColor);
 }
 
 /* Compact */
-.sapUiSizeCompact .sapWCSelect {
+
+:host(ui5-select[data-ui5-compact]) {
 	height: 1.625rem;
 }
 
-.sapUiSizeCompact .sapWCSelect  .sapWCSelectDropDownIcon {
+ui5-select[data-ui5-compact] {
+	height: 1.625rem;
+}
+
+:host(ui5-select[data-ui5-compact]) .sapWCSelectDropDownIcon {
+	width: 2rem;
+}
+
+ui5-select[data-ui5-compact] .sapWCSelectDropDownIcon {
 	width: 2rem;
 }
 

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Select.html b/packages/main/test/sap/ui/webcomponents/main/pages/Select.html
@@ -4,6 +4,11 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
 	<title>ui5-select</title>
+
+	<script>
+		delete Document.prototype.adoptedStyleSheets
+	</script>
+
 	<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
 	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
 		type="module"
@@ -43,6 +48,14 @@ <h2> Input with suggestions</h2>
 
 	<h2> Change event counter holder</h2>
 	<ui5-input id="inputResult"></ui5-input>
+
+	<h2>Super Custom Select</h2>
+
+	<ui5-select style="height: 60px; width: 320px; border-radius: 10px; border: 3px dashed cyan; background-color: yellowgreen;">
+		<ui5-li type="Active" selected>Cozy</ui5-li>
+		<ui5-li type="Active" selected>Compact</ui5-li>
+		<ui5-li type="Active" selected>Condensed</ui5-li>
+	</ui5-select>
 </body>
 <script>
 	var countries =  [{ key: "Aus", text: "Australia" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }];