fix(picker): correctly process the CSS for the quiet hover effect #4167
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Lighthouse scores
What is this?Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on Transfer Size
Request Count
|
Tachometer resultsChromeaction-menu permalinktest-basic
picker permalinkbasic-test
split-button permalinkbasic-test
Firefoxaction-menu permalinktest-basic
picker permalinkbasic-test
split-button permalinkbasic-test
|
1 task
Westbrook
previously approved these changes
Mar 12, 2024
Westbrook
force-pushed
the
rocss/picker-quiet-hover
branch
from
d9faaa6 to
c9a42ab
Compare
|
@Rocss I rebased this not expecting the VRTs to fail, can you help us update the cache here? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Seems like the problem is that the CSS for the quiet variant of the
sp-pickerwas not correctly processed:observe the
spectrum-Picker--quietclass which should be translated to the HTML quiet attribute.I added some more processing rules in the
spectrum-configwhich should take care of that. Let me know if there is a better config to use for this.Also, in the storybook, the
sp-label-fieldshould have the same size as thesp-picker, or else it looks weird and thesp-pickerclimbs over thesp-label-field. I adjusted the stories to pass thesizeattribute to thesp-label-fieldas well, if present.Related issue(s)
Motivation and context
Solves a CSS bug in the
Pickercomponent when using thequietvariant and hovering over the component.How has this been tested?
Hover effect is no longer present on the
<sp-picker quiet..... />sp-pickerno longer overlaps with thesp-label-fieldIn storybook, you can not change the size of the Picker from the Controls addon panel
sizeattributesp-label-fieldchanges too when interacting with this dropdownScreenshots (if appropriate)
Types of changes
Checklist
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against
main.