diff --git a/components/select/src/vwc-select.scss b/components/select/src/vwc-select.scss
index 3f05d934d..335f70986 100644
--- 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
index 6df97be35..9e6428027 100644
--- 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
index bf0040af4..faae4706d 100644
--- 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
index eee6c1152..d9f5190a5 100644
--- 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
index 011b5c09b..72901ede2 100644
--- 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}>
+ Item 1
+ Item 2
+
+ `)
+ );
+ 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
new file mode 100644
index 000000000..5fde47f38
Binary files /dev/null and b/ui-tests/snapshots/vwc-select.png differ
diff --git a/ui-tests/tests/vwc-select/index.js b/ui-tests/tests/vwc-select/index.js
new file mode 100644
index 000000000..faf26d6fc
--- /dev/null
+++ 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 = `
+
+
+
+ Item 0
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+
+
+ Item 0
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+
Dense-with label
+
+
+
+ Item 0
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
Dense-no label
+
+
+
+ Item 0
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+
+
+ none
+
+ Item 0
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3 is long
+
+
+ `;
+ wrapper.appendChild(textElementWrapper);
+}
+
+