feat(select): add appearance-ghost option (#1158)

* [appearance] - poc * keep layout as is * [appearance] - poc * fix story * update from master Co-authored-by: yinon <yinon@hotmail.com>
Vonage · Dec 28, 2021 · b3ddaaf · b3ddaaf
1 parent a70020f
commit b3ddaaf
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 26 deletions.
diff --git a/components/select/readme.md b/components/select/readme.md
@@ -40,21 +40,22 @@ the text/content within the items is for **labeling** purposes only, should be c
 
 #### Properties
 
-| Property                  | Modifiers | Type                                             | Description                                      |
-|---------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
-| `disabled`                |           | `boolean`                                        |                                                  |
-| `helper`                  |           | `string`                                         |                                                  |
-| `icon`                    |           | `string`                                         |                                                  |
-| `index`                   | readonly  | `number`                                         |                                                  |
-| `items`                   | readonly  | `ListItemBase[]`                                 |                                                  |
-| `label`                   |           | `string`                                         |                                                  |
-| `naturalMenuWidth`        |           | `boolean`                                        |                                                  |
-| `outlined`                |           | `boolean`                                        |                                                  |
-| `required`                |           | `boolean`                                        |                                                  |
-| `selected`                | readonly  | `ListItemBase \| null`                           |                                                  |
-| `validateOnInitialRender` |           | `boolean`                                        |                                                  |
-| `validationMessage`       |           | `string`                                         |                                                  |
-| `value`                   |           | `string`                                         |                                                  |
+| Property                  | Modifiers | Type             | Description     |
+|---------------------------|-----------|------------------|-----------------|
+| `disabled`                |           | `boolean`        |                 |
+| `helper`                  |           | `string`         |                 |
+| `icon`                    |           | `string`         |                 |
+| `index`                   | readonly  | `number`         |                 |
+| `items`                   | readonly  | `ListItemBase[]` |                 |
+| `label`                   |           | `string`         |                 |
+| `naturalMenuWidth`        |           | `boolean`        |                 |
+| `outlined`                |           | `boolean`        |                 |
+| `required`                |           | `boolean`        |                 |
+| `selected`                | readonly  | `ListItemBase \  | null`           |                                                  |
+| `validateOnInitialRender` |           | `boolean`        |                 |
+| `validationMessage`       |           | `string`         |                 |
+| `value`                   |           | `string`         |                 |
+| `appearance`              |           | `ghost`          | no input border |
 
 #### Methods
 

diff --git a/components/select/src/vwc-select.scss b/components/select/src/vwc-select.scss
@@ -188,6 +188,7 @@ vwc-notched-outline {
 	--mdc-notched-outline-border-color: var(
 		--mdc-select-outlined-idle-border-color
 	);
+
 }
 
 :host(:not([disabled])) .mdc-select.mdc-select--focused vwc-notched-outline,
@@ -206,7 +207,7 @@ vwc-notched-outline {
 	)
 );
 
