Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(label): add title to required dot #3119

Merged
merged 6 commits into from Mar 28, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/fair-pugs-flash.md
@@ -0,0 +1,6 @@
---
'@twilio-paste/label': patch
'@twilio-paste/core': patch
---

[Label] Add "required" title to required dot
1 change: 1 addition & 0 deletions packages/paste-core/components/label/src/RequiredDot.tsx
Expand Up @@ -23,6 +23,7 @@ export const RequiredDot: React.FC<React.PropsWithChildren<RequiredDotProps>> =
cursor="pointer"
display="flex"
height="sizeIcon30"
title={i18nLabel || 'Required'}
nkrantz marked this conversation as resolved.
Show resolved Hide resolved
element={`${element}_WRAPPER`}
>
<Box
Expand Down
Expand Up @@ -421,7 +421,7 @@ Make required and optional fields distinguishable. Try to avoid optional input f

- If most of the inputs on a form are required, indicate the few that are optional.
- If most of the inputs on a form are optional, indicate the few that are required.
- When indicating what form fields are either required or optional, text is the most clear. However, the required symbol is relatively well understood to mean required. If you do use the required symbol to indicate required fields, include a legend or form key that explains what it indicates.
- When indicating what form fields are either required or optional, text is the most clear. However, the required symbol is relatively well understood to mean required. If you do use the required symbol to indicate required fields, you'll see a "Required" title on the symbol. If you're building for other languages, use the `i18nLabel` prop to translate the "Required" title.

## When to use Forms

Expand Down