Skip to content

feat(backgroundlayers): class based implementation [CSS-1268] #2368

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.

Sign up for GitHub

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

Jump to bottom
Draft
wants to merge 1 commit into
base: spectrum-two
Choose a base branch
from
Draft

feat(backgroundlayers): class based implementation [CSS-1268] #2368

wants to merge 1 commit into from
+230 −3

Conversation

jenndiaz
Copy link
Contributor

@jenndiaz jenndiaz commented Dec 13, 2023 •
edited
Loading

Description

Creates utility classes which can be used by adding background layers to the dependencies for the component and then using the classes where needed.

Changes:

  • Created a utility like "component" for background layers. This should eventually live in it's own section of the docs site. I didn't focus too much on navigation for the docs site or editing the nav.pug file.
  • index.css has classes for each of the layers specified in the specs for background layers which can be used directly
  • class names intentionally include the context it should be used in, editting vs browsing
  • In storybook background layers is in it's own section "utility classes"

View Comments from previous branch for background layers that is now closed: #2274

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

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  • The pages render correctly, are accessible, and are responsive.
  1. If components have been modified, VRTs have been run on this branch:
  • VRTs have been run and looked at.
  • Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

  • I have read the contribution guidelines.
  • I have updated relevant storybook stories and templates.
  • I have tested these changes in Windows High Contrast mode.
  • If my change impacts other components, I have tested to make sure they don't break.
  • If my change impacts documentation, I have updated the documentation accordingly.
  • ✨ This pull request is ready to merge. ✨

@jenndiaz jenndiaz force-pushed the background-layers-class-based-approach branch from 61a87a1 to c9dadf3 Compare January 10, 2024 18:58
@pfulton pfulton force-pushed the spectrum-two branch 2 times, most recently from d2ac17c to b2fee42 Compare January 11, 2024 14:31
@pfulton pfulton force-pushed the spectrum-two branch 4 times, most recently from 31afc05 to 909f232 Compare January 22, 2024 20:15
@pfulton pfulton force-pushed the spectrum-two branch 3 times, most recently from 9a01c5a to 1b959b3 Compare February 5, 2024 21:12
@pfulton pfulton force-pushed the spectrum-two branch 2 times, most recently from 98335ab to fec70b3 Compare February 26, 2024 19:47
@pfulton pfulton force-pushed the spectrum-two branch 2 times, most recently from 7c86724 to 0a218bc Compare March 28, 2024 14:22
@castastrophe castastrophe force-pushed the spectrum-two branch 5 times, most recently from 0f20c5b to 9ff2a2c Compare April 5, 2024 14:36
@pfulton pfulton force-pushed the spectrum-two branch 2 times, most recently from e03868f to b3b3aa5 Compare April 15, 2024 19:32
@pfulton pfulton force-pushed the spectrum-two branch 2 times, most recently from f3dd9ff to 9931a8e Compare April 19, 2024 18:22
@castastrophe castastrophe force-pushed the spectrum-two branch 3 times, most recently from 905c91b to 8f768fd Compare April 26, 2024 16:34
@castastrophe castastrophe force-pushed the spectrum-two branch 2 times, most recently from dee81f5 to ce2f3e0 Compare February 11, 2025 19:53
@castastrophe castastrophe force-pushed the spectrum-two branch 6 times, most recently from 3499231 to ad861d0 Compare February 25, 2025 20:24
@castastrophe castastrophe force-pushed the spectrum-two branch 3 times, most recently from 7e8269c to 4ce8d19 Compare May 5, 2025 21:18
@castastrophe castastrophe force-pushed the background-layers-class-based-approach branch 2 times, most recently from 8a0bac8 to 8cdffb5 Compare August 25, 2025 13:08
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Aug 25, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: b6ab87c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@castastrophe castastrophe force-pushed the background-layers-class-based-approach branch 3 times, most recently from 6922285 to feb718e Compare August 25, 2025 13:14
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Aug 25, 2025 •
edited
Loading

📚 Branch preview

PR #2368 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-2368/index.html.

github-actions[bot]
github-actions bot reviewed Aug 25, 2025
View reviewed changes
Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

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

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

eslint

⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.

spectrum-css/components/backgroundlayers/stories/template.js

