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

Imple RadioGroup And CheckboxGroup #25

Merged
merged 5 commits into from
Mar 13, 2024

Conversation

8845musign
Copy link
Contributor

@8845musign 8845musign commented Mar 11, 2024

Overview

  • Unable to implement grammatically correct fields in Stack and RadioXXX or Checkbox components
    • Possible by combining CSS and native elements
  • We want to implement Radio and Checkbox effortlessly
  • Implemented a group component that makes markup and labels and some layouts responsible.

Screenshot

RadioGroup With RadioButtons

スクリーンショット 2024-03-11 20 30 50

RadioGroup With RadioButtons (Horizontally)

スクリーンショット 2024-03-11 20 30 55

RadioGroup With RadioCard

  • Spacing between fields is sm for RadioCard (usually md)
  • witdh is 100% without setting RadioCard to block.

スクリーンショット 2024-03-11 20 31 05

RadioGroup With RadioCard (Horizontally)

スクリーンショット 2024-03-11 20 31 13

CheckboxGroup With Checkbox

スクリーンショット 2024-03-11 20 29 52

CheckboxGroup With Checkbox (Horizontally)

スクリーンショット 2024-03-11 20 29 58

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';
Copy link
Contributor Author

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?

Copy link
Contributor

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';
Copy link
Contributor Author

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のような、選択した後自動で遷移しないタイプのラジオボタン(選択してもなにもおきないボタン)に使用する。
* 選択した後自動で遷移しないタイプのラジオボタン(選択してもなにもおきないボタン)に使用
Copy link
Contributor Author

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">
Copy link
Contributor Author

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>
@8845musign 8845musign self-assigned this Mar 11, 2024
@8845musign 8845musign marked this pull request as ready for review March 11, 2024 11:40
@8845musign 8845musign requested a review from takanorip as a code owner March 11, 2024 11:40
@takanorip takanorip merged commit 33d33f8 into ubie-oss:main Mar 13, 2024
2 checks passed
@8845musign 8845musign deleted the add-group-for-radio-and-checkbox branch March 14, 2024 02:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants