feat(select): ghost select (#1133)

* viv-773-select #comment ghost select - no border option * viv-773-select #comment ui test png * viv-773-select #comment add test * add ui test for dense with no padding Co-authored-by: Yonatan Kra <yonatan.kra@vonage.com>
Vonage · Dec 14, 2021 · 93426d1 · 93426d1
1 parent 2e2cf11
commit 93426d1
Show file tree

Hide file tree

Showing 7 changed files with 303 additions and 2 deletions.
diff --git a/components/select/src/vwc-select.scss b/components/select/src/vwc-select.scss
@@ -205,3 +205,15 @@ vwc-notched-outline {
  pill: 24px,
  )
 );
+
+:host([ghost][dense]) {
+ .mdc-select .mdc-floating-label {
+ left: 0;
+ }
+ vwc-notched-outline {
+ --mdc-notched-outline-stroke-width: 0;
+ }
+ .mdc-select__anchor {
+ display: block;
+ }
+}
diff --git a/components/select/src/vwc-select.ts b/components/select/src/vwc-select.ts
@@ -48,6 +48,9 @@ export class VWCSelect extends MWCSelect {
  @property({ type: String, reflect: true })
  name: string | undefined;
 
+ @property({ type: Boolean, reflect: true, attribute: 'ghost' })
+ ghost = false;
+
  override connectedCallback(): void {
  super.connectedCallback();
  if (!this.hasAttribute('outlined')) {
@@ -64,7 +67,7 @@ export class VWCSelect extends MWCSelect {
 
  protected override update(changedProperties: PropertyValues): void {
  super.update(changedProperties);
- if (this.shape === 'pill') {
+ if (this.shape === 'pill' || this.ghost) {
  this.dense = true;
  }
  }

diff --git a/components/select/stories/arg-types.js b/components/select/stories/arg-types.js
@@ -28,6 +28,12 @@ export const argTypes = {
  options: { true: '', false: undefined },
  },
  },
+ ghost: {
+ control: {
+ type: 'inline-radio',
+ options: { true: '', false: undefined },
+ },
+ },
  form: { table: { disable: true } },
  outlined: { table: { disable: true } },
  outlineOpen: { table: { disable: true } },

diff --git a/components/select/stories/select.stories.js b/components/select/stories/select.stories.js
@@ -36,6 +36,9 @@ 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' };
+
 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
@@ -15,7 +15,7 @@ import {
 import {
  shapeRoundedTestCases,
  shapePillTestCases,
-} from '../../../test/shared.js';
+} from '../../../test/shared/shape.test.js';
 import {
  assertDenseStyles,
  hasNotchedOutline,
@@ -468,4 +468,27 @@ describe('select', () => {
  expect(endTime - startTime).to.be.lessThan(50);
  });
  });
+
+ describe(`ghost`, function () {
+ it(`should set dense to true if ghost is set`, async function () {
+ const [select] = addElement(
+ textToDomToParent(`
+ <${COMPONENT_NAME}>
+ <vwc-list-item>Item 1</vwc-list-item>
+ <vwc-list-item>Item 2</vwc-list-item>
+ </${COMPONENT_NAME}>
+ `)
+ );
+ await select.updateComplete;
+
+ const denseValueBeforeGhost = select.dense;
+
+ select.ghost = true;
+ await select.updateComplete;
+ const denseValueAfterGhost = select.dense;
+
+ expect(denseValueBeforeGhost).to.equal(false);
+ expect(denseValueAfterGhost).to.equal(true);
+ });
+ });
 });
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
@@ -0,0 +1,254 @@
+import '@vonage/vwc-select';
+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-list-item
+ mwc-list-item=""
+ tabindex="0"
+ aria-disabled="false"
+ role="option"
+ aria-selected="true"
+ selected=""
+ activated=""
+ ></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
+ </vwc-list-item>
+</vwc-select>
+<hr>
+ <vwc-select label="VWC Select" helper="Helper Text" dense>
+ <vwc-list-item
+ mwc-list-item=""
+ tabindex="0"
+ aria-disabled="false"
+ role="option"
+ aria-selected="true"
+ selected=""
+ activated=""
+ ></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
+ </vwc-list-item>
+</vwc-select de>
+<hr>
+<div style="display: flex; align-items: flex-start;">
+<p style="margin: 0; padding-right: 1rem;">Dense-with label</p>
+ <vwc-select dense label="VWC Select">
+ <vwc-list-item
+ mwc-list-item=""
+ tabindex="0"
+ aria-disabled="false"
+ role="option"
+ aria-selected="true"
+ selected=""
+ activated=""
+ ></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
+ </vwc-list-item>
+</vwc-select>
+<p style="margin: 0; padding: 0 1rem;">Dense-no label</p>
+ <vwc-select dense>
+ <vwc-list-item
+ mwc-list-item=""
+ tabindex="0"
+ aria-disabled="false"
+ role="option"
+ aria-selected="true"
+ selected=""
+ activated=""
+ ></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
+ </vwc-list-item>
+</vwc-select>
+</div>
+<hr>
+ <vwc-select label="VWC Select" helper="Helper Text" ghost dense>
+ <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>
+ `;
+ wrapper.appendChild(textElementWrapper);
+}
+
+