[DS-515] Add required examples with necessityIndicator (#561)

gsoft-inc · Dec 23, 2024 · 820f800 · 820f800
2 parents 83137e9 + b3d59c9
commit 820f800
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 3 deletions.
diff --git a/apps/docs/content/components/content/Label.mdx b/apps/docs/content/components/content/Label.mdx
@@ -35,10 +35,15 @@ The label component has a default color, but it can be easily overridden.
 <Example src="typography/Label/docs/color" />
 
 ### Required
-The label component can be marked as required.
+The label component can be marked as required. You can customize the necessity indicator by using an asterisk.
 
 <Example src="typography/Label/docs/required" />
 
+### Optional
+The label component can show the optional necessity indicator as a label.
+
+<Example src="typography/Label/docs/optional" />
+
 <FeatureFlag flag="next">
     ## Advanced customization
 

diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts
@@ -410,6 +410,9 @@ export const Previews: Record<string, Preview> = {
     "typography/Label/docs/required": {
         component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/required.tsx"))
     },
+    "typography/Label/docs/optional": {
+        component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/optional.tsx"))
+    },
     "typography/Label/docs/advancedCustomization": {
         component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/advancedCustomization.tsx"))
     },

diff --git a/packages/components/src/typography/Label/docs/optional.tsx b/packages/components/src/typography/Label/docs/optional.tsx
@@ -0,0 +1,7 @@
+import { Label } from "@hopper-ui/components";
+
+export default function Example() {
+    return (
+        <Label necessityIndicator="label">Username</Label>
+    );
+}
diff --git a/packages/components/src/typography/Label/docs/required.tsx b/packages/components/src/typography/Label/docs/required.tsx
@@ -2,6 +2,6 @@ import { Label } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Label isRequired>Username</Label>
+        <Label isRequired necessityIndicator="asterisk">Username</Label>
     );
 }
diff --git a/packages/components/src/typography/Label/src/Label.tsx b/packages/components/src/typography/Label/src/Label.tsx
@@ -79,7 +79,7 @@ function Label(props: LabelProps, ref: ForwardedRef<HTMLLabelElement>) {
             {...filteredProps}
         >
             {children}
-            {(necessityIndicator === "label" && !isRequired) && <span className={styles["hop-Label__label-indicator"]}> ({necessityLabel})</span>}
+            {necessityIndicator === "label" && !isRequired && <span className={styles["hop-Label__label-indicator"]}> ({necessityLabel})</span>}
             {necessityIndicator === "asterisk" && isRequired && requiredIndicator}
         </RACLabel>
     );