Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 8 commits into from
Dec 28, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d3694d3
[appearance] - poc
rachelbt Dec 20, 2021
2dd96ec
keep layout as is
yinonov Dec 20, 2021
4096816
[appearance] - poc
rachelbt Dec 21, 2021
cdb5053
Merge branch 'master' into vivid-issues-1157
rachelbt Dec 21, 2021
77bb9dc
fix story
rachelbt Dec 23, 2021
41b0f12
Merge branch 'master' of https://github.com/Vonage/vivid into vivid-i…
rachelbt Dec 26, 2021
62514c8
update from master
rachelbt Dec 26, 2021
cff6032
Merge branch 'master' into vivid-issues-1157
rachelbt Dec 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 16 additions & 15 deletions components/select/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
3 changes: 2 additions & 1 deletion components/select/src/vwc-select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -206,7 +207,7 @@ vwc-notched-outline {
)
);

:host([ghost][dense]) {
:host([appearance='ghost'i][dense]) {
.mdc-select .mdc-floating-label {
left: 0;
}
Expand Down
10 changes: 6 additions & 4 deletions components/select/src/vwc-select.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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)
Expand All @@ -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();
Expand All @@ -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;
}
}
Expand Down
13 changes: 11 additions & 2 deletions components/select/stories/select.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' };
Expand Down
5 changes: 3 additions & 2 deletions components/select/test/select.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import '../vwc-select.js';
import '../vwc-select.js';
import '@vonage/vwc-list/vwc-list-item.js';
import {
textToDomToParent,
Expand Down Expand Up @@ -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}>
Expand All @@ -483,7 +484,7 @@ describe('select', () => {

const denseValueBeforeGhost = select.dense;

select.ghost = true;
select.appearance = 'ghost';
await select.updateComplete;
const denseValueAfterGhost = select.dense;

Expand Down
Binary file modified ui-tests/snapshots/vwc-select.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 50 additions & 2 deletions ui-tests/tests/vwc-select/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down