chore: Allow currency and phone dial code change

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 {
@@ -20,6 +19,7 @@ export const ComboBoxTrigger: React.FC<ComboBoxTriggerProps> = (props) => {
 
     return (
       <IconButton
+        className={styles.comboboxTriggerButton}
         icon="chevron-down"
         isDisabled={isDisabled}
         size={size === "medium" ? "small" : "xSmall"}
@@ -29,7 +29,8 @@ export const ComboBoxTrigger: React.FC<ComboBoxTriggerProps> = (props) => {
 
   return (
     <Input
-      className={clsx(textInputStyles.input, getTypographyClassName("body"))}
+      className={styles.comboboxInput}
+      inputGroupClassName={styles.comboboxInputGroup}
       placeholder={placeholder}
       size={size}
       suffix={suffix}

app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css

@@ -0,0 +1,11 @@
+div.comboboxInputGroup {
+  padding-inline: 0;
+}
+
+input.comboboxInput {
+  padding-inline: var(--inner-spacing-2);
+}
+
+.comboboxTriggerButton {
+  margin-inline-end: var(--inner-spacing-2);
+}

app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx

@@ -9,7 +9,9 @@ import type { InputProps } from "./types";
 
 function _Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {
   const {
+    className,
     defaultValue,
+    inputGroupClassName,
     isLoading,
     isReadOnly,
     prefix,
@@ -45,18 +47,22 @@ function _Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {
   })();
 
   return (
-    <Group className={styles.inputGroup}>
+    <Group className={clsx(styles.inputGroup, inputGroupClassName)}>
+      {Boolean(prefix) && <span data-input-prefix>{prefix}</span>}
       <HeadlessInput
         {...rest}
-        className={clsx(styles.input, getTypographyClassName("body"))}
+        className={clsx(
+          styles.input,
+          getTypographyClassName("body"),
+          className,
+        )}
         data-readonly={Boolean(isReadOnly) ? true : undefined}
         data-size={Boolean(size) ? size : undefined}
         defaultValue={defaultValue}
         ref={ref}
         type={showPassword ? "text" : type}
         value={isEmpty && Boolean(isReadOnly) ? "—" : value}
       />
-      {Boolean(prefix) && <span data-input-prefix>{prefix}</span>}
       {Boolean(suffix) && <span data-input-suffix>{suffix}</span>}
     </Group>
   );

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,59 +57,27 @@
   );
 }
 
-.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;
   align-items: center;
+  height: 0;
 }
 
 /**
  * ----------------------------------------------------------------------------
  * 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 +125,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 +136,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 +153,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 +165,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);
-}

app/client/packages/design-system/widgets/src/components/Input/src/types.ts

@@ -15,7 +15,9 @@ interface CommonInputProps {
 
 export interface InputProps
   extends Omit<HeadlessInputProps, "prefix" | "size">,
-    CommonInputProps {}
+    CommonInputProps {
+  inputGroupClassName?: string;
+}
 
 export interface TextAreaInputProps
   extends Omit<HeadlessTextAreaProps, "prefix" | "size">,

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 {
@@ -17,9 +19,11 @@ export const SelectTrigger: React.FC<SelectTriggerProps> = (props) => {
   const { isDisabled, isInvalid, isLoading, placeholder, size } = props;
 
   return (
-    <Group className={textInputStyles.inputGroup}>
+    <Group
+      className={clsx(textInputStyles.inputGroup, styles.selectInputGroup)}
+    >
       <Button
-        className={textInputStyles.input}
+        className={clsx(textInputStyles.input, styles.selectTriggerButton)}
         data-invalid={Boolean(isInvalid) ? "" : undefined}
         data-size={size}
         isDisabled={isDisabled}
@@ -32,10 +36,14 @@ export const SelectTrigger: React.FC<SelectTriggerProps> = (props) => {
             isPlaceholder ? placeholder : defaultChildren
           }
         </SelectValue>
+        <span data-input-suffix>
+          {Boolean(isLoading) ? (
+            <Spinner />
+          ) : (
+            <Icon name="chevron-down" size="medium" />
+          )}
+        </span>
       </Button>
-      <span data-input-suffix>
-        {Boolean(isLoading) ? <Spinner /> : <Icon name="chevron-down" />}
-      </span>
     </Group>
   );
 };

app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css

@@ -0,0 +1,25 @@
+/**
+ * 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] {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}

app/client/packages/design-system/widgets/src/components/TextField/stories/TextField.stories.tsx

@@ -44,6 +44,7 @@ export const WithPrefixAndSuffix: Story = {
         prefix={<Icon name="user" size="medium" />}
         suffix={<Icon name="user" size="medium" />}
       />
+      <TextField prefix={<>+121212</>} />
     </Flex>
   ),
 };