Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: remove wds headless button (#32857)

Browse Source 
## Description
Refactoring wds button component

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8788334412>
> Commit: 3e11d5f7800eaf492cb42f049f42980ed33cd774
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8788334412&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->




## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **New Features**
- Enhanced the design system by switching the `Button` component imports
to `react-aria-components` across various components for improved
accessibility and performance.

- **Style Updates**
- Revised multiple CSS properties across components, improving visual
consistency and user interface aesthetics.

- **Refactor**
- Updated various components to use `ForwardedRef<HTMLButtonElement>`
replacing previous ref types, aligning with modern React patterns and
improving component interoperability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Valera Melnikov 2024-04-23 15:00:36 +03:00 committed by GitHub
parent 7c4034308b
commit 4e2f74ecbf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 363 additions and 441 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/packages/design-system/headless/src/components/Button/index.ts
View File

@ -1 +0,0 @@
export * from "./src";

56
app/client/packages/design-system/headless/src/components/Button/src/Button.tsx
View File

@ -1,56 +0,0 @@
import React, { forwardRef } from "react";
import { mergeProps } from "@react-aria/utils";
import { useButton } from "@react-aria/button";
import { useFocusRing } from "@react-aria/focus";
import { useHover } from "@react-aria/interactions";
import type { AriaButtonProps as SpectrumAriaBaseButtonProps } from "@react-types/button";
export interface ButtonProps extends SpectrumAriaBaseButtonProps {
/** classname to be passed to the button */
className?: string;
/** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.*/
"aria-busy"?: boolean;
/** Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. */
"aria-disabled"?: boolean;
/** Indicates if the button can be dragged, this is mandatory for editor because of this bug - https://bugzilla.mozilla.org/show_bug.cgi?id=568313 */
draggable?: boolean;
}
export type ButtonRef = React.Ref<HTMLButtonElement>;
type ButtonRefObject = React.RefObject<HTMLButtonElement>;
const _Button = (props: ButtonProps, ref: ButtonRef) => {
const {
autoFocus,
children,
className,
draggable = false,
isDisabled = false,
...rest
} = props;
const { hoverProps, isHovered } = useHover({ isDisabled });
const { focusProps, isFocusVisible } = useFocusRing({ autoFocus });
const { buttonProps, isPressed } = useButton(
{ isDisabled, ...rest },
ref as ButtonRefObject,
);
return (
<button
{...mergeProps(buttonProps, hoverProps, focusProps)}
aria-busy={props["aria-busy"] ?? undefined}
aria-disabled={props["aria-disabled"] ?? undefined}
className={className}
data-active={isPressed ? "" : undefined}
data-disabled={isDisabled ? "" : undefined}
data-focused={isFocusVisible ? "" : undefined}
data-hovered={isHovered ? "" : undefined}
draggable={draggable ? "true" : undefined}
ref={ref}
>
{children}
</button>
);
};
export const Button = forwardRef(_Button);

2
app/client/packages/design-system/headless/src/components/Button/src/index.ts
View File

@ -1,2 +0,0 @@
export { Button } from "./Button";
export type { ButtonProps, ButtonRef } from "./Button";

14
app/client/packages/design-system/headless/src/components/Button/stories/Button.stories.tsx
View File

@ -1,14 +0,0 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "@design-system/headless";
const meta: Meta<typeof Button> = {
component: Button,
title: "Design-system/headless/Button",
render: () => <Button>Button</Button>,
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Main: Story = {};

3
app/client/packages/design-system/headless/src/components/Menu/stories/Menu.stories.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { Menu, Button, MenuList, Item } from "@design-system/headless";
import { Menu, MenuList, Item } from "@design-system/headless";
import { Button } from "react-aria-components";
/**
* A menu displays a list of actions or options that a user can choose.

2
app/client/packages/design-system/headless/src/components/Popover/src/PopoverTrigger.tsx
View File

@ -2,7 +2,7 @@ import { isValidElement, forwardRef, cloneElement } from "react";
import { useMergeRefs } from "@floating-ui/react";
import { usePopoverContext } from "./PopoverContext";
import type { ButtonProps } from "../../Button";
import type { ButtonProps } from "react-aria-components";
import type { AriaAttributes, Ref } from "react";
import type { PopoverTriggerProps } from "./types";

2
app/client/packages/design-system/headless/src/components/Popover/stories/ControlledPopover.tsx
View File

@ -3,8 +3,8 @@ import {
Popover,
PopoverContent,
PopoverTrigger,
Button,
} from "@design-system/headless";
import { Button } from "react-aria-components";
export const ControlledPopover = () => {
const [isOpen, setIsOpen] = useState(false);

2
app/client/packages/design-system/headless/src/components/Popover/stories/Popover.stories.tsx
View File

@ -5,8 +5,8 @@ import {
PopoverTrigger,
PopoverContent,
PopoverModalContent,
Button,
} from "@design-system/headless";
import { Button } from "react-aria-components";
import { ControlledPopover as ControlledPopoverExample } from "./ControlledPopover";
/**

2
app/client/packages/design-system/headless/src/components/Tooltip/stories/Tooltip.stories.tsx
View File

@ -4,8 +4,8 @@ import {
TooltipRoot,
TooltipTrigger,
TooltipContent,
Button,
} from "@design-system/headless";
import { Button } from "react-aria-components";
/**
* A tooltip is a small pop-up that appears when a user places their cursor over an element such as a link or button. Tooltips can be used to provide users with additional information about an element without having to clutter up the UI with additional text.

1
app/client/packages/design-system/headless/src/index.ts
View File

@ -1,5 +1,4 @@
// components
export * from "./components/Button";
export * from "./components/Checkbox";
export * from "./components/Field";
export * from "./components/Icon";

502
app/client/packages/design-system/theming/src/token/src/styles.module.css
View File

@ -1,225 +1,225 @@
/* THIS FILE IS CREATED AUTOMATICALLY. PLEASE DON'T EDIT IT. */
:root {
--outer-spacing-0: 0;
--outer-spacing-1: 4.6px;
--outer-spacing-2: 6.5px;
--outer-spacing-3: 9.2px;
--outer-spacing-4: 13px;
--outer-spacing-5: 18.4px;
--outer-spacing-6: 26px;
--outer-spacing-7: 36.8px;
--outer-spacing-8: 52px;
--outer-spacing-1: 5.7px;
--outer-spacing-2: 8.1px;
--outer-spacing-3: 11.5px;
--outer-spacing-4: 16.2px;
--outer-spacing-5: 22.9px;
--outer-spacing-6: 32.5px;
--outer-spacing-7: 45.9px;
--outer-spacing-8: 64.9px;
--inner-spacing-0: 0;
--inner-spacing-1: 4.1px;
--inner-spacing-2: 5.8px;
--inner-spacing-3: 8.3px;
--inner-spacing-4: 11.7px;
--inner-spacing-5: 16.5px;
--inner-spacing-6: 23.3px;
--inner-spacing-7: 33px;
--inner-spacing-8: 46.7px;
--inner-spacing-1: 4.2px;
--inner-spacing-2: 6.3px;
--inner-spacing-3: 9.4px;
--inner-spacing-4: 14.2px;
--inner-spacing-5: 21.3px;
--inner-spacing-6: 31.9px;
--inner-spacing-7: 47.8px;
--inner-spacing-8: 71.8px;
--sizing-0: 0;
--sizing-1: 3.2px;
--sizing-2: 6.4px;
--sizing-3: 9.6px;
--sizing-4: 12.8px;
--sizing-5: 16px;
--sizing-6: 19.2px;
--sizing-7: 22.4px;
--sizing-8: 25.6px;
--sizing-9: 28.8px;
--sizing-10: 32px;
--sizing-11: 35.2px;
--sizing-12: 38.4px;
--sizing-13: 41.6px;
--sizing-14: 44.8px;
--sizing-15: 48px;
--sizing-16: 51.2px;
--sizing-17: 54.4px;
--sizing-18: 57.6px;
--sizing-19: 60.8px;
--sizing-20: 64px;
--sizing-21: 67.2px;
--sizing-22: 70.4px;
--sizing-23: 73.6px;
--sizing-24: 76.8px;
--sizing-25: 80px;
--sizing-26: 83.2px;
--sizing-27: 86.4px;
--sizing-28: 89.6px;
--sizing-29: 92.8px;
--sizing-30: 96px;
--sizing-31: 99.2px;
--sizing-32: 102.4px;
--sizing-33: 105.6px;
--sizing-34: 108.8px;
--sizing-35: 112px;
--sizing-36: 115.2px;
--sizing-37: 118.4px;
--sizing-38: 121.6px;
--sizing-39: 124.8px;
--sizing-40: 128px;
--sizing-41: 131.2px;
--sizing-42: 134.4px;
--sizing-43: 137.6px;
--sizing-44: 140.8px;
--sizing-45: 144px;
--sizing-46: 147.2px;
--sizing-47: 150.4px;
--sizing-48: 153.6px;
--sizing-49: 156.8px;
--sizing-50: 160px;
--sizing-51: 163.2px;
--sizing-52: 166.4px;
--sizing-53: 169.6px;
--sizing-54: 172.8px;
--sizing-55: 176px;
--sizing-56: 179.2px;
--sizing-57: 182.4px;
--sizing-58: 185.6px;
--sizing-59: 188.8px;
--sizing-60: 192px;
--sizing-61: 195.2px;
--sizing-62: 198.4px;
--sizing-63: 201.6px;
--sizing-64: 204.8px;
--sizing-65: 208px;
--sizing-66: 211.2px;
--sizing-67: 214.4px;
--sizing-68: 217.6px;
--sizing-69: 220.8px;
--sizing-70: 224px;
--sizing-71: 227.2px;
--sizing-72: 230.4px;
--sizing-73: 233.6px;
--sizing-74: 236.8px;
--sizing-75: 240px;
--sizing-76: 243.2px;
--sizing-77: 246.4px;
--sizing-78: 249.6px;
--sizing-79: 252.8px;
--sizing-80: 256px;
--sizing-81: 259.2px;
--sizing-82: 262.4px;
--sizing-83: 265.6px;
--sizing-84: 268.8px;
--sizing-85: 272px;
--sizing-86: 275.2px;
--sizing-87: 278.4px;
--sizing-88: 281.6px;
--sizing-89: 284.8px;
--sizing-90: 288px;
--sizing-91: 291.2px;
--sizing-92: 294.4px;
--sizing-93: 297.6px;
--sizing-94: 300.8px;
--sizing-95: 304px;
--sizing-96: 307.2px;
--sizing-97: 310.4px;
--sizing-98: 313.6px;
--sizing-99: 316.8px;
--sizing-100: 320px;
--sizing-101: 323.2px;
--sizing-102: 326.4px;
--sizing-103: 329.6px;
--sizing-104: 332.8px;
--sizing-105: 336px;
--sizing-106: 339.2px;
--sizing-107: 342.4px;
--sizing-108: 345.6px;
--sizing-109: 348.8px;
--sizing-110: 352px;
--sizing-111: 355.2px;
--sizing-112: 358.4px;
--sizing-113: 361.6px;
--sizing-114: 364.8px;
--sizing-115: 368px;
--sizing-116: 371.2px;
--sizing-117: 374.4px;
--sizing-118: 377.6px;
--sizing-119: 380.8px;
--sizing-120: 384px;
--sizing-121: 387.2px;
--sizing-122: 390.4px;
--sizing-123: 393.6px;
--sizing-124: 396.8px;
--sizing-125: 400px;
--sizing-126: 403.2px;
--sizing-127: 406.4px;
--sizing-128: 409.6px;
--sizing-129: 412.8px;
--sizing-130: 416px;
--sizing-131: 419.2px;
--sizing-132: 422.4px;
--sizing-133: 425.6px;
--sizing-134: 428.8px;
--sizing-135: 432px;
--sizing-136: 435.2px;
--sizing-137: 438.4px;
--sizing-138: 441.6px;
--sizing-139: 444.8px;
--sizing-140: 448px;
--sizing-141: 451.2px;
--sizing-142: 454.4px;
--sizing-143: 457.6px;
--sizing-144: 460.8px;
--sizing-145: 464px;
--sizing-146: 467.2px;
--sizing-147: 470.4px;
--sizing-148: 473.6px;
--sizing-149: 476.8px;
--sizing-150: 480px;
--sizing-151: 483.2px;
--sizing-152: 486.4px;
--sizing-153: 489.6px;
--sizing-154: 492.8px;
--sizing-155: 496px;
--sizing-156: 499.2px;
--sizing-157: 502.4px;
--sizing-158: 505.6px;
--sizing-159: 508.8px;
--sizing-160: 512px;
--sizing-161: 515.2px;
--sizing-162: 518.4px;
--sizing-163: 521.6px;
--sizing-164: 524.8px;
--sizing-165: 528px;
--sizing-166: 531.2px;
--sizing-167: 534.4px;
--sizing-168: 537.6px;
--sizing-169: 540.8px;
--sizing-170: 544px;
--sizing-171: 547.2px;
--sizing-172: 550.4px;
--sizing-173: 553.6px;
--sizing-174: 556.8px;
--sizing-175: 560px;
--sizing-176: 563.2px;
--sizing-177: 566.4px;
--sizing-178: 569.6px;
--sizing-179: 572.8px;
--sizing-180: 576px;
--sizing-181: 579.2px;
--sizing-182: 582.4px;
--sizing-183: 585.6px;
--sizing-184: 588.8px;
--sizing-185: 592px;
--sizing-186: 595.2px;
--sizing-187: 598.4px;
--sizing-188: 601.6px;
--sizing-189: 604.8px;
--sizing-190: 608px;
--sizing-191: 611.2px;
--sizing-192: 614.4px;
--sizing-193: 617.6px;
--sizing-194: 620.8px;
--sizing-195: 624px;
--sizing-196: 627.2px;
--sizing-197: 630.4px;
--sizing-198: 633.6px;
--sizing-199: 636.8px;
--sizing-200: 640px;
--color-bg: rgb(93.292% 94.955% 97.227%);
--sizing-1: 3.4px;
--sizing-2: 6.8px;
--sizing-3: 10.2px;
--sizing-4: 13.6px;
--sizing-5: 17px;
--sizing-6: 20.4px;
--sizing-7: 23.8px;
--sizing-8: 27.2px;
--sizing-9: 30.6px;
--sizing-10: 34px;
--sizing-11: 37.4px;
--sizing-12: 40.8px;
--sizing-13: 44.2px;
--sizing-14: 47.6px;
--sizing-15: 51px;
--sizing-16: 54.4px;
--sizing-17: 57.8px;
--sizing-18: 61.2px;
--sizing-19: 64.6px;
--sizing-20: 68px;
--sizing-21: 71.4px;
--sizing-22: 74.8px;
--sizing-23: 78.2px;
--sizing-24: 81.6px;
--sizing-25: 85px;
--sizing-26: 88.4px;
--sizing-27: 91.8px;
--sizing-28: 95.2px;
--sizing-29: 98.6px;
--sizing-30: 102px;
--sizing-31: 105.4px;
--sizing-32: 108.8px;
--sizing-33: 112.2px;
--sizing-34: 115.6px;
--sizing-35: 119px;
--sizing-36: 122.4px;
--sizing-37: 125.8px;
--sizing-38: 129.2px;
--sizing-39: 132.6px;
--sizing-40: 136px;
--sizing-41: 139.4px;
--sizing-42: 142.8px;
--sizing-43: 146.2px;
--sizing-44: 149.6px;
--sizing-45: 153px;
--sizing-46: 156.4px;
--sizing-47: 159.8px;
--sizing-48: 163.2px;
--sizing-49: 166.6px;
--sizing-50: 170px;
--sizing-51: 173.4px;
--sizing-52: 176.8px;
--sizing-53: 180.2px;
--sizing-54: 183.6px;
--sizing-55: 187px;
--sizing-56: 190.4px;
--sizing-57: 193.8px;
--sizing-58: 197.2px;
--sizing-59: 200.6px;
--sizing-60: 204px;
--sizing-61: 207.4px;
--sizing-62: 210.8px;
--sizing-63: 214.2px;
--sizing-64: 217.6px;
--sizing-65: 221px;
--sizing-66: 224.4px;
--sizing-67: 227.8px;
--sizing-68: 231.2px;
--sizing-69: 234.6px;
--sizing-70: 238px;
--sizing-71: 241.4px;
--sizing-72: 244.8px;
--sizing-73: 248.2px;
--sizing-74: 251.6px;
--sizing-75: 255px;
--sizing-76: 258.4px;
--sizing-77: 261.8px;
--sizing-78: 265.2px;
--sizing-79: 268.6px;
--sizing-80: 272px;
--sizing-81: 275.4px;
--sizing-82: 278.8px;
--sizing-83: 282.2px;
--sizing-84: 285.6px;
--sizing-85: 289px;
--sizing-86: 292.4px;
--sizing-87: 295.8px;
--sizing-88: 299.2px;
--sizing-89: 302.6px;
--sizing-90: 306px;
--sizing-91: 309.4px;
--sizing-92: 312.8px;
--sizing-93: 316.2px;
--sizing-94: 319.6px;
--sizing-95: 323px;
--sizing-96: 326.4px;
--sizing-97: 329.8px;
--sizing-98: 333.2px;
--sizing-99: 336.6px;
--sizing-100: 340px;
--sizing-101: 343.4px;
--sizing-102: 346.8px;
--sizing-103: 350.2px;
--sizing-104: 353.6px;
--sizing-105: 357px;
--sizing-106: 360.4px;
--sizing-107: 363.8px;
--sizing-108: 367.2px;
--sizing-109: 370.6px;
--sizing-110: 374px;
--sizing-111: 377.4px;
--sizing-112: 380.8px;
--sizing-113: 384.2px;
--sizing-114: 387.6px;
--sizing-115: 391px;
--sizing-116: 394.4px;
--sizing-117: 397.8px;
--sizing-118: 401.2px;
--sizing-119: 404.6px;
--sizing-120: 408px;
--sizing-121: 411.4px;
--sizing-122: 414.8px;
--sizing-123: 418.2px;
--sizing-124: 421.6px;
--sizing-125: 425px;
--sizing-126: 428.4px;
--sizing-127: 431.8px;
--sizing-128: 435.2px;
--sizing-129: 438.6px;
--sizing-130: 442px;
--sizing-131: 445.4px;
--sizing-132: 448.8px;
--sizing-133: 452.2px;
--sizing-134: 455.6px;
--sizing-135: 459px;
--sizing-136: 462.4px;
--sizing-137: 465.8px;
--sizing-138: 469.2px;
--sizing-139: 472.6px;
--sizing-140: 476px;
--sizing-141: 479.4px;
--sizing-142: 482.8px;
--sizing-143: 486.2px;
--sizing-144: 489.6px;
--sizing-145: 493px;
--sizing-146: 496.4px;
--sizing-147: 499.8px;
--sizing-148: 503.2px;
--sizing-149: 506.6px;
--sizing-150: 510px;
--sizing-151: 513.4px;
--sizing-152: 516.8px;
--sizing-153: 520.2px;
--sizing-154: 523.6px;
--sizing-155: 527px;
--sizing-156: 530.4px;
--sizing-157: 533.8px;
--sizing-158: 537.2px;
--sizing-159: 540.6px;
--sizing-160: 544px;
--sizing-161: 547.4px;
--sizing-162: 550.8px;
--sizing-163: 554.2px;
--sizing-164: 557.6px;
--sizing-165: 561px;
--sizing-166: 564.4px;
--sizing-167: 567.8px;
--sizing-168: 571.2px;
--sizing-169: 574.6px;
--sizing-170: 578px;
--sizing-171: 581.4px;
--sizing-172: 584.8px;
--sizing-173: 588.2px;
--sizing-174: 591.6px;
--sizing-175: 595px;
--sizing-176: 598.4px;
--sizing-177: 601.8px;
--sizing-178: 605.2px;
--sizing-179: 608.6px;
--sizing-180: 612px;
--sizing-181: 615.4px;
--sizing-182: 618.8px;
--sizing-183: 622.2px;
--sizing-184: 625.6px;
--sizing-185: 629px;
--sizing-186: 632.4px;
--sizing-187: 635.8px;
--sizing-188: 639.2px;
--sizing-189: 642.6px;
--sizing-190: 646px;
--sizing-191: 649.4px;
--sizing-192: 652.8px;
--sizing-193: 656.2px;
--sizing-194: 659.6px;
--sizing-195: 663px;
--sizing-196: 666.4px;
--sizing-197: 669.8px;
--sizing-198: 673.2px;
--sizing-199: 676.6px;
--sizing-200: 680px;
--color-bg: rgb(95.735% 96.105% 96.612%);
--color-bg-accent: rgb(0% 50.196% 100%);
--color-bg-accent-hover: rgb(13.479% 56.597% 100%);
--color-bg-accent-active: rgb(0% 47.644% 97.234%);
@ -227,13 +227,13 @@
--color-bg-accent-subtle-hover: rgb(88.309% 93.691% 100%);
--color-bg-accent-subtle-active: rgb(81.868% 90.09% 100%);
--color-bg-assistive: rgb(0% 4.2493% 16.493%);
--color-bg-neutral: rgb(36.27% 41.013% 47.456%);
--color-bg-neutral-opacity: rgb(36.27% 41.013% 47.456% / 0.5);
--color-bg-neutral-hover: rgb(41.835% 46.688% 53.284%);
--color-bg-neutral-active: rgb(35.173% 39.893% 46.305%);
--color-bg-neutral-subtle: rgb(89.241% 91.074% 93.578%);
--color-bg-neutral-subtle-hover: rgb(91.83% 93.672% 96.189%);
--color-bg-neutral-subtle-active: rgb(87.952% 89.78% 92.277%);
--color-bg-neutral: rgb(40.269% 40.585% 41.017%);
--color-bg-neutral-opacity: rgb(40.269% 40.585% 41.017% / 0.5);
--color-bg-neutral-hover: rgb(44.775% 45.097% 45.538%);
--color-bg-neutral-active: rgb(39.155% 39.47% 39.901%);
--color-bg-neutral-subtle: rgb(91.338% 91.522% 91.773%);
--color-bg-neutral-subtle-hover: rgb(93.938% 94.123% 94.375%);
--color-bg-neutral-subtle-active: rgb(90.044% 90.227% 90.478%);
--color-bg-positive: rgb(6.7435% 63.436% 18.481%);
--color-bg-positive-hover: rgb(18.172% 69.721% 25.266%);
--color-bg-positive-active: rgb(0% 60.947% 15.563%);
@ -252,43 +252,55 @@
--color-bg-warning-subtle: rgb(100% 94.114% 80.142%);
--color-bg-warning-subtle-hover: rgb(100% 97.012% 87.859%);
--color-bg-warning-subtle-active: rgb(99.63% 92.81% 78.869%);
--color-bg-elevation-1: rgb(95.902% 97.573% 99.857%);
--color-bg-elevation-2: rgb(97.988% 99.528% 100%);
--color-bg-elevation-3: rgb(99.697% 100% 100%);
--color-shadow-elevation-1: rgb(0% 5.9131% 57.625% / 0.1);
--color-shadow-elevation-2: rgb(0% 15.277% 63.167% / 0.12);
--color-shadow-elevation-3: rgb(0% 16.799% 64.298% / 0.15);
--color-fg: rgb(0.3864% 2.2133% 6.8342%);
--color-bg-elevation-1: rgb(98.357% 98.73% 99.239%);
--color-bg-elevation-2: rgb(100% 100% 100%);
--color-bg-elevation-3: rgb(100% 100% 100%);
--color-shadow-elevation-1: rgb(15.421% 18.184% 21.936% / 0.1);
--color-shadow-elevation-2: rgb(20.315% 23.186% 27.086% / 0.12);
--color-shadow-elevation-3: rgb(21.317% 24.208% 28.136% / 0.15);
--color-fg: rgb(1.8308% 2.2815% 2.989%);
--color-fg-accent: rgb(0% 31.772% 67.873%);
--color-fg-neutral: rgb(26.26% 33.939% 44.326%);
--color-fg-neutral-subtle: rgb(37.08% 45.134% 56.045%);
--color-fg-neutral: rgb(32.982% 33.44% 34.067%);
--color-fg-neutral-subtle: rgb(44.047% 44.529% 45.189%);
--color-fg-positive: rgb(6.7435% 63.436% 18.481%);
--color-fg-negative: rgb(100% 0% 28.453%);
--color-fg-warning: rgb(71.79% 51.231% 0%);
--color-fg-on-accent: rgb(89.856% 93.58% 100%);
--color-fg-on-accent-subtle: rgb(0.3864% 2.2133% 6.8342%);
--color-fg-on-accent: rgb(92.311% 95.082% 98.864%);
--color-fg-on-accent-subtle: rgb(1.8308% 2.2815% 2.989%);
--color-fg-on-assistive: rgb(92.536% 96.25% 100%);
--color-fg-on-neutral: rgb(90.444% 95.285% 100%);
--color-fg-on-neutral: rgb(94.428% 94.798% 95.304%);
--color-fg-on-positive: rgb(89.702% 100% 89.053%);
--color-fg-on-negative: rgb(100% 87.612% 85.249%);
--color-fg-on-warning: rgb(21.953% 9.0775% 0%);
--color-bd: rgb(69.282% 74.927% 82.61%);
--color-bd: rgb(73.392% 74.451% 75.899%);
--color-bd-accent: rgb(0% 50.196% 100%);
--color-bd-focus: rgb(0% 50.196% 100%);
--color-bd-neutral: rgb(46.767% 52.551% 60.409%);
--color-bd-neutral-hover: rgb(58.499% 64.503% 72.668%);
--color-bd-neutral: rgb(51.832% 51.998% 52.224%);
--color-bd-neutral-hover: rgb(63.734% 63.906% 64.141%);
--color-bd-positive: rgb(6.7435% 63.436% 18.481%);
--color-bd-positive-hover: rgb(26.362% 76.094% 31.718%);
--color-bd-negative: rgb(83.108% 4.6651% 10.252%);
--color-bd-negative-hover: rgb(97.525% 25.712% 23.78%);
--color-bd-negative-hover: rgb(94.628% 22.524% 21.261%);
--color-bd-warning: rgb(85.145% 64.66% 8.0286%);
--color-bd-warning-hover: rgb(98.232% 77.293% 27.893%);
--color-bd-on-accent: rgb(0% 1.6859% 55.697%);
--color-bd-on-neutral: rgb(2.3313% 5.7416% 10.634%);
--color-bd-on-neutral: rgb(5.3992% 5.6371% 5.9622%);
--color-bd-on-neutral-subtle: rgb(83.624% 83.804% 84.052%);
--color-bd-on-neutral-subtle-hover: rgb(87.465% 87.647% 87.897%);
--color-bd-on-positive: rgb(0% 22.552% 3.6201%);
--color-bd-on-negative: rgb(21.923% 0% 2.8118%);
--color-bd-on-warning: rgb(39.972% 27.552% 0%);
--border-radius-1: 0px;
--color-bd-elevation-1: rgb(86.823% 87.005% 87.253%);
--color-bd-elevation-2: rgb(90.691% 90.874% 91.125%);
--color-bd-elevation-3: rgb(92.637% 92.821% 93.073%);
--border-radius-elevation-1: calc(
var(--border-radius-elevation-base) + var(--outer-spacing-1) * 2
);
--border-radius-elevation-2: calc(
var(--border-radius-elevation-base) + var(--outer-spacing-1)
);
--border-radius-elevation-3: var(--border-radius-elevation-base);
--border-radius-elevation-base: 0px;
--box-shadow-1: 0 var(--inner-spacing-2) var(--inner-spacing-3) 0
var(--color-shadow-elevation-1);
--box-shadow-2: 0 var(--inner-spacing-1) var(--inner-spacing-3) 0
@ -302,10 +314,4 @@
--z-index-2: 4;
--z-index-3: 10;
--z-index-99: 9999;
--stroke-width-1: 1px;
--stroke-width-2: 1.5px;
--stroke-width-3: 2px;
--icon-size-1: 16px;
--icon-size-2: 24px;
--icon-size-3: 32px;
}

114
app/client/packages/design-system/theming/src/token/src/themeTokens.json
View File

@ -1,7 +1,7 @@
{
"color": {
"bg": {
"value": "rgb(93.292% 94.955% 97.227%)",
"value": "rgb(95.735% 96.105% 96.612%)",
"type": "color"
},
"bg-accent": {
@ -33,31 +33,31 @@
"type": "color"
},
"bg-neutral": {
"value": "rgb(36.27% 41.013% 47.456%)",
"value": "rgb(40.269% 40.585% 41.017%)",
"type": "color"
},
"bg-neutral-opacity": {
"value": "rgb(36.27% 41.013% 47.456% / 0.5)",
"value": "rgb(40.269% 40.585% 41.017% / 0.5)",
"type": "color"
},
"bg-neutral-hover": {
"value": "rgb(41.835% 46.688% 53.284%)",
"value": "rgb(44.775% 45.097% 45.538%)",
"type": "color"
},
"bg-neutral-active": {
"value": "rgb(35.173% 39.893% 46.305%)",
"value": "rgb(39.155% 39.47% 39.901%)",
"type": "color"
},
"bg-neutral-subtle": {
"value": "rgb(89.241% 91.074% 93.578%)",
"value": "rgb(91.338% 91.522% 91.773%)",
"type": "color"
},
"bg-neutral-subtle-hover": {
"value": "rgb(91.83% 93.672% 96.189%)",
"value": "rgb(93.938% 94.123% 94.375%)",
"type": "color"
},
"bg-neutral-subtle-active": {
"value": "rgb(87.952% 89.78% 92.277%)",
"value": "rgb(90.044% 90.227% 90.478%)",
"type": "color"
},
"bg-positive": {
@ -133,31 +133,31 @@
"type": "color"
},
"bg-elevation-1": {
"value": "rgb(95.902% 97.573% 99.857%)",
"value": "rgb(98.357% 98.73% 99.239%)",
"type": "color"
},
"bg-elevation-2": {
"value": "rgb(97.988% 99.528% 100%)",
"value": "rgb(100% 100% 100%)",
"type": "color"
},
"bg-elevation-3": {
"value": "rgb(99.697% 100% 100%)",
"value": "rgb(100% 100% 100%)",
"type": "color"
},
"shadow-elevation-1": {
"value": "rgb(0% 5.9131% 57.625% / 0.1)",
"value": "rgb(15.421% 18.184% 21.936% / 0.1)",
"type": "color"
},
"shadow-elevation-2": {
"value": "rgb(0% 15.277% 63.167% / 0.12)",
"value": "rgb(20.315% 23.186% 27.086% / 0.12)",
"type": "color"
},
"shadow-elevation-3": {
"value": "rgb(0% 16.799% 64.298% / 0.15)",
"value": "rgb(21.317% 24.208% 28.136% / 0.15)",
"type": "color"
},
"fg": {
"value": "rgb(0.3864% 2.2133% 6.8342%)",
"value": "rgb(1.8308% 2.2815% 2.989%)",
"type": "color"
},
"fg-accent": {
@ -165,11 +165,11 @@
"type": "color"
},
"fg-neutral": {
"value": "rgb(26.26% 33.939% 44.326%)",
"value": "rgb(32.982% 33.44% 34.067%)",
"type": "color"
},
"fg-neutral-subtle": {
"value": "rgb(37.08% 45.134% 56.045%)",
"value": "rgb(44.047% 44.529% 45.189%)",
"type": "color"
},
"fg-positive": {
@ -185,11 +185,11 @@
"type": "color"
},
"fg-on-accent": {
"value": "rgb(89.856% 93.58% 100%)",
"value": "rgb(92.311% 95.082% 98.864%)",
"type": "color"
},
"fg-on-accent-subtle": {
"value": "rgb(0.3864% 2.2133% 6.8342%)",
"value": "rgb(1.8308% 2.2815% 2.989%)",
"type": "color"
},
"fg-on-assistive": {
@ -197,7 +197,7 @@
"type": "color"
},
"fg-on-neutral": {
"value": "rgb(90.444% 95.285% 100%)",
"value": "rgb(94.428% 94.798% 95.304%)",
"type": "color"
},
"fg-on-positive": {
@ -213,7 +213,7 @@
"type": "color"
},
"bd": {
"value": "rgb(69.282% 74.927% 82.61%)",
"value": "rgb(73.392% 74.451% 75.899%)",
"type": "color"
},
"bd-accent": {
@ -225,11 +225,11 @@
"type": "color"
},
"bd-neutral": {
"value": "rgb(46.767% 52.551% 60.409%)",
"value": "rgb(51.832% 51.998% 52.224%)",
"type": "color"
},
"bd-neutral-hover": {
"value": "rgb(58.499% 64.503% 72.668%)",
"value": "rgb(63.734% 63.906% 64.141%)",
"type": "color"
},
"bd-positive": {
@ -245,7 +245,7 @@
"type": "color"
},
"bd-negative-hover": {
"value": "rgb(97.525% 25.712% 23.78%)",
"value": "rgb(94.628% 22.524% 21.261%)",
"type": "color"
},
"bd-warning": {
@ -261,7 +261,15 @@
"type": "color"
},
"bd-on-neutral": {
"value": "rgb(2.3313% 5.7416% 10.634%)",
"value": "rgb(5.3992% 5.6371% 5.9622%)",
"type": "color"
},
"bd-on-neutral-subtle": {
"value": "rgb(83.624% 83.804% 84.052%)",
"type": "color"
},
"bd-on-neutral-subtle-hover": {
"value": "rgb(87.465% 87.647% 87.897%)",
"type": "color"
},
"bd-on-positive": {
@ -275,12 +283,36 @@
"bd-on-warning": {
"value": "rgb(39.972% 27.552% 0%)",
"type": "color"
},
"bd-elevation-1": {
"value": "rgb(86.823% 87.005% 87.253%)",
"type": "color"
},
"bd-elevation-2": {
"value": "rgb(90.691% 90.874% 91.125%)",
"type": "color"
},
"bd-elevation-3": {
"value": "rgb(92.637% 92.821% 93.073%)",
"type": "color"
}
},
"borderRadius": {
"borderRadiusElevation": {
"1": {
"value": "calc(var(--border-radius-elevation-base) + var(--outer-spacing-1) * 2)",
"type": "borderRadiusElevation"
},
"2": {
"value": "calc(var(--border-radius-elevation-base) + var(--outer-spacing-1))",
"type": "borderRadiusElevation"
},
"3": {
"value": "var(--border-radius-elevation-base)",
"type": "borderRadiusElevation"
},
"base": {
"value": "0px",
"type": "borderRadius"
"type": "borderRadiusElevation"
}
},
"boxShadow": {
@ -331,33 +363,5 @@
"type": "zIndex"
}
},
"strokeWidth": {
"1": {
"value": "1px",
"type": "strokeWidth"
},
"2": {
"value": "1.5px",
"type": "strokeWidth"
},
"3": {
"value": "2px",
"type": "strokeWidth"
}
},
"iconSize": {
"1": {
"value": "16px",
"type": "iconSize"
},
"2": {
"value": "24px",
"type": "iconSize"
},
"3": {
"value": "32px",
"type": "iconSize"
}
},
"colorMode": "light"
}

4
app/client/packages/design-system/widgets/src/components/ActionGroup/src/ActionGroupItem.tsx
View File

@ -1,12 +1,12 @@
import type { ForwardedRef } from "react";
import React, { forwardRef } from "react";
import { Button } from "@design-system/widgets";
import type { ButtonGroupItemProps } from "../../../";
import type { ButtonRef as HeadlessButtonRef } from "@design-system/headless";
const _ActionGroupItem = <T extends object>(
props: ButtonGroupItemProps<T>,
ref: HeadlessButtonRef,
ref: ForwardedRef<HTMLButtonElement>,
) => {
const { color, item, variant, ...rest } = props;

4
app/client/packages/design-system/widgets/src/components/Button/chromatic/Button.chromatic.stories.tsx
View File

@ -18,8 +18,8 @@ type Story = StoryObj<typeof Button>;
const states = [
"",
"data-hovered",
"data-active",
"data-focused",
"data-pressed",
"data-focus-visible",
"aria-disabled",
];

22
app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx
View File

@ -1,7 +1,7 @@
import type { ForwardedRef } from "react";
import React, { forwardRef } from "react";
import { useVisuallyHidden } from "@react-aria/visually-hidden";
import { Button as HeadlessButton } from "@design-system/headless";
import type { ButtonRef as HeadlessButtonRef } from "@design-system/headless";
import { Button as HeadlessButton } from "react-aria-components";
import type { SIZES } from "../../../shared";
import clsx from "clsx";
import { Text } from "../../Text";
@ -10,10 +10,11 @@ import styles from "./styles.module.css";
import type { ButtonProps } from "./types";
import { Icon } from "../../Icon";
const _Button = (props: ButtonProps, ref: HeadlessButtonRef) => {
const _Button = (props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
props = useVisuallyDisabled(props);
const {
children,
className,
color = "accent",
icon,
iconPosition = "start",
@ -21,11 +22,7 @@ const _Button = (props: ButtonProps, ref: HeadlessButtonRef) => {
isLoading = false,
loadingText = "Loading...",
size = "medium",
// eslint-disable-next-line -- TODO add onKeyUp when the bug is fixed https://github.com/adobe/react-spectrum/issues/4350
onKeyUp,
variant = "filled",
visuallyDisabled = false,
className,
...rest
} = props;
const { visuallyHiddenProps } = useVisuallyHidden();
@ -64,10 +61,6 @@ const _Button = (props: ButtonProps, ref: HeadlessButtonRef) => {
return (
<HeadlessButton
aria-busy={isLoading ? true : undefined}
aria-disabled={
visuallyDisabled || isLoading || isDisabled ? true : undefined
}
className={clsx(className, styles.button)}
data-button=""
data-color={color}
@ -75,13 +68,11 @@ const _Button = (props: ButtonProps, ref: HeadlessButtonRef) => {
data-loading={isLoading ? "" : undefined}
data-size={Boolean(size) ? size : undefined}
data-variant={variant}
draggable
isDisabled={isDisabled}
ref={ref}
{...rest}
>
{renderChildren()}
<span aria-hidden="true" className={styles.dragContainer} />
</HeadlessButton>
);
};
@ -93,14 +84,13 @@ export const Button = forwardRef(_Button);
* when the button is visually disabled
*/
const useVisuallyDisabled = (props: ButtonProps) => {
const { isLoading = false, visuallyDisabled = false } = props;
const { isLoading = false } = props;
let computedProps = props;
if (visuallyDisabled || isLoading) {
if (isLoading) {
computedProps = {
...props,
isDisabled: false,
// disabling click/press events
onPress: undefined,
onPressStart: undefined,
onPressEnd: undefined,

37
app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css
View File

@ -17,11 +17,11 @@
background-color: var(--color-bg-$(color));
color: var(--color-fg-on-$(color));
&[data-hovered]:not([aria-disabled]) {
&[data-hovered]:not([data-loading]) {
background-color: var(--color-bg-$(color)-hover);
}
&[data-active]:not([aria-disabled]) {
&[data-pressed]:not([data-loading]) {
background-color: var(--color-bg-$(color)-active);
}
}
@ -33,11 +33,11 @@
outline: var(--border-width-1) solid var(--color-bd-$(color)) !important;
outline-offset: calc(-1 * var(--border-width-1)) !important;
&[data-hovered]:not([aria-disabled]) {
&[data-hovered]:not([data-loading]) {
background-color: var(--color-bg-$(color)-subtle-hover);
}
&[data-active]:not([aria-disabled]) {
&[data-pressed]:not([data-loading]) {
background-color: var(--color-bg-$(color)-subtle-active);
}
}
@ -46,11 +46,11 @@
background: transparent;
color: var(--color-fg-$(color));
&[data-hovered]:not([aria-disabled]) {
&[data-hovered]:not([data-loading]) {
background: var(--color-bg-$(color)-subtle-hover);
}
&[data-active]:not([aria-disabled]) {
&[data-pressed]:not([data-loading]) {
background: var(--color-bg-$(color)-subtle-active);
}
}
@ -83,10 +83,10 @@
/**
* ----------------------------------------------------------------------------
* FOCUSSED
* FOCUS VISIBLE
*-----------------------------------------------------------------------------
*/
&[data-focused] {
&[data-focus-visible]:not([data-loading]) {
box-shadow:
0 0 0 2px var(--color-bg),
0 0 0 4px var(--color-bd-focus);
@ -97,7 +97,7 @@
* DISABLED
*-----------------------------------------------------------------------------
*/
&[aria-disabled] {
&[data-disabled] {
cursor: not-allowed;
opacity: var(--opacity-disabled);
}
@ -109,8 +109,6 @@
*/
&[data-loading] {
cursor: default;
/** adding opacity 1 here because we are lowering opacity for aria-disabled and when loading is true, aria-disabled is also true */
opacity: 1;
}
&[data-loading] [data-content] {
@ -198,20 +196,3 @@
padding-inline-start: calc(var(--icon-size-2) + var(--inner-spacing-1));
}
}
/**
* We have this Bug in Firefox where we are unable to drag
* buttons - https://bugzilla.mozilla.org/show_bug.cgi?id=568313
*
* We found a solution here - https://stackoverflow.com/a/43888410
*/
.dragContainer {
&:after {
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
}
}

4
app/client/packages/design-system/widgets/src/components/Button/src/types.ts
View File

@ -1,4 +1,4 @@
import type { ButtonProps as HeadlessButtonProps } from "@design-system/headless";
import type { ButtonProps as HeadlessButtonProps } from "react-aria-components";
import type { IconProps } from "../../Icon";
import type { COLORS, SIZES } from "../../../shared";
@ -31,8 +31,6 @@ export interface ButtonProps extends HeadlessButtonProps {
* @default accent
*/
iconPosition?: keyof typeof BUTTON_ICON_POSITIONS;
/** Makes the button visually and functionaly disabled but focusable */
visuallyDisabled?: boolean;
/** Indicates the loading text that will be used by screen readers
* when the button is in loading state
* @default Loading...

4
app/client/packages/design-system/widgets/src/components/ButtonGroup/src/ButtonGroupItem.tsx
View File

@ -1,12 +1,12 @@
import type { ForwardedRef } from "react";
import React, { forwardRef } from "react";
import { Button } from "@design-system/widgets";
import type { ButtonGroupItemProps } from "./types";
import type { ButtonRef as HeadlessButtonRef } from "@design-system/headless";
const _ButtonGroupItem = <T extends object>(
props: ButtonGroupItemProps<T>,
ref: HeadlessButtonRef,
ref: ForwardedRef<HTMLButtonElement>,
) => {
const { color, item, variant, ...rest } = props;

7
app/client/packages/design-system/widgets/src/components/IconButton/src/IconButton.tsx
View File

@ -1,12 +1,15 @@
import React, { forwardRef } from "react";
import type { ButtonRef as HeadlessButtonRef } from "@design-system/headless";
import type { ForwardedRef } from "react";
import { Button } from "../../Button";
import type { ButtonProps } from "../../Button";
export type IconButtonProps = Omit<ButtonProps, "iconPosition" | "children">;
const _IconButton = (props: IconButtonProps, ref: HeadlessButtonRef) => {
const _IconButton = (
props: IconButtonProps,
ref: ForwardedRef<HTMLButtonElement>,
) => {
return <Button data-icon-button="" ref={ref} {...props} />;
};

21
app/client/packages/storybook/.storybook/main.ts
View File

@ -1,10 +1,23 @@
import type { StorybookConfig } from "@storybook/react-vite";
import * as glob from "glob";
import * as path from "path";
const dsDir = path.resolve(__dirname, "../../design-system");
function getStories() {
if (process.env.CHROMATIC) {
return ["../../design-system/**/*.chromatic.stories.@(ts|tsx)"];
}
const tsStories = glob
.sync(`${dsDir}/**/*.stories.@(ts|tsx)`, { nosort: true })
.filter((storyPath) => !storyPath.includes("chromatic"));
return ["../../design-system/**/*.mdx", ...tsStories];
}
const config: StorybookConfig = {
stories: [
"../../design-system/**/*.mdx",
"../../design-system/**/*.stories.@(ts|tsx)",
],
stories: getStories(),
addons: [
"@chromatic-com/storybook",