-:host([ghost][dense]) {
+:host([appearance='ghost'i][dense]) {
 	.mdc-select .mdc-floating-label {
 		left: 0;
 	}

diff --git a/components/select/src/vwc-select.ts b/components/select/src/vwc-select.ts
@@ -14,7 +14,7 @@ import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupl
 import { style as vwcSelectStyle } from './vwc-select.css.js';
 import { styles as mwcSelectStyles } from '@material/mwc-select/mwc-select.css.js';
 import { associateWithForm } from '@vonage/vvd-foundation/form-association.js';
-import type { Shape } from '@vonage/vvd-foundation/constants.js';
+import type { Shape, Layout } from '@vonage/vvd-foundation/constants.js';
 import { handleAutofocus } from '@vonage/vvd-foundation/general-utils.js';
 
 declare global {
@@ -30,6 +30,7 @@ const DROPDOWN_ICON_CLASS = 'vvd-select-dropdown-icon';
 MWCSelect.styles = [styleCoupling, mwcSelectStyles, vwcSelectStyle];
 
 type SelectShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+type SelectLayout = Extract<Layout, Layout.Ghost | Layout.Outlined>;
 
 /**
  * This component is an extension of [<mwc-select>](https://github.com/material-components/material-components-web-components/tree/master/packages/select)
@@ -48,8 +49,9 @@ export class VWCSelect extends MWCSelect {
 	@property({ type: String, reflect: true })
 		name: string | undefined;
 
-	@property({ type: Boolean, reflect: true, attribute: 'ghost' })
-		ghost = false;
+	@property({ type: String, reflect: true })
+		appearance?: SelectLayout;
+
 
 	override connectedCallback(): void {
 		super.connectedCallback();
@@ -67,7 +69,7 @@ export class VWCSelect extends MWCSelect {
 
 	protected override update(changedProperties: PropertyValues): void {
 		super.update(changedProperties);
-		if (this.shape === 'pill' || this.ghost) {
+		if (this.shape === 'pill' || this.appearance === 'ghost') {
 			this.dense = true;
 		}
 	}

diff --git a/components/select/stories/select.stories.js b/components/select/stories/select.stories.js
@@ -36,8 +36,17 @@ DenseNoLabel.args = { dense: '' };
 export const PillAutoDense = Template.bind({});
 PillAutoDense.args = { shape: 'pill', label: 'VWC Select' };
 
-export const GhostLayoutAutoDense = Template.bind({});
-GhostLayoutAutoDense.args = { ghost: '', label: 'VWC Select' };
+const TemplateGhost = args => html`
+	<vwc-select ...=${spread(args)} @selected=${onSelected}>
+	<vwc-list-item>Select one</vwc-list-item>
+	<vwc-list-item value="0">Item 0</vwc-list-item>
+	<vwc-list-item value="1">Item 1</vwc-list-item>
+	<vwc-list-item value="2">Item 2</vwc-list-item>
+	<vwc-list-item value="3">Item 3</vwc-list-item>
+</vwc-select`;
+
+export const GhostLayoutAutoDense = TemplateGhost.bind({});
+GhostLayoutAutoDense.args = { appearance: 'ghost', label: 'VWC Select' };
 
 export const Disabled = Template.bind({});
 Disabled.args = { disabled: '', label: 'VWC Select', helper: 'Helper Text' };

diff --git a/components/select/test/select.test.js b/components/select/test/select.test.js
@@ -1,4 +1,5 @@
 import '../vwc-select.js';
+import '../vwc-select.js';
 import '@vonage/vwc-list/vwc-list-item.js';
 import {
 	textToDomToParent,
@@ -470,7 +471,7 @@ describe('select', () => {
 	});
 
 	describe(`ghost`, function () {
-		it(`should set dense to true if ghost is set`, async function () {
+		it(`should set dense to true if appearance is ghost`, async function () {
 			const [select] = addElement(
 				textToDomToParent(`
    <${COMPONENT_NAME}>
@@ -483,7 +484,7 @@ describe('select', () => {
 
 			const denseValueBeforeGhost = select.dense;
 
-			select.ghost = true;
+			select.appearance = 'ghost';
 			await select.updateComplete;
 			const denseValueAfterGhost = select.dense;
 

diff --git a/ui-tests/snapshots/vwc-select.png b/ui-tests/snapshots/vwc-select.png
diff --git a/ui-tests/tests/vwc-select/index.js b/ui-tests/tests/vwc-select/index.js
@@ -5,7 +5,7 @@ import '@vonage/vwc-list/vwc-list-item.js';
 export async function createElementVariations(wrapper) {
 	const textElementWrapper = document.createElement('div');
 	textElementWrapper.innerHTML = `
-	<vwc-select label="VWC Select with long text" helper="Helper Text" >
+	<vwc-select label="VWC Select with long text" helper="Helper Text">
   <vwc-list-item
     mwc-list-item=""
     tabindex="0"
@@ -202,7 +202,55 @@ export async function createElementVariations(wrapper) {
 </vwc-select>
 </div>
 <hr>
-	<vwc-select label="VWC Select" helper="Helper Text" ghost dense>
+	<vwc-select label="Pill auto dense Select" helper="Helper Text" shape="pill">
+  <vwc-list-item
+    mwc-list-item=""
+    tabindex="0"
+    aria-disabled="false"
+    role="option"
+    aria-selected="true"
+    selected=""
+    activated=""
+  >none</vwc-list-item>
+  <vwc-list-item
+    value="0"
+    mwc-list-item=""
+    tabindex="-1"
+    aria-disabled="false"
+    role="option"
+  >
+    Item 0
+  </vwc-list-item>
+  <vwc-list-item
+    value="1"
+    mwc-list-item=""
+    tabindex="-1"
+    aria-disabled="false"
+    role="option"
+  >
+    Item 1
+  </vwc-list-item>
+  <vwc-list-item
+    value="2"
+    mwc-list-item=""
+    tabindex="-1"
+    aria-disabled="false"
+    role="option"
+  >
+    Item 2
+  </vwc-list-item>
+  <vwc-list-item
+    value="3"
+    mwc-list-item=""
+    tabindex="-1"
+    aria-disabled="false"
+    role="option"
+  >
+    Item 3 is long
+  </vwc-list-item>
+</vwc-select>
+<hr>
+	<vwc-select label="Appearance ghost" helper="Helper Text" appearance="ghost" >
   <vwc-list-item
     mwc-list-item=""
     tabindex="0"