Merge branch 'master' into 242-add-tap-area

NilFoundation · Apr 11, 2024 · c6acc1a · c6acc1a
2 parents fb301d5 + 3aba70a
commit c6acc1a
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 14 deletions.
diff --git a/src/components/form-control/FormControl.stories.mdx b/src/components/form-control/FormControl.stories.mdx
@@ -66,6 +66,9 @@ export const InputFieldProps = {
   <Story name="With Max Length" args={{ ...InputFieldProps, isCounter: true, size: INPUT_SIZE.small }}>
     {Template.bind({})}
   </Story>
+  <Story name="Required" args={{ ...InputFieldProps, required: true }}>
+    {Template.bind({})}
+  </Story>
 </Canvas>
 
 <ArgsTable of={FormControl} />

diff --git a/src/components/form-control/FormControl.tsx b/src/components/form-control/FormControl.tsx
@@ -14,6 +14,7 @@ export type FormControlProps = Omit<BaseFormControlProps, "counter" | "positive"
   readOnly?: boolean;
   isLoading?: boolean;
   counter?: ICounter;
+  required?: boolean;
 };
 
 const getValueLabel = (counter: ICounter): string => {
@@ -26,10 +27,16 @@ const FormControl: FC<FormControlProps> = ({
   size = INPUT_SIZE.medium,
   children,
   counter,
+  required,
   overrides: baseOverrides,
   ...props
 }) => {
-  const formControlOverrides = getFormControlOverrides(size, !!readOnly, counter ? getValueLabel(counter) : undefined);
+  const formControlOverrides = getFormControlOverrides(
+    size,
+    !!readOnly,
+    counter ? getValueLabel(counter) : undefined,
+    required
+  );
   const overrides = getMergedOverrides(formControlOverrides, baseOverrides);
 
   return (

diff --git a/src/components/form-control/overrides.tsx b/src/components/form-control/overrides.tsx
@@ -2,34 +2,50 @@ import { INPUT_SIZE } from "../input";
 import { FormControlOverrides } from "baseui/form-control";
 import { PRIMITIVE_COLORS } from "../../shared";
 import FormControlLabel from "./ui/FormControlLabel";
+import { expandProperty } from "inline-style-expand-shorthand";
+import { ParagraphXSmall } from "baseui/typography";
 
-const getCaptionColor = (isError: boolean, isDisabled: boolean): string => {
-  if (isDisabled) {
-    return PRIMITIVE_COLORS.gray400;
-  }
-
+const getCaptionColor = (isError: boolean): string => {
   if (isError) {
-    return PRIMITIVE_COLORS.red500;
+    return PRIMITIVE_COLORS.red400;
   }
 
-  return PRIMITIVE_COLORS.gray200;
+  return PRIMITIVE_COLORS.gray300;
 };
 
 export const getFormControlOverrides = (
   size: INPUT_SIZE,
   isReadOnly: boolean,
-  valueLabel?: string
+  valueLabel?: string,
+  required?: boolean
 ): FormControlOverrides => {
   return {
     Label: {
       component: ({ $disabled, ...props }) => (
-        <FormControlLabel {...props} isDisabled={$disabled || isReadOnly} valueLabel={valueLabel} size={size} />
+        <FormControlLabel
+          {...props}
+          isDisabled={$disabled || isReadOnly}
+          valueLabel={valueLabel}
+          size={size}
+          required={required}
+        />
       ),
+      style: {
+        color: PRIMITIVE_COLORS.gray50,
+        ...expandProperty("margin", "4px 0"),
+      },
     },
     Caption: {
-      style: ({ $error, $disabled }) => ({
-        color: getCaptionColor($error, $disabled),
+      style: ({ $error }) => ({
+        color: getCaptionColor($error),
+        ...expandProperty("margin", "4px 0"),
       }),
+      component: ParagraphXSmall,
+    },
+    LabelContainer: {
+      style: {
+        ...expandProperty("margin", "0"),
+      },
     },
   };
 };
diff --git a/src/components/form-control/ui/FormControlLabel.tsx b/src/components/form-control/ui/FormControlLabel.tsx
@@ -10,6 +10,7 @@ type FormControlLabelProps = {
   isDisabled?: boolean;
   valueLabel?: string;
   size: INPUT_SIZE;
+  required?: boolean;
 };
 
 type TypographyProps = ComponentProps<typeof LabelSmall>;
@@ -22,11 +23,19 @@ const labelComponent = {
 const containerStyles: StyleObject = {
   display: "flex",
   alignItems: "center",
-  justifyContent: "space-between",
+  justifyContent: "flex-start",
+  gap: "1ch",
   width: "100%",
 };
 
-const FormControlLabel: FC<FormControlLabelProps> = ({ valueLabel, isDisabled, size, children, ...props }) => {
+const FormControlLabel: FC<FormControlLabelProps> = ({
+  valueLabel,
+  isDisabled,
+  size,
+  children,
+  required,
+  ...props
+}) => {
   const [css] = useStyletron();
   const LabelComponent = labelComponent[size];
 
@@ -38,6 +47,7 @@ const FormControlLabel: FC<FormControlLabelProps> = ({ valueLabel, isDisabled, s
         {children}
       </LabelComponent>
       {valueLabel && <LabelComponent color={PRIMITIVE_COLORS.gray300}>{valueLabel}</LabelComponent>}
+      {required && <LabelComponent color={PRIMITIVE_COLORS.red400}>*</LabelComponent>}
     </div>
   );
 };