feat(backgroundlayers): class based implementation #2274
There are no files selected for viewing
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| # @spectrum-css/backgroundlayers | ||
|
|
||
| > The Spectrum CSS background layers is a set of utility classes used to apply Spectrum 2 app framing. Consult design documentation for further usage and infomation. | ||
|
|
||
| To use these classes add the approproate layers and contexts class to the element that the background styling should be applied. Make note of the context when determing the correct class to use. | ||
|
|
||
| Editing Context Classes: | ||
| - `spectrum-BackgroundLayers--elevated` | ||
| - `spectrum-BackgroundLayers--layer2` | ||
| - `spectrum-BackgroundLayers--layer1` | ||
| - `spectrum-BackgroundLayers--pasteboard` | ||
|
|
||
| Browsing Context Classes: | ||
| - `spectrum-BackgroundLayers--elevated` | ||
| - `spectrum-BackgroundLayers--layer1` | ||
| - `spectrum-BackgroundLayers--base` | ||
|
|
||
|
|
||
| This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). | ||
|
|
||
| See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/backgroundlayers). | ||
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| module.exports = require('@spectrum-css/component-builder-simple'); |
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| /*! | ||
| Copyright 2023 Adobe. All rights reserved. | ||
| This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. You may obtain a copy | ||
| of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
|
|
||
| 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. | ||
|
There was a problem hiding this comment. 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 I am also doing a bit of hard coding, the border color, drop shadow, and dark colors, these would need to replaced with tokens. |
||
| */ | ||
|
|
||
| /* for use only in editing contexts */ | ||
| .spectrum-BackgroundLayers-edit-elevated { | ||
| --spectrum-backgroundlayers-background-color: var(--spectrum-gray-25); | ||
| --spectrum-backgroundlayers-shadow-horizontal: 0; | ||
| --spectrum-backgroundlayers-shadow-vertical: 0; | ||
| --spectrum-backgroundlayers-shadow-blur: 5px; | ||
| --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-600); | ||
|
|
||
| .spectrum--dark & { | ||
| --spectrum-backgroundlayers-background-color: var(--spectrum-gray-75); | ||
| --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100); | ||
| } | ||
| background-color: var(--spectrum-backgroundlayers-background-color); | ||
| box-shadow: | ||
| var(--spectrum-backgroundlayers-shadow-horizontal) | ||
| var(--spectrum-backgroundlayers-shadow-vertical) | ||
| var(--spectrum-backgroundlayers-shadow-blur) | ||
| var(--spectrum-backgroundlayers-shadow-color) | ||
| } | ||
|
|
||
| .spectrum-BackgroundLayers--layer2 { | ||
| --spectrum-backgroundlayers-background-color: var(--spectrum-gray-25); | ||
|
|
||
| .spectrum--dark & { | ||
| --spectrum-backgroundlayers-background-color: var(--spectrum-gray-75); | ||
| } | ||
| background-color: var(--spectrum-backgroundlayers-background-color); | ||
| border: 2px solid rgba(180, 180, 180, 25%); | ||
| } | ||
|
|
||
| .spectrum-BackgroundLayers-edit-layer1 { | ||
| --spectrum-backgroundlayers-background-color: var(--spectrum-gray-50); | ||
| background-color: var(--spectrum-backgroundlayers-background-color); | ||
| } | ||
|
|
||
| .spectrum-BackgroundLayers-edit-pasteboard { | ||
| --spectrum-backgroundlayers-background-color: var(--spectrum-gray-100); | ||
|
|
||
| .spectrum--dark & { | ||
| --spectrum-backgroundlayers-background-color: var(--spectrum-gray-25); | ||
| } | ||
| background-color: var(--spectrum-backgroundlayers-background-color); | ||
| } | ||
|
|
||
| /* only used in browsing contexts */ | ||
| .spectrum-BackgroundLayers-browse-elevated { | ||
| --spectrum-backgroundlayers-background-color: var(--spectrum-gray-25); | ||
| --spectrum-backgroundlayers-shadow-horizontal: 0; | ||
| --spectrum-backgroundlayers-shadow-vertical: 0; | ||
| --spectrum-backgroundlayers-shadow-blur: 5px; | ||
| --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-600); | ||
|
|
||
| .spectrum--dark & { | ||
| --spectrum-backgroundlayers-background-color: var(--spectrum-gray-75); | ||
| --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100); | ||
| } | ||
| background-color: var(--spectrum-backgroundlayers-background-color); | ||
| box-shadow: | ||
| var(--spectrum-backgroundlayers-shadow-horizontal) | ||
| var(--spectrum-backgroundlayers-shadow-vertical) | ||
| var(--spectrum-backgroundlayers-shadow-blur) | ||
| var(--spectrum-backgroundlayers-shadow-color) | ||
| } | ||
|
|
||
| .spectrum-BackgroundLayers-browse-layer1 { | ||
| --spectrum-backgroundlayers-background-color: var(--spectrum-gray-50); | ||
| background-color: var(--spectrum-backgroundlayers-background-color); | ||
| } | ||
|
|
||
| .spectrum-BackgroundLayers-browse-base { | ||
| --spectrum-backgroundlayers-background-color: var(--spectrum-gray-25); | ||
| border: 2px solid rgba(180, 180, 180, 25%); | ||
| background-color: var(--spectrum-backgroundlayers-background-color); | ||
| } | ||
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| name: Background layers | ||
| status: Verified | ||
| SpectrumSiteSlug: https://spectrum.adobe.com/page/background-layers/ | ||
| examples: | ||
| - id: backgroundlayers-browsing | ||
| 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;"> | ||
|
There was a problem hiding this comment. using inline styling here to keep these out of the classes There was a problem hiding this comment. Yep that seems like the right move 👍 |
||
| </div> | ||
| <div class="spectrum-BackgroundLayers--layer2" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 15px; top: 15px; z-index: 3;"> | ||
| </div> | ||
| <div class="spectrum-BackgroundLayers--layer1" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 30px; top: 30px; z-index: 2;"> | ||
| </div> | ||
| <div class="spectrum-BackgroundLayers--pasteboard" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 40px; top: 40px; z-index: 1;"> | ||
| </div> | ||
| </div> | ||
| - id: backgroundlayers-editing | ||
| name: Editing 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: 3;"> | ||
| </div> | ||
| <div class="spectrum-BackgroundLayers--layer1" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 15px; top: 15px; z-index: 2;"> | ||
| </div> | ||
| <div class="spectrum-BackgroundLayers--base" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 20px; top: 20px; z-index: 1;"> | ||
| </div> | ||
| </div> | ||
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| { | ||
| "name": "@spectrum-css/backgroundlayers", | ||
| "version": "1.0.0-alpha.0", | ||
| "description": "The Spectrum CSS backgroundlayers component", | ||
| "license": "Apache-2.0", | ||
| "author": "Adobe", | ||
| "homepage": "https://opensource.adobe.com/spectrum-css/", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/adobe/spectrum-css.git", | ||
| "directory": "components/backgroundlayers" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/adobe/spectrum-css/issues" | ||
| }, | ||
| "main": "dist/index-vars.css", | ||
| "scripts": { | ||
| "build": "gulp", | ||
| "clean": "rimraf dist", | ||
| "test": "nx test:scope @spectrum-css/preview backgroundlayers" | ||
| }, | ||
| "peerDependencies": { | ||
| "@spectrum-css/tokens": ">=12" | ||
| }, | ||
| "devDependencies": { | ||
| "@spectrum-css/component-builder-simple": "^2.0.17", | ||
| "@spectrum-css/tokens": "^12.0.0", | ||
| "gulp": "^4.0.0", | ||
| "nx": "^17.0.3", | ||
| "rimraf": "^5.0.1" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| } | ||
| } |
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { Template } from "./template"; | ||
| import { html } from 'lit'; | ||
|
|
||
| export default { | ||
| title: "UtilityClasses/Background layers", | ||
| description: "The background layers is a series of classes used to style background layers.", | ||
| component: "BackgroundLayers", | ||
| argTypes: {}, | ||
| args: { | ||
| rootClass: "spectrum-BackgroundLayers", | ||
| }, | ||
| parameters: { | ||
| actions: { | ||
| handles: [] | ||
| }, | ||
| status: { | ||
| type: process.env.MIGRATED_PACKAGES.includes('backgroundlayers') ? 'migrated' : undefined | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| const EditingContext = ({ | ||
| }) => { | ||
| return html` | ||
| <div style="display: flex; justify-content: flex-start; position: relative; block-size: 150px;"> | ||
| ${Template({ | ||
| style: "z-index: 4; inset-inline-start: 10px; inset-block-start: 10px;", | ||
| layer: 'elevated', | ||
| })} | ||
| ${Template({ | ||
| style: "z-index: 3; inset-inline-start: 20px; inset-block-start: 20px;", | ||
| layer: 'layer2', | ||
| })} | ||
| ${Template({ | ||
| style: "z-index: 2; inset-inline-start: 30px; inset-block-start: 30px;", | ||
| layer: 'layer1', | ||
| })} | ||
| ${Template({ | ||
| style: "z-index: 1; inset-inline-start: 40px; inset-block-start: 40px;", | ||
| layer: "pasteboard", | ||
| })} | ||
| </div> | ||
| `; | ||
| }; | ||
|
|
||
| const BrowsingContext = ({ | ||
| }) => { | ||
| return html` | ||
| <div style="display: flex; justify-content: flex-start; position: relative; block-size: 150px;"> | ||
| ${Template({ | ||
| style: "z-index: 3; inset-inline-start: 10px; inset-block-start: 10px;", | ||
| layer: 'elevated', | ||
| })} | ||
| ${Template({ | ||
| style: "z-index: 2; inset-inline-start: 20px; inset-block-start: 20px;", | ||
| layer: 'layer1', | ||
| })} | ||
| ${Template({ | ||
| style: "z-index: 1; inset-inline-start: 30px; inset-block-start: 30px;", | ||
| layer: "base", | ||
| })} | ||
| </div> | ||
| `; | ||
| }; | ||
| export const Editing = EditingContext.bind({}); | ||
| Editing.args = {}; | ||
|
|
||
| export const Browsing = BrowsingContext.bind({}); | ||
| Browsing.args = {}; |
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { html } from 'lit'; | ||
| import { classMap } from 'lit/directives/class-map.js'; | ||
|
|
||
| import "../index.css"; | ||
|
|
||
| export const Template = ({ | ||
| rootClass = "spectrum-BackgroundLayers", | ||
| style, | ||
| layer, | ||
| id, | ||
| customClasses = [], | ||
| }) => { | ||
| return html` | ||
| <div class=${classMap({ | ||
| [rootClass]: true, | ||
| [`${rootClass}--${layer}`]: true, | ||
| ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), | ||
| })} | ||
| style="${style} inline-size: 150px; block-size: 150px; border-radius: 10px; position: absolute;"> | ||
| </div> | ||
| `; | ||
| } |
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| /*! | ||
| Copyright 2023 Adobe. All rights reserved. | ||
| This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. You may obtain a copy | ||
| of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
|
|
||
| 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. | ||
| */ | ||
|
|
||
| @container (--system: express) {} |
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| /*! | ||
| Copyright 2023 Adobe. All rights reserved. | ||
| This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. You may obtain a copy | ||
| of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| 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. | ||
| */ | ||
|
|
||
| @container (--system: spectrum) {} |
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.