feat(backgroundlayers): class based implementation #2274

jenndiaz · 2023-11-09T00:05:23Z

Description

Experimental PR to look at adding Background Layers

This approach 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.
This "component" has classes for each of the layers specified in the specs for background layers which can be used directly; spectrum-BackgroundLayers--elevated, spectrum-BackgroundLayers--layer2, spectrum-BackgroundLayers--layer1, spectrum-BackgroundLayers--pasteboard, and spectrum-BackgroundLayers--base
this allows these classes to be used by including it in the dependencies for the component where you intend to use it
For an example look at Alert Dialog
In storybook background layers is in it's own section "utility classes"

Look at the docs site for Alert Dialog to see the elevated class in use

Storybook

github-actions · 2023-11-09T17:41:33Z

🚀 Deployed on https://pr-2274--spectrum-css.netlify.app

jenndiaz · 2023-11-09T17:44:37Z

components/backgroundlayers/index.css

+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.


I'm intentionally using a bit of a different structure to the css here so that you can access these by just using one class spectrum-BackgroundLayers--elevated instead of spectrum-BackgroundLayers spectrum-BackgroundLayers--elevated

I am also doing a bit of hard coding, the border color, drop shadow, and dark colors, these would need to replaced with tokens.

jenndiaz · 2023-11-09T17:49:16Z

components/backgroundlayers/metadata/backgroundlayers.yml

+    name: Browsing Contexts
+    markup: |
+      <div class="spectrum-Examples" style="justify-content: flex-start; position: relative; height: 150px;">
+        <div class="spectrum-BackgroundLayers--elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 4;">


using inline styling here to keep these out of the classes

Yep that seems like the right move 👍

mdt2

I really like the direction you're headed with this. I left some typo nitpicks and I think we should consider how we want to document this utility class idea moving forward. I like the choice to use only one class (vs like spectrum-BackgroundLayers spectrum-BackgroundLayers--elevated).

To your question:

Should the border radius and border come with this or is that going to vary based on implementation?

From a dev perspective we can probably include them and consumers can adjust with --mods if they need to. I'm interested in thoughts on this from a design perspective as well...but I think the designs for this may be finalized? Which makes me think that as of right now that's the only spec that'll be carried forward

mdt2 · 2023-11-09T18:35:40Z

components/backgroundlayers/README.md

@@ -0,0 +1,7 @@
+# @spectrum-css/backgroundlayers


We're sort of undecided about documentation moving forward (re: migration guidelines convo) but this might be a good place for now to document this class system once we get to a more final place with it... I also think we need documentation in Storybook and the docs site so maybe we can do some brainstorming about what that looks like. Docs site might be more straightforward than Storybook

I did add some documentation to the readme. I'd agree that there is opportunity to keep brain storming what we want documentation to look like.

mdt2 · 2023-11-09T18:37:27Z

components/backgroundlayers/metadata/backgroundlayers.yml

+    name: Browsing Contexts
+    markup: |
+      <div class="spectrum-Examples" style="justify-content: flex-start; position: relative; height: 150px;">
+        <div class="spectrum-BackgroundLayers--elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 4;">


Yep that seems like the right move 👍

components/backgroundlayers/metadata/backgroundlayers.yml

mdt2 · 2023-11-09T18:39:10Z

components/tokens/package.json

