diff --git a/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js new file mode 100644 index 00000000000..372879350f5 --- /dev/null +++ b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js @@ -0,0 +1,105 @@ +import { html } from "lit"; +import { Template } from "../../../components/actionbutton/stories/template"; + +export default { + title: "Foundations/Corner rounding", + description: + "The action button component represents an action a user can take.", + component: "ActionButton", + args: { + rootClass: "spectrum-ActionButton", + }, + parameters: { + actions: { + handles: ["click .spectrum-ActionButton:not([disabled])"], + }, + }, + tags: ['foundation'], +}; + +const ActionButton = ({ + ...args +}) => { + return html` +
+ ${Template({ + ...args, + iconName: undefined, + })} +
+ `; +}; + +const ActionButtonTable = ({ ...args }) => { + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueMedium example
--spectrum-corner-radius-medium-size-extra-small6px + ${ActionButton({ + ...args, + label: "Extra Small", + size: "xs" + })} +
--spectrum-corner-radius-medium-size-small7px + ${ActionButton({ + ...args, + label: "Small", + size: "s" + })} +
--spectrum-corner-radius-medium-size-medium8px + ${ActionButton({ + ...args, + label: "Medium", + size: "m" + })} +
--spectrum-corner-radius-medium-size-large9px + ${ActionButton({ + ...args, + label: "Large", + size: "l" + })} +
--spectrum-corner-radius-medium-size-extra-large10px + ${ActionButton({ + ...args, + label: "Extra Large", + size: "xl" + })} +
+ `; +}; + +export const ActionButtonExamples = ActionButtonTable.bind({}); +ActionButtonExamples.args = {}; diff --git a/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js new file mode 100644 index 00000000000..3dad56fd49f --- /dev/null +++ b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js @@ -0,0 +1,97 @@ +// Import the component markup template +import { html } from "lit"; +import { Template } from "../../../components/checkbox/stories/template"; + +export default { + title: "Foundations/Corner rounding", + description: + "Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.", + component: "Checkbox", + args: { + rootClass: "spectrum-Checkbox", + }, + parameters: { + actions: { + handles: ['click input[type="checkbox"]'], + }, + }, + tags: ['foundation'], +}; + +const Checkbox = ({ + customStyles = {}, + isChecked = false, + ...args +}) => { + return html` +
+ ${Template({ + ...args, + iconName: undefined, + })} +
+ `; +}; + +const CheckboxTable = ({...args}) => { + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueSmall example
--spectrum-corner-radius-small-size-small3px + ${Checkbox({ + ...args, + label: "Small", + size: "s" + })} +
--spectrum-corner-radius-small-size-medium4px + ${Checkbox({ + ...args, + label: "Medium", + size: "m" + })} +
--spectrum-corner-radius-small-size-large5px + ${Checkbox({ + ...args, + label: "Large", + size: "l" + })} +
--spectrum-corner-radius-small-size-extra-large6px + ${Checkbox({ + ...args, + label: "Extra Large", + size: "xl" + })} +
+ `; +} + +export const CheckboxExamples = CheckboxTable.bind({}); +CheckboxExamples.args = {}; diff --git a/.storybook/foundations/corner-rounding/component-size-tokens-medium.md b/.storybook/foundations/corner-rounding/component-size-tokens-medium.md new file mode 100644 index 00000000000..2f01b1ba44d --- /dev/null +++ b/.storybook/foundations/corner-rounding/component-size-tokens-medium.md @@ -0,0 +1,7 @@ +| Component size token | Alias token (if available) | Global token | Value | +|---------------------------------------------------|-------------------------------|------------------------------|-------| +| --spectrum-corner-radius-medium-size-extra-small | | --spectrum-corner-radius-300 | 6px | +| --spectrum-corner-radius-medium-size-small | | --spectrum-corner-radius-400 | 7px | +| --spectrum-corner-radius-medium-size-medium | --spectrum-corner-radius-medium-default | --spectrum-corner-radius-500 | 8px | +| --spectrum-corner-radius-medium-size-large | | --spectrum-corner-radius-600 | 9px | +| --spectrum-corner-radius-medium-size-extra-large | --spectrum-corner-radius-large-default | --spectrum-corner-radius-700 | 10px | diff --git a/.storybook/foundations/corner-rounding/component-size-tokens-small.md b/.storybook/foundations/corner-rounding/component-size-tokens-small.md new file mode 100644 index 00000000000..1fdcae6ad6d --- /dev/null +++ b/.storybook/foundations/corner-rounding/component-size-tokens-small.md @@ -0,0 +1,6 @@ +| Component size token | Alias token (if available) | Global token | Value | +|---------------------------------------------------|-------------------------------|------------------------------|-------| +| --spectrum-corner-radius-small-size-small | | --spectrum-corner-radius-75 | 3px | +| --spectrum-corner-radius-small-size-medium | --spectrum-corner-radius-small-default | --spectrum-corner-radius-100 | 4px | +| --spectrum-corner-radius-small-size-large | | --spectrum-corner-radius-200 | 5px | +| --spectrum-corner-radius-small-size-extra-large | | --spectrum-corner-radius-300 | 6px | diff --git a/.storybook/foundations/corner-rounding/corner-rounding.mdx b/.storybook/foundations/corner-rounding/corner-rounding.mdx new file mode 100644 index 00000000000..0af56f6e446 --- /dev/null +++ b/.storybook/foundations/corner-rounding/corner-rounding.mdx @@ -0,0 +1,26 @@ +import { Meta, Canvas, Story, Title, Unstyled } from '@storybook/blocks'; +import * as CornerRoundingStories from './corner-rounding.stories.js'; +import * as CheckboxStories from './checkbox-corner-rounding.stories.js'; +import * as ActionButtonStories from './action-button-corner-rounding.stories.js'; + + + + + +## Default values + +<Story of={CornerRoundingStories.CornerRounding} /> + +## Component examples + +### Small tokens + +Checkbox includes small component size tokens to scale corner rounding. + +<Story of={CheckboxStories.CheckboxExamples} /> + +### Medium tokens + +Action button includes medium component size tokens to scale corner rounding. + +<Story of={ActionButtonStories.ActionButtonExamples} /> diff --git a/.storybook/foundations/corner-rounding/corner-rounding.stories.js b/.storybook/foundations/corner-rounding/corner-rounding.stories.js new file mode 100644 index 00000000000..21da965f948 --- /dev/null +++ b/.storybook/foundations/corner-rounding/corner-rounding.stories.js @@ -0,0 +1,75 @@ +// Import the component markup template +import { html } from "lit"; +import { Template } from './template'; + +export default { + title: "Foundations/Corner rounding", + description: + "Corner rounding is a foundation that shows the different border-radius tokens that can be applied to a component.", + component: "Corner rounding", + args: { + rootClass: "spectrum-Foundations-Example-CornerRounding", + }, + tags: ['foundation'], +}; + +const CornerRadiusGroup = ({ + customStyles = {}, + ...args +}) => { + return html` + <div> + <table class="spectrum-Foundations-Example-CornerRounding-table"> + <thead> + <tr> + <th scope="col">Token</th> + <th scope="col" style="padding: 0 2rem;">Value</th> + <th scope="col">Example<br>(No Border)</th> + <th scope="col">Example<br>(Border)</th> + </tr> + </thead> + <tbody> + ${Template({ + ...args, + label: '--spectrum-corner-radius-none', + size: 'none', + value: '0px', + })} + ${Template({ + ...args, + label: '--spectrum-corner-radius-small-default', + size: 's', + value: '4px', + })} + ${Template({ + ...args, + label: '--spectrum-corner-radius-medium-default', + size: 'm', + value: '8px', + })} + ${Template({ + ...args, + label: '--spectrum-corner-radius-large-default', + size: 'l', + value: '10px', + })} + ${Template({ + ...args, + label: '--spectrum-corner-radius-extra-large-default', + size: 'xl', + value: '16px', + })} + ${Template({ + ...args, + label: '--spectrum-corner-radius-full', + size: 'full', + value: '9999px', + })} + </tbody> + </table> + </div> + `; +}; + +export const CornerRounding = CornerRadiusGroup.bind({}); +CornerRounding.args = {}; diff --git a/.storybook/foundations/corner-rounding/index.css b/.storybook/foundations/corner-rounding/index.css new file mode 100644 index 00000000000..ebdd50f180f --- /dev/null +++ b/.storybook/foundations/corner-rounding/index.css @@ -0,0 +1,56 @@ +/*! +Copyright 2024 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. +*/ + +.spectrum-Foundations-Example-CornerRounding-table { + border-spacing: 1rem 0; + margin-inline-start: -1rem; +} + +.spectrum-Foundations-Example-CornerRounding-table th { + text-align: start; +} + +.spectrum-Foundations-Example-CornerRounding { + inline-size: 3rem; + block-size: 3rem; + margin: 0.5rem; + background-color: var(--spectrum-gray-500); +} + +.spectrum-Foundations-Example-CornerRounding--border { + background-color: var(--spectrum-gray-25); + border: var(--spectrum-border-width-200) solid var(--spectrum-gray-700); +} + +.spectrum-Foundations-Example-CornerRounding--none { + border-radius: var(--spectrum-corner-radius-none); +} + +.spectrum-Foundations-Example-CornerRounding--sizeS { + border-radius: var(--spectrum-corner-radius-small-default); +} + +.spectrum-Foundations-Example-CornerRounding--sizeM { + border-radius: var(--spectrum-corner-radius-medium-default); +} + +.spectrum-Foundations-Example-CornerRounding--sizeL { + border-radius: var(--spectrum-corner-radius-large-default); +} + +.spectrum-Foundations-Example-CornerRounding--sizeXL { + border-radius: var(--spectrum-corner-radius-extra-large-default); +} + +.spectrum-Foundations-Example-CornerRounding--full { + border-radius: var(--spectrum-corner-radius-full); +} diff --git a/.storybook/foundations/corner-rounding/template.js b/.storybook/foundations/corner-rounding/template.js new file mode 100644 index 00000000000..4d24cc43dbe --- /dev/null +++ b/.storybook/foundations/corner-rounding/template.js @@ -0,0 +1,42 @@ +import { html } from "lit"; +import { classMap } from "lit/directives/class-map.js"; +import './index.css'; + +const getSizeModifier = (size) => { + if (size === 'none' || size === 'full') { + return size; + } else { + return `size${size.toUpperCase()}`; + } +}; + +export const Template = ({ + rootClass = "spectrum-Foundations-Example-CornerRounding", + size = "none", + label, + value, +}) => html` + <tr> + <td>${label}</td> + <td style="padding: 0 2rem;">${value}</td> + <td> + <div + class=${classMap({ + [rootClass]: true, + [`${rootClass}--${getSizeModifier(size)}`]: typeof size !== "undefined", + })} + > + </div> + </td> + <td> + <div + class=${classMap({ + [rootClass]: true, + [`${rootClass}--${getSizeModifier(size)}`]: typeof size !== "undefined", + [`${rootClass}--border`]: true, + })} + > + </div> + </td> + </tr> + `; diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 68bedf781df..5fe6f581daa 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -15,7 +15,7 @@ governing permissions and limitations under the License. .spectrum-ActionButton { --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium); --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); @@ -59,6 +59,8 @@ governing permissions and limitations under the License. } .spectrum-ActionButton--sizeXS { + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-small); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50)); --spectrum-actionbutton-height: var(--spectrum-component-height-50); @@ -72,6 +74,8 @@ governing permissions and limitations under the License. } .spectrum-ActionButton--sizeS { + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-small); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75)); --spectrum-actionbutton-height: var(--spectrum-component-height-75); @@ -85,6 +89,8 @@ governing permissions and limitations under the License. } .spectrum-ActionButton--sizeM { + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100)); --spectrum-actionbutton-height: var(--spectrum-component-height-100); @@ -98,6 +104,8 @@ governing permissions and limitations under the License. } .spectrum-ActionButton--sizeL { + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-large); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200)); --spectrum-actionbutton-height: var(--spectrum-component-height-200); @@ -111,6 +119,8 @@ governing permissions and limitations under the License. } .spectrum-ActionButton--sizeXL { + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300)); --spectrum-actionbutton-height: var(--spectrum-component-height-300); diff --git a/components/checkbox/index.css b/components/checkbox/index.css index c93c6cedeec..14c4560f507 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -55,7 +55,7 @@ governing permissions and limitations under the License. /* Size */ --spectrum-checkbox-height: var(--spectrum-component-height-100); --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); - --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-medium); --spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); @@ -70,6 +70,8 @@ governing permissions and limitations under the License. } .spectrum-Checkbox--sizeS { + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-small); + --spectrum-checkbox-font-size: var(--spectrum-font-size-75); --spectrum-checkbox-height: var(--spectrum-component-height-75); @@ -79,17 +81,9 @@ governing permissions and limitations under the License. --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); } -.spectrum-Checkbox--sizeM { - --spectrum-checkbox-font-size: var(--spectrum-font-size-100); - - --spectrum-checkbox-height: var(--spectrum-component-height-100); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); - - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); -} - .spectrum-Checkbox--sizeL { + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-large); + --spectrum-checkbox-font-size: var(--spectrum-font-size-200); --spectrum-checkbox-height: var(--spectrum-component-height-200); @@ -100,6 +94,8 @@ governing permissions and limitations under the License. } .spectrum-Checkbox--sizeXL { + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-extra-large); + --spectrum-checkbox-font-size: var(--spectrum-font-size-300); --spectrum-checkbox-height: var(--spectrum-component-height-300); diff --git a/components/closebutton/index.css b/components/closebutton/index.css index ee314a9f8a2..dffc2e3cba4 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -20,8 +20,7 @@ governing permissions and limitations under the License. @import "@spectrum-css/commons/basebutton.css"; .spectrum-CloseButton { - /* TO DO: replace with custom var during corner rounding work */ - --spectrum-closebutton-border-radius: 9999px; + --spectrum-closebutton-border-radius: var(--spectrum-corner-radius-full); /* Cross icon */ --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default);