-
Notifications
You must be signed in to change notification settings - Fork 4
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
Imple RadioGroup And CheckboxGroup #25
Imple RadioGroup And CheckboxGroup #25
Conversation
Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
@@ -0,0 +1,23 @@ | |||
'use client'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[Q]
I am not very familiar with the server component.
Is it OK without 'use clinet' if I don't have state?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If useState is not used, you don't need to write 'use client', but it is safer to write it because this component may have state in the future.
@@ -5,7 +5,7 @@ import type { ElementType, FC, ReactNode } from 'react'; | |||
|
|||
type Props = { | |||
children: ReactNode; | |||
as?: ElementType<{ className?: string; children: ReactNode }> | 'label' | 'legend' | 'p'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Deleted because I want XXXGroup to be used instead of Label.
@@ -25,7 +25,7 @@ type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | |||
|
|||
/** | |||
* アクセシビリティに配慮したラジオボタン。 | |||
* TimeQuestionContentのような、選択した後自動で遷移しないタイプのラジオボタン(選択してもなにもおきないボタン)に使用する。 | |||
* 選択した後自動で遷移しないタイプのラジオボタン(選択してもなにもおきないボタン)に使用 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TimeQuestionContent refers to individual product components.
@@ -68,12 +67,15 @@ export const InputGroup: StoryObj = { | |||
{option} | |||
</RadioButton> | |||
))} | |||
</RadioGroup> | |||
|
|||
<Stack spacing="xs"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Error messages and helper text may be implemented as RadioGroup props.
However, since it would not be consistent with the other fields, we will skip it this time.
Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
Overview
Screenshot
RadioGroup With RadioButtons
RadioGroup With RadioButtons (Horizontally)
RadioGroup With RadioCard
RadioGroup With RadioCard (Horizontally)
CheckboxGroup With Checkbox
CheckboxGroup With Checkbox (Horizontally)