Skip to content

Commit

Permalink
[DS-515] Add required examples with nece
Browse files Browse the repository at this point in the history
  • Loading branch information
victortrinh2 committed Dec 23, 2024
1 parent 83137e9 commit 5c69335
Show file tree
Hide file tree
Showing 6 changed files with 25 additions and 6 deletions.
5 changes: 5 additions & 0 deletions .changeset/gentle-monkeys-admire.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@hopper-ui/components": patch
---

Fix necessityIndicator not appearing when it's a label
8 changes: 6 additions & 2 deletions apps/docs/content/components/content/Label.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,13 @@ 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, such as using an asterisk.

<Example src="typography/Label/docs/required" />
<Example src="typography/Label/docs/required1" />

Or a label.

<Example src="typography/Label/docs/required2" />

<FeatureFlag flag="next">
## Advanced customization
Expand Down
7 changes: 5 additions & 2 deletions apps/docs/examples/Preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -407,8 +407,11 @@ export const Previews: Record<string, Preview> = {
"typography/Label/docs/color": {
component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/color.tsx"))
},
"typography/Label/docs/required": {
component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/required.tsx"))
"typography/Label/docs/required1": {
component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/required1.tsx"))
},
"typography/Label/docs/required2": {
component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/required2.tsx"))
},
"typography/Label/docs/advancedCustomization": {
component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/advancedCustomization.tsx"))
Expand Down
7 changes: 7 additions & 0 deletions packages/components/src/typography/Label/docs/required1.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { Label } from "@hopper-ui/components";

export default function Example() {
return (
<Label isRequired necessityIndicator="asterisk">Username</Label>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ import { Label } from "@hopper-ui/components";

export default function Example() {
return (
<Label isRequired>Username</Label>
<Label isRequired necessityIndicator="label">Username</Label>
);
}
2 changes: 1 addition & 1 deletion packages/components/src/typography/Label/src/Label.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down

0 comments on commit 5c69335

Please sign in to comment.