chore: release (next) #3542
Closed
chore: release (next) #3542
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
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
* chore: release (next) * docs: reset changes to changelog --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Patrick Fulton <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
* refactor(button): spectrum 2 styles and cleanup Spectrum 2 changes to CSS: - integrate themes css into main css - use s2 corner rounding - use s2 colors Cleanup items of note: - make medium size the default - consolidate and organize focus indicator styles. Some declarations were repeated. - Rename mod for font weight that was referencing a global token instead of a component specific name. - simplify repetitive disabled custom properties - removed some unused css; static variant declarations at the end of the file were being overridden by more specific styles - remove unused is-selected, emphasized, and quiet classes that are not used on this component - remove the spectrum-Button--fill class. it was already the default. * fix(button): high contrast - ensure matching color pairs for accent Ensures that a matching background and foreground color pair is used for the high contrast colors, for Accent hover, down, and focus. Changes the content color to HighlightText to ensure contrast when these have a background set to Highlight. * docs(button): update documentation and storybook for s2 - Some improvements and additions to the spectrum 2 release notes. - Updates migration guide notes to include version and dates for the previous notes. - Removes spectrum-Button--sizeM class from examples. Excludes the spectrum-Button--sizeM class in the storybook template. - Removes medium size class from storybook - Fixes default flex alignment stretching buttons vertically in Storybook to the tallest button. * fix(button): calculate corner rounding to support wrapping design Calculate corner rounding based on the component height, so that the rounding looks correct when there is wrapping text. Otherwise, when the button wraps, it has too much rounding as compared to the design when using the corner-radius-full token. * feat(button): outline option removals and use accent as the default Removes the outline option for the accent and negative variants, and makes sure that the accent variant is the default. == outline option removal == Per design feedback and updated design spec changelog, the outline treatment (style) is no longer supported for the Accent and Negative color variants: "Outline buttons are no longer available in accent and negative options — use the filled variant instead" This removes their CSS, lists the change in the migration notes, and disables the treatment control for the Accent and Negative stories. It also removes the outline example in the template for those two stories. == use accent as the default == Use accent styles for the default button when there is no variant class applied, to match the default defined on the guidelines. * fix(button): additional s2 style adjustments and organization - make usage of edge to visual values consistent - use full corner rounding on icon-only variant, which does not need to account for wrapping text - correct static white secondary outline background color, per PR review - chore: apply linter formatting * docs(button): custom mdx docs page Create an MDX "Docs" page that works as a replacement for the YML docs pages, and covers the important Button options from there and the guidelines. Adds the tag "is-hidden-story" for excluding Storybook sidebar items. * chore(button): add changeset * build(button): use beta version of commons dependency Since the commons version on main was updated to 10.0, the Button started building with the wrong version of commons when importing basebutton.css and listing mods that have been removed in the version of commons in the spectrum-two branch. * chore(button): clear up linter warnings Fixes warnings and errors from stylelint and eslint. * fix(button): correct focus indicator rounding and basebutton mod The focus indicator rounding needed an additional calc in order to have the correct rounding. While testing --mod-button-focus-ring-gap and some other mods, it was also noticed that a declaration being imported from basebutton was causing some of the mod names to be different and the mod to not work correctly (basebutton is generating a selector for the margin of .spectrum-Button:focus-visible::after).
* chore: release s2 button (next) --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Patrick Fulton <[email protected]>
* chore: release (next) --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Patrick Fulton <[email protected]>
* chore(tokens): use [email protected] Uses the latest tokens release. * chore: add changeset
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
The styles had previously diverged from what this placeholder class was providing, which was causing an issue with needing to override styles with unnecessary CSS. This cleans that up by integrating the small number of styles from spectrum-ButtonWithFocusRing that were not already present, and removing that "extend".
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Migrates the Picker component to Spectrum 2, based on the updated Figma specs. - Integrate themes CSS files into index.css - Uses new S2 tokens for field width and corner rounding - Add down state with new calculated perspective - The top to alert icon in Spectrum 2 now uses the component-top-to-workflow-icon-* tokens as defined on the design. - Adds the CJK line-height token defined on the design specs. - Uses border-width-200 instead of border-width-100 * fix(picker): use correct spacing between icons and value text The spacing between alert icon and disclosure icon was incorrect because it was being overridden by a selector that shouldn't have been affecting this scenario (which was using the subsequent-sibling combinator ~). Some mods around the spacing for the three different types of icons were also not working as expected. Fixes this spacing and clarifies which spacing is which. Renames the mod that applies to the optional workflow icon to the left of the value. Simplifies quiet styles by changing custom property values instead of adding extra styles. * feat(picker): storybook - expanded and improved chromatic template Expands the Chromatic-only template in Storybook to increase coverage of different options. Organizes the stories into sections using the formatting and typography previously established with Action button. States in each section are based on the grid of options in the Desktop S2 design Figma, with some additions such as the loading state. And the Switch examples from the existing template. Removes the "Open" story which is now covered in the Chromatic template. Adds missing icon (to left of value/placeholder text) option to Storybook, along with VRT coverage. Improves display of Popover within these different contexts; fixes how it is aligned on the side label example. Changes the side label example to use flex row instead of using inline-block which could wrap as the screen shrunk. === Other Storybook fixes and additions === - Adds aria-labelledby and unique ids to make sure the label is associated with the Picker. - Includes downstate dimension capture - Popover does not show when in the loading state (per design feedback) - Makes sure HelpText appears below the Picker when using side label, by adjusting its wrapper markup. - Adds conditional controls to disabled and loading states, per the PR feedback that disabled + loading should not be a possible combo.
* refactor: remove --sizeM modifier and make "medium" default size * refactor:remove accent semantic variant * refactor: add/update new colors/tokens * refactor: update typography styles * refactor: generate new mod properties * docs: add migration notes/changes to yml * feat: add chromatic vr coverage * fix: high contrast changes (utilizes changes from PR#2771 to clean up legacy vendor prefixes) * docs: add changeset and update yml
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens
* feat(thumbnail): migrate to S2 * feat(thumbnail): add customstyles to scope change to thumbnail
* feat(colorarea): s2 migration * feat(colorarea): remove redundant property * feat(colorarea): clarify color + rgb implementation * feat(colorarea): fix gradient border-radius * feat(colorarea): move forced-colors media query * feat(colorarea): update changeset
* feat(thumbnail-opacity-checkboard): s2 migration * feat(thumbnail-opacity-checkboard): fix token rule * feat(thumbnail-opacity-checkboard): fix typo, update changeset, move rule * feat(thumbnail-opacity-checkboard): drop unnecessary styles * feat(thumbnail-opacity-checkboard): update token * feat(thumbnail-opacity-checkboard): update changeset
* feat(dialog)!: s2 standard dialog migration * docs(dialog): dialog controls/coverage - adds new features/behaviors such as the checkbox in the footer, wrapping for footer/header content, being able to have close button and button group, hasHeroImage - removes Divider support in dialog - adds is-hidden-story to replicate what is on main and remove most stories from the sidebar - adds some comments and TODOs giving context to this choice - removes layout from control table from default argTypes - removes hasFooter from control table for fullscreen/fullscreenTakeover argTypes - adds a comment to explain the custom argTypes changes for those stories - also adds a comment about multiple conditionals for argTypes * refactor(modal): use corner-radius-extra-large-default to match design specs * fix(underlay): update comment notes for spectrum-overlay-color - also comments out a duplicated custom property and adds a TODO comment * refactor(dialog): new css for S2 dialog - adds some opportunities for mod properties - fixes dismissible grid spacing between additional header content and close button - scope passthrough mods to spectrum-Dialog class - add flex-direction: column to footer (this should allow the footer content and button group to stack at small screens at smallest dialog sizes on the mobile scale.) * feat(dialog): rebuild mods - lots of mods are renamed to use "standard dialog" language * chore(dialog): create changeset * chore(dialog): update peer deps data - remove divider from peerDependencies and peerDependenciesMeta - adds closebutton, checkbox and typography to peerDependenciesMeta * chore: remove divider tests * chore(buttongroup): add flex-wrap mod property * chore(buttongroup): creates buttongroup changeset * chore(buttongroup,dialog): rebuild mods * fix(dialog): platform custom variables - calls for --spectrum-standard-dialog-spacing-edge-to-content * chore(tokens): create changeset for custom standard dialog token * chore(tray): fix spelling of isDismissible arg * fix(dialog,modal): custom styles for modal background color - because modal was originally setting the background color of dialogs, there was some 'antialiasing bleed through' behind the dialog. By adding customStyles to Modal, we can set --mod-modal-background-color to transparent and get rid of the hairline color (especially noticeable behind a hero image in a dialog) * docs(dialog): adds modal background color documentation * fix(dialog): use font-stack instead of font-family * docs(dialog): rebase fixes - override layout:centered parameter with layout:padded instead so the dialogs are visible on their canvases on the docs page.
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
castastrophe
force-pushed
the
spectrum-two
branch
4 times, most recently
from
dee81f5 to
ce2f3e0
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.
This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to spectrum-two, this PR will be updated.
spectrum-twois currently in pre mode so this branch has prereleases rather than normal releases. If you want to exit prereleases, runchangeset pre exitonspectrum-two.Releases
@spectrum-css/[email protected]
Major Changes
#2352
f5b76b3Thanks @pfulton! - ## Infield Progresscircle S2 MigrationIn-field progress circle is a new component created to replace progress circle (size S) in t-shirt size components. The button, textfield, combo box, and picker
template.jsfiles have all been updated to call for infield progress circles. This component comes in four sizes: (S, M, L, XL), has updated color variants (default, white, black), and has a unified track thickness.