Add Label suffix (#226)

@stellar/design-system-website/src/componentPreview/inputPreview.tsx

@@ -19,6 +19,21 @@ export const inputPreview: ComponentPreview = {
         },
       ],
     },
+    {
+      type: "select",
+      prop: "labelSuffix",
+      customValue: "optional",
+      options: [
+        {
+          value: "",
+          label: "No suffix",
+        },
+        {
+          value: "optional",
+          label: "Optional",
+        },
+      ],
+    },
     {
       type: "select",
       prop: "placeholder",

@stellar/design-system-website/src/componentPreview/selectPreview.tsx

@@ -17,6 +17,21 @@ export const selectPreview: ComponentPreview = {
         },
       ],
     },
+    {
+      type: "select",
+      prop: "labelSuffix",
+      customValue: "optional",
+      options: [
+        {
+          value: "",
+          label: "No suffix",
+        },
+        {
+          value: "optional",
+          label: "Optional",
+        },
+      ],
+    },
     {
       type: "select",
       prop: "fieldSize",

@stellar/design-system-website/src/componentPreview/textareaPreview.tsx

@@ -17,6 +17,21 @@ export const textareaPreview: ComponentPreview = {
         },
       ],
     },
+    {
+      type: "select",
+      prop: "labelSuffix",
+      customValue: "optional",
+      options: [
+        {
+          value: "",
+          label: "No suffix",
+        },
+        {
+          value: "optional",
+          label: "Optional",
+        },
+      ],
+    },
     {
       type: "select",
       prop: "placeholder",

@stellar/design-system/src/components/Input/index.tsx

@@ -15,6 +15,8 @@ export interface InputProps {
   fieldSize: "sm" | "md" | "lg";
   /** Label of the input */
   label?: string | React.ReactNode;
+  /** Adds suffix to the label */
+  labelSuffix?: string | React.ReactNode;
   /** Make label uppercase */
   isLabelUppercase?: boolean;
   /** Input error without a message */
@@ -56,6 +58,7 @@ export const Input: React.FC<Props> = ({
   customInput,
   id,
   label,
+  labelSuffix,
   fieldSize,
   isLabelUppercase,
   isError,
@@ -101,7 +104,12 @@ export const Input: React.FC<Props> = ({
   return (
     <div className={`Input ${additionalClasses}`}>
       {label && (
-        <Label htmlFor={id} isUppercase={isLabelUppercase} size={fieldSize}>
+        <Label
+          htmlFor={id}
+          isUppercase={isLabelUppercase}
+          size={fieldSize}
+          labelSuffix={labelSuffix}
+        >
           {label}
         </Label>
       )}

@stellar/design-system/src/components/Label/index.tsx

@@ -6,13 +6,15 @@ interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   htmlFor: string;
   size: "sm" | "md" | "lg";
   isUppercase?: boolean;
+  labelSuffix?: string | React.ReactNode;
 }
 
 export const Label: React.FC<LabelProps> = ({
   children,
   htmlFor,
   size = "sm",
   isUppercase,
+  labelSuffix,
   ...props
 }: LabelProps) => {
   const additionalClasses = [
@@ -27,6 +29,9 @@ export const Label: React.FC<LabelProps> = ({
       {...props}
     >
       {children}
+      {labelSuffix ? (
+        <span className="Label__suffix">({labelSuffix})</span>
+      ) : null}
     </label>
   );
 };

@stellar/design-system/src/components/Label/styles.scss

@@ -4,6 +4,8 @@
   font-family: var(--sds-ff-base);
   font-weight: var(--sds-fw-medium);
   color: var(--sds-clr-gray-12);
+  display: flex;
+  gap: pxToRem(2px);
 
   &--sm {
     font-size: pxToRem(12px);
@@ -23,4 +25,8 @@
   &--uppercase {
     text-transform: uppercase;
   }
+
+  &__suffix {
+    color: var(--sds-clr-gray-11);
+  }
 }

@stellar/design-system/src/components/Select/index.tsx

@@ -15,6 +15,8 @@ export interface SelectProps {
   children: React.ReactNode;
   /** Label of the select */
   label?: string | React.ReactNode;
+  /** Adds suffix to the label */
+  labelSuffix?: string | React.ReactNode;
   /** Note message of the select */
   note?: string | React.ReactNode;
   /** Error message of the select */
@@ -42,6 +44,7 @@ export const Select: React.FC<Props> = ({
   fieldSize,
   children,
   label,
+  labelSuffix,
   note,
   error,
   isLabelUppercase,
@@ -63,7 +66,12 @@ export const Select: React.FC<Props> = ({
   return (
     <div className={`Select ${additionalClasses}`}>
       {label && (
-        <Label htmlFor={id} isUppercase={isLabelUppercase} size={fieldSize}>
+        <Label
+          htmlFor={id}
+          isUppercase={isLabelUppercase}
+          size={fieldSize}
+          labelSuffix={labelSuffix}
+        >
           {label}
         </Label>
       )}

@stellar/design-system/src/components/Textarea/index.tsx

@@ -14,6 +14,8 @@ export interface TextareaProps {
   children?: string;
   /** Label of the textarea */
   label?: string | React.ReactNode;
+  /** Adds suffix to the label */
+  labelSuffix?: string | React.ReactNode;
   /** Note message of the textarea */
   note?: string | React.ReactNode;
   /** Error message of the textarea */
@@ -41,6 +43,7 @@ export const Textarea: React.FC<Props> = ({
   fieldSize,
   children = "",
   label,
+  labelSuffix,
   note,
   error,
   isError,
@@ -66,7 +69,12 @@ export const Textarea: React.FC<Props> = ({
   return (
     <div className={`Textarea ${additionalClasses}`}>
       {label && (
-        <Label htmlFor={id} isUppercase={isLabelUppercase} size={fieldSize}>
+        <Label
+          htmlFor={id}
+          isUppercase={isLabelUppercase}
+          size={fieldSize}
+          labelSuffix={labelSuffix}
+        >
           {label}
         </Label>
       )}