Skip to content

docs(react-textarea): Update examples to use Field #27644

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

Merged
sopranopillow merged 5 commits into from
Apr 21, 2023
Merged

docs(react-textarea): Update examples to use Field #27644

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d3e556
Adding examples and updating to use Field
sopranopillow Apr 19, 2023
2e93ec6
requested changeS
sopranopillow Apr 20, 2023
508ab27
Merge branch 'master' of https://github.com/microsoft/fluentui into r…
sopranopillow Apr 20, 2023
3830dc2
requested changes:
sopranopillow Apr 20, 2023
aeb303a
requested changes
sopranopillow Apr 20, 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
36 changes: 10 additions & 26 deletions packages/react-components/react-textarea/stories/Textarea/TextareaAppearance.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,12 @@
import * as React from 'react';
import { makeStyles, shorthands, tokens, useId, Label, Textarea } from '@fluentui/react-components';
import { Field, makeStyles, shorthands, tokens, Textarea } from '@fluentui/react-components';

const useStyles = makeStyles({
base: {
display: 'flex',
flexDirection: 'column',

'> div': {
display: 'flex',
flexDirection: 'column',
marginTop: tokens.spacingVerticalMNudge,
...shorthands.padding(tokens.spacingHorizontalMNudge),
},

'> div > label': {
marginBottom: tokens.spacingHorizontalXXS,
marginLeft: tokens.spacingHorizontalMNudge,
},
},
Comment thread
sopranopillow marked this conversation as resolved.
filledLighter: {
backgroundColor: tokens.colorNeutralBackgroundInverted,
Expand All @@ -33,27 +23,21 @@ const useStyles = makeStyles({
});

export const Appearance = () => {
const outlineId = useId('textarea-outline');
const filledDarkerId = useId('textarea-filleddarker');
const filledLighterId = useId('textarea-filledlighter');
const styles = useStyles();

return (
<div className={styles.base}>
<div>
<Label htmlFor={outlineId}>Textarea with Outline appearance.</Label>
<Textarea id={outlineId} appearance="outline" placeholder="type here..." resize="both" />
</div>
<Field label="Textarea with Outline appearance.">
Comment thread
sopranopillow marked this conversation as resolved.
Outdated
<Textarea appearance="outline" placeholder="type here..." resize="both" />
</Field>

<div className={styles.filledDarker}>
<Label htmlFor={filledDarkerId}>Textarea with Filled Darker appearance.</Label>
<Textarea id={filledDarkerId} appearance="filled-darker" placeholder="type here..." resize="both" />
</div>
<Field label="Textarea with Filled Darker appearance." className={styles.filledDarker}>
<Textarea appearance="filled-darker" placeholder="type here..." resize="both" />
</Field>

<div className={styles.filledLighter}>
<Label htmlFor={filledLighterId}>Textarea with Filled Lighter appearance.</Label>
<Textarea id={filledLighterId} appearance="filled-lighter" placeholder="type here..." resize="both" />
</div>
<Field label="Textarea with Filled Lighter appearance." className={styles.filledLighter}>
<Textarea appearance="filled-lighter" placeholder="type here..." resize="both" />
</Field>
</div>
);
};
Expand Down
32 changes: 32 additions & 0 deletions packages/react-components/react-textarea/stories/Textarea/TextareaAutoHeight.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import * as React from 'react';
import { Field, Textarea, TextareaProps } from '@fluentui/react-components';

export const AutoHeight = () => {
const textareaRef = React.useRef<HTMLTextAreaElement>(null);

const onChange: TextareaProps['onChange'] = (ev, data) => {
const textArea = textareaRef.current;

if (textArea) {
// We need to clear the height to be able to update the height correctly
textArea.style.height = '';
textArea.style.height = textArea.scrollHeight + 'px';
}
Comment thread
sopranopillow marked this conversation as resolved.
Outdated
Comment thread
sopranopillow marked this conversation as resolved.
Outdated
};

return (
<Field label="Textarea with auto height adjustment.">
<Textarea ref={textareaRef} onChange={onChange} />
</Field>
);
};

AutoHeight.parameters = {
docs: {
description: {
story:
`To support auto height in a Textarea, we can keep track of the scroll height using refs to update the ` +
`Textarea's current height.`,
},
},
};
1 change: 1 addition & 0 deletions packages/react-components/react-textarea/stories/Textarea/TextareaBestPractices.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
### Do

- **Consider using `Textarea` with outline appearance.** When the contrast ratio against the immediate surrounding color is less than 3:1, consider using outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding.
- Use `<Field>` instead of `<Label>` to handle a11y attributes correctly.
Comment thread
sopranopillow marked this conversation as resolved.
Outdated

### Don't

Expand Down
22 changes: 4 additions & 18 deletions packages/react-components/react-textarea/stories/Textarea/TextareaControlled.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,8 @@
import * as React from 'react';
import { makeStyles, tokens, useId, Label, Textarea } from '@fluentui/react-components';
import { Field, Textarea } from '@fluentui/react-components';
import type { TextareaProps } from '@fluentui/react-components';

const useStyles = makeStyles({
base: {
display: 'flex',
flexDirection: 'column',
'& > label': {
display: 'block',
marginBottom: tokens.spacingVerticalMNudge,
},
},
});

export const Controlled = () => {
const textareaId = useId('textarea');
const styles = useStyles();
const [value, setValue] = React.useState('initial value');

const onChange: TextareaProps['onChange'] = (ev, data) => {
Expand All @@ -25,9 +12,8 @@ export const Controlled = () => {
};

return (
<div className={styles.base}>
<Label htmlFor={textareaId}>Controlled Textarea limiting the value to 50 characters.</Label>
<Textarea value={value} onChange={onChange} id={textareaId} />
</div>
<Field label="Controlled Textarea limiting the value to 50 characters.">
<Textarea value={value} onChange={onChange} />
</Field>
);
};
28 changes: 6 additions & 22 deletions packages/react-components/react-textarea/stories/Textarea/TextareaDefault.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,9 @@
import * as React from 'react';
import { makeStyles, tokens, useId, Label, Textarea } from '@fluentui/react-components';
import { Field, Textarea } from '@fluentui/react-components';
import type { TextareaProps } from '@fluentui/react-components';

const useStyles = makeStyles({
base: {
display: 'flex',
flexDirection: 'column',
'& > label': {
marginBottom: tokens.spacingVerticalMNudge,
},
},
});

export const Default = (props: Partial<TextareaProps>) => {
const textareaId = useId('textarea');
const styles = useStyles();

return (
<div className={styles.base}>
<Label htmlFor={textareaId}>Default Textarea</Label>
<Textarea id={textareaId} {...props} />
</div>
);
};
export const Default = (props: Partial<TextareaProps>) => (
<Field label="Default Textarea.">
<Textarea {...props} />
</Field>
);
28 changes: 6 additions & 22 deletions packages/react-components/react-textarea/stories/Textarea/TextareaDisabled.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,8 @@
import * as React from 'react';
import { makeStyles, tokens, useId, Label, Textarea } from '@fluentui/react-components';
import { Field, Textarea } from '@fluentui/react-components';

const useStyles = makeStyles({
base: {
display: 'flex',
flexDirection: 'column',
'& > label': {
marginBottom: tokens.spacingVerticalMNudge,
},
},
});

export const Disabled = () => {
const disabledId = useId('textarea-disabled');
const styles = useStyles();

return (
<div className={styles.base}>
<Label htmlFor={disabledId}>Disabled Textarea.</Label>
<Textarea id={disabledId} disabled />
</div>
);
};
export const Disabled = () => (
<Field label="Disabled Textarea.">
<Textarea disabled />
</Field>
);
27 changes: 6 additions & 21 deletions packages/react-components/react-textarea/stories/Textarea/TextareaPlaceholder.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,8 @@
import * as React from 'react';
import { makeStyles, tokens, useId, Label, Textarea } from '@fluentui/react-components';
import { Field, Textarea } from '@fluentui/react-components';

const useStyles = makeStyles({
base: {
display: 'flex',
flexDirection: 'column',
'& > label': {
marginBottom: tokens.spacingVerticalMNudge,
},
},
});

export const Placeholder = () => {
const styles = useStyles();
const textareaId = useId('textarea');
return (
<div className={styles.base}>
<Label htmlFor={textareaId}>Textarea with placeholder.</Label>
<Textarea id={textareaId} placeholder="type here..." />
</div>
);
};
export const Placeholder = () => (
<Field label="Textarea with placeholder.">
<Textarea placeholder="type here..." />
</Field>
);
52 changes: 13 additions & 39 deletions packages/react-components/react-textarea/stories/Textarea/TextareaResize.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,34 @@
import * as React from 'react';
import { makeStyles, shorthands, tokens, useId, Label, Textarea } from '@fluentui/react-components';
import { Field, makeStyles, Textarea, tokens } from '@fluentui/react-components';

const useStyles = makeStyles({
base: {
'& > div': {
marginTop: tokens.spacingVerticalMNudge,
},
Comment thread
sopranopillow marked this conversation as resolved.
Outdated
'& > div > div': {
display: 'flex',
flexDirection: 'column',
...shorthands.borderRadius(tokens.borderRadiusMedium),
...shorthands.padding(tokens.spacingHorizontalMNudge),
},
'& > div > label': {
marginBottom: tokens.spacingHorizontalXXS,
marginLeft: tokens.spacingHorizontalMNudge,
},
},
});

export const Resize = () => {
const noneId = useId('textarea-none');
const verticalId = useId('textarea-vertical');
const horizontalId = useId('textarea-horizontal');
const bothId = useId('textarea-both');
const styles = useStyles();

return (
<div className={styles.base}>
<div>
<Label htmlFor={noneId}>Textarea with resize set to "none".</Label>
<div>
<Textarea id={noneId} resize="none" />
</div>
</div>
<Field label='Textarea with resize set to "none".'>
<Textarea resize="none" />
</Field>

<div>
<Label htmlFor={verticalId}>Textarea with resize set to "vertical".</Label>
<div>
<Textarea id={verticalId} resize="vertical" />
</div>
</div>
<Field label='Textarea with resize set to "vertical".'>
<Textarea resize="vertical" />
</Field>

<div>
<Label htmlFor={horizontalId}>Textarea with resize set to "horizontal".</Label>
<div>
<Textarea id={horizontalId} resize="horizontal" />
</div>
</div>
<Field label='Textarea with resize set to "horizontal".'>
<Textarea resize="horizontal" />
</Field>

<div>
<Label htmlFor={bothId}>Textarea with resize set to "both".</Label>
<div>
<Textarea id={bothId} resize="both" />
</div>
</div>
<Field label='Textarea with resize set to "both".'>
<Textarea resize="both" />
</Field>
</div>
);
};
42 changes: 10 additions & 32 deletions packages/react-components/react-textarea/stories/Textarea/TextareaSize.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,30 @@
import * as React from 'react';
import { makeStyles, shorthands, tokens, useId, Label, Textarea } from '@fluentui/react-components';
import { Field, makeStyles, Textarea, tokens } from '@fluentui/react-components';

const useStyles = makeStyles({
base: {
'& > div': {
marginTop: tokens.spacingVerticalMNudge,
},
Comment thread
sopranopillow marked this conversation as resolved.
Outdated
'& > div > div': {
display: 'flex',
flexDirection: 'column',
...shorthands.borderRadius(tokens.borderRadiusMedium),
...shorthands.padding(tokens.spacingHorizontalMNudge),
},
'& > div > label': {
marginBottom: tokens.spacingHorizontalXXS,
marginLeft: tokens.spacingHorizontalMNudge,
},
},
});

export const Size = () => {
const smallId = useId('textarea-small');
const mediumId = useId('textarea-medium');
const largeId = useId('textarea-large');
const styles = useStyles();

return (
<div className={styles.base}>
<div>
<Label htmlFor={smallId}>Small Textarea.</Label>
<div>
<Textarea id={smallId} size="small" />
</div>
</div>
<Field size="small" label="Small Textarea.">
<Textarea />
</Field>

<div>
<Label htmlFor={mediumId}>Medium Textarea.</Label>
<div>
<Textarea id={mediumId} size="medium" />
</div>
</div>
<Field size="medium" label="Medium Textarea.">
<Textarea />
</Field>

<div>
<Label htmlFor={largeId}>Large Textarea.</Label>
<div>
<Textarea id={largeId} size="large" />
</div>
</div>
<Field size="large" label="Large Textarea.">
<Textarea />
</Field>
</div>
);
};
2 changes: 1 addition & 1 deletion packages/react-components/react-textarea/stories/Textarea/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export { Resize } from './TextareaResize.stories';
export { Size } from './TextareaSize.stories';
export { Uncontrolled } from './TextareaUncontrolled.stories';
export { Controlled } from './TextareaControlled.stories';
export { Height } from './TextareaHeight.stories';
Comment thread
sopranopillow marked this conversation as resolved.
export { AutoHeight } from './TextareaAutoHeight.stories';

export default {
title: 'Components/Textarea',
Expand Down