Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@spectrum-css/swatch
Advanced tools
@spectrum-css/swatch - npm Package Compare versions
Comparing version 6.2.2 to 6.3.0
| # Change Log | ||
| ## 6.3.0 | ||
| ### Minor Changes | ||
| - [#3253](https://github.com/adobe/spectrum-css/pull/3253) [`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86) Thanks [@castastrophe](https://github.com/castastrophe)! - This update removes tokens defined locally that belonged in the global scope. To ensure no regressions, please upgrade your @spectrum-css/tokens package at the same time so you will pick up the component-level definitions now in the global tokens scope. References to `.spectrum--(light|dark|darkest|medium|large)` have been removed. | ||
| ### Patch Changes | ||
| - Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]: | ||
| - @spectrum-css/tokens@14.5.0 | ||
| ## 6.2.2 | ||
@@ -4,0 +15,0 @@ |
| { | ||
| "sourceFile": "index.css", | ||
| "selectors": [ | ||
| ".spectrum--dark .spectrum-Swatch", | ||
| ".spectrum--darkest .spectrum-Swatch", | ||
| ".spectrum--light .spectrum-Swatch", | ||
| ".spectrum-Swatch", | ||
@@ -8,0 +5,0 @@ ".spectrum-Swatch .spectrum-Swatch-disabledIcon", |
| { | ||
| "name": "@spectrum-css/swatch", | ||
| "version": "6.2.2", | ||
| "version": "6.3.0", | ||
| "description": "The Spectrum CSS Color swatch component", | ||
@@ -37,3 +37,3 @@ "license": "Apache-2.0", | ||
| "@spectrum-css/opacitycheckerboard": ">=2", | ||
| "@spectrum-css/tokens": ">=14" | ||
| "@spectrum-css/tokens": ">=14.5.0" | ||
| }, | ||
@@ -52,3 +52,9 @@ "devDependencies": { | ||
| "access": "public" | ||
| } | ||
| }, | ||
| "spectrum": [ | ||
| { | ||
| "guidelines": "https://spectrum.adobe.com/page/swatch", | ||
| "rootClass": "spectrum-Swatch" | ||
| } | ||
| ] | ||
| } |
@@ -0,8 +1,15 @@ | ||
| import { Sizes } from "@spectrum-css/preview/decorators"; | ||
| import { disableDefaultModes } from "@spectrum-css/preview/modes"; | ||
| import { isDisabled, isSelected, size } from "@spectrum-css/preview/types"; | ||
| import pkgJson from "../package.json"; | ||
| import metadata from "../metadata/metadata.json"; | ||
| import packageJson from "../package.json"; | ||
| import { SwatchGroup } from "./swatch.test.js"; | ||
| import { BorderGroup, DisabledGroup, EmptyGroup, RoundingGroup, SizingGroup, Template } from "./template.js"; | ||
| /** | ||
| * A swatch shows a small sample of a fill--such as a color, gradient, texture, or material--that is intended to be applied to an object. | ||
| * | ||
| * ## Usage notes | ||
| * | ||
| * Set `--spectrum-picked-color` to customize the swatch fill background color. | ||
| */ | ||
@@ -25,2 +32,4 @@ export default { | ||
| name: "Rounding", | ||
| description: "The amount of corner rounding for a swatch.", | ||
| defaultValue: "regular", | ||
| type: { name: "string" }, | ||
@@ -30,2 +39,3 @@ table: { | ||
| category: "Component", | ||
| defaultValue: { summary: "regular", }, | ||
| }, | ||
@@ -37,2 +47,55 @@ options: ["none", "regular", "full"], | ||
| isSelected, | ||
| borderStyle: { | ||
| name: "Border style", | ||
| type: { name: "string" }, | ||
| table: { | ||
| type: { summary: "string", required: true }, | ||
| category: "Component", | ||
| }, | ||
| options: ["default", "none", "light"], | ||
| control: "select", | ||
| }, | ||
| shape: { | ||
| name: "Swatch shape", | ||
| description: "Swatches can have a square or rectangle shape.", | ||
| defaultValue: "square", | ||
| type: { name: "string" }, | ||
| table: { | ||
| type: { summary: "string" }, | ||
| category: "Component", | ||
| defaultValue: { summary: "square", }, | ||
| }, | ||
| options: ["square", "rectangle"], | ||
| control: "inline-radio", | ||
| }, | ||
| imageUrl: { | ||
| name: "Image url", | ||
| description: "The image preview within the swatch.", | ||
| type: { name: "string" }, | ||
| table: { | ||
| type: { summary: "string" }, | ||
| category: "Content", | ||
| }, | ||
| control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" }, | ||
| }, | ||
| gradient: { | ||
| name: "Gradient", | ||
| description: "The gradient preview within the swatch. Input a gradient example, such as <code>linear-gradient(red, blue)</code>.", | ||
| type: { name: "string" }, | ||
| table: { | ||
| type: { summary: "string" }, | ||
| category: "Component", | ||
| }, | ||
| control: "text", | ||
| }, | ||
| isMixedValue: { | ||
| name: "Mixed value", | ||
| description: "A swatch that represents multiple values that are not identical.", | ||
| type: { name: "boolean" }, | ||
| table: { | ||
| type: { summary: "boolean" }, | ||
| category: "Component", | ||
| }, | ||
| control: "boolean", | ||
| }, | ||
| }, | ||
@@ -45,12 +108,144 @@ args: { | ||
| rounding: "regular", | ||
| swatchColor: "rgb(174, 216, 230)" | ||
| swatchColor: "rgb(174, 216, 230)", | ||
| borderStyle: "default", | ||
| shape: "square", | ||
| isMixedValue: false, | ||
| }, | ||
| parameters: { | ||
| packageJson: pkgJson, | ||
| packageJson, | ||
| metadata, | ||
| }, | ||
| }; | ||
| /** | ||
| * The medium size is the default and most frequently used option. By default, a swatch has a square shape. | ||
| */ | ||
| export const Default = SwatchGroup.bind({}); | ||
| Default.args = {}; | ||
| // ********* DOCS ONLY ********* // | ||
| /** | ||
| * The medium size is the default. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page. | ||
| */ | ||
| export const Sizing = (args, context) => Sizes({ | ||
| Template: SizingGroup, | ||
| withHeading: false, | ||
| ...args, | ||
| }, context); | ||
| Sizing.tags = ["!dev"]; | ||
| Sizing.parameters = { | ||
| chromatic: { disableSnapshot: true }, | ||
| }; | ||
| /** | ||
| * A swatch in a disabled state shows that the swatch exists, but is not available in that circumstance. Even though swatches can have a disabled state, hide unavailable swatches when possible to reduce visual clutter and ease cognitive load. Only show disabled swatches if hiding them would cause confusion to your users. | ||
| */ | ||
| export const Disabled = (args, context) => Sizes({ | ||
| Template: DisabledGroup, | ||
| withHeading: false, | ||
| ...args, | ||
| }, context); | ||
| Disabled.args = { | ||
| isDisabled: true, | ||
| }; | ||
| Disabled.tags = ["!dev"]; | ||
| Disabled.parameters = { | ||
| chromatic: { disableSnapshot: true }, | ||
| }; | ||
| /** | ||
| * Default rounding and full rounding are usually used when a swatch is presented by itself near other components. A rounding of “none” is used in a swatch group to help minimize the Hermann grid illusion that happens at the intersections of white space in the group. | ||
| */ | ||
| export const Rounding = RoundingGroup.bind({}); | ||
| Rounding.tags = ["!dev"]; | ||
| Rounding.args = { | ||
| swatchColor: "rgba(174, 216, 230, 0.25)", | ||
| }; | ||
| Rounding.parameters = { | ||
| chromatic: { disableSnapshot: true }, | ||
| }; | ||
| /** | ||
| * A swatch can have a selected state to allow for selection. This is often used in a [swatch group](?path=/docs/components-swatch-group--docs). | ||
| */ | ||
| export const Selected = Template.bind({}); | ||
| Selected.args = { | ||
| isSelected: true, | ||
| }; | ||
| Selected.tags = ["!dev"]; | ||
| Selected.parameters = { | ||
| chromatic: { disableSnapshot: true }, | ||
| }; | ||
| /** | ||
| * By default, swatches have a border. However, when swatches are used within a swatch group, there are additional border considerations. | ||
| * - When color swatches are used in a [swatch group](?path=/docs/components-swatch-group--docs), they typically have the `.spectrum-Swatch--noBorder` class. | ||
| * - When and only when color swatches used in a swatch group have low contrast (below 3:1 contrast with the background), those swatches will have a less prominent border compared to the swatch component when used by itself. They individually use the `.spectrum-Swatch--lightBorder` class. | ||
| */ | ||
| export const Border = BorderGroup.bind({}); | ||
| Border.tags = ["!dev"]; | ||
| Border.parameters = { | ||
| chromatic: { disableSnapshot: true }, | ||
| }; | ||
| /** | ||
| * Swatches can also have a rectangle shape with an aspect ratio of 2:1. The square shape is the default and is used in swatch groups (e.g., a palette of colors). | ||
| */ | ||
| export const Shape = Template.bind({}); | ||
| Shape.args = { | ||
| shape: "rectangle", | ||
| swatchColor: "rgba(174, 216, 230, 0.25)", | ||
| }; | ||
| Shape.tags = ["!dev"]; | ||
| Shape.parameters = { | ||
| chromatic: { disableSnapshot: true }, | ||
| }; | ||
| Shape.storyName = "Shape - rectangle"; | ||
| /** | ||
| * A swatch will appear "empty" when its preview is undefined, for instance when the image or gradient is undefined, or when a swatch color is transparent. The `.is-nothing` class is applied to the swatch in these cases. Implementations should ensure that the default border style is applied when a swatch is empty. | ||
| */ | ||
| export const Empty = (args, context) => Sizes({ | ||
| Template: EmptyGroup, | ||
| withHeading: false, | ||
| ...args, | ||
| }, context); | ||
| Empty.args = { | ||
| swatchColor: "transparent", | ||
| }; | ||
| Empty.tags = ["!dev"]; | ||
| Empty.parameters = { | ||
| chromatic: { disableSnapshot: true }, | ||
| }; | ||
| /** | ||
| * When a swatch represents multiple values that are not identical, the preview shows a `gray-50` fill and a dash UI icon. | ||
| */ | ||
| export const MixedValue = Template.bind({}); | ||
| MixedValue.args = { | ||
| isMixedValue: true, | ||
| }; | ||
| MixedValue.tags = ["!dev"]; | ||
| MixedValue.parameters = { | ||
| chromatic: { disableSnapshot: true }, | ||
| }; | ||
| export const Gradient = Template.bind({}); | ||
| Gradient.args = { | ||
| gradient: "linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)", | ||
| }; | ||
| Gradient.tags = ["!dev"]; | ||
| Gradient.parameters = { | ||
| chromatic: { disableSnapshot: true }, | ||
| }; | ||
| export const Image = Template.bind({}); | ||
| Image.args = { | ||
| imageUrl: "example-ava@2x.png", | ||
| }; | ||
| Image.tags = ["!dev"]; | ||
| Image.parameters = { | ||
| chromatic: { disableSnapshot: true }, | ||
| }; | ||
| // ********* VRT ONLY ********* // | ||
@@ -57,0 +252,0 @@ export const WithForcedColors = SwatchGroup.bind({}); |
@@ -22,9 +22,43 @@ import { Variants } from "@spectrum-css/preview/decorators"; | ||
| }, | ||
| { | ||
| testHeading: "Light border", | ||
| borderStyle: "lightBorder", | ||
| }, | ||
| { | ||
| testHeading: "No border", | ||
| borderStyle: "noBorder", | ||
| rounding: "none", | ||
| }, | ||
| { | ||
| testHeading: "Shape: rectangle", | ||
| shape: "rectangle", | ||
| }, | ||
| { | ||
| testHeading: "Gradient", | ||
| gradient: "linear-gradient(to right, rgba(0, 0, 0, 88%), rgb(174, 216, 230))", | ||
| swatchColor: "rgba(174, 216, 230, 0.3)", | ||
| }, | ||
| { | ||
| testHeading: "Image", | ||
| imageUrl: "example-ava@2x.png", | ||
| }, | ||
| { | ||
| testHeading: "Mixed value", | ||
| isMixedValue: true, | ||
| }, | ||
| ], | ||
| stateData: [ | ||
| { | ||
| testHeading: "No color", | ||
| swatchColor: undefined | ||
| testHeading: "Disabled", | ||
| isDisabled: true, | ||
| }, | ||
| { | ||
| testHeading: "No color/empty", | ||
| swatchColor: undefined, | ||
| imageUrl: "", | ||
| gradient: "", | ||
| isMixedValue: false, | ||
| borderStyle: "default", | ||
| }, | ||
| { | ||
| testHeading: "Selected", | ||
@@ -31,0 +65,0 @@ isSelected: true, |
| import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; | ||
| import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js"; | ||
| import { getRandomId } from "@spectrum-css/preview/decorators"; | ||
| import { getRandomId, Container } from "@spectrum-css/preview/decorators"; | ||
| import { html } from "lit"; | ||
@@ -9,2 +9,3 @@ import { classMap } from "lit/directives/class-map.js"; | ||
| import { capitalize, lowerCase } from "lodash-es"; | ||
| import { when } from "lit/directives/when.js"; | ||
@@ -16,2 +17,7 @@ import "../index.css"; | ||
| size = "m", | ||
| borderStyle = "default", | ||
| shape = "square", | ||
| imageUrl, | ||
| gradient, | ||
| isMixedValue = false, | ||
| isSelected = false, | ||
@@ -27,2 +33,11 @@ isDisabled = false, | ||
| switch (borderStyle) { | ||
| case "none": | ||
| borderStyle = "noBorder"; | ||
| break; | ||
| case "light": | ||
| borderStyle = "lightBorder"; | ||
| break; | ||
| } | ||
| return html` | ||
@@ -37,4 +52,8 @@ <div | ||
| )}`]: typeof rounding !== "undefined" && rounding !== "regular", | ||
| [`${rootClass}--${borderStyle}`]: typeof borderStyle !== "undefined" && borderStyle !== "default", | ||
| "is-selected": !isDisabled && isSelected, | ||
| "is-disabled": isDisabled, | ||
| "is-image": (["undefined", "transparent"].every(g => typeof gradient !== g)) || isMixedValue || typeof imageUrl !== "undefined", | ||
| "is-mixedValue": !isDisabled && isMixedValue, | ||
| [`${rootClass}--rectangle`]: typeof shape !== "undefined" && shape !== "square", | ||
| "is-nothing": !isDisabled && (typeof swatchColor === "undefined" || swatchColor === "transparent"), | ||
@@ -46,3 +65,3 @@ ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), | ||
| style=${ifDefined(styleMap({ | ||
| "--spectrum-picked-color": swatchColor, | ||
| "--spectrum-picked-color": isMixedValue ? "var(--spectrum-gray-50)" : swatchColor, | ||
| ...customStyles, | ||
@@ -62,14 +81,141 @@ }))} | ||
| > | ||
| ${OpacityCheckerboard({ | ||
| customClasses: [`${rootClass}-fill`], | ||
| content: [ | ||
| ...(isDisabled ? [Icon({ | ||
| customClasses: [`${rootClass}-disabledIcon`], | ||
| setName: "workflow", | ||
| iconName: "Cancel", | ||
| }, context)] : []), | ||
| ] | ||
| }, context)} | ||
| </div> | ||
| ${when((typeof imageUrl !== "undefined" || typeof gradient !== "undefined") && !isDisabled && !isMixedValue, () => html` | ||
| ${when(imageUrl, () => html` | ||
| <div class="${rootClass}-fill" > | ||
| <img src="${imageUrl}" alt="" class="${rootClass}-image" /> | ||
| </div> | ||
| `, | ||
| () => html` | ||
| ${OpacityCheckerboard({ | ||
| customClasses: [`${rootClass}-fill`], | ||
| content: [ | ||
| html`<div class='spectrum-Swatch-image' style='background: ${gradient}'></div>` | ||
| ], | ||
| }, context)} | ||
| ` | ||
| )}`, | ||
| () => html` | ||
| ${OpacityCheckerboard({ | ||
| customClasses: [`${rootClass}-fill`], | ||
| content: [ | ||
| ...(isDisabled ? [Icon({ | ||
| customClasses: [`${rootClass}-disabledIcon`], | ||
| setName: "workflow", | ||
| iconName: "Cancel", | ||
| }, context)] : []), | ||
| ...(isMixedValue ? [Icon({ | ||
| customClasses: [`${rootClass}-mixedValueIcon`], | ||
| setName: "ui", | ||
| iconName: "Dash", | ||
| }, context)] : []), | ||
| ] | ||
| })} | ||
| ` | ||
| )} | ||
| `; | ||
| }; | ||
| /* Shows a single group of swatches with all rounding options. */ | ||
| export const RoundingGroup = (args, context) => Container({ | ||
| withBorder: false, | ||
| content: html` | ||
| ${Container({ | ||
| withBorder: false, | ||
| heading: "Regular", | ||
| containerStyles: { "gap": "8px" }, | ||
| content: Template(args, context), | ||
| })} | ||
| ${Container({ | ||
| withBorder: false, | ||
| heading: "Full", | ||
| containerStyles: { "gap": "8px" }, | ||
| content: Template({...args, rounding: "full", }, context), | ||
| })} | ||
| ${Container({ | ||
| withBorder: false, | ||
| heading: "None", | ||
| containerStyles: { "gap": "8px" }, | ||
| content: Template({...args, rounding: "none", }, context), | ||
| })} | ||
| ` | ||
| }); | ||
| /* Shows a single group of swatches with all border options. */ | ||
| export const BorderGroup = (args, context) => Container({ | ||
| withBorder: false, | ||
| content: html` | ||
| ${Container({ | ||
| withBorder: false, | ||
| heading: "Default", | ||
| containerStyles: { "gap": "8px" }, | ||
| content: Template(args, context), | ||
| })} | ||
| ${Container({ | ||
| withBorder: false, | ||
| heading: "No border", | ||
| containerStyles: { "gap": "8px" }, | ||
| content: Template({...args, borderStyle: "noBorder"}, context), | ||
| })} | ||
| ${Container({ | ||
| withBorder: false, | ||
| heading: "Light Border", | ||
| containerStyles: { "gap": "8px" }, | ||
| content: Template({...args, borderStyle: "lightBorder"}, context), | ||
| })} | ||
| ` | ||
| }); | ||
| /* Shows a single group of swatches that are empty/nothing in various shapes and rounding. */ | ||
| export const EmptyGroup = (args, context) => Container({ | ||
| withBorder: false, | ||
| content: html` | ||
| ${Container({ | ||
| withBorder: false, | ||
| containerStyles: { "gap": "8px" }, | ||
| content: Template(args, context), | ||
| })} | ||
| ${Container({ | ||
| withBorder: false, | ||
| containerStyles: { "gap": "8px" }, | ||
| content: Template({...args, rounding: "full", }, context), | ||
| })} | ||
| ${Container({ | ||
| withBorder: false, | ||
| containerStyles: { "gap": "8px" }, | ||
| content: Template({...args, shape: "rectangle", }, context), | ||
| })} | ||
| ` | ||
| }); | ||
| /* Shows a single group of disabled swatches. */ | ||
| export const DisabledGroup = (args, context) => Container({ | ||
| withBorder: false, | ||
| content: html` | ||
| ${Container({ | ||
| withBorder: false, | ||
| withHeading: false, | ||
| content: Template(args, context), | ||
| })} | ||
| ${Container({ | ||
| withBorder: false, | ||
| withHeading: false, | ||
| content: Template({...args, rounding: "full", }, context), | ||
| })} | ||
| ` | ||
| }); | ||
| export const SizingGroup = (args, context) =>Container({ | ||
| withBorder: false, | ||
| content: html` | ||
| ${Container({ | ||
| withBorder: false, | ||
| withHeading: false, | ||
| content: Template(args, context), | ||
| })} | ||
| ${Container({ | ||
| withBorder: false, | ||
| withHeading: false, | ||
| content: Template({...args, swatchColor: "rgba(174, 216, 230, 0.25)"}, context), | ||
| })} | ||
| ` | ||
| }); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by9.22%
125553
- Lines of code
- increased by31.36%
1374
No dependency changes