feat: adding the support for labelPlacement globally

Author: macci001

.changeset/chilly-dancers-switch.md

@@ -0,0 +1,10 @@
+---
+"@nextui-org/date-picker": patch
+"@nextui-org/date-input": patch
+"@nextui-org/select": patch
+"@nextui-org/input": patch
+"@nextui-org/system": patch
+"@nextui-org/theme": patch
+---
+
+Adding support for global labelPlacement prop.(ENG-1694)

apps/docs/content/docs/api-references/nextui-provider.mdx

@@ -142,6 +142,14 @@ interface AppProviderProps {
 
 <Spacer y={2}/>
 
+`labelPlacement`
+
+- **Description**: Determines where the label appears, such as inside, outside or outside-left of the component.
+- **Type**: `"inside"` | `"outside"` | `"outside-left"` | `undefined`
+- **Default**: `undefined`
+
+<Spacer y={2}/>
+
 `disableAnimation`
 
 - **Description**: Disables animations globally. This will also avoid `framer-motion` features to be loaded in the bundle which can potentially reduce the bundle size.

packages/components/date-input/src/use-date-input.ts

@@ -192,15 +192,15 @@ export function useDateInput<T extends DateValue>(originalProps: UseDateInputPro
   const isInvalid = isInvalidProp || ariaIsInvalid;
 
   const labelPlacement = useMemo<DateInputVariantProps["labelPlacement"]>(() => {
-    if (
-      (!originalProps.labelPlacement || originalProps.labelPlacement === "inside") &&
-      !props.label
-    ) {
+    const labelPlacement =
+      originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside";
+
+    if (labelPlacement === "inside" && !label) {
       return "outside";
     }
 
-    return originalProps.labelPlacement ?? "inside";
-  }, [originalProps.labelPlacement, props.label]);
+    return labelPlacement;
+  }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]);
 
   const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left";
 

packages/components/date-input/src/use-time-input.ts

@@ -134,15 +134,15 @@ export function useTimeInput<T extends TimeValue>(originalProps: UseTimeInputPro
   const baseStyles = clsx(classNames?.base, className);
 
   const labelPlacement = useMemo<DateInputVariantProps["labelPlacement"]>(() => {
-    if (
-      (!originalProps.labelPlacement || originalProps.labelPlacement === "inside") &&
-      !props.label
-    ) {
+    const labelPlacement =
+      originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside";
+
+    if (labelPlacement === "inside" && !label) {
       return "outside";
     }
 
-    return originalProps.labelPlacement ?? "inside";
-  }, [originalProps.labelPlacement, props.label]);
+    return labelPlacement;
+  }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]);
 
   const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left";
 

packages/components/date-picker/src/use-date-picker-base.ts

@@ -9,7 +9,7 @@ import type {ValueBase} from "@react-types/shared";
 
 import {dataAttr} from "@nextui-org/shared-utils";
 import {dateInput, DatePickerVariantProps} from "@nextui-org/theme";
-import {useCallback} from "react";
+import {useCallback, useMemo} from "react";
 import {HTMLNextUIProps, mapPropsVariants, useProviderContext} from "@nextui-org/system";
 import {mergeProps} from "@react-aria/utils";
 import {useDOMRef} from "@nextui-org/react-utils";
@@ -234,10 +234,21 @@ export function useDatePickerBase<T extends DateValue>(originalProps: UseDatePic
     "data-invalid": dataAttr(originalProps?.isInvalid),
   } as DateInputProps;
 