Line 10 in feb718e

id,

🚫 [eslint] <no-unused-vars> reported by reviewdog 🐶
'id' is defined but never used.

spectrum-css/components/backgroundlayers/stories/template.js

Line 10 in feb718e

id,

⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.

spectrum-css/components/backgroundlayers/stories/template.js

Line 11 in feb718e

customClasses = [],

⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.

spectrum-css/components/backgroundlayers/stories/template.js

Line 13 in feb718e

return html`

components/backgroundlayers/stories/backgroundlayers.stories.js Outdated
@@ -0,0 +1,69 @@
import { Template } from "./template";
import { html } from 'lit';
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] <quotes> reported by reviewdog 🐶
Strings must use doublequote.

Suggested change
import { html } from 'lit';
import { html } from "lit";

components/backgroundlayers/stories/backgroundlayers.stories.js Outdated
import { html } from 'lit';

export default {
title: "UtilityClasses/Background layers",
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.

Suggested change
title: "UtilityClasses/Background layers",
title: "UtilityClasses/Background layers",

components/backgroundlayers/stories/backgroundlayers.stories.js Outdated

export default {
title: "UtilityClasses/Background layers",
description: "The background layers is a series of classes used to style background layers.",
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.

Suggested change
description: "The background layers is a series of classes used to style background layers.",
description: "The background layers is a series of classes used to style background layers.",

components/backgroundlayers/stories/backgroundlayers.stories.js Outdated
export default {
title: "UtilityClasses/Background layers",
description: "The background layers is a series of classes used to style background layers.",
component: "BackgroundLayers",
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.

Suggested change
component: "BackgroundLayers",
component: "BackgroundLayers",

components/backgroundlayers/stories/backgroundlayers.stories.js Outdated
title: "UtilityClasses/Background layers",
description: "The background layers is a series of classes used to style background layers.",
component: "BackgroundLayers",
argTypes: {},
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.

Suggested change
argTypes: {},
argTypes: {},

components/backgroundlayers/stories/template.js Outdated
@@ -0,0 +1,22 @@
import { html } from 'lit';
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] <quotes> reported by reviewdog 🐶
Strings must use doublequote.

Suggested change
import { html } from 'lit';
import { html } from "lit";

components/backgroundlayers/stories/template.js Outdated
@@ -0,0 +1,22 @@
import { html } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] <quotes> reported by reviewdog 🐶
Strings must use doublequote.

Suggested change
import { classMap } from 'lit/directives/class-map.js';
import { classMap } from "lit/directives/class-map.js";

components/backgroundlayers/stories/template.js Outdated
import "../index.css";

export const Template = ({
rootClass = "spectrum-BackgroundLayers",
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.

Suggested change
rootClass = "spectrum-BackgroundLayers",
rootClass = "spectrum-BackgroundLayers",

components/backgroundlayers/stories/template.js Outdated

export const Template = ({
rootClass = "spectrum-BackgroundLayers",
style,
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.

Suggested change
style,
style,

components/backgroundlayers/stories/template.js Outdated
export const Template = ({
rootClass = "spectrum-BackgroundLayers",
style,
layer,
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.

Suggested change
layer,
layer,

github-actions[bot]
github-actions bot reviewed Aug 25, 2025
View reviewed changes
components/backgroundlayers/stories/template.js Outdated
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ [eslint] <semi> reported by reviewdog 🐶
Missing semicolon.

https://github.com/adobe/spectrum-css/blob/feb718eb5cac61d229cf96b6a5794bafb26d9331/components/backgroundlayers/stories/template.js#L22-L23

@castastrophe castastrophe changed the title feat(backgroundlayers): class based implementation feat(backgroundlayers): class based implementation [CSS-1268] Aug 25, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Aug 25, 2025 •
edited
Loading

File metrics

Summary

Total size: 1.43 MB*

🎉 No changes detected in any packages

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

@castastrophe castastrophe force-pushed the background-layers-class-based-approach branch 6 times, most recently from 47f9fc8 to efc91bf Compare August 25, 2025 15:13
@castastrophe castastrophe force-pushed the background-layers-class-based-approach branch from efc91bf to b6ab87c Compare August 25, 2025 15:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@jenndiaz @castastrophe