feat(accordion): spectrum 2 migration #3684
Draft
Conversation
This file contains hidden or 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
🦋 Changeset detectedLatest commit: 3eb63f2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
jawinn
force-pushed
the
jawinn/css-1018-s2-accordion
branch
from
ad07a57 to
7c4c408
Compare
File metricsSummaryTotal size: 1.38 MB*
accordion
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
|
🚀 Deployed on https://pr-3684--spectrum-css.netlify.app |
jawinn
force-pushed
the
jawinn/css-1018-s2-accordion
branch
from
7c4c408 to
17ba3bc
Compare
castastrophe
force-pushed
the
spectrum-two
branch
3 times, most recently
from
7e8269c to
4ce8d19
Compare
Move around existing CSS for consistency, clarity, and improved organization: - Moves some properties within existing organization. - Moves high contrast styles to the bottom. - Moves sizing classes above density classes. - Adds a few comments, such as for a complex calc. - Simplifies border declarations using single short-hand property. - Removes unnecessary "calc" keyword used within max() function.
Rename height and width custom properties to include "minimum" in their name, to better reflect what they actually are and how they are used.
Use existing custom property for RTL icon rotation for the default icon state. Apply to icon, like the existing open styles, instead of the icon container.
Better organize open and disabled styles within the same blocks of CSS. Only moves existing CSS.
Uses new tokens from S2 spec. Simplifies layout with some noted markup changes to use flexbox instead of a position absolute for the disclosure icon. Plus some other general refactoring, cleanup, and documentation.
Add CSS transition for the rotation of the disclosure indicator.
Adds the "quiet" option to accordion, which does not have dividers and shows the rounded corners on hover.
Reorganize and add stories to better document accordion's various options. - Adds a disabled state story - Simplifies accordion items displayed on Docs page - Tests accordion states and density sizes in testing preview grid
Variable assigned to itself was showing an undefined variable in the inspector, as this circular reference is treated as invalid.
Use updated CSS syntax called out by the linter.
Work in progress variant class for the accordion not having overall inline padding, per the design spec. This variant was created to be used when accordion is within components that already have padding like the upcoming "standard panel".
jawinn
force-pushed
the
jawinn/css-1018-s2-accordion
branch
from
bbd7643 to
6a48b9f
Compare
Use updated font sizes and component height (minimum height) tokens from specs.
jawinn
force-pushed
the
jawinn/css-1018-s2-accordion
branch
from
cb89f13 to
3eb63f2
Compare
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
Accordion Spectrum 2 migration
Accordion now uses Spectrum 2 tokens and specifications. New sized tokens are used for corner rounding, the spacing around the disclosure icon, and the spacing around the content area.
New features
collapsing the accordion item.
Markup changes
The HTML markup has changed slightly for the accordion header. The disclosure icon has been moved
from outside the the button (
spectrum-Accordion-itemHeader), to within the button. The extraelement with class
spectrum-Accordion-itemIconContainer, previously wrapping the icon, hasbeen removed. A span with class
spectrum-Accordion-itemTitlehas been added around the headingtext.
Mod changes
The following
--modcustom properties have been renamed to better reflect how they are used:--mod-accordion-item-heighthas been renamed to--mod-accordion-item-minimum-height--mod-accordion-item-widthhas been renamed to--mod-accordion-item-minimum-width--mod-accordion-min-block-sizehas been renamed to--mod-accordion-item-min-block-size--mod-accordion-component-edge-to-texthas been renamed to--mod-accordion-content-padding-inlineCSS-1018
Note: this does not include the new "direct actions" feature. That will be done in a follow-up PR/task.
How and where has this been tested?
Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.
Validation steps
WIP
Regression testing
Validate:
Screenshots
To-do list