fix: Fix Button example styles by improving their layout (#25287)

* fix: Fix Button example styles by improving their layout. * Removing unnused imports. Co-authored-by: KHMakoto <humberto_makoto@hotmail.com>
microsoft · Oct 19, 2022 · 1646df5 · 1646df5
1 parent 772f9e3
commit 1646df5
Show file tree

Hide file tree

Showing 47 changed files with 927 additions and 512 deletions.
diff --git a/packages/react-components/react-button/src/stories/Button/ButtonAppearance.stories.tsx b/packages/react-components/react-button/src/stories/Button/ButtonAppearance.stories.tsx
@@ -1,15 +1,27 @@
 import * as React from 'react';
-import { Button } from '@fluentui/react-components';
+import { makeStyles, Button } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+ wrapper: {
+ columnGap: '15px',
+ display: 'flex',
+ },
+});
+
+export const Appearance = () => {
+ const styles = useStyles();
+
+ return (
+ <div className={styles.wrapper}>
+ <Button>Default</Button>
+ <Button appearance="primary">Primary</Button>
+ <Button appearance="outline">Outline</Button>
+ <Button appearance="subtle">Subtle</Button>
+ <Button appearance="transparent">Transparent</Button>
+ </div>
+ );
+};
 
-export const Appearance = () => (
- <>
- <Button>Default</Button>
- <Button appearance="primary">Primary</Button>
- <Button appearance="outline">Outline</Button>
- <Button appearance="subtle">Subtle</Button>
- <Button appearance="transparent">Transparent</Button>
- </>
-);
 Appearance.parameters = {
  docs: {
  description: {

diff --git a/packages/react-components/react-button/src/stories/Button/ButtonDefault.stories.tsx b/packages/react-components/react-button/src/stories/Button/ButtonDefault.stories.tsx
@@ -2,6 +2,4 @@ import * as React from 'react';
 import { Button } from '@fluentui/react-components';
 import type { ButtonProps } from '@fluentui/react-components';
 
-export const Default = (props: ButtonProps) => {
- return <Button {...props}>Example</Button>;
-};
+export const Default = (props: ButtonProps) => <Button {...props}>Example</Button>;
diff --git a/packages/react-components/react-button/src/stories/Button/ButtonDisabled.stories.tsx b/packages/react-components/react-button/src/stories/Button/ButtonDisabled.stories.tsx
@@ -1,17 +1,29 @@
 import * as React from 'react';
-import { Button } from '@fluentui/react-components';
+import { makeStyles, Button } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+ innerWrapper: {
+ columnGap: '15px',
+ display: 'flex',
+ },
+ outerWrapper: {
+ display: 'flex',
+ flexDirection: 'column',
+ rowGap: '15px',
+ },
+});
 
 export const Disabled = () => {
- const groupStyles: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: '0.5em' };
+ const styles = useStyles();
 
  return (
- <>
- <div style={groupStyles}>
+ <div className={styles.outerWrapper}>
+ <div className={styles.innerWrapper}>
  <Button>Enabled state</Button>
  <Button disabled>Disabled state</Button>
  <Button disabledFocusable>Disabled focusable state</Button>
  </div>
- <div style={groupStyles}>
+ <div className={styles.innerWrapper}>
  <Button appearance="primary">Enabled state</Button>
  <Button appearance="primary" disabled>
  Disabled state
@@ -20,7 +32,7 @@ export const Disabled = () => {
  Disabled focusable state
  </Button>
  </div>
- </>
+ </div>
  );
 };
 

diff --git a/packages/react-components/react-button/src/stories/Button/ButtonIcon.stories.tsx b/packages/react-components/react-button/src/stories/Button/ButtonIcon.stories.tsx
@@ -1,20 +1,32 @@
 import * as React from 'react';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { Button, Tooltip } from '@fluentui/react-components';
+import { makeStyles, Button, Tooltip } from '@fluentui/react-components';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
-export const Icon = () => (
- <>
- <Button icon={<CalendarMonth />}>With calendar icon before contents</Button>
- <Button icon={<CalendarMonth />} iconPosition="after">
- With calendar icon after contents
- </Button>
- <Tooltip content="With calendar icon only" relationship="label">
- <Button icon={<CalendarMonth />} />
- </Tooltip>
- </>
-);
+const useStyles = makeStyles({
+ wrapper: {
+ columnGap: '15px',
+ display: 'flex',
+ },
+});
+
+export const Icon = () => {
+ const styles = useStyles();
+
+ return (
+ <div className={styles.wrapper}>
+ <Button icon={<CalendarMonth />}>With calendar icon before contents</Button>
+ <Button icon={<CalendarMonth />} iconPosition="after">
+ With calendar icon after contents
+ </Button>
+ <Tooltip content="With calendar icon only" relationship="label">
+ <Button icon={<CalendarMonth />} />
+ </Tooltip>
+ </div>
+ );
+};
+
 Icon.parameters = {
  docs: {
  description: {

diff --git a/packages/react-components/react-button/src/stories/Button/ButtonShape.stories.tsx b/packages/react-components/react-button/src/stories/Button/ButtonShape.stories.tsx
@@ -1,13 +1,23 @@
 import * as React from 'react';
-import { Button } from '@fluentui/react-components';
+import { makeStyles, Button } from '@fluentui/react-components';
 
-export const Shape = () => (
- <>
- <Button>Rounded</Button>
- <Button shape="circular">Circular</Button>
- <Button shape="square">Square</Button>
- </>
-);
+const useStyles = makeStyles({
+ wrapper: {
+ columnGap: '15px',
+ display: 'flex',
+ },
+});
+
+export const Shape = () => {
+ const styles = useStyles();
+ return (
+ <div className={styles.wrapper}>
+ <Button>Rounded</Button>
+ <Button shape="circular">Circular</Button>
+ <Button shape="square">Square</Button>
+ </div>
+ );
+};
 
 Shape.parameters = {
  docs: {

diff --git a/packages/react-components/react-button/src/stories/Button/ButtonSize.stories.tsx b/packages/react-components/react-button/src/stories/Button/ButtonSize.stories.tsx
@@ -1,17 +1,27 @@
 import * as React from 'react';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { Button, Tooltip } from '@fluentui/react-components';
+import { makeStyles, Button, Tooltip } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+ innerWrapper: {
+ columnGap: '15px',
+ display: 'flex',
+ },
+ outerWrapper: {
+ display: 'flex',
+ flexDirection: 'column',
+ rowGap: '15px',
+ },
+});
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export const Size = () => {
- const groupStyles: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: '0.5em' };
- const headerStyles: React.CSSProperties = { width: '100%', margin: 0 };
+ const styles = useStyles();
 
  return (
- <>
- <div style={groupStyles}>
- <h4 style={headerStyles}>small</h4>
+ <div className={styles.outerWrapper}>
+ <div className={styles.innerWrapper}>
  <Button size="small">Small</Button>
  <Button size="small" icon={<CalendarMonth />}>
  Small with calendar icon
@@ -20,16 +30,14 @@ export const Size = () => {
  <Button size="small" icon={<CalendarMonth />} />
  </Tooltip>
  </div>
- <div style={groupStyles}>
- <h4 style={headerStyles}>medium</h4>
+ <div className={styles.innerWrapper}>
  <Button>Medium</Button>
  <Button icon={<CalendarMonth />}>Medium with calendar icon</Button>
  <Tooltip content="Medium with calendar icon only" relationship="label">
  <Button icon={<CalendarMonth />} />
  </Tooltip>
  </div>
- <div style={groupStyles}>
- <h4 style={headerStyles}>large</h4>
+ <div className={styles.innerWrapper}>
  <Button size="large">Large</Button>
  <Button size="large" icon={<CalendarMonth />}>
  Large with calendar icon
@@ -38,7 +46,7 @@ export const Size = () => {
  <Button size="large" icon={<CalendarMonth />} />
  </Tooltip>
  </div>
- </>
+ </div>
  );
 };
 Size.parameters = {

diff --git a/packages/react-components/react-button/src/stories/Button/ButtonWithLongText.stories.tsx b/packages/react-components/react-button/src/stories/Button/ButtonWithLongText.stories.tsx
@@ -5,16 +5,21 @@ const useStyles = makeStyles({
  longText: {
  width: '280px',
  },
+ wrapper: {
+ alignItems: 'center',
+ columnGap: '15px',
+ display: 'flex',
+ },
 });
 
 export const WithLongText = () => {
  const styles = useStyles();
 
  return (
- <>
+ <div className={styles.wrapper}>
  <Button>Short text</Button>
  <Button className={styles.longText}>Long text wraps after it hits the max width of the component</Button>
- </>
+ </div>
  );
 };
 

diff --git a/packages/react-components/react-button/src/stories/Button/index.stories.tsx b/packages/react-components/react-button/src/stories/Button/index.stories.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Meta } from '@storybook/react';
 import { Button } from '@fluentui/react-components';
 import descriptionMd from './ButtonDescription.md';
@@ -22,11 +21,4 @@ export default {
  },
  },
  },
- decorators: [
- Story => (
- <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
- <Story />
- </div>
- ),
- ],
 } as Meta;
diff --git a/...t-components/react-button/src/stories/CompoundButton/CompoundButtonAppearance.stories.tsx b/...t-components/react-button/src/stories/CompoundButton/CompoundButtonAppearance.stories.tsx
@@ -1,23 +1,35 @@
 import * as React from 'react';
-import { CompoundButton } from '@fluentui/react-components';
+import { makeStyles, CompoundButton } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+ wrapper: {
+ columnGap: '15px',
+ display: 'flex',
+ },
+});
+
+export const Appearance = () => {
+ const styles = useStyles();
+
+ return (
+ <div className={styles.wrapper}>
+ <CompoundButton secondaryContent="Secondary content">Default</CompoundButton>
+ <CompoundButton secondaryContent="Secondary content" appearance="primary">
+ Primary
+ </CompoundButton>
+ <CompoundButton secondaryContent="Secondary content" appearance="outline">
+ Outline
+ </CompoundButton>
+ <CompoundButton secondaryContent="Secondary content" appearance="subtle">
+ Subtle
+ </CompoundButton>
+ <CompoundButton secondaryContent="Secondary content" appearance="transparent">
+ Transparent
+ </CompoundButton>
+ </div>
+ );
+};
 
