chore(form): update some FormMessageContainer styles

mlaursen · Jul 31, 2024 · be1d646 · be1d646
1 parent 869ab82
commit be1d646
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 79 deletions.
diff --git a/packages/core/src/form/FormMessageContainer.tsx b/packages/core/src/form/FormMessageContainer.tsx
@@ -1,7 +1,7 @@
-import { cnb } from "cnbuilder";
 import { forwardRef, type HTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
 import { FormMessage } from "./FormMessage.js";
+import { formMessageContainer } from "./formMessageContainerStyles.js";
 import { type FormMessageProps } from "./types.js";
 
 /**
@@ -36,7 +36,7 @@ export const FormMessageContainer = forwardRef<
     <div
       {...remaining}
       ref={ref}
-      className={cnb("rmd-form-message-container", className)}
+      className={formMessageContainer({ className })}
     >
       {children}
       <FormMessage {...messageProps} />

diff --git a/packages/core/src/form/Label.tsx b/packages/core/src/form/Label.tsx
@@ -22,15 +22,15 @@ const labelStyles = bem("rmd-label");
 export function label(options: LabelClassNameOptions): string {
   const {
     className,
-    gap = false,
-    error = false,
-    dense = false,
-    active = false,
-    stacked = false,
-    reversed = false,
-    disabled = false,
-    floating = false,
-    inactive = false,
+    gap,
+    error,
+    dense,
+    active,
+    stacked,
+    reversed,
+    disabled,
+    floating,
+    inactive,
     floatingActive = active,
   } = options;
 
@@ -76,15 +76,15 @@ export function label(options: LabelClassNameOptions): string {
 export const Label = forwardRef<HTMLLabelElement, LabelProps>(
   function Label(props, ref) {
     const {
-      gap = false,
-      error = false,
-      dense = false,
-      active = false,
-      stacked = false,
-      reversed = false,
-      disabled = false,
-      floating = false,
-      inactive = false,
+      gap,
+      error,
+      dense,
+      active,
+      stacked,
+      reversed,
+      disabled,
+      floating,
+      inactive,
       floatingActive = active,
       className,
       children,

diff --git a/packages/core/src/form/MenuItemTextField.tsx b/packages/core/src/form/MenuItemTextField.tsx
@@ -33,7 +33,7 @@ export const MenuItemTextField = forwardRef<
   HTMLInputElement,
   MenuItemTextFieldProps
 >(function MenuItemTextField(props, ref) {
-  const { liProps, onKeyDown, stretch = true, ...remaining } = props;
+  const { liProps, onKeyDown, ...remaining } = props;
   return (
     <li
       role="none"
@@ -47,7 +47,6 @@ export const MenuItemTextField = forwardRef<
       <TextField
         {...remaining}
         ref={ref}
-        stretch={stretch}
         onKeyDown={(event) => {
           onKeyDown?.(event);
           switch (event.key) {

diff --git a/packages/core/src/form/NativeSelect.tsx b/packages/core/src/form/NativeSelect.tsx
@@ -123,17 +123,16 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
       autoCompleteValue,
       autoComplete = autoCompleteValue,
       name = autoCompleteValue,
-      dense = false,
-      error = false,
-      active = false,
-      inline = false,
-      stretch = false,
+      dense,
+      error,
+      active,
+      inline,
       leftAddon,
       rightAddon: propRightAddon,
       leftAddonProps,
       rightAddonProps,
-      disableLeftAddonStyles = false,
-      disableRightAddonStyles = false,
+      disableLeftAddonStyles,
+      disableRightAddonStyles,
       theme: propTheme,
       underlineDirection: propUnderlineDirection,
       messageProps,
@@ -142,7 +141,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
       children,
       ...remaining
     } = props;
-    const { disabled = false, readOnly = false, multiple = false } = props;
+    const { disabled, readOnly, multiple } = props;
     const id = useEnsuredId(propId, "select");
     const theme = getFormConfig("theme", propTheme);
     const underlineDirection = getFormConfig(
@@ -177,7 +176,6 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           dense={dense}
           inline={inline}
           active={active}
-          stretch={stretch}
           readOnly={readOnly}
           disabled={disabled}
           leftAddon={leftAddon}

diff --git a/packages/core/src/form/TextArea.tsx b/packages/core/src/form/TextArea.tsx
@@ -128,15 +128,14 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       areaClassName,
       resizeContainerProps,
       resize = "auto",
-      dense = false,
-      error = false,
-      active = false,
-      inline: propInline = false,
-      stretch = false,
+      dense,
+      error,
+      active,
+      inline: propInline,
       leftAddon,
       rightAddon,
-      disableLeftAddonStyles = false,
-      disableRightAddonStyles = false,
+      disableLeftAddonStyles,
+      disableRightAddonStyles,
       theme: propTheme,
       underlineDirection: propUnderlineDirection,
       messageProps,
@@ -267,7 +266,6 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           dense={dense}
           inline={inline}
           active={active}
-          stretch={stretch}
           readOnly={readOnly}
           disabled={disabled}
           leftAddon={leftAddon}

diff --git a/packages/core/src/form/TextField.tsx b/packages/core/src/form/TextField.tsx
@@ -136,7 +136,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       error,
       active,
       inline,
-      stretch,
       leftAddon,
       leftAddonProps,
       rightAddon,
@@ -182,7 +181,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           dense={dense}
           inline={inline}
           active={active}
-          stretch={stretch}
           readOnly={readOnly}
           disabled={disabled}
           leftAddon={leftAddon}

diff --git a/packages/core/src/form/TextFieldContainer.tsx b/packages/core/src/form/TextFieldContainer.tsx
@@ -33,20 +33,19 @@ export const TextFieldContainer = forwardRef<
   const {
     children,
     className,
-    dense = false,
-    error = false,
-    label = false,
-    active = false,
-    inline = false,
-    stretch = false,
-    readOnly = false,
-    disabled = false,
+    dense,
+    error,
+    label,
+    active,
+    inline,
+    readOnly,
+    disabled,
     leftAddon,
     leftAddonProps,
-    disableLeftAddonStyles = false,
+    disableLeftAddonStyles,
     rightAddon,
     rightAddonProps,
-    disableRightAddonStyles = false,
+    disableRightAddonStyles,
     theme: propTheme,
     underlineDirection: propUnderlineDirection,
     ...remaining
@@ -68,7 +67,6 @@ export const TextFieldContainer = forwardRef<
         label,
         inline,
         active,
-        stretch,
         readOnly,
         disabled,
         className,

diff --git a/packages/core/src/form/_form.scss b/packages/core/src/form/_form.scss
@@ -456,6 +456,7 @@ $variables: (
     .rmd-form-message-container {
       display: flex;
       flex-direction: column;
+      width: 100%;
     }
 
     .rmd-form-message {
@@ -620,7 +621,9 @@ $variables: (
 
       align-items: center;
       display: flex;
+      flex: 1 1 auto;
       position: relative;
+      width: 100%;
 
       @if not $disable-text-field-container-dense {
         &--dense {
@@ -634,11 +637,7 @@ $variables: (
 
       &--inline {
         display: inline-flex;
-      }
-
-      &--stretch {
-        flex: 1 1 auto;
-        width: 100%;
+        width: auto;
       }
 
       &--label {

diff --git a/packages/core/src/form/formMessageContainerStyles.ts b/packages/core/src/form/formMessageContainerStyles.ts
@@ -0,0 +1,22 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+const styles = bem("rmd-form-message-container");
+
+/**
+ * @since 6.0.0
+ */
+export interface FormMessageContainerClassNameOptions {
+  className?: string;
+}
+
+/**
+ * @since 6.0.0
+ */
+export function formMessageContainer(
+  options: FormMessageContainerClassNameOptions = {}
+): string {
+  const { className } = options;
+
+  return cnb(styles(), className);
+}
diff --git a/packages/core/src/form/textFieldContainerStyles.ts b/packages/core/src/form/textFieldContainerStyles.ts
@@ -31,9 +31,6 @@ export interface TextFieldContainerClassNameOptions
   /** @defaultValue `false` */
   inline?: boolean;
 
-  /** @defaultValue `false` */
-  stretch?: boolean;
-
   /** @defaultValue `false` */
   label?: boolean;
 
@@ -53,16 +50,15 @@ export function textFieldContainer(
   const {
     className,
     theme = "outline",
-    dense = false,
-    error = false,
-    label = false,
-    active = false,
-    inline = false,
-    stretch = false,
-    readOnly = false,
-    disabled = false,
-    leftAddon = false,
-    rightAddon = false,
+    dense,
+    error,
+    label,
+    active,
+    inline,
+    readOnly,
+    disabled,
+    leftAddon,
+    rightAddon,
     underlineDirection = "left",
   } = options;
   const underline = theme === "underline";
@@ -82,7 +78,6 @@ export function textFieldContainer(
     styles({
       error,
       inline,
-      stretch,
       filled,
       outline,
       disabled: disabled || readOnly,

diff --git a/packages/core/src/form/types.ts b/packages/core/src/form/types.ts
@@ -472,14 +472,6 @@ export interface TextFieldContainerOptions
    */
   inline?: boolean;
 
-  /**
-   * Set this to `true` if this component should stretch to fill a flex or grid
-   * container using `flex: 1 1 auto`.
-   *
-   * @defaultValue `false`
-   */
-  stretch?: boolean;
-
   /**
    * This should generally be an icon or a button that will be placed before the
    * `TextField` or `TextArea`.