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): ghost select #1133

Merged
merged 9 commits into from
Dec 14, 2021
Merged

feat(select): ghost select #1133

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
324ec29
viv-773-select #comment ghost select - no border option
rachelbt Nov 22, 2021
9acf99a
viv-773-select #comment ui test png
rachelbt Nov 22, 2021
6158974
Merge branch 'master' into VIV-773-select
rachelbt Nov 23, 2021
44edeb4
viv-773-select #comment add test
rachelbt Nov 28, 2021
d05d9ca
Merge branch 'master' into VIV-773-select
rachelbt Dec 7, 2021
400be0e
Merge branch 'master' into VIV-773-select
rachelbt Dec 7, 2021
6b01e50
add ui test for dense with no padding
rachelbt Dec 7, 2021
35443ca
Merge branch 'master' into VIV-773-select
rachelbt Dec 7, 2021
b0f41df
Merge branch 'master' into VIV-773-select
YonatanKra Dec 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions components/select/src/vwc-select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,3 +204,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;
}
}
6 changes: 6 additions & 0 deletions components/select/src/vwc-select.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ export class VWCSelect extends MWCSelect {
@property({ type: String, reflect: true })
name: string | undefined;

@property({ type: Boolean, reflect: true, attribute: 'ghost' })
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to be tested.
Also, need to test the logic that's bound to it:
If ghost is true, dense must be true (at least that's what I see in the code).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we enforce programmatically? it's that mutating user's definition discussion again...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need because of the design. As I wrote in the summery of this PR its a quick & dirty fix. This component is different from our conventions in a lot of ways...

ghost = false;

override connectedCallback(): void {
super.connectedCallback();
if (!this.hasAttribute('outlined')) {
Expand All @@ -67,6 +70,9 @@ export class VWCSelect extends MWCSelect {
if (this.shape === 'pill') {
this.dense = true;
}
if (this.ghost === true ) {
this.dense = true;
}
}

protected override updated(changedProperties: PropertyValues): void {
Expand Down
6 changes: 6 additions & 0 deletions components/select/stories/arg-types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 } },
Expand Down
3 changes: 3 additions & 0 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,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' };

Expand Down
Binary file added ui-tests/snapshots/vwc-select.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
155 changes: 155 additions & 0 deletions ui-tests/tests/vwc-select/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
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>
<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);
}