@@ -27,7 +27,7 @@
    "format:results": "prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --loglevel silent --write dist/"
  },
  "devDependencies": {
-    "@adobe/spectrum-tokens": "12.22.1",
+    "@adobe/spectrum-tokens": "0.0.0-s2-20230810215532",


Ohh is this so we can use the S2 tokens?

yes, at least for now, I took this from the PR Patrick put up to test the s2 changes

Yep! The one in the diff above is from one of the first snapshots that was released. Garth has also been releasing newer versions against the 13.0.0 number here: https://github.com/adobe/spectrum-tokens/releases - anything that's a beta for 13.0.0 is S2-related.

components/backgroundlayers/stories/backgroundlayers.stories.js

github-actions · 2023-11-16T19:07:18Z

File metrics

Summary

Total size: 4.07 MB^*
Total change (Δ): ⬆ 22.39 KB (0.54%)

Package	Size	Δ
backgroundlayers	-	🚨 deleted, moved, or renamed
modal	5.32 KB	⬆ 0.09 KB
tokens	205.87 KB	🚨 deleted, moved, or renamed

Details

backgroundlayers

File	Size	Base	Δ
Total	2.41 KB	-	⬇ 2.41 KB (100.00%)
index-base.css	2.41 KB	-	⬇ 2.41 KB (100.00%)
index-theme.css	0.59 KB	-	⬇ 0.59 KB (100.00%)
index-vars.css	2.41 KB	-	⬇ 2.41 KB (100.00%)
index.css	2.41 KB	-	⬇ 2.41 KB (100.00%)
themes/express.css	0.59 KB	-	⬇ 0.59 KB (100.00%)
themes/spectrum.css	< 0.01 KB	-	⬇ < 0.01 KB (100.00%)

modal

File	Size	Base	Δ
Total	5.23 KB	5.32 KB	⬆ 0.09 KB (1.64%)
index-base.css	5.23 KB	5.32 KB	⬆ 0.09 KB (1.64%)
index-theme.css	0.59 KB	0.59 KB	-
index-vars.css	5.23 KB	5.32 KB	⬆ 0.09 KB (1.64%)
index.css	5.23 KB	5.32 KB	⬆ 0.09 KB (1.64%)
mods.json	0.49 KB	0.49 KB	-
themes/express.css	0.59 KB	0.59 KB	-
themes/spectrum.css	< 0.01 KB	< 0.01 KB	-

tokens

File	Size	Base	Δ
Total	190.70 KB	205.87 KB	⬆ 15.17 KB (7.96%)
css/dark-vars.css	34.33 KB	25.13 KB	⬇ 9.20 KB (26.79%)
css/express/custom-dark-vars.css	0.61 KB	0.61 KB	-
css/express/custom-darkest-vars.css	0.61 KB	0.61 KB	-
css/express/custom-large-vars.css	0.51 KB	0.51 KB	-
css/express/custom-light-vars.css	0.65 KB	0.65 KB	-
css/express/custom-medium-vars.css	0.49 KB	0.49 KB	-
css/express/custom-vars.css	0.04 KB	0.04 KB	-
css/global-vars.css	45.06 KB	39.57 KB	⬇ 5.49 KB (12.19%)
css/large-vars.css	25.99 KB	25.49 KB	⬇ 0.51 KB (1.92%)
css/light-vars.css	34.35 KB	25.13 KB	⬇ 9.22 KB (26.84%)
css/medium-vars.css	25.92 KB	25.42 KB	⬇ 0.51 KB (1.93%)
css/spectrum/custom-dark-vars.css	3.63 KB	3.63 KB	-
css/spectrum/custom-darkest-vars.css	3.63 KB	3.63 KB	-
css/spectrum/custom-large-vars.css	4.76 KB	4.76 KB	-
css/spectrum/custom-light-vars.css	3.63 KB	3.63 KB	-
css/spectrum/custom-medium-vars.css	5.00 KB	5.00 KB	-
css/spectrum/custom-vars.css	2.10 KB	2.10 KB	-
css/spectrum/global-vars.css	0.15 KB	2.78 KB	⬆ 2.63 KB (1782.12%)
index.css	190.70 KB	205.87 KB	⬆ 15.17 KB (7.96%)

* Size determined by adding together the size of the main file (index.css) for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

jawinn · 2023-11-17T15:24:58Z

components/backgroundlayers/index.css

+	}
+
+	background-color: var(--spectum-backgroundlayers-background-color);
+	filter: drop-shadow(


Is there a benefit to using filter: drop-shadow instead of box-shadow? I am thinking about if the class is ever applied to an image, the shadow will follow the contours of the alpha channel, which may or may not be desirable.

thanks for suggesting this, I've changed it to a box-shadow

BREAKING CHANGE: Merges Express and Spectrum to create Spectrum 2

Includes new color values for Spectrum 2

* fix(stepper): no longer touches InfieldButton classes * fix(stepper): button size + space match infieldbutton spec

jenndiaz added the wip This is a work in progress, don't judge. label Nov 9, 2023

jenndiaz force-pushed the jenndiaz/css-606-background-layers branch from 945e402 to cf92f21 Compare November 9, 2023 17:37

jenndiaz added the do not merge A flag for a branch indicating it should not be merged. label Nov 9, 2023

github-actions bot temporarily deployed to pull request November 9, 2023 17:41 Inactive

jenndiaz commented Nov 9, 2023

View reviewed changes

github-actions bot temporarily deployed to pull request November 9, 2023 17:51 Inactive

mdt2 reviewed Nov 9, 2023

View reviewed changes

github-actions bot temporarily deployed to pull request November 9, 2023 19:44 Inactive

jenndiaz changed the title ~~Jenndiaz/css 606 background layers~~ background layers class based approach Nov 14, 2023

jenndiaz removed the wip This is a work in progress, don't judge. label Nov 14, 2023

jenndiaz force-pushed the jenndiaz/css-606-background-layers branch from ac72ee6 to 67fe7c2 Compare November 16, 2023 18:05

jawinn reviewed Nov 17, 2023

View reviewed changes

pfulton added 2 commits December 11, 2023 15:29

feat!: spectrum 2

54849b2

BREAKING CHANGE: Merges Express and Spectrum to create Spectrum 2

feat(tokens): use 13.0.0-beta.5

5ec70af

Includes new color values for Spectrum 2

jenndiaz force-pushed the jenndiaz/css-606-background-layers branch from 53074ad to 19773dc Compare December 11, 2023 23:21

jenndiaz changed the base branch from main to spectrum-two December 12, 2023 21:59

Melissa Thompson and others added 11 commits December 12, 2023 15:01

fix(stepper): no longer touches InfieldButton classes (#2300)

bff70aa

* fix(stepper): no longer touches InfieldButton classes * fix(stepper): button size + space match infieldbutton spec

feat(backgroundlayers): add as component

5e15717

feat(backroundlayers): display each layer

2e4abb0

feat(backgroundlayers): adds dark values

e061144

feat(backgroundlayers): add to storybook

7f14e4c

refactor(backgroundlayers): cleans up storybook

55ac83f

chore(backgroundlayer): hard code token values

59f4acb

refactor(backgroundlayers): use just 1 class

5fd9d8b

feat(backgroundlayers): demo in alert dialog

e317086

docs(backgroundlayers): style changes

7802815

chore(backgroundlayers): remove mods file

2540c09

jenndiaz added 7 commits December 12, 2023 15:01

fix(backgroundlayers): correct typos

ac1f53f

docs(backgroundlayers): add to readme

416e5ec

fix(backgroundlayers): add border to layer 2

68692ee

chore(backgroundlayers): update to beta release tokens

be53447

fix(backgroundlayers): extra comma in package.json

cdfbd89

chore(backgroundlayers): yarn install

94af888

refactor(backgroundlayers): use box shadow

5d49521

jenndiaz force-pushed the jenndiaz/css-606-background-layers branch from d8e6964 to 5d49521 Compare December 12, 2023 22:09

refactor(backgroundlayers): use context in class names

2b5aa5d

pfulton force-pushed the spectrum-two branch from 5ec70af to c4aa5f5 Compare December 13, 2023 15:52

jenndiaz removed the do not merge A flag for a branch indicating it should not be merged. label Dec 13, 2023

jenndiaz changed the title ~~background layers class based approach~~ feat(backgroundlayers): class based implementation Dec 13, 2023

jenndiaz closed this Dec 13, 2023

jenndiaz mentioned this pull request Jan 11, 2024

feat(backgroundlayers): class based implementation #2368

Draft

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(backgroundlayers): class based implementation #2274

feat(backgroundlayers): class based implementation #2274

jenndiaz commented Nov 9, 2023 •

edited

Loading

github-actions bot commented Nov 9, 2023 •

edited

Loading

jenndiaz Nov 9, 2023 •

edited

Loading

jenndiaz Nov 9, 2023

mdt2 Nov 9, 2023

mdt2 left a comment

mdt2 Nov 9, 2023

jenndiaz Nov 10, 2023

mdt2 Nov 9, 2023

mdt2 Nov 9, 2023

jenndiaz Nov 9, 2023

pfulton Nov 10, 2023

github-actions bot commented Nov 16, 2023 •

edited

Loading

backgroundlayers

modal

tokens

jawinn Nov 17, 2023

jenndiaz Dec 11, 2023

feat(backgroundlayers): class based implementation #2274

feat(backgroundlayers): class based implementation #2274

Conversation

jenndiaz commented Nov 9, 2023 • edited Loading

Description

github-actions bot commented Nov 9, 2023 • edited Loading

jenndiaz Nov 9, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mdt2 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 16, 2023 • edited Loading

File metrics

Summary

backgroundlayers

modal

tokens

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jenndiaz commented Nov 9, 2023 •

edited

Loading

github-actions bot commented Nov 9, 2023 •

edited

Loading

jenndiaz Nov 9, 2023 •

edited

Loading

github-actions bot commented Nov 16, 2023 •

edited

Loading