-export const Appearance = () => (
- <>
- <CompoundButton secondaryContent="Secondary content">Default</CompoundButton>
- <CompoundButton secondaryContent="Secondary content" appearance="primary">
- Primary
- </CompoundButton>
- <CompoundButton secondaryContent="Secondary content" appearance="outline">
- Outline
- </CompoundButton>
- <CompoundButton secondaryContent="Secondary content" appearance="subtle">
- Subtle
- </CompoundButton>
- <CompoundButton secondaryContent="Secondary content" appearance="transparent">
- Transparent
- </CompoundButton>
- </>
-);
 Appearance.parameters = {
  docs: {
  description: {

diff --git a/...eact-components/react-button/src/stories/CompoundButton/CompoundButtonDefault.stories.tsx b/...eact-components/react-button/src/stories/CompoundButton/CompoundButtonDefault.stories.tsx
@@ -5,10 +5,8 @@ import type { CompoundButtonProps } from '@fluentui/react-components';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
-export const Default = (props: CompoundButtonProps) => {
- return (
- <CompoundButton icon={<CalendarMonth />} secondaryContent="Secondary content" {...props}>
- Example
- </CompoundButton>
- );
-};
+export const Default = (props: CompoundButtonProps) => (
+ <CompoundButton icon={<CalendarMonth />} secondaryContent="Secondary content" {...props}>
+ Example
+ </CompoundButton>
+);
diff --git a/...act-components/react-button/src/stories/CompoundButton/CompoundButtonDisabled.stories.tsx b/...act-components/react-button/src/stories/CompoundButton/CompoundButtonDisabled.stories.tsx
@@ -1,12 +1,24 @@
 import * as React from 'react';
-import { CompoundButton } from '@fluentui/react-components';
+import { makeStyles, CompoundButton } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+ innerWrapper: {
+ columnGap: '15px',
+ display: 'flex',
+ },
+ outerWrapper: {
+ display: 'flex',
+ flexDirection: 'column',
+ rowGap: '15px',
+ },
+});
 
 export const Disabled = () => {
- const groupStyles: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: '0.5em' };
+ const styles = useStyles();
 
  return (
- <>
- <div style={groupStyles}>
+ <div className={styles.outerWrapper}>
+ <div className={styles.innerWrapper}>
  <CompoundButton secondaryContent="Secondary content">Enabled state</CompoundButton>
  <CompoundButton disabled secondaryContent="Secondary content">
  Disabled state
@@ -15,7 +27,7 @@ export const Disabled = () => {
  Disabled focusable state
  </CompoundButton>
  </div>
- <div style={groupStyles}>
+ <div className={styles.innerWrapper}>
  <CompoundButton appearance="primary" secondaryContent="Secondary content">
  Enabled state
  </CompoundButton>
@@ -26,7 +38,7 @@ export const Disabled = () => {
  Disabled focusable state
  </CompoundButton>
  </div>
- </>
+ </div>
  );
 };