From f2e506a32204dde5c9963e8227c2fd2a94ddfc9e Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 11 Dec 2024 14:59:55 +0530 Subject: [PATCH 01/19] fix select widget bug --- .../ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx | 2 +- .../ui-builder/ui/wds/WDSSwitchWidget/config/settersConfig.ts | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx b/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx index 11398d323b1a..b5b9c956e13f 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx +++ b/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx @@ -173,7 +173,7 @@ class WDSSelectWidget extends BaseWidget { selectedKey={selectedOptionValue} > {this.optionsToSelectItems(options).map((option) => ( - + {option.label} ))} diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSSwitchWidget/config/settersConfig.ts b/app/client/src/modules/ui-builder/ui/wds/WDSSwitchWidget/config/settersConfig.ts index 311222978fb6..1ec9ebc33a46 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSSwitchWidget/config/settersConfig.ts +++ b/app/client/src/modules/ui-builder/ui/wds/WDSSwitchWidget/config/settersConfig.ts @@ -17,9 +17,5 @@ export const settersConfig = { type: "boolean", accessor: "isSwitchedOn", }, - setColor: { - path: "accentColor", - type: "string", - }, }, }; From 8274bc3602560188173767881ee27b570a2d94c9 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 12 Dec 2024 15:47:03 +0530 Subject: [PATCH 02/19] fix chat ui bugs --- .../src/components/ComboBox/src/ComboBox.tsx | 6 +- .../src/components/Input/src/Input.tsx | 2 +- .../components/Input/src/styles.module.css | 102 +++++------------- .../components/ListBox/src/styles.module.css | 4 + .../components/Popover/src/styles.module.css | 4 + .../src/components/Select/src/Select.tsx | 6 +- .../components/Select/src/SelectTrigger.tsx | 10 +- .../components/Select/src/styles.module.css | 14 +++ .../TextField/stories/TextField.stories.tsx | 1 + 9 files changed, 67 insertions(+), 82 deletions(-) create mode 100644 app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx index 738432dd4b3e..35023bb301c0 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx @@ -51,8 +51,10 @@ export const ComboBox = (props: ComboBoxProps) => { size={size} /> {errorMessage} - - {children} + + + {children} + ); diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx b/app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx index 3472e2b53ac7..b6b2a0e27c9a 100644 --- a/app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx +++ b/app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx @@ -46,6 +46,7 @@ function _Input(props: InputProps, ref: React.Ref) { return ( + {Boolean(prefix) && {prefix}} ) { type={showPassword ? "text" : type} value={isEmpty && Boolean(isReadOnly) ? "—" : value} /> - {Boolean(prefix) && {prefix}} {Boolean(suffix) && {suffix}} ); diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css index e36ba4a53650..6c85b0c694e2 100644 --- a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css @@ -6,12 +6,8 @@ width: 100%; } -.input { - position: relative; - display: flex; - flex: 1; - align-items: center; - box-sizing: content-box; +.inputGroup { + background-color: var(--color-bg); max-inline-size: 100%; padding-block: var(--inner-spacing-1); padding-inline: var(--inner-spacing-2); @@ -25,8 +21,12 @@ overflow: hidden; } -.input:has(> [data-select-text]) { - block-size: var(--body-line-height); +.input { + border: none; + outline: none; + background-color: transparent; + flex: 1; + padding: 0; } .input:is(textarea) { @@ -57,40 +57,6 @@ ); } -.inputGroup:has(> [data-input-prefix]) .input { - padding-left: var(--sizing-8); -} - -.inputGroup:has(> [data-input-prefix]) .input[data-size="large"] { - padding-left: var(--sizing-12); -} - -.inputGroup:has(> [data-input-prefix]) .input[data-size="small"] { - padding-left: var(--sizing-6); -} - -.inputGroup:has(> [data-input-prefix]) [data-input-prefix] { - left: var(--inner-spacing-1); - position: absolute; -} - -.inputGroup:has(> [data-input-suffix]) .input { - padding-right: var(--sizing-8); -} - -.inputGroup:has(> [data-input-suffix]) .input[data-size="large"] { - padding-right: var(--sizing-12); -} - -.inputGroup:has(> [data-input-suffix]) .input[data-size="small"] { - padding-right: var(--sizing-6); -} - -.inputGroup:has(> [data-input-suffix]) [data-input-suffix] { - right: var(--inner-spacing-1); - position: absolute; -} - .inputGroup :is([data-input-suffix], [data-input-prefix]) { display: flex; justify-content: center; @@ -102,14 +68,15 @@ * HOVERED * ---------------------------------------------------------------------------- */ -.inputGroup[data-hovered] - .input:not( - :is( - [data-focused], - [data-readonly], - [data-disabled], - [data-focus-within], - :has(~ input[data-disabled="true"]) +.inputGroup[data-hovered]:has( + > .input:not( + :is( + [data-focused], + [data-readonly], + [data-disabled], + [data-focus-within], + :has(~ input[data-disabled="true"]) + ) ) ) { background-color: var(--color-bg-neutral-subtle-hover); @@ -157,8 +124,8 @@ * DISABLED * ---------------------------------------------------------------------------- */ -.input[data-disabled], -.input:has(~ input[data-disabled]) { +.inputGroup:has(> .input[data-disabled]), +.inputGroup:has(> .input:has(~ input[data-disabled])) { cursor: not-allowed; box-shadow: none; } @@ -168,13 +135,14 @@ * INVALID * ---------------------------------------------------------------------------- */ -.input[data-invalid] { +.inputGroup:has(> .input[data-invalid]) { box-shadow: 0 0 0 1px var(--color-bd-negative); } -.inputGroup[data-hovered] - .input[data-invalid]:not( - :is([data-focused], [data-readonly], [data-disabled]) +.inputGroup[data-hovered]:has( + > .input[data-invalid]:not( + :is([data-focused], [data-readonly], [data-disabled]) + ) ) { box-shadow: 0 0 0 1px var(--color-bd-negative-hover); } @@ -184,7 +152,9 @@ * FOCUSSED * ---------------------------------------------------------------------------- */ -.input:is([data-focused], [data-focus-within]):not([data-readonly]) { +.inputGroup:has( + > .input:is([data-focused], [data-focus-within]):not([data-readonly]) + ) { background-color: transparent; box-shadow: 0 0 0 2px var(--color-bd-focus); } @@ -194,31 +164,17 @@ * SIZE * ---------------------------------------------------------------------------- */ -.input[data-size="small"] { +.inputGroup:has(> .input[data-size="small"]) { block-size: calc( var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end) ); padding-block: var(--inner-spacing-2); } -.input[data-size="large"] { +.inputGroup:has(> .input[data-size="large"]) { block-size: calc( var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end) ); padding-block: var(--inner-spacing-3); padding-inline: var(--inner-spacing-3); } - -/** - * ---------------------------------------------------------------------------- - * SELECT BUTTON's TEXT - * ---------------------------------------------------------------------------- - */ -.input [data-select-text] { - display: flex; - align-items: center; -} - -.input [data-select-text] [data-icon] { - margin-inline-end: var(--inner-spacing-1); -} diff --git a/app/client/packages/design-system/widgets/src/components/ListBox/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/ListBox/src/styles.module.css index b253d06f7e04..395d0b489154 100644 --- a/app/client/packages/design-system/widgets/src/components/ListBox/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/ListBox/src/styles.module.css @@ -3,3 +3,7 @@ max-height: inherit; overflow-y: auto; } + +.listBox:is([data-select-listbox], [data-combobox-listbox]) { + min-inline-size: calc(var(--trigger-width) + var(--inner-spacing-2) * 2); +} diff --git a/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css index efbd9ecd429b..44e59ad3d59b 100644 --- a/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css @@ -4,3 +4,7 @@ z-index: var(--z-index-99); box-shadow: var(--box-shadow-1); } + +.popover:is([data-select-popover], [data-combobox-popover]) { + transform: translateX(calc(-1 * var(--inner-spacing-2, 0))); +} diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx b/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx index 0337fd709ad9..688f90645f53 100644 --- a/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx +++ b/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx @@ -52,8 +52,10 @@ export const Select = (props: SelectProps) => { size={size} /> {errorMessage} - - {children} + + + {children} + )} diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/SelectTrigger.tsx b/app/client/packages/design-system/widgets/src/components/Select/src/SelectTrigger.tsx index 5fcd5ca50f4d..8c57b0377fe8 100644 --- a/app/client/packages/design-system/widgets/src/components/Select/src/SelectTrigger.tsx +++ b/app/client/packages/design-system/widgets/src/components/Select/src/SelectTrigger.tsx @@ -1,8 +1,10 @@ +import clsx from "clsx"; import React from "react"; import { Icon, Spinner, textInputStyles } from "@appsmith/wds"; import { getTypographyClassName } from "@appsmith/wds-theming"; import { Button, Group, SelectValue } from "react-aria-components"; +import styles from "./styles.module.css"; import type { SelectProps } from "./types"; interface SelectTriggerProps { @@ -19,7 +21,7 @@ export const SelectTrigger: React.FC = (props) => { return ( - - {Boolean(isLoading) ? : } - ); }; diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css new file mode 100644 index 000000000000..5064b3b7ed28 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css @@ -0,0 +1,14 @@ +.selectTriggerButton { + display: flex; + align-items: center; +} + +.selectTriggerButton [data-select-text] { + display: flex; + align-items: center; + flex: 1; +} + +.selectTriggerButton [data-select-text] [data-icon] { + margin-inline-end: var(--inner-spacing-1); +} diff --git a/app/client/packages/design-system/widgets/src/components/TextField/stories/TextField.stories.tsx b/app/client/packages/design-system/widgets/src/components/TextField/stories/TextField.stories.tsx index 8e44d7ce549c..b8bae5be4458 100644 --- a/app/client/packages/design-system/widgets/src/components/TextField/stories/TextField.stories.tsx +++ b/app/client/packages/design-system/widgets/src/components/TextField/stories/TextField.stories.tsx @@ -44,6 +44,7 @@ export const WithPrefixAndSuffix: Story = { prefix={} suffix={} /> + +121212} /> ), }; From a6637a945a63d1708ec5fdea87f7617d6bb97b4f Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 13 Dec 2024 11:06:47 +0530 Subject: [PATCH 03/19] revert few files --- .../ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx | 2 +- .../ui-builder/ui/wds/WDSSwitchWidget/config/settersConfig.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx b/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx index b5b9c956e13f..11398d323b1a 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx +++ b/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx @@ -173,7 +173,7 @@ class WDSSelectWidget extends BaseWidget { selectedKey={selectedOptionValue} > {this.optionsToSelectItems(options).map((option) => ( - + {option.label} ))} diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSSwitchWidget/config/settersConfig.ts b/app/client/src/modules/ui-builder/ui/wds/WDSSwitchWidget/config/settersConfig.ts index 1ec9ebc33a46..311222978fb6 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSSwitchWidget/config/settersConfig.ts +++ b/app/client/src/modules/ui-builder/ui/wds/WDSSwitchWidget/config/settersConfig.ts @@ -17,5 +17,9 @@ export const settersConfig = { type: "boolean", accessor: "isSwitchedOn", }, + setColor: { + path: "accentColor", + type: "string", + }, }, }; From 275b6afe211b03af19d7f578fcedf77157da0c27 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 13 Dec 2024 13:39:08 +0530 Subject: [PATCH 04/19] fix select widget bugs --- .../src/components/ComboBox/src/ComboBox.tsx | 6 ++---- .../ComboBox/src/ComboBoxTrigger.tsx | 8 +++---- .../components/ComboBox/src/styles.module.css | 7 +++++++ .../src/components/Input/src/Input.tsx | 10 +++++++-- .../components/Input/src/styles.module.css | 1 + .../widgets/src/components/Input/src/types.ts | 4 +++- .../components/ListBox/src/styles.module.css | 4 ---- .../components/Popover/src/styles.module.css | 4 ---- .../src/components/Select/src/Select.tsx | 6 ++---- .../components/Select/src/SelectTrigger.tsx | 10 +++++++-- .../components/Select/src/styles.module.css | 21 ++++++++++++++----- 11 files changed, 51 insertions(+), 30 deletions(-) create mode 100644 app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx index 35023bb301c0..738432dd4b3e 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx @@ -51,10 +51,8 @@ export const ComboBox = (props: ComboBoxProps) => { size={size} /> {errorMessage} - - - {children} - + + {children} ); diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBoxTrigger.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBoxTrigger.tsx index c17bcb4cca89..97510ba77ca1 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBoxTrigger.tsx +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBoxTrigger.tsx @@ -1,8 +1,7 @@ -import clsx from "clsx"; import React, { useMemo } from "react"; -import { getTypographyClassName } from "@appsmith/wds-theming"; -import { Spinner, textInputStyles, Input, IconButton } from "@appsmith/wds"; +import { Spinner, Input, IconButton } from "@appsmith/wds"; +import styles from "./styles.module.css"; import type { ComboBoxProps } from "./types"; interface ComboBoxTriggerProps { @@ -29,7 +28,8 @@ export const ComboBoxTrigger: React.FC = (props) => { return ( ) { const { + className, defaultValue, + inputGroupClassName, isLoading, isReadOnly, prefix, @@ -45,11 +47,15 @@ function _Input(props: InputProps, ref: React.Ref) { })(); return ( - + {Boolean(prefix) && {prefix}} , - CommonInputProps {} + CommonInputProps { + inputGroupClassName?: string; +} export interface TextAreaInputProps extends Omit, diff --git a/app/client/packages/design-system/widgets/src/components/ListBox/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/ListBox/src/styles.module.css index 395d0b489154..b253d06f7e04 100644 --- a/app/client/packages/design-system/widgets/src/components/ListBox/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/ListBox/src/styles.module.css @@ -3,7 +3,3 @@ max-height: inherit; overflow-y: auto; } - -.listBox:is([data-select-listbox], [data-combobox-listbox]) { - min-inline-size: calc(var(--trigger-width) + var(--inner-spacing-2) * 2); -} diff --git a/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css index 44e59ad3d59b..efbd9ecd429b 100644 --- a/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css @@ -4,7 +4,3 @@ z-index: var(--z-index-99); box-shadow: var(--box-shadow-1); } - -.popover:is([data-select-popover], [data-combobox-popover]) { - transform: translateX(calc(-1 * var(--inner-spacing-2, 0))); -} diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx b/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx index 688f90645f53..0337fd709ad9 100644 --- a/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx +++ b/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx @@ -52,10 +52,8 @@ export const Select = (props: SelectProps) => { size={size} /> {errorMessage} - - - {children} - + + {children} )} diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/SelectTrigger.tsx b/app/client/packages/design-system/widgets/src/components/Select/src/SelectTrigger.tsx index 8c57b0377fe8..0458df47bacd 100644 --- a/app/client/packages/design-system/widgets/src/components/Select/src/SelectTrigger.tsx +++ b/app/client/packages/design-system/widgets/src/components/Select/src/SelectTrigger.tsx @@ -19,7 +19,9 @@ export const SelectTrigger: React.FC = (props) => { const { isDisabled, isInvalid, isLoading, placeholder, size } = props; return ( - + diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css index 5064b3b7ed28..e4a05fbffd47 100644 --- a/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css @@ -1,6 +1,21 @@ -.selectTriggerButton { +/** + * Reason for using div.selectInputGroup instead of just .selectInputGroup is to increase the specificity of the selector + * Also, we are removing the padding-inline from selectInputGroup and adding it to selectTriggerButton + * This is done to ensure that width of the select popover is same as the width of the select trigger button. Otherwise, + * the width of the popover will be less than the width of the trigger button because of the padding-inline by .inputGroup . + */ +div.selectInputGroup { + padding-inline: 0; +} + +button.selectTriggerButton { display: flex; align-items: center; + padding-inline: var(--inner-spacing-2); +} + +.selectTriggerButton:has(> [data-select-text]) { + block-size: var(--body-line-height); } .selectTriggerButton [data-select-text] { @@ -8,7 +23,3 @@ align-items: center; flex: 1; } - -.selectTriggerButton [data-select-text] [data-icon] { - margin-inline-end: var(--inner-spacing-1); -} From 4ccdbf4670558c840d4b39ea2b17e0c8c75eb8e1 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Mon, 16 Dec 2024 11:33:50 +0530 Subject: [PATCH 05/19] fix combobox styles --- .../src/components/ComboBox/src/ComboBoxTrigger.tsx | 1 + .../widgets/src/components/ComboBox/src/styles.module.css | 8 ++++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBoxTrigger.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBoxTrigger.tsx index 97510ba77ca1..f819e89bdb77 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBoxTrigger.tsx +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBoxTrigger.tsx @@ -19,6 +19,7 @@ export const ComboBoxTrigger: React.FC = (props) => { return ( Date: Mon, 16 Dec 2024 16:39:04 +0530 Subject: [PATCH 06/19] add allowing currency and phone dial code option --- .../widgets/src/components/Menu/src/Menu.tsx | 9 ++- .../src/components/Menu/src/styles.module.css | 4 + .../widgets/src/components/Menu/src/types.ts | 8 +- .../components/Menu/stories/Menu.stories.tsx | 9 ++- .../src/components/MenuItem/src/MenuItem.tsx | 8 +- .../TextField/stories/TextField.stories.tsx | 8 +- .../component/index.tsx | 77 +++++++++++++++++-- .../component/styles.module.css | 3 + .../component/utilities.ts | 10 +++ .../propertyPaneConfig/contentConfig.ts | 10 +++ .../WDSPhoneInputWidget/component/index.tsx | 73 ++++++++++++++++-- .../component/styles.module.css | 3 + .../propertyPaneConfig/contentConfig.ts | 10 +++ 13 files changed, 203 insertions(+), 29 deletions(-) create mode 100644 app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/styles.module.css create mode 100644 app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/component/styles.module.css diff --git a/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx b/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx index 223ed03d7c17..8d509ecbe1b5 100644 --- a/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx +++ b/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx @@ -2,12 +2,13 @@ import React, { createContext, useContext } from "react"; import { listStyles, Popover } from "@appsmith/wds"; import { Menu as HeadlessMenu } from "react-aria-components"; +import styles from "./styles.module.css"; import type { MenuProps } from "./types"; const MenuNestingContext = createContext(0); export const Menu = (props: MenuProps) => { - const { children } = props; + const { children, maxHeight } = props; const root = document.body.querySelector( "[data-theme-provider]", ) as HTMLButtonElement; @@ -18,7 +19,11 @@ export const Menu = (props: MenuProps) => { return ( {/* Only the parent Popover should be placed in the root. Placing child popoves in root would cause the menu to function incorrectly */} - + {children} diff --git a/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css index 85f54d568986..e5c7a95dc3d7 100644 --- a/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css @@ -10,3 +10,7 @@ ); } } + +.menuPopover { + overflow-y: auto; +} diff --git a/app/client/packages/design-system/widgets/src/components/Menu/src/types.ts b/app/client/packages/design-system/widgets/src/components/Menu/src/types.ts index 4c7b10e72f2d..ae1bfdc741a4 100644 --- a/app/client/packages/design-system/widgets/src/components/Menu/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Menu/src/types.ts @@ -1,7 +1,5 @@ import type { MenuProps as AriaMenuProps } from "react-aria-components"; -export interface MenuProps - extends Omit< - AriaMenuProps, - "slot" | "selectionMode" | "selectedKeys" - > {} +export interface MenuProps extends Omit, "slot"> { + maxHeight?: number; +} diff --git a/app/client/packages/design-system/widgets/src/components/Menu/stories/Menu.stories.tsx b/app/client/packages/design-system/widgets/src/components/Menu/stories/Menu.stories.tsx index 1e635bc377be..df5939b9b251 100644 --- a/app/client/packages/design-system/widgets/src/components/Menu/stories/Menu.stories.tsx +++ b/app/client/packages/design-system/widgets/src/components/Menu/stories/Menu.stories.tsx @@ -26,10 +26,11 @@ export const Main: Story = { - Item 1 - Item 2 - Item 3 - Item 4 + {Array.from({ length: 100 }, (_, i) => ( + + Item {i + 1} + + ))} Submenu diff --git a/app/client/packages/design-system/widgets/src/components/MenuItem/src/MenuItem.tsx b/app/client/packages/design-system/widgets/src/components/MenuItem/src/MenuItem.tsx index edd690856695..d2ae90291990 100644 --- a/app/client/packages/design-system/widgets/src/components/MenuItem/src/MenuItem.tsx +++ b/app/client/packages/design-system/widgets/src/components/MenuItem/src/MenuItem.tsx @@ -6,12 +6,16 @@ import { import { Icon, Text, listBoxItemStyles } from "@appsmith/wds"; import type { MenuItemProps } from "./types"; +import clsx from "clsx"; export function MenuItem(props: MenuItemProps) { - const { children, icon, ...rest } = props; + const { children, className, icon, ...rest } = props; return ( - + {composeRenderProps(children, (children, { hasSubmenu }) => ( <> {icon && } diff --git a/app/client/packages/design-system/widgets/src/components/TextField/stories/TextField.stories.tsx b/app/client/packages/design-system/widgets/src/components/TextField/stories/TextField.stories.tsx index b8bae5be4458..0d99286e51b7 100644 --- a/app/client/packages/design-system/widgets/src/components/TextField/stories/TextField.stories.tsx +++ b/app/client/packages/design-system/widgets/src/components/TextField/stories/TextField.stories.tsx @@ -44,7 +44,13 @@ export const WithPrefixAndSuffix: Story = { prefix={} suffix={} /> - +121212} /> + + +011 + + } + /> ), }; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/index.tsx b/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/index.tsx index 4299b050633a..dc64ba61b655 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/index.tsx +++ b/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/index.tsx @@ -1,19 +1,80 @@ -import React from "react"; -import { Text, TextField } from "@appsmith/wds"; -import type { CurrencyInputComponentProps } from "./types"; -import { CurrencyTypeOptions } from "constants/Currency"; +import React, { type Key } from "react"; +import { + Button, + Menu, + MenuItem, + MenuTrigger, + Text, + TextField, +} from "@appsmith/wds"; import { useDebouncedValue } from "@mantine/hooks"; +import { CurrencyTypeOptions } from "constants/Currency"; + +import styles from "./styles.module.css"; +import { countryToFlag } from "./utilities"; +import type { CurrencyInputComponentProps } from "./types"; const DEBOUNCE_TIME = 300; export function CurrencyInputComponent(props: CurrencyInputComponentProps) { - const currency = CurrencyTypeOptions.find( + const { allowCurrencyChange, onCurrencyChange } = props; + const selectedCurrency = CurrencyTypeOptions.find( (option) => option.currency === props.currencyCode, ); - const prefix = ( - {currency?.symbol_native} - ); + const onMenuItemSelect = (key: Key) => { + const currency = CurrencyTypeOptions.find((option) => option.code === key); + + onCurrencyChange(currency?.currency); + }; + + const prefix = (function () { + if (allowCurrencyChange) { + return ( + + + + {CurrencyTypeOptions.map((item) => { + return ( + + {countryToFlag(item.code)}{" "} + {item.currency}{" "} + {item.currency_name} + + ); + })} + + + ); + } + + return ( + + {selectedCurrency?.symbol_native} + + ); + })(); // Note: because of how derived props are handled by MetaHoc, the isValid shows wrong // values for some milliseconds. To avoid that, we are using debounced value. diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/styles.module.css b/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/styles.module.css new file mode 100644 index 000000000000..257c8dc9e98b --- /dev/null +++ b/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/styles.module.css @@ -0,0 +1,3 @@ +.currencyOption [data-component="name"] { + color: var(--color-fg-neutral-subtle); +} diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/utilities.ts b/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/utilities.ts index ff23b8bdcc2d..ad61d5def857 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/utilities.ts +++ b/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/utilities.ts @@ -63,3 +63,13 @@ export function parseLocaleFormattedStringToNumber(currencyString = "") { .replace(new RegExp("\\" + getLocaleDecimalSeperator()), "."), ); } + +export const countryToFlag = (isoCode: string) => { + return typeof String.fromCodePoint !== "undefined" + ? isoCode + .toUpperCase() + .replace(/./g, (char) => + String.fromCodePoint(char.charCodeAt(0) + 127397), + ) + : isoCode; +}; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/config/propertyPaneConfig/contentConfig.ts b/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/config/propertyPaneConfig/contentConfig.ts index da27a0d53b8f..7bba77a93fad 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/config/propertyPaneConfig/contentConfig.ts +++ b/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/config/propertyPaneConfig/contentConfig.ts @@ -62,6 +62,16 @@ export const propertyPaneContentConfig = [ type: ValidationTypes.TEXT, }, }, + { + propertyName: "allowCurrencyChange", + label: "Allow currency change", + helpText: "Search by currency or country", + controlType: "SWITCH", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, { helpText: "No. of decimals in currency input", propertyName: "decimals", diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/component/index.tsx b/app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/component/index.tsx index ab7fa35a29b4..96e876b59284 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/component/index.tsx +++ b/app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/component/index.tsx @@ -1,19 +1,78 @@ -import React from "react"; +import React, { type Key } from "react"; import { ISDCodeOptions } from "constants/ISDCodes_v2"; -import { Text, TextField } from "@appsmith/wds"; +import { + Button, + Menu, + MenuItem, + MenuTrigger, + Text, + TextField, +} from "@appsmith/wds"; +import styles from "./styles.module.css"; +import { countryToFlag } from "../widget/helpers"; import type { PhoneInputComponentProps } from "./types"; export function PhoneInputComponent(props: PhoneInputComponentProps) { + const { allowDialCodeChange, onISDCodeChange } = props; + const selectedCountry = ISDCodeOptions.find( (option) => option.dial_code === props.dialCode, ); - const prefix = ( - {`${selectedCountry?.dial_code}`} - ); + const onMenuItemSelect = (key: Key) => { + const country = ISDCodeOptions.find((option) => option.code === key); + + onISDCodeChange(country?.dial_code); + }; + + const prefix = (function () { + if (allowDialCodeChange) { + return ( + + + + {ISDCodeOptions.map((item) => { + return ( + + {countryToFlag(item?.dial_code ?? "")}{" "} + {item.dial_code}{" "} + {item.name} + + ); + })} + + + ); + } + + return ( + {selectedCountry?.dial_code} + ); + })(); return ( Date: Mon, 16 Dec 2024 16:56:45 +0530 Subject: [PATCH 07/19] remove unecessary code --- .../widgets/src/components/Menu/src/Menu.tsx | 2 -- .../widgets/src/components/Menu/src/styles.module.css | 4 ---- .../widgets/src/components/Menu/stories/Menu.stories.tsx | 9 ++++----- .../widgets/src/components/Popover/src/styles.module.css | 1 + 4 files changed, 5 insertions(+), 11 deletions(-) diff --git a/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx b/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx index 8d509ecbe1b5..a743f61f7ed9 100644 --- a/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx +++ b/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx @@ -2,7 +2,6 @@ import React, { createContext, useContext } from "react"; import { listStyles, Popover } from "@appsmith/wds"; import { Menu as HeadlessMenu } from "react-aria-components"; -import styles from "./styles.module.css"; import type { MenuProps } from "./types"; const MenuNestingContext = createContext(0); @@ -21,7 +20,6 @@ export const Menu = (props: MenuProps) => { {/* Only the parent Popover should be placed in the root. Placing child popoves in root would cause the menu to function incorrectly */} diff --git a/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css index e5c7a95dc3d7..85f54d568986 100644 --- a/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css @@ -10,7 +10,3 @@ ); } } - -.menuPopover { - overflow-y: auto; -} diff --git a/app/client/packages/design-system/widgets/src/components/Menu/stories/Menu.stories.tsx b/app/client/packages/design-system/widgets/src/components/Menu/stories/Menu.stories.tsx index df5939b9b251..1e635bc377be 100644 --- a/app/client/packages/design-system/widgets/src/components/Menu/stories/Menu.stories.tsx +++ b/app/client/packages/design-system/widgets/src/components/Menu/stories/Menu.stories.tsx @@ -26,11 +26,10 @@ export const Main: Story = { - {Array.from({ length: 100 }, (_, i) => ( - - Item {i + 1} - - ))} + Item 1 + Item 2 + Item 3 + Item 4 Submenu diff --git a/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css index efbd9ecd429b..eaa41f31ca35 100644 --- a/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css @@ -3,4 +3,5 @@ border-radius: var(--border-radius-elevation-3); z-index: var(--z-index-99); box-shadow: var(--box-shadow-1); + overflow-y: auto; } From 1987d371dfa6055b4150f760035a66782fc0befa Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Mon, 16 Dec 2024 17:13:40 +0530 Subject: [PATCH 08/19] fix select bug + focus on input on prefix and suffix click --- .../src/components/Input/src/Input.tsx | 19 +++++++++++++++---- .../components/Input/src/styles.module.css | 1 + .../ui/wds/WDSSelectWidget/widget/index.tsx | 2 +- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx b/app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx index dded20a2eedc..746dc7e52573 100644 --- a/app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx +++ b/app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx @@ -1,5 +1,6 @@ import clsx from "clsx"; -import React, { forwardRef, useState } from "react"; +import { mergeRefs } from "@react-aria/utils"; +import React, { forwardRef, useRef, useState } from "react"; import { getTypographyClassName } from "@appsmith/wds-theming"; import { IconButton, Spinner, type IconProps } from "@appsmith/wds"; import { Group, Input as HeadlessInput } from "react-aria-components"; @@ -21,6 +22,8 @@ function _Input(props: InputProps, ref: React.Ref) { value, ...rest } = props; + const localRef = useRef(null); + const mergedRef = mergeRefs(ref, localRef); const [showPassword, setShowPassword] = useState(false); const togglePasswordVisibility = () => setShowPassword((prev) => !prev); const isEmpty = !Boolean(value) && !Boolean(defaultValue); @@ -48,7 +51,11 @@ function _Input(props: InputProps, ref: React.Ref) { return ( - {Boolean(prefix) && {prefix}} + {Boolean(prefix) && ( + localRef.current?.focus()}> + {prefix} + + )} ) { data-readonly={Boolean(isReadOnly) ? true : undefined} data-size={Boolean(size) ? size : undefined} defaultValue={defaultValue} - ref={ref} + ref={mergedRef} type={showPassword ? "text" : type} value={isEmpty && Boolean(isReadOnly) ? "—" : value} /> - {Boolean(suffix) && {suffix}} + {Boolean(suffix) && ( + localRef.current?.focus()}> + {suffix} + + )} ); } diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css index 17e1047fe680..ce78bfcdf6ad 100644 --- a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css @@ -13,6 +13,7 @@ padding-inline: var(--inner-spacing-2); gap: var(--inner-spacing-1); border: 0; + box-sizing: border-box; border-radius: var(--border-radius-elevation-3); background-color: var(--color-bg-neutral-subtle); box-shadow: inset 0 0 0 1px var(--color-bd-on-neutral-subtle); diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx b/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx index 11398d323b1a..b5b9c956e13f 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx +++ b/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx @@ -173,7 +173,7 @@ class WDSSelectWidget extends BaseWidget { selectedKey={selectedOptionValue} > {this.optionsToSelectItems(options).map((option) => ( - + {option.label} ))} From 61c8e4cec2992425cbea4ea4e805751912a302b5 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Mon, 16 Dec 2024 17:21:37 +0530 Subject: [PATCH 09/19] remove select fix --- .../modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx b/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx index b5b9c956e13f..11398d323b1a 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx +++ b/app/client/src/modules/ui-builder/ui/wds/WDSSelectWidget/widget/index.tsx @@ -173,7 +173,7 @@ class WDSSelectWidget extends BaseWidget { selectedKey={selectedOptionValue} > {this.optionsToSelectItems(options).map((option) => ( - + {option.label} ))} From a3db38633046680fa5b9779b28e0364b2a009bab Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Mon, 16 Dec 2024 17:28:40 +0530 Subject: [PATCH 10/19] fix menu overflow --- .../design-system/widgets/src/components/Menu/src/Menu.tsx | 5 +++-- .../widgets/src/components/Popover/src/styles.module.css | 1 - 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx b/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx index a743f61f7ed9..e1e53a561fa6 100644 --- a/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx +++ b/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx @@ -3,11 +3,12 @@ import { listStyles, Popover } from "@appsmith/wds"; import { Menu as HeadlessMenu } from "react-aria-components"; import type { MenuProps } from "./types"; +import clsx from "clsx"; const MenuNestingContext = createContext(0); export const Menu = (props: MenuProps) => { - const { children, maxHeight } = props; + const { children, className, maxHeight, ...rest } = props; const root = document.body.querySelector( "[data-theme-provider]", ) as HTMLButtonElement; @@ -22,7 +23,7 @@ export const Menu = (props: MenuProps) => { UNSTABLE_portalContainer={isRootMenu ? root : undefined} maxHeight={maxHeight} > - + {children} diff --git a/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css index eaa41f31ca35..efbd9ecd429b 100644 --- a/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Popover/src/styles.module.css @@ -3,5 +3,4 @@ border-radius: var(--border-radius-elevation-3); z-index: var(--z-index-99); box-shadow: var(--box-shadow-1); - overflow-y: auto; } From 4141ec7c90a9c2fb78ce0bc62f9e3645846e7b57 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Mon, 16 Dec 2024 17:31:37 +0530 Subject: [PATCH 11/19] fix text value in phone input --- .../ui-builder/ui/wds/WDSPhoneInputWidget/component/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/component/index.tsx b/app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/component/index.tsx index 96e876b59284..39ce610ba6a1 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/component/index.tsx +++ b/app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/component/index.tsx @@ -56,7 +56,7 @@ export function PhoneInputComponent(props: PhoneInputComponentProps) { className={styles.dialCodeOption} id={item.code} key={`menu-item-${item.code}`} - textValue={item.dial_code} + textValue={item.name} > {countryToFlag(item?.dial_code ?? "")}{" "} {item.dial_code}{" "} From 349a3f272fea52b2feb6b19048ecc070efee0fe9 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 17 Dec 2024 11:18:03 +0530 Subject: [PATCH 12/19] fix input styles --- .../widgets/src/components/ComboBox/src/styles.module.css | 7 +++++-- .../widgets/src/components/Input/src/styles.module.css | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css index 0efdd2f15181..ad2de66e5104 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css @@ -1,11 +1,14 @@ div.comboboxInputGroup { - padding-inline: 0; + padding: 0; + gap: 0; } input.comboboxInput { padding-inline: var(--inner-spacing-2); + padding-block: var(--inner-spacing-1); } .comboboxTriggerButton { - margin-inline-end: var(--inner-spacing-2); + position: absolute; + inset-inline-end: var(--inner-spacing-2); } diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css index ce78bfcdf6ad..07c4b24536ff 100644 --- a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css @@ -13,7 +13,7 @@ padding-inline: var(--inner-spacing-2); gap: var(--inner-spacing-1); border: 0; - box-sizing: border-box; + box-sizing: content-box; border-radius: var(--border-radius-elevation-3); background-color: var(--color-bg-neutral-subtle); box-shadow: inset 0 0 0 1px var(--color-bd-on-neutral-subtle); From f4cf381a5e8bd8b5320103cd1e4753fd5a075207 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 17 Dec 2024 11:36:45 +0530 Subject: [PATCH 13/19] update text --- .../config/propertyPaneConfig/contentConfig.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/config/propertyPaneConfig/contentConfig.ts b/app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/config/propertyPaneConfig/contentConfig.ts index d1dd958b5a80..30a80ea47834 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/config/propertyPaneConfig/contentConfig.ts +++ b/app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/config/propertyPaneConfig/contentConfig.ts @@ -65,7 +65,7 @@ export const propertyPaneContentConfig = [ { propertyName: "allowDialCodeChange", label: "Change country code", - helpText: "Search by country", + helpText: "Allow users to change the country code", controlType: "SWITCH", isJSConvertible: true, isBindProperty: true, From 36030b3da6ec6d92ed3a46cb4c6631982b3c7780 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 17 Dec 2024 11:41:01 +0530 Subject: [PATCH 14/19] fix styles --- .../widgets/src/components/Input/src/styles.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css index 07c4b24536ff..08e3e2c75411 100644 --- a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css @@ -7,7 +7,6 @@ } .inputGroup { - background-color: var(--color-bg); max-inline-size: 100%; padding-block: var(--inner-spacing-1); padding-inline: var(--inner-spacing-2); From a01c03762c65e81fae8b058087806fa690118dd1 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 17 Dec 2024 12:23:51 +0530 Subject: [PATCH 15/19] update styles --- .../src/components/ComboBox/src/ComboBox.tsx | 15 ++++++++++++++- .../components/ComboBox/src/ComboBoxTrigger.tsx | 12 +----------- .../src/components/ComboBox/src/styles.module.css | 15 ++------------- .../widgets/src/components/Input/src/Input.tsx | 3 +-- .../src/components/Input/src/styles.module.css | 5 ++--- .../widgets/src/components/Input/src/types.ts | 4 +--- 6 files changed, 21 insertions(+), 33 deletions(-) diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx index 738432dd4b3e..da4c2d60b5a2 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx @@ -8,8 +8,10 @@ import { import React from "react"; import { ComboBox as HeadlessCombobox } from "react-aria-components"; +import styles from "./styles.module.css"; import type { ComboBoxProps } from "./types"; import { ComboBoxTrigger } from "./ComboBoxTrigger"; +import { useTheme } from "@appsmith/wds-theming"; export const ComboBox = (props: ComboBoxProps) => { const { @@ -27,6 +29,7 @@ export const ComboBox = (props: ComboBoxProps) => { const root = document.body.querySelector( "[data-theme-provider]", ) as HTMLButtonElement; + const { theme } = useTheme(); return ( { size={size} /> {errorMessage} - + {children} diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBoxTrigger.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBoxTrigger.tsx index f819e89bdb77..bf5b8bae0b90 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBoxTrigger.tsx +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBoxTrigger.tsx @@ -1,7 +1,6 @@ import React, { useMemo } from "react"; import { Spinner, Input, IconButton } from "@appsmith/wds"; -import styles from "./styles.module.css"; import type { ComboBoxProps } from "./types"; interface ComboBoxTriggerProps { @@ -19,7 +18,6 @@ export const ComboBoxTrigger: React.FC = (props) => { return ( = (props) => { ); }, [isLoading, size, isDisabled]); - return ( - - ); + return ; }; diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css index ad2de66e5104..92789dbded93 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css @@ -1,14 +1,3 @@ -div.comboboxInputGroup { - padding: 0; - gap: 0; -} - -input.comboboxInput { - padding-inline: var(--inner-spacing-2); - padding-block: var(--inner-spacing-1); -} - -.comboboxTriggerButton { - position: absolute; - inset-inline-end: var(--inner-spacing-2); +.comboboxPopover { + width: calc(var(--trigger-width) + var(--inner-spacing-2) * 2); } diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx b/app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx index 746dc7e52573..64e03bc95d66 100644 --- a/app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx +++ b/app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx @@ -12,7 +12,6 @@ function _Input(props: InputProps, ref: React.Ref) { const { className, defaultValue, - inputGroupClassName, isLoading, isReadOnly, prefix, @@ -50,7 +49,7 @@ function _Input(props: InputProps, ref: React.Ref) { })(); return ( - + {Boolean(prefix) && ( localRef.current?.focus()}> {prefix} diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css index 08e3e2c75411..d0faca4f3a6c 100644 --- a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css @@ -12,7 +12,6 @@ padding-inline: var(--inner-spacing-2); gap: var(--inner-spacing-1); border: 0; - box-sizing: content-box; border-radius: var(--border-radius-elevation-3); background-color: var(--color-bg-neutral-subtle); box-shadow: inset 0 0 0 1px var(--color-bd-on-neutral-subtle); @@ -167,9 +166,9 @@ */ .inputGroup:has(> .input[data-size="small"]) { block-size: calc( - var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end) + var(--body-line-height) + var(--body-margin-start) + var(--body-margin-end) + + var(--inner-spacing-2) * 2 ); - padding-block: var(--inner-spacing-2); } .inputGroup:has(> .input[data-size="large"]) { diff --git a/app/client/packages/design-system/widgets/src/components/Input/src/types.ts b/app/client/packages/design-system/widgets/src/components/Input/src/types.ts index dcea1e2e89d6..ef229ff9b320 100644 --- a/app/client/packages/design-system/widgets/src/components/Input/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Input/src/types.ts @@ -15,9 +15,7 @@ interface CommonInputProps { export interface InputProps extends Omit, - CommonInputProps { - inputGroupClassName?: string; -} + CommonInputProps {} export interface TextAreaInputProps extends Omit, From e4a075ed721fe7ba975cc8bc35a6f95ee5d59500 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 17 Dec 2024 12:33:03 +0530 Subject: [PATCH 16/19] update combobox styles --- .../widgets/src/components/ComboBox/src/ComboBox.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx index da4c2d60b5a2..75ebf3a26a28 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx @@ -64,6 +64,11 @@ export const ComboBox = (props: ComboBoxProps) => { (theme.innerSpacing?.[2]?.value as string).replace("px", ""), ) ?? 0 } + offset={ + Number( + (theme.innerSpacing?.[3]?.value as string).replace("px", ""), + ) ?? 0 + } > {children} From d5300a0417ffb239fcc963664568fa44b6c6a240 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 18 Dec 2024 13:52:14 +0530 Subject: [PATCH 17/19] code review fixes --- .../src/components/ComboBox/src/ComboBox.tsx | 22 +++++-------------- .../components/ComboBox/src/styles.module.css | 3 ++- .../components/Datepicker/src/Datepicker.tsx | 5 ++--- .../widgets/src/components/Menu/src/Menu.tsx | 15 ++++++++----- .../widgets/src/components/Menu/src/types.ts | 4 +--- .../src/components/Popover/src/constants.ts | 1 + .../src/components/Popover/src/index.ts | 2 ++ .../Popover/src/useRootContainer.ts | 17 ++++++++++++++ .../src/components/Select/src/Select.tsx | 17 ++++++++------ .../component/index.tsx | 1 - .../WDSPhoneInputWidget/component/index.tsx | 1 - 11 files changed, 49 insertions(+), 39 deletions(-) create mode 100644 app/client/packages/design-system/widgets/src/components/Popover/src/constants.ts create mode 100644 app/client/packages/design-system/widgets/src/components/Popover/src/useRootContainer.ts diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx index 75ebf3a26a28..9dbd632ad38a 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx @@ -4,6 +4,8 @@ import { FieldLabel, FieldError, inputFieldStyles, + useRootContainer, + POPOVER_LIST_BOX_MAX_HEIGHT, } from "@appsmith/wds"; import React from "react"; import { ComboBox as HeadlessCombobox } from "react-aria-components"; @@ -11,7 +13,6 @@ import { ComboBox as HeadlessCombobox } from "react-aria-components"; import styles from "./styles.module.css"; import type { ComboBoxProps } from "./types"; import { ComboBoxTrigger } from "./ComboBoxTrigger"; -import { useTheme } from "@appsmith/wds-theming"; export const ComboBox = (props: ComboBoxProps) => { const { @@ -26,10 +27,7 @@ export const ComboBox = (props: ComboBoxProps) => { size = "medium", ...rest } = props; - const root = document.body.querySelector( - "[data-theme-provider]", - ) as HTMLButtonElement; - const { theme } = useTheme(); + const root = useRootContainer(); return ( { {children} diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css index 92789dbded93..d180684ee6b8 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css @@ -1,3 +1,4 @@ .comboboxPopover { - width: calc(var(--trigger-width) + var(--inner-spacing-2) * 2); + width: calc(var(--trigger-width) + var(--inner-spacing-1) * 2); + transform: translateX(calc(-1 * var(--inner-spacing-1))); } diff --git a/app/client/packages/design-system/widgets/src/components/Datepicker/src/Datepicker.tsx b/app/client/packages/design-system/widgets/src/components/Datepicker/src/Datepicker.tsx index 3d98fb0b3175..f62f5dd69fb7 100644 --- a/app/client/packages/design-system/widgets/src/components/Datepicker/src/Datepicker.tsx +++ b/app/client/packages/design-system/widgets/src/components/Datepicker/src/Datepicker.tsx @@ -5,6 +5,7 @@ import { Calendar, inputFieldStyles, TimeField, + useRootContainer, } from "@appsmith/wds"; import clsx from "clsx"; import React from "react"; @@ -44,6 +45,7 @@ export const DatePicker = (props: DatePickerProps) => { const timeMaxValue = ( props.maxValue && "hour" in props.maxValue ? props.maxValue : null ) as TimeValue; + const root = useRootContainer(); return ( (props: DatePickerProps) => { {...rest} > {({ state }) => { - const root = document.body.querySelector( - "[data-theme-provider]", - ) as HTMLButtonElement; const timeGranularity = state.granularity === "hour" || state.granularity === "minute" || diff --git a/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx b/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx index e1e53a561fa6..77cc1f6db4ab 100644 --- a/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx +++ b/app/client/packages/design-system/widgets/src/components/Menu/src/Menu.tsx @@ -1,5 +1,10 @@ +import { + Popover, + listStyles, + useRootContainer, + POPOVER_LIST_BOX_MAX_HEIGHT, +} from "@appsmith/wds"; import React, { createContext, useContext } from "react"; -import { listStyles, Popover } from "@appsmith/wds"; import { Menu as HeadlessMenu } from "react-aria-components"; import type { MenuProps } from "./types"; @@ -8,10 +13,8 @@ import clsx from "clsx"; const MenuNestingContext = createContext(0); export const Menu = (props: MenuProps) => { - const { children, className, maxHeight, ...rest } = props; - const root = document.body.querySelector( - "[data-theme-provider]", - ) as HTMLButtonElement; + const { children, className, ...rest } = props; + const root = useRootContainer(); const nestingLevel = useContext(MenuNestingContext); const isRootMenu = nestingLevel === 0; @@ -21,7 +24,7 @@ export const Menu = (props: MenuProps) => { {/* Only the parent Popover should be placed in the root. Placing child popoves in root would cause the menu to function incorrectly */} {children} diff --git a/app/client/packages/design-system/widgets/src/components/Menu/src/types.ts b/app/client/packages/design-system/widgets/src/components/Menu/src/types.ts index ae1bfdc741a4..4f514c44c3a1 100644 --- a/app/client/packages/design-system/widgets/src/components/Menu/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Menu/src/types.ts @@ -1,5 +1,3 @@ import type { MenuProps as AriaMenuProps } from "react-aria-components"; -export interface MenuProps extends Omit, "slot"> { - maxHeight?: number; -} +export interface MenuProps extends Omit, "slot"> {} diff --git a/app/client/packages/design-system/widgets/src/components/Popover/src/constants.ts b/app/client/packages/design-system/widgets/src/components/Popover/src/constants.ts new file mode 100644 index 000000000000..83bab6a45400 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/Popover/src/constants.ts @@ -0,0 +1 @@ +export const POPOVER_LIST_BOX_MAX_HEIGHT = 400; diff --git a/app/client/packages/design-system/widgets/src/components/Popover/src/index.ts b/app/client/packages/design-system/widgets/src/components/Popover/src/index.ts index 72f124f6d38e..cb430550012a 100644 --- a/app/client/packages/design-system/widgets/src/components/Popover/src/index.ts +++ b/app/client/packages/design-system/widgets/src/components/Popover/src/index.ts @@ -1 +1,3 @@ export * from "./Popover"; +export * from "./useRootContainer"; +export * from "./constants"; diff --git a/app/client/packages/design-system/widgets/src/components/Popover/src/useRootContainer.ts b/app/client/packages/design-system/widgets/src/components/Popover/src/useRootContainer.ts new file mode 100644 index 000000000000..d1506d822d5b --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/Popover/src/useRootContainer.ts @@ -0,0 +1,17 @@ +import { useEffect } from "react"; + +import { useState } from "react"; + +export const useRootContainer = () => { + const [root, setRoot] = useState( + document.body.querySelector("[data-theme-provider]") as Element, + ); + + useEffect(() => { + if (!root) { + setRoot(document.body.querySelector("[data-theme-provider]") as Element); + } + }, []); + + return root; +}; diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx b/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx index 0337fd709ad9..2f1ac356ded2 100644 --- a/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx +++ b/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx @@ -1,10 +1,12 @@ import React from "react"; import { - FieldError, - FieldLabel, ListBox, - inputFieldStyles, Popover, + FieldLabel, + FieldError, + inputFieldStyles, + useRootContainer, + POPOVER_LIST_BOX_MAX_HEIGHT, } from "@appsmith/wds"; import { Select as HeadlessSelect } from "react-aria-components"; @@ -24,9 +26,7 @@ export const Select = (props: SelectProps) => { size = "medium", ...rest } = props; - const root = document.body.querySelector( - "[data-theme-provider]", - ) as HTMLButtonElement; + const root = useRootContainer(); return ( { size={size} /> {errorMessage} - + {children} diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/index.tsx b/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/index.tsx index dc64ba61b655..98e127acbb3c 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/index.tsx +++ b/app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/component/index.tsx @@ -43,7 +43,6 @@ export function CurrencyInputComponent(props: CurrencyInputComponentProps) { Date: Wed, 18 Dec 2024 13:53:21 +0530 Subject: [PATCH 18/19] remove test code --- .../widgets/src/components/ComboBox/src/ComboBox.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx index 9dbd632ad38a..44587284907d 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx @@ -55,7 +55,6 @@ export const ComboBox = (props: ComboBoxProps) => { {children} From b8bb73890940ea57a708ffe31b1b61f02fbe7417 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 18 Dec 2024 14:09:42 +0530 Subject: [PATCH 19/19] update width of popover --- .../widgets/src/components/ComboBox/src/styles.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css index d180684ee6b8..5a98e2049876 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css @@ -1,4 +1,4 @@ .comboboxPopover { - width: calc(var(--trigger-width) + var(--inner-spacing-1) * 2); + width: calc(var(--trigger-width) + var(--inner-spacing-2) * 2); transform: translateX(calc(-1 * var(--inner-spacing-1))); }