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.

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

fix(fuselage): FieldLabel margins and paddings #1238

Merged
merged 6 commits into from
Dec 8, 2023
Merged

fix(fuselage): FieldLabel margins and paddings #1238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c1bee25
chore: update `Field` stories
dougfabris Dec 1, 2023
2c484ef
fix: `Label` flex
dougfabris Dec 1, 2023
ed91a08
fix: input as simple label instead of `Label` component
dougfabris Dec 8, 2023
35145d2
chore: changeset
dougfabris Dec 8, 2023
479ee9f
chore: update snapshots
dougfabris Dec 8, 2023
b669601
Merge branch 'main' into chore/fieldStories
juliajforesti Dec 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/old-taxis-boil.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/fuselage": patch
---

fix(fuselage): FieldLabel margins and paddings
3 changes: 1 addition & 2 deletions packages/fuselage/src/components/CheckBox/CheckBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import type { ComponentProps, Ref, FormEvent, AllHTMLAttributes } from 'react';
import React, { forwardRef, useLayoutEffect, useRef, useCallback } from 'react';

import Box from '../Box';
import { Label } from '../Label';

type CheckBoxProps = ComponentProps<typeof Box> & {
indeterminate?: boolean;
Expand Down Expand Up @@ -33,7 +32,7 @@ export const CheckBox = forwardRef(function CheckBox(
);

return (
<Box is={Label} className={className} rcx-check-box>
<Box is='label' className={className} rcx-check-box>
<Box
is='input'
type='checkbox'
Expand Down
30 changes: 15 additions & 15 deletions packages/fuselage/src/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`[CheckBox Rendering] renders Checked without crashing 1`] = `
<body>
<div>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box"
class="rcx-box rcx-box--full rcx-check-box"
>
<input
aria-label="Decorator Label"
Expand All @@ -25,7 +25,7 @@ exports[`[CheckBox Rendering] renders Default without crashing 1`] = `
<body>
<div>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box"
class="rcx-box rcx-box--full rcx-check-box"
>
<input
aria-label="Decorator Label"
Expand All @@ -45,7 +45,7 @@ exports[`[CheckBox Rendering] renders DefaultChecked without crashing 1`] = `
<body>
<div>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box"
class="rcx-box rcx-box--full rcx-check-box"
>
<input
aria-label="Decorator Label"
Expand All @@ -66,7 +66,7 @@ exports[`[CheckBox Rendering] renders Disabled without crashing 1`] = `
<body>
<div>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box"
class="rcx-box rcx-box--full rcx-check-box"
>
<input
aria-label="Decorator Label"
Expand All @@ -87,7 +87,7 @@ exports[`[CheckBox Rendering] renders Indeterminate without crashing 1`] = `
<body>
<div>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box"
class="rcx-box rcx-box--full rcx-check-box"
>
<input
aria-label="Decorator Label"
Expand Down Expand Up @@ -150,7 +150,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
class="rcx-box rcx-box--full rcx-css-7rd89h"
>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box"
class="rcx-box rcx-box--full rcx-check-box"
>
<input
aria-label="Decorator Label"
Expand All @@ -172,7 +172,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
class="rcx-box rcx-box--full rcx-css-7rd89h"
>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box"
class="rcx-box rcx-box--full rcx-check-box"
>
<input
aria-label="Decorator Label"
Expand Down Expand Up @@ -202,7 +202,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
class="rcx-box rcx-box--full rcx-css-7rd89h"
>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box is-hovered"
class="rcx-box rcx-box--full rcx-check-box is-hovered"
>
<input
aria-label="Decorator Label"
Expand All @@ -224,7 +224,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
class="rcx-box rcx-box--full rcx-css-7rd89h"
>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box is-hovered"
class="rcx-box rcx-box--full rcx-check-box is-hovered"
>
<input
aria-label="Decorator Label"
Expand Down Expand Up @@ -254,7 +254,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
class="rcx-box rcx-box--full rcx-css-7rd89h"
>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box is-active"
class="rcx-box rcx-box--full rcx-check-box is-active"
>
<input
aria-label="Decorator Label"
Expand All @@ -276,7 +276,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
class="rcx-box rcx-box--full rcx-css-7rd89h"
>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box is-active"
class="rcx-box rcx-box--full rcx-check-box is-active"
>
<input
aria-label="Decorator Label"
Expand Down Expand Up @@ -306,7 +306,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
class="rcx-box rcx-box--full rcx-css-7rd89h"
>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box is-focused"
class="rcx-box rcx-box--full rcx-check-box is-focused"
>
<input
aria-label="Decorator Label"
Expand All @@ -328,7 +328,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
class="rcx-box rcx-box--full rcx-css-7rd89h"
>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box is-focused"
class="rcx-box rcx-box--full rcx-check-box is-focused"
>
<input
aria-label="Decorator Label"
Expand Down Expand Up @@ -358,7 +358,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
class="rcx-box rcx-box--full rcx-css-7rd89h"
>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box"
class="rcx-box rcx-box--full rcx-check-box"
>
<input
aria-label="Decorator Label"
Expand All @@ -381,7 +381,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
class="rcx-box rcx-box--full rcx-css-7rd89h"
>
<label
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-check-box"
class="rcx-box rcx-box--full rcx-check-box"
>
<input
aria-label="Decorator Label"
Expand Down
165 changes: 62 additions & 103 deletions packages/fuselage/src/components/Field/Field.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';

import {
CheckBox,
Field,
FieldDescription,
FieldError,
FieldHint,
FieldRow,
FieldLabel,
InputBox,
ToggleSwitch,
FieldLink,
TextInput,
TextAreaInput,
RadioButton,
CheckBox,
} from '../..';
import { FieldLabelInfo } from './FieldLabelInfo';

Expand All @@ -30,150 +32,107 @@ export default {
<Title />
<Description />
<Primary />
<Stories title={'Field Patterns'} />
<Stories />
</>
),
},
},
} as ComponentMeta<typeof Field>;

export const Default: ComponentStory<typeof Field> = () => (
export const WithTextInput: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldDescription>Description</FieldDescription>
<FieldRow>
<InputBox.Skeleton />
</FieldRow>
<FieldError>Error</FieldError>
<FieldHint>Hint</FieldHint>
</Field>
);
export const WithLabelInfo: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel htmlFor='label-info-id'>
<FieldLabel required htmlFor='fieldWithText'>
Label
<FieldLabelInfo id='info-id' title='this is a info label' />
<FieldLabelInfo id='fieldWithTextInfo' title='this is a info label' />
</FieldLabel>
<FieldDescription>Description</FieldDescription>
<FieldRow>
<InputBox id='label-info-id' type='text' aria-describedby='info-id' />
<TextInput id='fieldWithText' aria-describedby='fieldWithTextInfo' />
</FieldRow>
<FieldError>Error feedback</FieldError>
<FieldRow>
<FieldHint>Hint</FieldHint>
<FieldLink href='#'>Link</FieldLink>
</FieldRow>
<FieldError>Error</FieldError>
<FieldHint>Hint</FieldHint>
</Field>
);
export const RequiredWithLabelInfo: ComponentStory<typeof Field> = () => (
export const WithTextArea: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel required htmlFor='label-required-id'>
<FieldLabel required htmlFor='fieldWithTextArea'>
Label
<FieldLabelInfo id='required-info-id' title='this is a info label' />
<FieldLabelInfo id='fieldWithTextAreaInfo' title='this is a info label' />
</FieldLabel>
<FieldDescription>Description</FieldDescription>
<FieldRow>
<InputBox
id='label-required-id'
type='text'
aria-describedby='required-info-id'
<TextAreaInput
id='fieldWithTextArea'
aria-describedby='fieldWithTextAreaInfo'
/>
</FieldRow>
<FieldError>Error</FieldError>
<FieldHint>Hint</FieldHint>
</Field>
);

export const WithCheckBox: ComponentStory<typeof Field> = () => (
<Field>
<FieldRow>
<CheckBox id='check-box' />
<FieldLabel htmlFor='check-box'>Label</FieldLabel>
</FieldRow>
</Field>
);

export const WithToggleSwitch: ComponentStory<typeof Field> = () => (
<Field>
<FieldError>Error feedback</FieldError>
<FieldRow>
<ToggleSwitch id='toggle-switch' />
<FieldLabel htmlFor='toggle-switch'>Label</FieldLabel>
<FieldHint>Hint</FieldHint>
<FieldLink href='#'>Link</FieldLink>
</FieldRow>
</Field>
);

export const WithDescription: ComponentStory<typeof Field> = () => (
export const WithRadioButton: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldDescription>
Descriptions should add useful and relevant additional information about
what is required of the user for the related input. Its content is
strictly composed by plain text.
</FieldDescription>
<FieldRow>
<InputBox.Skeleton />
<FieldLabel required htmlFor='fieldWithRadio'>
Label
<FieldLabelInfo id='fieldWithRadioInfo' title='this is a info label' />
</FieldLabel>
<RadioButton id='fieldWithRadio' aria-describedby='fieldWithRadioInfo' />
</FieldRow>
</Field>
);

export const WithError: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldDescription>Description</FieldDescription>
<FieldError>Error feedback</FieldError>
<FieldRow>
<InputBox.Skeleton />
<FieldHint>Hint</FieldHint>
<FieldLink href='#'>Link</FieldLink>
</FieldRow>
<FieldError>
Error text appears when the user has inputted an invalid response to a
field and let's the user know exactly what the issue is, so as to let them
remedy the error as easily as possible.
</FieldError>
</Field>
);

export const WithHint: ComponentStory<typeof Field> = () => (
export const WithToggleSwitch: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldRow>
<InputBox.Skeleton />
<FieldLabel required htmlFor='fieldWithToggle'>
Label
<FieldLabelInfo id='fieldWithToggleInfo' title='this is a info label' />
</FieldLabel>
<ToggleSwitch
id='fieldWithToggle'
aria-describedby='fieldWithToggleInfo'
/>
</FieldRow>
<FieldHint>
Hint fields help by explaining technical terms or concepts related to
third-party apps and integrations.
</FieldHint>
</Field>
);

export const WithHintAndError: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldDescription>Description</FieldDescription>
<FieldError>Error feedback</FieldError>
<FieldRow>
<InputBox.Skeleton />
<FieldHint>Hint</FieldHint>
<FieldLink href='#'>Link</FieldLink>
</FieldRow>
<FieldError>Error must be above.</FieldError>
<FieldHint>Hint must be below.</FieldHint>
</Field>
);

export const WithLink: ComponentStory<typeof Field> = () => (
export const WithCheckbox: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldRow>
<InputBox.Skeleton />
</FieldRow>
<FieldRow justifyContent='end'>
<FieldLink href='#'>
Link is used for external resources or documentation.
</FieldLink>
<FieldLabel required htmlFor='fieldWithCheckbox'>
Label
<FieldLabelInfo
id='fieldWithCheckboxInfo'
title='this is a info label'
/>
</FieldLabel>
<CheckBox
id='fieldWithCheckbox'
aria-describedby='fieldWithCheckboxInfo'
/>
</FieldRow>
</Field>
);

export const WithHintAndLink: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldDescription>Description</FieldDescription>
<FieldError>Error feedback</FieldError>
<FieldRow>
<InputBox.Skeleton />
</FieldRow>
<FieldRow justifyContent='space-between'>
<FieldHint>Same line as Link in the left</FieldHint>
<FieldLink href='#'>Same line as Hint in the right</FieldLink>
<FieldHint>Hint</FieldHint>
<FieldLink href='#'>Link</FieldLink>
</FieldRow>
</Field>
);
Loading
Loading