8000 Enhanced form building by 8845musign · Pull Request #17 · ubie-oss/ubie-ui · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Enhanced form building #17

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 7 commits into from
Mar 4, 2024
Merged

Enhanced form building #17

merged 7 commits into from
Mar 4, 2024

Conversation

8845musign
Copy link
Contributor
@8845musign 8845musign commented Mar 1, 2024 •
edited
Loading

Overview

  • Add Text component for form
  • Automate the granting of aria-*.
  • Add stories

<Label>, <ErrorMessage>, <HelperText>

Implemented as individual components.
However, perhaps a wrapper component like <FormContorol> should be created in the future

For example:

<FormContorol label="name" helper="some text" error="required">
  <Input>
</FormControl>

↓ convert to

<Stack>
  <Label>name</Label>
  <Input>
  <HelperText>hoge</HelperText>
  <ErrorMessage>required</ErrorMessage>
</Stack>

Screenshot

Default

Textfield & HelperText

スクリーンショット 2024-03-01 13 50 41

Error

Textfield & HelperText & ErrorMessage

スクリーンショット 2024-03-01 13 50 46

InputGroup

<fieldset> pattern

スクリーンショット 2024-03-01 13 50 51

<fieldset style={{ border: 'none', padding: 0 }}>
  <Stack spacing="xs" alignItems="normal">
    <Label as="legend">通院状況</Label>
    {options.map((option) => (
      <RadioButton
        name="commuting"
        value={option}
        
        checked={selectedItem.includes(option)}
        key={option}
      >
        {option}
      </RadioButton>
    ))}
    <ErrorMessage>何かしらのエラーメッセージ</ErrorMessage>
    <ErrorMessage>何かしらのエラーメッセージ</ErrorMessage>
    <HelperMessage>説明文です</HelperMessage>
    <HelperMessage>説明文です</HelperMessage>
  </Stack>
</fieldset>

@8845musign
To achieve the intended layout in environments without reset css
58a4534 
Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
@8845musign
add aria
e0d574f 
Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
@8845musign
Sort alphabetically
dfd8253 
Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
@8845musign
Add components for form building
b7a127c 
Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
@8845musign
There wasn't enough prop.
0447797 
Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
@8845musign
Merge branch 'main' into add-form-components
ad9d472
@8845musign
imple aria-invalid
432b38f 
Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
8845musign
8845musign commented Mar 1, 2024
View reviewed changes
src/index.ts
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Sort alphabetically
  • Add new component imports

src/components/ErrorMessage/ErrorMessage.tsx
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A prefix such as <FieldErrorMessage> is also possible. However, this has been omitted due to its length.

src/components/Select/Select.tsx
10000
@@ -28,7 +28,7 @@ const Select: FC<Props> = forwardRef<HTMLSelectElement, Props>(
({ isInvalid = false, disabled = false, children, className, ...props }, ref) => {
return (
<div className={clsx({ [styles.isInvalid]: isInvalid, [styles.disabled]: disabled }, styles.wrapper, className)}>
<select {...props} disabled={disabled} className={styles.select} ref={ref}>
<select {...props} disabled={disabled} className={styles.select} ref={ref} aria-invalid={isInvalid}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do not want to specify separately

src/stories/Form.stories.tsx
}, []);

return (
<fieldset style={{ border: 'none', padding: 0 }}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • I think we need a grouping component like <FormControlGroup>
  • Not implemented this time because there are many considerations (e.g., whether to have label prop)

src/stories/Input.stories.tsx
@@ -113,5 +113,5 @@ export const Disabled: Story = {
};

export const IsInvalid: Story = {
render: () => <Input value="wrong value" />,
render: () => <Input value="wrong value" isInvalid />,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

miss

@8845musign 8845musign marked this pull request as ready for review March 1, 2024 04:57
@8845musign 8845musign self-assigned this Mar 1, 2024
@takanorip takanorip self-requested a review March 4, 2024 07:33
takanorip
takanorip approved these changes Mar 4, 2024
View reviewed changes
Copy link
Contributor
@takanorip takanorip left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm!

@takanorip takanorip merged commit f74dc30 into ubie-oss:main Mar 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@takanorip takanorip takanorip approved these changes

Assignees

@8845musign 8845musign

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@8845musign @takanorip
0