Skip to content

Commit

Permalink
fix: refactor wds menu and related components, widgets (#33703)
Browse files Browse the repository at this point in the history
## Description
1. WDS menu component has been completely refactored. WDS headless
component has been removed, we use `react-aria-components` instead. The
menu component now has the ability to use submenus and icons for items.
2. Rename components `ActionGroup` to `ToolbarButtons and `ButtonGroup`
to `InlineButtons`
3. Make API of the `ToolbarButtons`, `Menu`, `InlineButtons`, `Select`
consistent.
4. Cosmetic refactoring of `ToolbarButtons` and `InlineButtons` and
related widgets.

Fixes:
#32299
#32109

## 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/9210315418>
> Commit: b11c002
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9210315418&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
- [x] No

---------

Co-authored-by: Pawan Kumar <pawan@appsmith.com>
  • Loading branch information
KelvinOm and jsartisan committed May 24, 2024
1 parent cece3fc commit 55ae859
Show file tree
Hide file tree
Showing 84 changed files with 2,286 additions and 2,457 deletions.
1 change: 1 addition & 0 deletions app/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@
"@opentelemetry/sdk-trace-base": "^1.17.1",
"@opentelemetry/sdk-trace-web": "^1.17.1",
"@opentelemetry/semantic-conventions": "^1.17.1",
"@react-types/shared": "^3.23.0",
"@sentry/react": "^6.2.4",
"@sentry/tracing": "^6.2.4",
"@shared/ast": "workspace:^",
Expand Down
2 changes: 1 addition & 1 deletion app/client/packages/design-system/headless/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"@react-types/checkbox": "^3.4.3",
"@react-types/label": "^3.7.3",
"@react-types/menu": "^3.9.5",
"@react-types/shared": "^3.22.0",
"@react-types/shared": "^3.23.1",
"classnames": "*"
},
"peerDependencies": {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,36 @@
import type { Ref } from "react";
import type { ReactNode, Ref } from "react";
import React, { forwardRef } from "react";
import type { SpectrumFieldProps } from "@react-types/label";

import { Label } from "./Label";
import { HelpText } from "./HelpText";
import type { StyleProps, ValidationState } from "@react-types/shared";

export type FieldProps = Omit<
export type FieldProps = Pick<
SpectrumFieldProps,
"showErrorIcon" | "labelPosition" | "labelAlign" | keyof StyleProps
| "contextualHelp"
| "description"
| "descriptionProps"
| "elementType"
| "errorMessage"
| "errorMessageProps"
| "includeNecessityIndicatorInAccessibilityName"
| "isDisabled"
| "isRequired"
| "label"
| "labelProps"
| "necessityIndicator"
| "wrapperClassName"
| "wrapperProps"
> & {
fieldType?: "field" | "field-group";
labelClassName?: string;
helpTextClassName?: string;
validationState?: ValidationState;
children: ReactNode;
isReadOnly?: boolean;
};

import type { ValidationState } from "@react-types/shared";

export type FieldRef = Ref<HTMLDivElement>;

const _Field = (props: FieldProps, ref: FieldRef) => {
Expand Down Expand Up @@ -75,7 +90,9 @@ const _Field = (props: FieldProps, ref: FieldRef) => {
includeNecessityIndicatorInAccessibilityName
}
isRequired={isRequired}
necessityIndicator={!Boolean(isReadOnly) && necessityIndicator}
necessityIndicator={
!Boolean(isReadOnly) ? necessityIndicator : undefined
}
>
<span>{label}</span>
</Label>
Expand Down

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

1 change: 0 additions & 1 deletion app/client/packages/design-system/headless/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,3 @@ export * from "./components/Switch";
export * from "./components/TextInput";
export * from "./components/TextArea";
export * from "./components/Popover";
export * from "./components/Menu";
3 changes: 2 additions & 1 deletion app/client/packages/design-system/widgets/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,12 @@
"@react-aria/utils": "^3.16.0",
"@react-aria/visually-hidden": "^3.8.0",
"@react-types/actiongroup": "^3.4.6",
"@react-types/shared": "^3.23.1",
"@tabler/icons-react": "^2.45.0",
"clsx": "^2.0.0",
"colorjs.io": "^0.4.3",
"lodash": "*",
"react-aria-components": "^1.1.1"
"react-aria-components": "^1.2.1"
},
"devDependencies": {
"@types/fs-extra": "^11.0.4",
Expand Down
Loading

0 comments on commit 55ae859

Please sign in to comment.