-
Notifications
You must be signed in to change notification settings - Fork 202
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.
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
[CRISP-683] Add <sp-dropdown />
#95
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great start. Thanks for working on this! We'll need it soon.
1eacf98
to
306b39b
Compare
98f1609
to
7f064f9
Compare
protected get buttonContent(): TemplateResult[] { | ||
return [ | ||
html` | ||
<svg |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added #155 to track getting this icon (and related icons) into the project more smoothly in the future.
<slot></slot> | ||
`} | ||
</div> | ||
${this.invalid |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Currently the sizing and spacing of the invalid
and chevron
icons are not 100% to Spectrum CSS spec, and I have created #156 to track making the uiicon
styles available in this project.
@@ -29,4 +29,5 @@ button { | |||
|
|||
#selected { | |||
flex-shrink: 0; | |||
margin-top: 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This workaround is related to #156 in that the spacing on the icon is not correct without this override until the uiicon
styles are available.
this.setAttribute('role', 'menuitem'); | ||
public connectedCallback(): void { | ||
super.connectedCallback(); | ||
if (!this.hasAttribute('role')) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Allow the usage to determine the role of the element.
}, | ||
}); | ||
this.dispatchEvent(queryRoleEvent); | ||
this.setAttribute('role', queryRoleEvent.detail.role || 'menuitem'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Make menuitem
the default role.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me! :)
Description
Add support for the Dropdown pattern from Spectrum CSS: http://opensource.adobe.com/spectrum-css/2.13.0/docs/#dropdown
Related Issue
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Checklist: