Skip to content

feat(button,clear-button): updated styles and deprecated overBackground variant [SWC-860] - abandoned #5320

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Apr 2, 2025

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@spectrum-css/clearbutton (source) 7.0.0-s2-foundations.16 -> 7.2.0 age adoption passing confidence

Release Notes

adobe/spectrum-css (@​spectrum-css/clearbutton)

v7.2.0

Compare Source

Minor Changes
  • #​3527 5f1751c Thanks @​castastrophe! - By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the .js-focus-within and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low.

v7.1.0

Compare Source

Minor Changes

📝 205182b Thanks @​castastrophe!

v7.0.1

Compare Source

Patch Changes

📝 #​3534 68e0057 Thanks @​castastrophe!

Fixes a bug in the content of the dist/index-theme.css file.

Expected index-theme.css to include the component selectors with component-level custom properties mapped to the --system prefixed ones in order to allow a component to support various contexts.

Expected output example for the index-theme.css:

.spectrum-ActionButton {
  --spectrum-actionbutton-background-color-default: var(--system-action-button-background-color-default);
  --spectrum-actionbutton-background-color-hover: var(--system-action-button-background-color-hover);

v7.0.0

Compare Source

Major Changes

📝 #​2786 6c19fcf Thanks @​pfulton!

🛑 Breaking change

This major update creates a bridge between the Spectrum 1 (S1) and Spectrum 2 (S2) designs, dubbed "Spectrum 2 Foundations". These do NOT reflect a fully migrated S2 component. This approach allows consumers to swap the appearance of their components between S1, Express, and S2 by leveraging a "system" layer that remaps the necessary component-level tokens to the appropriate token dataset.

For these components to appear S2, you must load the assets with the @spectrum-css/tokens at v16 or higher.

For S1 or Express, load assets with the @spectrum-css/tokens at v14.x or v15.x.

If you are looking to implement a fully S2 design, please explore the next tag releases instead of using this foundations release. This release is used in Spectrum Web Components 1.x.

Deprecations

The metadata folder containing the mods.md and metadata.json assets has been removed from source. To find information about the components including what selectors, modifiers, and passthroughs are used, please see the dist/metadata.json asset shipped with every component containing CSS.

The index-vars.css asset has been removed in this release as it was previously deprecated and is no longer maintained. Please use the index.css or index-base.css

File usage

If you are rendering components and need only the S2 Foundations styles, you can make use of the index.css asset which contains all the base styles plus the system mappings for S2 Foundations.

If you are using this version to publish only an S1 or Express component, you can use the index-base.css plus the desired themes/(spectrum|express).css file.

To render a component that can be easily swapped between the S2 Foundations, S1, or Express contexts, load index-base.css with the index-theme.css file and leverage the appropriate context classes (.spectrum--legacy for S1 and .spectrum--express for Express).

Patch Changes

v7.0.0-s2-foundations.17

Compare Source

Major Changes
  • #​2786 f6ad55e Thanks @​pfulton! - feat: s2 foundations non-gray-800 colors update

    Property name Context Old value Updated value
    --spectrum-blue-800 dark rgb(69, 110, 254) rgb(64, 105, 253)
    --spectrum-red-800 dark rgb(230, 54, 35) rgb(223, 52, 34)
    --spectrum-orange-800 dark rgb(205, 86, 0) rgb(199, 82, 0)
    --spectrum-yellow-800 dark rgb(169, 110, 0) rgb(164, 106, 0)
    --spectrum-chartreuse-800 dark rgb(109, 131, 0) rgb(106, 127, 0)
    --spectrum-celery-800 dark rgb(69, 138, 19) rgb(66, 134, 18)
    --spectrum-green-800 dark rgb(6, 140, 82) rgb(6, 136, 80)
    --spectrum-seafoam-800 dark rgb(8, 138, 116) rgb(8, 134, 112)
    --spectrum-cyan-800 dark rgb(15, 128, 194) rgb(13, 125, 186)
    --spectrum-indigo-800 dark rgb(119, 97, 252) rgb(116, 91, 252)
    --spectrum-purple-800 dark rgb(161, 84, 229) rgb(157, 78, 228)
    --spectrum-fuchsia-800 dark rgb(192, 64, 212) rgb(186, 60, 206)
    --spectrum-magenta-800 dark rgb(231, 41, 105) rgb(224, 38, 101)
    --spectrum-pink-800 dark rgb(220, 47, 156) rgb(213, 45, 151)
    --spectrum-turqoise-800 dark rgb(9, 135, 147) rgb(9, 131, 142)
    --spectrum-brown-800 dark rgb(148, 118, 73) rgb(143, 114, 69)
    --spectrum-silver-800 dark rgb(123, 123, 123) rgb(118, 118, 118)
    --spectrum-cinnamon-800 dark rgb(179, 103, 64) rgb(176, 98, 59)
Patch Changes

Configuration

📅 Schedule: Branch creation - "after 12pm on thursday" in timezone America/Los_Angeles, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.


  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@renovate renovate bot requested a review from a team as a code owner April 2, 2025 20:06
@renovate renovate bot added the Spectrum CSS label Apr 2, 2025
Copy link

changeset-bot bot commented Apr 2, 2025

🦋 Changeset detected

Latest commit: 8067e22

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 84 packages
Name Type
@spectrum-web-components/button Minor
@spectrum-web-components/clear-button Minor
@spectrum-web-components/styles Minor
@spectrum-web-components/action-bar Minor
@spectrum-web-components/action-button Minor
@spectrum-web-components/alert-banner Minor
@spectrum-web-components/alert-dialog Minor
@spectrum-web-components/button-group Minor
@spectrum-web-components/coachmark Minor
@spectrum-web-components/dialog Minor
@spectrum-web-components/infield-button Minor
@spectrum-web-components/picker-button Minor
@spectrum-web-components/picker Minor
@spectrum-web-components/search Minor
@spectrum-web-components/tags Minor
@spectrum-web-components/toast Minor
example-project-rollup Patch
example-project-webpack Patch
@spectrum-web-components/bundle Minor
@spectrum-web-components/card Minor
@spectrum-web-components/illustrated-message Minor
@spectrum-web-components/custom-vars-viewer Minor
@spectrum-web-components/vrt-compare Minor
@spectrum-web-components/theme Minor
@spectrum-web-components/truncated Minor
@spectrum-web-components/action-group Minor
@spectrum-web-components/action-menu Minor
@spectrum-web-components/combobox Minor
@spectrum-web-components/contextual-help Minor
@spectrum-web-components/menu Minor
@spectrum-web-components/overlay Minor
@spectrum-web-components/tabs Minor
@spectrum-web-components/number-field Minor
@spectrum-web-components/story-decorator Minor
documentation Patch
@spectrum-web-components/slider Minor
@spectrum-web-components/breadcrumbs Minor
@spectrum-web-components/popover Minor
@spectrum-web-components/tooltip Minor
@spectrum-web-components/top-nav Minor
@spectrum-web-components/eslint-plugin Minor
@spectrum-web-components/accordion Minor
@spectrum-web-components/asset Minor
@spectrum-web-components/avatar Minor
@spectrum-web-components/badge Minor
@spectrum-web-components/checkbox Minor
@spectrum-web-components/close-button Minor
@spectrum-web-components/color-area Minor
@spectrum-web-components/color-field Minor
@spectrum-web-components/color-handle Minor
@spectrum-web-components/color-loupe Minor
@spectrum-web-components/color-slider Minor
@spectrum-web-components/color-wheel Minor
@spectrum-web-components/divider Minor
@spectrum-web-components/dropzone Minor
@spectrum-web-components/field-group Minor
@spectrum-web-components/field-label Minor
@spectrum-web-components/help-text Minor
@spectrum-web-components/icon Minor
@spectrum-web-components/icons-ui Minor
@spectrum-web-components/icons-workflow Minor
@spectrum-web-components/icons Minor
@spectrum-web-components/iconset Minor
@spectrum-web-components/link Minor
@spectrum-web-components/meter Minor
@spectrum-web-components/modal Minor
@spectrum-web-components/progress-bar Minor
@spectrum-web-components/progress-circle Minor
@spectrum-web-components/radio Minor
@spectrum-web-components/sidenav Minor
@spectrum-web-components/split-view Minor
@spectrum-web-components/status-light Minor
@spectrum-web-components/swatch Minor
@spectrum-web-components/switch Minor
@spectrum-web-components/table Minor
@spectrum-web-components/textfield Minor
@spectrum-web-components/thumbnail Minor
@spectrum-web-components/tray Minor
@spectrum-web-components/underlay Minor
@spectrum-web-components/base Minor
@spectrum-web-components/grid Minor
@spectrum-web-components/opacity-checkerboard Minor
@spectrum-web-components/reactive-controllers Minor
@spectrum-web-components/shared Minor

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

Copy link

github-actions bot commented Apr 2, 2025

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

Copy link

github-actions bot commented Apr 2, 2025

Tachometer results

Chrome

button permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 501 kB 49.98ms - 50.91ms - faster ✔
7% - 10%
3.68ms - 5.36ms
branch 476 kB 54.26ms - 55.66ms slower ❌
7% - 11%
3.68ms - 5.36ms
-
Firefox

button permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 501 kB 116.92ms - 122.56ms - unsure 🔍
-5% - +1%
-6.16ms - +0.76ms
branch 476 kB 120.44ms - 124.44ms unsure 🔍
-1% - +5%
-0.76ms - +6.16ms
-

@renovate renovate bot force-pushed the renovate/spectrum-css-clearbutton-7.x branch from 5bfb3f3 to 7ae6c7e Compare April 2, 2025 21:00
@castastrophe castastrophe force-pushed the renovate/spectrum-css-clearbutton-7.x branch from 7ae6c7e to b162585 Compare April 2, 2025 21:40
Copy link
Contributor Author

renovate bot commented Apr 2, 2025

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠️ Warning: custom changes will be lost.

@castastrophe castastrophe force-pushed the renovate/spectrum-css-clearbutton-7.x branch 2 times, most recently from 94e30d0 to 81a0736 Compare April 4, 2025 15:08
@castastrophe castastrophe force-pushed the renovate/spectrum-css-clearbutton-7.x branch 2 times, most recently from 6f55396 to eb41ccc Compare April 11, 2025 18:01
@castastrophe castastrophe force-pushed the renovate/spectrum-css-clearbutton-7.x branch 3 times, most recently from d20ef41 to 4eea58d Compare April 23, 2025 16:30
@castastrophe castastrophe force-pushed the renovate/spectrum-css-clearbutton-7.x branch 2 times, most recently from 4b90709 to c4432c9 Compare April 25, 2025 22:26
@castastrophe castastrophe force-pushed the renovate/spectrum-css-clearbutton-7.x branch 2 times, most recently from 28c36a3 to 2a416d6 Compare May 6, 2025 13:58
@castastrophe
Copy link
Contributor

Work represented in SWC-860

@castastrophe castastrophe self-assigned this May 6, 2025
@castastrophe castastrophe force-pushed the renovate/spectrum-css-clearbutton-7.x branch from 2a416d6 to 2f04894 Compare May 6, 2025 14:16
@castastrophe castastrophe force-pushed the renovate/spectrum-css-clearbutton-7.x branch 2 times, most recently from 8b98d85 to 5a9adf8 Compare May 6, 2025 19:40
@castastrophe castastrophe force-pushed the renovate/spectrum-css-clearbutton-7.x branch 4 times, most recently from d981956 to d316716 Compare June 12, 2025 15:14
@castastrophe castastrophe force-pushed the renovate/spectrum-css-clearbutton-7.x branch 8 times, most recently from fa996c5 to 8ade2a3 Compare June 19, 2025 15:26
@Rajdeepc
Copy link
Contributor

I am not sure if this should be feat?

@castastrophe
Copy link
Contributor

I am not sure if this should be feat?

It adds 2 new attributes: [quiet] and [static-color="white"]

You can find more details in my changeset description.

@castastrophe castastrophe force-pushed the renovate/spectrum-css-clearbutton-7.x branch from 8ade2a3 to 5b43912 Compare June 19, 2025 15:46
*/
@property({ reflect: true })
public variant: 'overBackground' | '' = '';
public set variant(variant: 'overBackground' | undefined) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rubencarvalho @nikkimk If you have a chance, do you know if there's a more efficient or "lit-ified" way to handle this backwards compatibility?

@castastrophe castastrophe enabled auto-merge (squash) June 19, 2025 18:14
@castastrophe castastrophe added ready-for-review enhancement New feature or request Component: Button deprecation in-review Label to trigger PR auto Update from main and removed on hold labels Jun 19, 2025
@caseyisonit caseyisonit changed the title feat(button,clear-button): updated styles and deprecated overBackground variant [SWC-860] - abandoned feat(button,clear-button): updated styles and deprecated overBackground variant [SWC-860] Jun 20, 2025
@renovate renovate bot changed the title feat(button,clear-button): updated styles and deprecated overBackground variant [SWC-860] feat(button,clear-button): updated styles and deprecated overBackground variant [SWC-860] - abandoned Jun 20, 2025
@castastrophe castastrophe force-pushed the renovate/spectrum-css-clearbutton-7.x branch from 5b43912 to 8067e22 Compare June 23, 2025 21:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Button deprecation enhancement New feature or request in-review Label to trigger PR auto Update from main ready-for-review Spectrum CSS
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants