fix(rac): How to style Aria Input/Select/Combobox placeholder

Change-Id: I560ca5cdf8f95c00cfb59981b6fca3d38449e908 GitOrigin-RevId: 0a840dde9f888cea5a6f28c84433dcad340241e5
plasmicapp · Nov 18, 2024 · 4df65c6 · 4df65c6
1 parent 25f217a
commit 4df65c6
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 13 deletions.
diff --git a/plasmicpkgs/react-aria/src/registerComboBox.tsx b/plasmicpkgs/react-aria/src/registerComboBox.tsx
@@ -40,7 +40,6 @@ export interface BaseComboboxProps
   extends ComboBoxProps<{}>,
     WithVariants<typeof COMBOBOX_VARIANTS>,
     HasControlContextData<BaseComboboxControlContextData> {
-  placeholder?: string;
   children?: React.ReactNode;
   isOpen?: boolean;
   className?: string;
@@ -127,7 +126,6 @@ export function registerComboBox(loader?: Registerable) {
       ...getCommonProps<BaseComboboxProps>("ComboBox", [
         "name",
         "aria-label",
-        "placeholder",
         "isDisabled",
       ]),
       selectedKey: {
@@ -187,12 +185,16 @@ export function registerComboBox(loader?: Registerable) {
               },
               {
                 type: "hbox",
+                styles: {
+                  padding: 0,
+                },
                 children: [
                   {
                     type: "component",
                     name: INPUT_COMPONENT_NAME,
                     styles: {
                       width: "100%",
+                      borderRightWidth: 0,
                     },
                   },
                   {
@@ -206,6 +208,10 @@ export function registerComboBox(loader?: Registerable) {
                         styles: {
                           width: "15px",
                           transform: "rotate(180deg)",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          padding: 0,
                         },
                       },
                     },

diff --git a/plasmicpkgs/react-aria/src/registerInput.tsx b/plasmicpkgs/react-aria/src/registerInput.tsx
@@ -27,6 +27,7 @@ export interface BaseInputProps
     WithVariants<typeof INPUT_VARIANTS> {
   autoComplete?: string[];
   isUncontrolled?: boolean;
+  typographyClassName?: string;
 }
 
 export const inputHelpers = {
@@ -46,6 +47,8 @@ export function BaseInput(props: BaseInputProps) {
     disabled,
     autoComplete,
     value,
+    typographyClassName,
+    className,
     ...rest
   } = props;
   const textFieldContext = React.useContext(PlasmicTextFieldContext);
@@ -78,6 +81,7 @@ export function BaseInput(props: BaseInputProps) {
 
   return (
     <Input
+      className={`${typographyClassName} ${className}`}
       autoComplete={resolveAutoComplete(autoComplete)}
       onHoverChange={(isHovered) => {
         plasmicUpdateVariant?.({
@@ -114,6 +118,20 @@ export function registerInput(
       importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
       importName: "BaseInput",
       variants,
+      // Excluding typography
+      styleSections: [
+        "visibility",
+        "sizing",
+        "spacing",
+        "background",
+        "transform",
+        "transitions",
+        "layout",
+        "overflow",
+        "border",
+        "shadows",
+        "effects",
+      ],
       defaultStyles: {
         width: "300px",
         borderWidth: "1px",
@@ -152,6 +170,19 @@ export function registerInput(
           "onBeforeInput",
           "onInput",
         ]),
+        typographyClassName: {
+          type: "class",
+          displayName: "Typography",
+          selectors: [
+            // Plasmic Studio user can also in addition style the button's
+            // hovered and pressed state
+            {
+              selector: ":self::placeholder",
+              label: "Placeholder",
+            },
+          ],
+          styleSections: ["typography"],
+        },
       },
       states: {
         value: {
@@ -162,6 +193,7 @@ export function registerInput(
           ...inputHelpers.states.value,
         },
       },
+
       componentHelpers: {
         helpers: inputHelpers,
         importName: "inputHelpers",

diff --git a/plasmicpkgs/react-aria/src/registerSelect.tsx b/plasmicpkgs/react-aria/src/registerSelect.tsx
@@ -74,7 +74,6 @@ export function BaseSelect(props: BaseSelectProps) {
   const {
     selectedKey,
     onSelectionChange,
-    placeholder,
     onOpenChange,
     isDisabled,
     className,
@@ -106,7 +105,6 @@ export function BaseSelect(props: BaseSelectProps) {
 
   return (
     <Select
-      placeholder={placeholder}
       selectedKey={selectedKey}
       onSelectionChange={onSelectionChange}
       onOpenChange={onOpenChange}
@@ -143,14 +141,17 @@ export function registerSelect(loader?: Registerable) {
     props: {
       customize: {
         type: "boolean",
-        description: "Whether to customize the selected value display",
+        displayName: "Customize placeholder",
+        defaultValue: true,
+        description: "Customize the placeholder text and styles",
       },
       children: {
         type: "slot",
+        displayName: "Placeholder",
         defaultValue: [
           {
             type: "text",
-            value: "Selected value...",
+            value: "Select an item",
           },
         ],
         hidden: (props) => !props.customize,
@@ -169,7 +170,6 @@ export function registerSelect(loader?: Registerable) {
       ...getCommonProps<BaseSelectProps>("Select", [
         "name",
         "aria-label",
-        "placeholder",
         "isDisabled",
         "autoFocus",
       ]),
@@ -233,6 +233,8 @@ export function registerSelect(loader?: Registerable) {
                 name: BUTTON_COMPONENT_NAME,
                 styles: {
                   width: "100%",
+                  padding: "4px 10px",
+                  background: "white",
                 },
                 props: {
                   children: {
@@ -241,7 +243,7 @@ export function registerSelect(loader?: Registerable) {
                       width: "stretch",
                       justifyContent: "space-between",
                       alignItems: "center",
-                      padding: "2px 5px",
+                      padding: 0,
                     },
                     children: [
                       {
@@ -252,8 +254,8 @@ export function registerSelect(loader?: Registerable) {
                         type: "img",
                         src: "https://static1.plasmic.app/arrow-up.svg",
                         styles: {
-                          height: "20px",
-                          width: "20px",
+                          height: "15px",
+                          width: "15px",
                           transform: "rotate(180deg)",
                         },
                       },

diff --git a/plasmicpkgs/react-aria/src/registerTextArea.tsx b/plasmicpkgs/react-aria/src/registerTextArea.tsx
@@ -24,7 +24,9 @@ const { variants } = pickAriaComponentVariants(TEXTAREA_VARIANTS);
 export interface BaseTextAreaProps
   extends TextAreaProps,
     HasControlContextData,
-    WithVariants<typeof TEXTAREA_VARIANTS> {}
+    WithVariants<typeof TEXTAREA_VARIANTS> {
+  typographyClassName?: string;
+}
 
 export const inputHelpers = {
   states: {
@@ -37,8 +39,14 @@ export const inputHelpers = {
 };
 
 export function BaseTextArea(props: BaseTextAreaProps) {
-  const { disabled, plasmicUpdateVariant, setControlContextData, ...rest } =
-    props;
+  const {
+    disabled,
+    plasmicUpdateVariant,
+    setControlContextData,
+    typographyClassName,
+    className,
+    ...rest
+  } = props;
 
   const textFieldContext = React.useContext(PlasmicTextFieldContext);
 
@@ -59,6 +67,7 @@ export function BaseTextArea(props: BaseTextAreaProps) {
 
   return (
     <TextArea
+      className={`${typographyClassName} ${className}`}
       onFocus={() => {
         plasmicUpdateVariant?.({
           focused: true,
@@ -92,6 +101,20 @@ export function registerTextArea(
       importPath: "@plasmicpkgs/react-aria/skinny/registerTextArea",
       importName: "BaseTextArea",
       variants,
+      // Excluding typography
+      styleSections: [
+        "visibility",
+        "sizing",
+        "spacing",
+        "background",
+        "transform",
+        "transitions",
+        "layout",
+        "overflow",
+        "border",
+        "shadows",
+        "effects",
+      ],
       props: {
         ...getCommonProps<TextAreaProps>("Text Area", [
           "name",
@@ -120,6 +143,19 @@ export function registerTextArea(
           "onBeforeInput",
           "onInput",
         ]),
+        typographyClassName: {
+          type: "class",
+          displayName: "Typography",
+          selectors: [
+            // Plasmic Studio user can also in addition style the button's
+            // hovered and pressed state
+            {
+              selector: ":self::placeholder",
+              label: "Placeholder",
+            },
+          ],
+          styleSections: ["typography"],
+        },
       },
       states: {
         value: {

diff --git a/plasmicpkgs/react-aria/src/registerTextField.tsx b/plasmicpkgs/react-aria/src/registerTextField.tsx
@@ -109,6 +109,7 @@ export function registerTextField(
               alignItems: "flex-start",
               width: "300px",
               gap: "5px",
+              padding: 0,
             },
             children: [
               {