Spectrum 2 🎉 Feature Branch #2352
Draft
+19,275
−23,319
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
|
🚀 Deployed on https://pr-2352--spectrum-css.netlify.app |
File metricsSummaryTotal size: 1.66 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
File change detailsaccordion
actionbar
actionbutton
actiongroup
alertbanner
alertdialog
asset
assetcard
assetlist
avatar
badge
breadcrumb
button
buttongroup
calendar
card
checkbox
clearbutton
closebutton
coachindicator
coachmark
colorarea
colorhandle
colorloupe
colorslider
colorwheel
combobox
contextualhelp
datepicker
dial
dialog
divider
dropindicator
dropzone
fieldgroup
fieldlabel
floatingactionbutton
form
helptext
icon
illustratedmessage
infieldbutton
infieldprogresscircle
inlinealert
link
logicbutton
menu
meter
miller
modal
opacitycheckerboard
page
pagination
picker
pickerbutton
popover
progressbar
progresscircle
radio
rating
search
sidenav
slider
splitview
statuslight
steplist
stepper
swatch
swatchgroup
switch
table
tabs
tag
taggroup
textfield
thumbnail
toast
tooltip
tray
treeview
typography
underlay
well
tokens
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
pfulton
added
wip
pfulton
force-pushed
the
spectrum-two
branch
3 times, most recently
from
5ec70af to
c4aa5f5
Compare
pfulton
force-pushed
the
spectrum-two
branch
2 times, most recently
from
d2ac17c to
b2fee42
Compare
pfulton
force-pushed
the
spectrum-two
branch
4 times, most recently
from
31afc05 to
909f232
Compare
pfulton
force-pushed
the
spectrum-two
branch
3 times, most recently
from
9a01c5a to
1b959b3
Compare
pfulton
force-pushed
the
spectrum-two
branch
2 times, most recently
from
98335ab to
fec70b3
Compare
pfulton
force-pushed
the
spectrum-two
branch
2 times, most recently
from
7c86724 to
0a218bc
Compare
castastrophe
force-pushed
the
spectrum-two
branch
4 times, most recently
from
13e54aa to
0f20c5b
Compare
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
* feat(alertbanner): start migration to spectrum two Migrates the component to spectrum two. - Theme files are removed, and their custom properties integrated into the main index.css. - Renames misspelled mod custom property (noted in docs) - Simplifies background color styles by changing a single custom property per variant, as done on other components. * feat(alertbanner): spectrum 2 spacing and mod name cleanup Adjust some spacings to match the Spectrum 2 spec spacing. And renames some mods so they are more consistent with current naming conventions, and their purpose is more clear. === Update spacing to match the Spectrum 2 spec === One issue with the S1 version was that there was too much space between the text and the button, when the button wrapped to the next line. And there was a different token defined for the space from the bottom edge to the text, and vertically between the button and the text. This helps resolve this by moving some of the spacing to padding on the AlertBanner-body, and subtracting this value from some of the other custom properties. Along with using both column-gap and row-gap properties. === adjust storybook template spacing and decorator === Improves spacing in Storybook template, especially the Chromatic only template. Decorator and wrapper styles are modeled after those used in Action button, so they look more similar. Previously the layout was a little cramped and the "detail" elements were missing their margins because they were display inline. * docs(alertbanner): custom storybook docs page and template updates Creates a custom MDX docs page in Storybook for the Alert banner component. And reworks the stories and chromatic-only templates a little to facilitate and increase coverage. Includes Storybook VRT coverage for the max width changes in PR #2762 . Tests the display of the alert banner when in a container larger than and smaller than its max-inline-size. * chore(alertbanner): linter updates and update mods - Add stylelint disable line comments for some false positives caught by the linter. - Re-generate mods file * docs(alertbanner): use stories and template from main Use the stories and updated template from main, with a few things left out that are not yet available in the spectrum-two branch. * feat(alertbanner): support no close button or no action button Adds spacing to the end of the alert banner when the close button is not displayed, or both the close button and action button are not displayed. These are allowed combinations of options. * feat(alertbanner): use spec defined line-height token * feat(alertbanner): add font-family token and mod * feat(alertbanner): add cjk line-height * feat(alertbanner): remove unnecessary styles for end element Remove styles for .spectrum-AlertBanner-end, which were no longer doing anything after the removal of the divider.
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Storybook foundations pages now display as a single page instead of in folders with their example stories appearing. These now use the newer !dev tag to hide them. The old custom "foundation" tag was previously used to hide them, but this tag is no longer used. Also fixes some linter errors encountered during commit; a couple unused variables and incorrect typeof comparisons.
* fix(search): restore missing custom properties * fix(colorwheel): restore missing custom properties * fix(assetcard): restore missing custom properties * fix(treeview): restore missing custom properties Restore missing properties from foundations that were flagged by the linter. * fix(combobox): restore missing custom properties Restore missing properties from foundations that were flagged by the linter. Also removes a group of duplicate custom property definitions that were flagged.
…3471) * fix(popover): define --spectrum-popover-border-width in index.css * fix(well): define --spectrum-well-border-color in index.css * fix(tabs): define --spectrum-tabs-font-weight * fix(toast): define default background color and divider color * fix(tag): define undefined custom properties * fix(menu): define menu item background colors * fix(textfield): define undefined custom properties
…tom properties (#3487) * fix(pickerbutton): add missing custom properties * fix(radio): add missing custom props * fix(calendar): add missing custom properties * fix(stepper): define unused custom props * fix(progressbar): remove unused custom properties; change background-color to background see #2929; fix static color * fix(dial): remove unused custom properties; add undefined custom properties
* fix(*): define missing custom properties from theme directory * fix(*): restore missing mods and tokens * fix(*): restore missing mod and update metadata * fix(*): restore missing mods and update metadata * fix(*): restore basebutton import * chore(*): update metadata This reverts commit 3d489fe. * fix(*): restore actionbutton staticwhite background color * chore(*): update metadata * chore: resolve conflict * fix(*): actionbutton emphasized + static conflict * fix(*): actionbutton restore missing mods * fix(*): actionbutton clean up mods; fix missing states * fix(*): actionbutton restore focus indicator mods * chore(*): remove unused theme files
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
* docs(tooltip): add missing args to template - Tooltip was missing the `variant = "neutral"` arg, so adding that back in renders the component * chore(picker): add/correct arg naming - adds missing placeholder arg to template - corrects content arg to popoverContent * chore(picker): remove window.isChromatic calls and click event
Resolves linting error: 'size' is assigned a value but never used no-unused-vars
* feat(colorslider): s2 migration * fix(colorslider): custom property aliasing * chore(colorslider): add color control to story * chore(colorslider): add vertical control to story * chore(colorslider): update custom property name for consistency * fix(colorslider): control name in test * fix(colorslider): arg name and value * chore(colorslider): restore missing files * chore(colorslider): update gradient direction for vertical tests + stories * chore(colorslider): update dist files * fix(colorslider): alpha story gradient * fix(colorslider): adjust inline-block-start for color handle when vertical * fix(colorslider): add missing vertical style; update gradient color
* feat(dialog): adds new takeover dialog styles - new tokens and takeover dialog styles were implemented in index.css - rebuild tokens/metadata * docs(dialog): updates dialog template and stories - adds layout: "fullscreen" to render dialogs in their canvases, instead of off the canvas - uses getRandomId and renderContent functions to render header and footer contents - implements "slotted" components for the new takeover dialog feature - removes hasDivider since s2 dialogs don't support a divider - updates Figma links for fullscreen and fullscreenTakeover stories - updates some class names to better follow naming conventions * chore(dialog): clean up dialog tests - adds hasHeroImage arg - adds background and margin customStyles for fullscreen dialog in Chromatic only (so we can see the rounded corners better) fix(modal): update modal with takeover dialog styles - builds metadata - adds tokens for modal that complement new takeover dialog styles/tokens chore(dialog,modal): create changeset
feat(popover): new S2 popover styles - new tokens and token values used for popover - create changeset - rebuild metadata.json - adjust popoverWidth and popoverHeight args to accommodate new padding - update test file with new popoverWidth and popoverHeight - correct side aligned popovers distance to source * fix(coachmark): nested popover style updates - update the border radius of the popover nested in coachmark to match S2 popover specs - update popover `--mod-popover-content-area-spacing` variable name (previously --mod-popover-content-area-spacing-vertical) - rebuild metadata.json * fix(picker): update popover selector class - with the new default position for popover, the selector class for the popover in picker also needed to be updated. (--bottom-start) - create changeset - rebuild metadata.json * docs(popover): fixup some docs wording - add down state link
Migrates component to Spectrum 2. Includes renaming of variants and new large t-shirt size, changed token usage to match spec, additional storybook options, etc. docs(breadcrumb): new controls for nested and improved nested docs Adds controls so a user is able to display the nested truncated menu, root context, set disabled items, and item text. This also clears up and moves around some of the documentation about the truncated menu and root context. docs(breadcrumb): refactor tests Update VRTs tests file to use new refactored controls and updated s2 variants. More options can now live in the state data. docs(breadcrumb): add hover and focus-visible to tests
feat(illustratedmessage): updating token version feat(illustratedmessage): work in progress feat(illustratedmessage): adding new tokens, tshirt sizes, orientation, button group feat(illustratedmessage): updating CSS structure and adding conditional buttons feat(illustratedmessage): update tokens feat(illustratedmessage): changeset, styles, dropzone mods feat(illustratedmessage): work in progress feat(illustratedmessage): updating mods feat(illustratedmessage): removing message accent color selector chore(illustratedmessage): updating changeset docs(illustratedmessage): heading controls fix(illustratedmessage): fixing cjk tokens and removing heading and base classes fix(illustratedmessage): fixing cjk tokens and removing heading and base classes feat(illustratedmessage): new mods docs(illustratedmessage): adding horizontal story context feat(illustratedmessage): removing extra dashes, reverting dropzone chore(fix): adding stylelint disable desc chore(fix): removing unused highcontrast accent color token feat(illustratedmessage): adding grid display chore(im): removing unused import chore(im): removing more unused imports chore(illustratedmessage): updating testing env fix(dropzone): removing unused controls feat(illustratedmessage): reviewing comments feat(illustratedmessage): adjusting story horiz copy fix(illustratedmessage): resolving changes chore(im): bringing back to center fix: removing lint line chore: restore stepper index css file chore(illustratedmessage): removing one liner in dropzone) chore(illustratedmessage): removing stylelint line chore(illustratedmessage): removing unused custom props in dropzone
…gress circle (#3430) * feat(infieldprogress): add new component feat(infieldcircle): new component feat(ifpc): updating template and vrts chore(ifpc): updating story changes chore(ifpc): cleaning up build files feat(ifpc): add infield loader to components feat(infieldprogress): add new component feat(ifpc): updating template and vrts feat(ifpc): updating package, story, template chore(ifpc): spectrum two updates chore(ifpc): adding dist files chore(ifpc): changing button id chore(ifpc): updating bundle chore(ifpc): updating package chore(ifpc): testing out files chore(ifpc): adding missing dist files chore(ifpc): removing index css in dist fix(ifpc): fixing typos fix(ifpc): update mods in changeset chore(ifpc): removing mods from ifpc components in changeset * chore(ifpc): update package json)
castastrophe
force-pushed
the
spectrum-two
branch
from
f34473b to
cf46c2b
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.
🚨 DO NOT MERGE 🚨
Spectrum 2 migration branch
To-do:
darkanddarkestcustom properties@adobe/spectrum-tokens