+  const labelPlacement = useMemo<TimeInputProps["labelPlacement"]>(() => {
+    const labelPlacement =
+      originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside";
+
+    if (labelPlacement === "inside" && !label) {
+      return "outside";
+    }
+
+    return labelPlacement;
+  }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]);
+
   const timeInputProps = {
     ...userTimeInputProps,
     size: "sm",
-    labelPlacement: "outside-left",
+    labelPlacement,
     label: userTimeInputProps?.label || stringFormatter.format("time"),
     placeholderValue: timePlaceholder,
     hourCycle: props.hourCycle,

packages/components/date-picker/src/use-date-range-picker.ts

@@ -60,6 +60,7 @@ export type UseDateRangePickerProps<T extends DateValue> = Props<T> & AriaDateRa
 
 export function useDateRangePicker<T extends DateValue>({
   as,
+  label,
   isInvalid: isInvalidProp,
   description,
   startContent,
@@ -144,15 +145,15 @@ export function useDateRangePicker<T extends DateValue>({
   const showTimeField = !!timeGranularity;
 
   const labelPlacement = useMemo<DateInputVariantProps["labelPlacement"]>(() => {
-    if (
-      (!originalProps.labelPlacement || originalProps.labelPlacement === "inside") &&
-      !originalProps.label
-    ) {
+    const labelPlacement =
+      originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside";
+
+    if (labelPlacement === "inside" && !label) {
       return "outside";
     }
 
-    return originalProps.labelPlacement ?? "inside";
-  }, [originalProps.labelPlacement, originalProps.label]);
+    return labelPlacement;
+  }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]);
 
   const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left";
 
@@ -395,7 +396,7 @@ export function useDateRangePicker<T extends DateValue>({
   const getDateInputGroupProps = () => {
     return {
       as,
-      label: originalProps.label,
+      label,
       description,
       endContent,
       errorMessage,
@@ -423,7 +424,7 @@ export function useDateRangePicker<T extends DateValue>({
 
   return {
     state,
-    label: originalProps.label,
+    label,
     slots,
     classNames,
     startContent,

packages/components/input/src/use-input.ts

@@ -231,7 +231,15 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     if (isFileTypeInput) {
       // if `labelPlacement` is not defined, choose `outside` instead
       // since the default value `inside` is not supported in file input
-      if (!originalProps.labelPlacement) return "outside";
+      if (!originalProps.labelPlacement) {
+        if (globalContext?.labelPlacement === "inside") {
+          warn(
+            "Input with file type doesn't support inside label. Hence, labelPlacement from provider is not applicable. Converting to outside ...",
+          );
+        }
+
+        return "outside";
+      }
 
       // throw a warning if `labelPlacement` is `inside`
       // and change it to `outside`
@@ -241,12 +249,16 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
         return "outside";
       }
     }
-    if ((!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && !label) {
+
+    const labelPlacement =
+      originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside";
+
+    if (labelPlacement === "inside" && !label) {
       return "outside";
     }
 
-    return originalProps.labelPlacement ?? "inside";
-  }, [originalProps.labelPlacement, label]);
+    return labelPlacement;
+  }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]);
 
   const errorMessage =
     typeof props.errorMessage === "function"

packages/components/select/src/use-select.ts

@@ -344,12 +344,15 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
   const {isHovered, hoverProps} = useHover({isDisabled: originalProps.isDisabled});
 
   const labelPlacement = useMemo<SelectVariantProps["labelPlacement"]>(() => {
-    if ((!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && !label) {
+    const labelPlacement =
+      originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside";
+
+    if (labelPlacement === "inside" && !label) {
       return "outside";
     }
 
-    return originalProps.labelPlacement ?? "inside";
-  }, [originalProps.labelPlacement, label]);
+    return labelPlacement;
+  }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]);
 
   const hasPlaceholder = !!placeholder;
   const shouldLabelBeOutside =

packages/core/system/src/provider-context.ts

@@ -11,6 +11,13 @@ export type ProviderContextProps = {
    * @default false
    */
   disableAnimation?: boolean;
+  /**
+   * Position respect to the component where the label should be placed.
+   *
+   * @default undefined
+   */
+  labelPlacement?: "inside" | "outside" | "outside-left" | undefined;
+  /**
   /**
    * Whether to disable the ripple effect in the whole application.
    * If `disableAnimation` is set to `true`, this prop will be ignored.

packages/core/system/src/provider.tsx

@@ -58,6 +58,7 @@ export const NextUIProvider: React.FC<NextUIProviderProps> = ({
   reducedMotion = "never",
   validationBehavior,
   locale = "en-US",
+  labelPlacement,
   // if minDate / maxDate are not specified in `defaultDates`
   // then they will be set in `use-date-input.ts` or `use-calendar-base.ts`
   defaultDates,
@@ -85,6 +86,7 @@ export const NextUIProvider: React.FC<NextUIProviderProps> = ({
       disableAnimation,
       disableRipple,
       validationBehavior,
+      labelPlacement,
     };
   }, [
     createCalendar,
@@ -93,6 +95,7 @@ export const NextUIProvider: React.FC<NextUIProviderProps> = ({
     disableAnimation,
     disableRipple,
     validationBehavior,
+    labelPlacement,
   ]);
 
   return (

packages/core/theme/src/components/date-input.ts

@@ -217,7 +217,6 @@ const dateInput = tv({
     color: "default",
     size: "md",
     fullWidth: true,
-    labelPlacement: "inside",
     isDisabled: false,
   },
   compoundVariants: [

packages/core/theme/src/components/input.ts

@@ -258,7 +258,6 @@ const input = tv({
     color: "default",
     size: "md",
     fullWidth: true,
-    labelPlacement: "inside",
     isDisabled: false,
     isMultiline: false,
   },

packages/core/theme/src/components/select.ts

@@ -209,7 +209,6 @@ const select = tv({
     variant: "flat",
     color: "default",
     size: "md",
-    labelPlacement: "inside",
     fullWidth: true,
     isDisabled: false,
     isMultiline: false,

packages/storybook/.storybook/preview.tsx

@@ -7,13 +7,13 @@ import "./style.css";
 import {withStrictModeSwitcher} from "./addons/react-strict-mode";
 
 const decorators: Preview["decorators"] = [
-  (Story, {globals: {locale, disableAnimation}}) => {
+  (Story, {globals: {locale, disableAnimation, labelPlacement}}) => {
     const direction =
       // @ts-ignore
       locale && new Intl.Locale(locale)?.textInfo?.direction === "rtl" ? "rtl" : undefined;
 
     return (
-      <NextUIProvider locale={locale} disableAnimation={disableAnimation}>
+      <NextUIProvider locale={locale} disableAnimation={disableAnimation} labelPlacement={labelPlacement}>
         <div className="bg-dark" lang={locale} dir={direction}>
           <Story />
         </div>
@@ -127,6 +127,18 @@ const globalTypes: Preview["globalTypes"] = {
       ],
     },
   },
+  labelPlacement: {
+    name: "Label Placement",
+    description: "Position of label placement.",
+    toolbar: {
+      icon: "component",
+      items: [
+        {value: "inside", title: "Inside"},
+        {value: "outside", title: "Outside"},
+        {value: "outside-left", title: "Outside Left"},
+      ],
+    },
+  }
 };
 
 const preview: Preview = {