diff --git a/__tests__/components/Button/IconTextButton.test.tsx b/__tests__/components/Button/IconTextButton.test.tsx index 8ecfeff1..e7ffc64f 100644 --- a/__tests__/components/Button/IconTextButton.test.tsx +++ b/__tests__/components/Button/IconTextButton.test.tsx @@ -6,7 +6,7 @@ import { AsTypeA } from '__mocks__/AsType.mock'; describe('', () => { it('should render a basic icon tet button', () => { - const { container, getByText } = render(); + const { container, getByText } = render(Click me!); expect(container.firstChild?.nodeName).toBe('BUTTON'); expect(container.querySelector('svg')).toBeTruthy(); expect(getByText('Click me!')).toBeTruthy(); @@ -14,7 +14,9 @@ describe('', () => { it('should render an icon button as an anchor', () => { const { container, getByText } = render( - as="a" href="#iconbutton" icon={TimesIcon} text="Click me!" />, + as="a" href="#iconbutton" icon={TimesIcon}> + Click me! + , ); expect(container.firstChild?.nodeName).toBe('A'); expect(container.firstChild).toHaveAttribute('href', '#iconbutton'); @@ -24,7 +26,9 @@ describe('', () => { it('should render an icon text button using a functional component', () => { const { container, getByText } = render( - as={AsTypeA} href="#iconbutton" icon={TimesIcon} text="Click me!" />, + as={AsTypeA} href="#iconbutton" icon={TimesIcon}> + Click me! + , ); expect(container.firstChild?.nodeName).toBe('A'); expect(container.firstChild).toHaveAttribute('href', '#iconbutton'); diff --git a/src/components/Badge/docs/badge.mdx b/src/components/Badge/docs/badge.mdx index 5c9839ee..2e5bb6a6 100644 --- a/src/components/Badge/docs/badge.mdx +++ b/src/components/Badge/docs/badge.mdx @@ -15,7 +15,7 @@ import { Badge, ColoredBadge, StyledBadge } from '../index'; -## Marker badges +## Point badges @@ -29,32 +29,32 @@ import { Badge, ColoredBadge, StyledBadge } from '../index'; margin: '20px', }} > - - - - + + + + - - - - - + + + + + - - - - - + + + + + -## Point badges +## Marker badges @@ -68,25 +68,25 @@ import { Badge, ColoredBadge, StyledBadge } from '../index'; margin: '20px', }} > - - - - + + + + - - - - - + + + + + - - - - - + + + + + @@ -336,7 +336,7 @@ import { Badge, ColoredBadge, StyledBadge } from '../index'; position: 'relative', width: '60px', height: '40px', - backgroundColor: themes.light['contrast-palette-quietest-color'], + backgroundColor: themes.light['color-BG50-O40'], margin: '20px', marginRight: 40, flex: 'none', diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index d5c6f122..032808f8 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,16 +1,9 @@ import { cx } from '@emotion/css'; import React from 'react'; -import { SemanticColor, ThemeProps, MergeElementProps, AsReactType } from '../../types'; +import { ThemeProps, MergeElementProps, AsReactType } from '../../types'; import { useThemeId } from '../../hooks/useThemeId'; import styles from './styles/Button.module.css'; - -export type ButtonAlignment = 'left' | 'right' | 'center'; -export type ButtonWeight = 'solid' | 'shaded' | 'outlined' | 'ghost' | 'inline'; -export type ButtonShape = 'pill' | 'brick'; -export type ButtonSize = 'small' | 'medium' | 'large' | 'relative'; -export type ButtonColor = SemanticColor | 'neutralAndPrimary' | 'black' | 'white'; - -export type ButtonElementType = Extract; +import { ButtonAlignment, ButtonWeight, ButtonShape, ButtonSize, ButtonColor, ButtonElementType } from './types'; export interface LocalButtonProps extends ThemeProps { /** Manually apply the active styles; this does not actually make it active */ diff --git a/src/components/Button/ButtonGroup.tsx b/src/components/Button/ButtonGroup.tsx index 6c1f7764..d358b524 100644 --- a/src/components/Button/ButtonGroup.tsx +++ b/src/components/Button/ButtonGroup.tsx @@ -3,8 +3,9 @@ import React, { useCallback } from 'react'; import { MergeElementProps, Orientation, ThemeProps } from '../../types'; import { useThemeId } from '../../hooks/useThemeId'; import { renderFromProp } from '../../utils'; -import { Button, ButtonColor, ButtonProps, ButtonSize, ButtonWeight } from './Button'; +import { Button, ButtonProps } from './Button'; import styles from './styles/ButtonGroup.module.css'; +import { ButtonColor, ButtonSize, ButtonWeight } from './types'; export type ButtonGroupSpacing = 'divided' | 'joined' | 'cozy' | 'comfy'; diff --git a/src/components/Button/ColoredButton.tsx b/src/components/Button/ColoredButton.tsx index c7d4870c..70b510c3 100644 --- a/src/components/Button/ColoredButton.tsx +++ b/src/components/Button/ColoredButton.tsx @@ -3,7 +3,8 @@ import React from 'react'; import { MergeProps, Theme } from '../../types'; import { themes, ThemeColors, ThemeColorIds } from '../../config'; import { withTheme } from '../../context/Theme'; -import { Button, ButtonElementType, ButtonProps } from './Button'; +import { Button, ButtonProps } from './Button'; +import { ButtonElementType } from './types'; export type ColoredButtonProps = MergeProps< Omit, 'width'>, diff --git a/src/components/Button/IconButton.tsx b/src/components/Button/IconButton.tsx index 19688aa9..0ba9441a 100644 --- a/src/components/Button/IconButton.tsx +++ b/src/components/Button/IconButton.tsx @@ -2,8 +2,9 @@ import { cx } from '@emotion/css'; import React from 'react'; import { AsReactType, MergeElementProps } from '../../types'; import { renderFromPropWithFallback, RenderFromPropElement } from '../../utils/renderFromProp'; -import { Button, ButtonElementType, ButtonProps, LocalButtonProps } from './Button'; +import { Button, ButtonProps, LocalButtonProps } from './Button'; import styles from './styles/Button.module.css'; +import { ButtonElementType } from './types'; export type IconButtonShape = 'round' | 'square'; export type IconButtonElementType = ButtonElementType; diff --git a/src/components/Button/IconTextButton.tsx b/src/components/Button/IconTextButton.tsx index c60d11f6..9f423063 100644 --- a/src/components/Button/IconTextButton.tsx +++ b/src/components/Button/IconTextButton.tsx @@ -2,14 +2,15 @@ import { cx } from '@emotion/css'; import React from 'react'; import { AsReactType, MergeElementProps } from '../../types'; import { renderFromProp, renderFromPropWithFallback, RenderFromPropElement } from '../../utils/renderFromProp'; -import { Button, ButtonElementType, LocalButtonProps, ButtonProps } from './Button'; +import { Button, LocalButtonProps, ButtonProps } from './Button'; import styles from './styles/Button.module.css'; +import { ButtonElementType } from './types'; export type IconTextButtonElementType = ButtonElementType; export interface LocalIconTextButtonProps extends Omit { icon: RenderFromPropElement<{}>; - text: RenderFromPropElement<{}> | string; + children: RenderFromPropElement<{}> | string; reverse?: boolean; } @@ -17,7 +18,7 @@ export type IconTextButtonProps = AsReac MergeElementProps; export function IconTextButtonBase( - { as, className, icon, reverse, text, ...props }: IconTextButtonProps, + { as, children, className, icon, reverse, ...props }: IconTextButtonProps, forwardedRef: React.ForwardedRef, ): React.ReactElement { const classes = cx(reverse ? styles['button--iconTextReverse'] : styles['button--iconText'], className); @@ -25,7 +26,7 @@ export function IconTextButtonBase = MergeProps< Omit, 'width'>, diff --git a/src/components/Button/StyledIconButton.ts b/src/components/Button/StyledIconButton.ts new file mode 100644 index 00000000..f7df799a --- /dev/null +++ b/src/components/Button/StyledIconButton.ts @@ -0,0 +1,28 @@ +import styled from '@emotion/styled'; +import { MergeProps } from '../../types'; +import { IconButton, IconButtonElementType, IconButtonProps } from './IconButton'; + +export type StyledIconButtonProps = MergeProps< + Omit, 'width'>, + { + primaryColor?: string; + inverseColor?: string; + hoveredPrimaryColor?: string; + activePrimaryColor?: string; + width: number | string; + } +>; + +// @ts-ignore [TODO:ts] WTF +export const StyledIconButton = styled(IconButton, { + shouldForwardProp: (prop: string) => + !['primaryColor', 'inverseColor', 'hoveredPrimaryColor', 'activePrimaryColor', 'width'].includes(prop), +})` + ${({ primaryColor }) => primaryColor && `--button-primary-color: ${primaryColor};`} + ${({ inverseColor }) => inverseColor && `--button-inverse-color: ${inverseColor};`} + ${({ hoveredPrimaryColor }) => hoveredPrimaryColor && `--button-hovered-primary-color: ${hoveredPrimaryColor};`} + ${({ activePrimaryColor }) => activePrimaryColor && `--button-active-primary-color: ${activePrimaryColor};`} + ${({ width }) => width !== undefined && `width: ${Number.isNaN(width) ? width : `${width}px`};`} +`; + +StyledIconButton.displayName = 'StyledIconButton'; diff --git a/src/components/Button/StyledIconTextButton.ts b/src/components/Button/StyledIconTextButton.ts new file mode 100644 index 00000000..7f7e93e3 --- /dev/null +++ b/src/components/Button/StyledIconTextButton.ts @@ -0,0 +1,28 @@ +import styled from '@emotion/styled'; +import { MergeProps } from '../../types'; +import { IconTextButton, IconTextButtonElementType, IconTextButtonProps } from './IconTextButton'; + +export type StyledIconTextButtonProps = MergeProps< + Omit, 'width'>, + { + primaryColor?: string; + inverseColor?: string; + hoveredPrimaryColor?: string; + activePrimaryColor?: string; + width: number | string; + } +>; + +// @ts-ignore [TODO:ts] WTF +export const StyledIconTextButton = styled(IconTextButton, { + shouldForwardProp: (prop: string) => + !['primaryColor', 'inverseColor', 'hoveredPrimaryColor', 'activePrimaryColor', 'width'].includes(prop), +})` + ${({ primaryColor }) => primaryColor && `--button-primary-color: ${primaryColor};`} + ${({ inverseColor }) => inverseColor && `--button-inverse-color: ${inverseColor};`} + ${({ hoveredPrimaryColor }) => hoveredPrimaryColor && `--button-hovered-primary-color: ${hoveredPrimaryColor};`} + ${({ activePrimaryColor }) => activePrimaryColor && `--button-active-primary-color: ${activePrimaryColor};`} + ${({ width }) => width !== undefined && `width: ${Number.isNaN(width) ? width : `${width}px`};`} +`; + +StyledIconTextButton.displayName = 'StyledIconTextButton'; diff --git a/src/components/Button/docs/button.mdx b/src/components/Button/docs/button.mdx index 42672216..43566bf4 100644 --- a/src/components/Button/docs/button.mdx +++ b/src/components/Button/docs/button.mdx @@ -10,14 +10,13 @@ import { SpinnerIcon } from 'icons/SpinnerIcon'; import { TimesIcon } from 'icons/TimesIcon'; import { BlobbrIcon } from 'icons/internal/BlobbrIcon'; import { Flex } from 'components/Flex'; -import { Hoverable } from 'components/Hoverable'; import { Rhythm } from 'components/Rhythm'; import { ColorLooper } from 'docs/helpers/ColorLooper'; import { Looper } from 'docs/helpers/Looper'; import { PageTitle } from 'docs/helpers/PageTitle'; import { StateWrapper } from 'docs/helpers/StateWrapper'; import { ThemeWrapper } from 'docs/helpers/ThemeWrapper'; -import { Button, ColoredButton, ColoredIconTextButton, StyledButton, IconTextButton } from '../index'; +import { Button, ColoredButton, StyledButton } from '../index'; @@ -28,134 +27,38 @@ import { Button, ColoredButton, ColoredIconTextButton, StyledButton, IconTextBut ( - + ( - - ( - - - - - -
- - )} - /> - - )} - /> - - )} - /> - - - -
- - - - ( - - ( - + list={['pill', 'brick']} + render={shape => ( + ( - - } - loader={} - loading={loading} - onClick={() => console.log('click')} - shape={shape} - size={size} - text={`${ucfirst(size)} ${shape} solid`} - weight="solid" + list={[false, true]} + render={loading => ( + + ( + + + + )} /> - } - loader={} - loading={loading} - onClick={() => console.log('click')} - shape={shape} - size={size} - text={`${ucfirst(size)} ${shape} shaded`} - weight="shaded" - /> - } - loader={} - loading={loading} - onClick={() => console.log('click')} - shape={shape} - size={size} - text={`${ucfirst(size)} ${shape} outlined`} - weight="outlined" - /> - } - loader={} - loading={loading} - shape={shape} - text={`${ucfirst(size)} ${shape} ghost`} - weight="ghost" - onClick={() => console.log('click')} - size={size} - /> -
- + )} /> @@ -167,10 +70,10 @@ import { Button, ColoredButton, ColoredIconTextButton, StyledButton, IconTextBut -
+### Inline buttons - + ( @@ -182,7 +85,7 @@ import { Button, ColoredButton, ColoredIconTextButton, StyledButton, IconTextBut weight="inline" loader={} loading={loading} - onClick={() => console.log('primary')} + onClick={() => console.log('small')} > Small inline @@ -192,7 +95,7 @@ import { Button, ColoredButton, ColoredIconTextButton, StyledButton, IconTextBut weight="inline" loader={} loading={loading} - onClick={() => console.log('primary')} + onClick={() => console.log('medium')} > Medium inline @@ -202,239 +105,64 @@ import { Button, ColoredButton, ColoredIconTextButton, StyledButton, IconTextBut weight="inline" loader={} loading={loading} - onClick={() => console.log('primary')} + onClick={() => console.log('large')} > Large inline - - - )} - /> - - - -## Button colors - - - - ( -
- - - - - - - - - -
- - - - - - - -
+ )} /> -
+## Button colors ( -
- - - - - - - - - + + ( + + + + )} + />
- - - - - - - - - -
+ ( + + + + )} + /> + )} /> @@ -442,225 +170,85 @@ import { Button, ColoredButton, ColoredIconTextButton, StyledButton, IconTextBut
- - - - - - - - - - - -
- - - - - - - - - - - - -## IconText buttons - ( - + ( -
- ( - - } - shape={shape} - text={ucfirst(color)} - weight={weight} - /> - - )} - /> -
-
+ list={['primary', 'success', 'warning', 'danger', 'neutral', 'black', 'white']} + render={color => ( + + + + )} + /> +
+ ( + + + )} /> )} /> - - ( - - } text={ucfirst(color)} weight="inline" /> - - )} - /> - -
+
( - - ( -
- ( - - } - reverse - shape={shape} - text={ucfirst(color)} - weight={weight} - /> - - )} - /> -
-
- )} - /> + list={['primary', 'success', 'warning', 'danger', 'neutral', 'black', 'white']} + render={color => ( + + + + )} + /> +
+ ( + + )} /> - - ( - - } - reverse - text={ucfirst(color)} - weight="inline" - /> - - )} - /> - ## Variations -### Neutral and primary buttons - - - - - - - - - - - - - ### Contrast buttons @@ -679,7 +267,7 @@ import { Button, ColoredButton, ColoredIconTextButton, StyledButton, IconTextBut Pill ghost
@@ -697,13 +285,13 @@ import { Button, ColoredButton, ColoredIconTextButton, StyledButton, IconTextBut Pill ghost -## Colored buttons +### Colored buttons @@ -713,60 +301,48 @@ import { Button, ColoredButton, ColoredIconTextButton, StyledButton, IconTextBut themeId={themeId} group="primary" render={({ id }) => ( - - - } - shape="pill" - text={`Color ${id}`} - weight="solid" - /> - - {`Color ${id}`} - - - - } - shape="pill" - text={`Color ${id}`} - weight="shaded" - /> - - {`Color ${id}`} - - - - } - shape="pill" - text={`Color ${id}`} - weight="outlined" - /> - - {`Color ${id}`} - - - - } - shape="pill" - text={`Color ${id}`} - weight="ghost" - /> - - {`Color ${id}`} - - - {`Color ${id}`} - - -
- + + + + + + {`Color ${id}`} + + + {`Color ${id}`} + + + {`Color ${id}`} + + + {`Color ${id}`} + + + {`Color ${id}`} + + + + + + }> + {`Color ${id}`} + + }> + {`Color ${id}`} + + }> + {`Color ${id}`} + + }> + {`Color ${id}`} + + }> + {`Color ${id}`} + + + + + )} /> @@ -787,36 +363,36 @@ import { Button, ColoredButton, ColoredIconTextButton, StyledButton, IconTextBut return ( - Styled - - Styled - + Styled solid - Styled + Styled shaded + + + Styled outlined - Styled + Styled ghost - Styled + Styled inline
} {...styles}> - Styled - - } {...styles}> - Styled + Styled solid } {...styles}> - Styled + Styled shaded + + } {...styles}> + Styled outlined } {...styles}> - Styled + Styled ghost } {...styles}> - Styled + Styled inline @@ -832,19 +408,19 @@ _Note that the links will cause the page to reload so the state will appear unch
@@ -856,7 +432,7 @@ _Note that the links will cause the page to reload so the state will appear unch loading onClick={() => console.log('linked clicked')} > - Linked + Linked solid @@ -1045,11 +621,3 @@ _Note that the links will cause the page to reload so the state will appear unch ### StyledButton - -### IconTextButton - - - -### ColoredIconTextButton - - diff --git a/src/components/Button/docs/iconButton.mdx b/src/components/Button/docs/iconButton.mdx index be3a3c3b..0186f122 100644 --- a/src/components/Button/docs/iconButton.mdx +++ b/src/components/Button/docs/iconButton.mdx @@ -13,7 +13,7 @@ import { ColorLooper } from 'docs/helpers/ColorLooper'; import { Looper } from 'docs/helpers/Looper'; import { PageTitle } from 'docs/helpers/PageTitle'; import { ThemeWrapper } from 'docs/helpers/ThemeWrapper'; -import { ColoredIconButton, IconButton } from '../index'; +import { ColoredIconButton, IconButton, StyledIconButton } from '../index'; @@ -319,6 +319,109 @@ import { ColoredIconButton, IconButton } from '../index'; +### Styled icon buttons + + + {() => { + const styles = { + primaryColor: '#556270', + inverseColor: '#fff', + hoveredPrimaryColor: '#454f58', + activePrimaryColor: '#798796', + }; + return ( + + ( + + + } + loading={loading} + onClick={() => console.log('round')} + shape="round" + weight="ghost" + {...styles} + > + + + } + loading={loading} + onClick={() => console.log('round')} + shape="round" + {...styles} + > + + + } + loading={loading} + onClick={() => console.log('square')} + shape="square" + {...styles} + > + + + } + loading={loading} + onClick={() => console.log('round shaded')} + shape="round" + weight="shaded" + {...styles} + > + + + } + loading={loading} + onClick={() => console.log('square shaded')} + shape="square" + weight="shaded" + {...styles} + > + + + } + loading={loading} + onClick={() => console.log('round outline')} + shape="round" + weight="outlined" + {...styles} + > + + + } + loading={loading} + onClick={() => console.log('square outline')} + shape="square" + weight="outlined" + {...styles} + > + + + } + loading={loading} + onClick={() => console.log('xlarge')} + weight="inline" + {...styles} + > + + + + + )} + /> + + ); + }} + + ### Link icon buttons _Note that the links will cause the page to reload so the state will appear unchanged._ @@ -376,3 +479,7 @@ _Note that the links will cause the page to reload so the state will appear unch ### ColoredIconButton + +### StyledIconButton + + diff --git a/src/components/Button/docs/iconTextButton.mdx b/src/components/Button/docs/iconTextButton.mdx new file mode 100644 index 00000000..ecdfe7b2 --- /dev/null +++ b/src/components/Button/docs/iconTextButton.mdx @@ -0,0 +1,930 @@ +--- +name: IconTextButton +menu: Input +route: /components/IconTextButton +--- + +import { Playground, Props } from 'docz'; +import { ucfirst } from 'utils'; +import { SpinnerIcon } from 'icons/SpinnerIcon'; +import { TimesIcon } from 'icons/TimesIcon'; +import { BlobbrIcon } from 'icons/internal/BlobbrIcon'; +import { Flex } from 'components/Flex'; +import { Rhythm } from 'components/Rhythm'; +import { ColorLooper } from 'docs/helpers/ColorLooper'; +import { Looper } from 'docs/helpers/Looper'; +import { PageTitle } from 'docs/helpers/PageTitle'; +import { StateWrapper } from 'docs/helpers/StateWrapper'; +import { ThemeWrapper } from 'docs/helpers/ThemeWrapper'; +import { IconTextButton, ColoredIconTextButton, StyledIconTextButton } from '../index'; + + + +## Size, shape and weight + + + + ( + + ( + + ( + + ( + + } + loader={} + loading={loading} + onClick={() => console.log('click')} + shape={shape} + size={size} + weight={weight} + > + {ucfirst(size)} {shape} {weight} + + + )} + /> + + )} + /> + + )} + /> + + )} + /> + + + +### Inline buttons + + + + ( + + + } + color="primary" + size="small" + weight="inline" + loader={} + loading={loading} + onClick={() => console.log('small')} + > + Small inline + + } + color="primary" + size="medium" + weight="inline" + loader={} + loading={loading} + onClick={() => console.log('medium')} + > + Medium inline + + } + color="primary" + size="large" + weight="inline" + loader={} + loading={loading} + onClick={() => console.log('large')} + > + Large inline + + } + color="primary" + size="relative" + weight="inline" + loader={} + loading={loading} + onClick={() => console.log('relative')} + > + Relative inline + + + + )} + /> + + + +## Reversed + + + + ( + + ( + + ( + + } + loader={} + loading={loading} + onClick={() => console.log('click')} + reverse + shape={shape} + size="medium" + weight={weight} + > + Reversed {shape} {weight} + + + )} + /> + + )} + /> + + )} + /> + + + +### Inline buttons + + + + ( + + + } + loader={} + loading={loading} + onClick={() => console.log('small')} + reverse + size="small" + weight="inline" + > + Small inline + + } + loader={} + loading={loading} + onClick={() => console.log('medium')} + reverse + size="medium" + weight="inline" + > + Medium inline + + } + color="primary" + loader={} + loading={loading} + onClick={() => console.log('large')} + reverse + size="large" + weight="inline" + > + Large inline + + } + loader={} + loading={loading} + onClick={() => console.log('relative')} + reverse + size="relative" + weight="inline" + > + Relative inline + + + + )} + /> + + + +## Button colors + + + + ( + + ( + + } + color={color} + weight={weight} + onClick={() => console.log(color)} + > + {ucfirst(color)} + + + )} + /> +
+ ( + + } + color={color} + disabled + loader={} + loading + onClick={() => console.log(color)} + weight={weight} + > + {ucfirst(color)} + + + )} + /> + + )} + /> + + + +
+ + + + ( + + ( + + } + color={color} + weight={weight} + onClick={() => console.log(color)} + shape="brick" + > + {ucfirst(color)} + + + )} + /> +
+ ( + + } + color={color} + disabled + loader={} + loading + onClick={() => console.log(color)} + shape="brick" + weight={weight} + > + {ucfirst(color)} + + + )} + /> + + )} + /> + + + +
+ + + + ( + + } + color={color} + weight="inline" + onClick={() => console.log(color)} + shape="brick" + > + {ucfirst(color)} + + + )} + /> +
+ ( + + } + color={color} + disabled + loader={} + loading + onClick={() => console.log(color)} + shape="brick" + weight="inline" + > + {ucfirst(color)} + + + )} + /> + + + +## Variations + +### Contrast buttons + + + + + } contrast weight="solid"> + Pill solid + + } contrast weight="shaded"> + Pill shaded + + } contrast weight="outlined"> + Pill outlined + + } contrast weight="ghost"> + Pill ghost + + } contrast weight="inline"> + Pill inline + + +
+ + } contrast loading loader={}> + Pill solid + + } + contrast + weight="shaded" + loading + loader={} + > + Pill shaded + + } + contrast + weight="outlined" + loading + loader={} + > + Pill outlined + + } + contrast + weight="ghost" + loading + loader={} + > + Pill ghost + + } + contrast + weight="inline" + loading + loader={} + > + Pill inline + + + + + +### Colored buttons + + + + {({ themeId }) => ( + + ( + + + + + } colorId={id} weight="solid"> + {`Color ${id}`} + + } colorId={id} weight="shaded"> + {`Color ${id}`} + + } colorId={id} weight="outlined"> + {`Color ${id}`} + + } colorId={id} weight="ghost"> + {`Color ${id}`} + + } colorId={id} weight="inline"> + {`Color ${id}`} + + + + + + } + colorId={id} + weight="solid" + loading + loader={} + > + {`Color ${id}`} + + } + colorId={id} + weight="shaded" + loading + loader={} + > + {`Color ${id}`} + + } + colorId={id} + weight="outlined" + loading + loader={} + > + {`Color ${id}`} + + } + colorId={id} + weight="ghost" + loading + loader={} + > + {`Color ${id}`} + + } + colorId={id} + weight="inline" + loading + loader={} + > + {`Color ${id}`} + + + + + + )} + /> + + )} + + + +### Styled buttons + + + {() => { + const styles = { + primaryColor: '#556270', + inverseColor: '#fff', + hoveredPrimaryColor: '#454f58', + activePrimaryColor: '#798796', + }; + return ( + + + } {...styles}> + Styled solid + + } weight="shaded" {...styles}> + Styled shaded + + } weight="outlined" {...styles}> + Styled outlined + + } weight="ghost" {...styles}> + Styled ghost + + } weight="inline" {...styles}> + Styled inline + + +
+ + } + loading + loader={} + {...styles} + > + Styled solid + + } + weight="shaded" + loading + loader={} + {...styles} + > + Styled shaded + + } + weight="outlined" + loading + loader={} + {...styles} + > + Styled outlined + + } + weight="ghost" + loading + loader={} + {...styles} + > + Styled ghost + + } + weight="inline" + loading + loader={} + {...styles} + > + Styled inline + + + + ); + }} + + +### Linked buttons + +_Note that the links will cause the page to reload so the state will appear unchanged._ + + + + + } + href="#linked" + onClick={() => console.log('linked clicked')} + color="primary" + > + Linked solid + + } + href="#linked" + onClick={() => console.log('linked clicked')} + weight="shaded" + color="primary" + > + Linked shaded + + } + href="#linked" + onClick={() => console.log('linked clicked')} + weight="outlined" + color="primary" + > + Linked outlined + + } + href="#linked" + onClick={() => console.log('linked clicked')} + weight="ghost" + color="primary" + > + Linked ghost + + } + href="#linked" + onClick={() => console.log('linked clicked')} + weight="inline" + color="primary" + > + Linked inline + + +
+ + } + color="primary" + href="#linked" + loader={} + loading + onClick={() => console.log('linked clicked')} + > + Linked solid + + } + color="primary" + href="#linked" + loader={} + loading + onClick={() => console.log('linked clicked')} + weight="shaded" + > + Linked shaded + + } + color="primary" + href="#linked" + loader={} + loading + onClick={() => console.log('linked clicked')} + weight="outlined" + > + Linked outlined + + } + color="primary" + href="#linked" + loader={} + loading + onClick={() => console.log('linked clicked')} + weight="ghost" + > + Linked ghost + + } + color="primary" + href="#linked" + loader={} + loading + onClick={() => console.log('linked clicked')} + weight="inline" + > + Linked inline + + + + + +### Non-button buttons + + + + + } + as="div" + onClick={() => console.log('div clicked')} + color="primary" + > + Acts like a button + + } + as="div" + onClick={() => console.log('div clicked')} + weight="shaded" + color="primary" + > + Acts like a button + + } + as="div" + onClick={() => console.log('div clicked')} + weight="outlined" + color="primary" + > + Acts like a button + + } + as="div" + onClick={() => console.log('div clicked')} + weight="ghost" + color="primary" + > + Acts like a button + + } + as="div" + onClick={() => console.log('div clicked')} + weight="inline" + color="primary" + > + Acts like a button + + +
+ + } + as="div" + color="primary" + loader={} + loading + onClick={() => console.log('div clicked')} + > + Acts like a button + + } + as="div" + color="primary" + loader={} + loading + onClick={() => console.log('div clicked')} + weight="shaded" + > + Acts like a button + + } + as="div" + color="primary" + loader={} + loading + onClick={() => console.log('div clicked')} + weight="outlined" + > + Acts like a button + + } + as="div" + color="primary" + loader={} + loading + onClick={() => console.log('div clicked')} + weight="ghost" + > + Acts like a button + + } + as="div" + color="primary" + loader={} + loading + onClick={() => console.log('div clicked')} + weight="inline" + > + Acts like a button + + + + + +### Sized buttons + + + + {({ themeId }) => ( + ( +
+ + } + shape={shape} + themeId={themeId} + color="primary" + fullWidth + > + Full width + + } + shape={shape} + themeId={themeId} + color="primary" + width={200} + > + Fixed width + + +
+ )} + /> + )} + + + +### Aligned buttons + + + + {({ themeId }) => ( + + } + themeId={themeId} + color="primary" + width={200} + align="left" + > + Align left + + } themeId={themeId} color="primary" width={200}> + Align center + + } + themeId={themeId} + color="primary" + width={200} + align="right" + > + Align right + + + )} + + + +### Unstyled button + + + + } unstyled onClick={() => console.log('unstyled')}> + Unstyled + + + + +## \[props\] + +### IconTextButton + + + +### ColoredIconTextButton + + + +### StyledIconTextButton + + diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts index f03f28de..a8c8d079 100644 --- a/src/components/Button/index.ts +++ b/src/components/Button/index.ts @@ -6,3 +6,6 @@ export * from './ColoredIconTextButton'; export * from './IconButton'; export * from './IconTextButton'; export * from './StyledButton'; +export * from './StyledIconButton'; +export * from './StyledIconTextButton'; +export * from './types'; diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts new file mode 100644 index 00000000..d1f1b7f2 --- /dev/null +++ b/src/components/Button/types.ts @@ -0,0 +1,8 @@ +import { SemanticColor } from '../../types'; + +export type ButtonAlignment = 'left' | 'right' | 'center'; +export type ButtonWeight = 'solid' | 'shaded' | 'outlined' | 'ghost' | 'inline'; +export type ButtonShape = 'pill' | 'brick'; +export type ButtonSize = 'small' | 'medium' | 'large' | 'relative'; +export type ButtonColor = SemanticColor | 'neutralAndPrimary' | 'black' | 'white'; +export type ButtonElementType = Extract; diff --git a/src/compositions/Pagination/PaginationEllipsis.tsx b/src/compositions/Pagination/PaginationEllipsis.tsx index 74f5a86f..e7e2c85e 100644 --- a/src/compositions/Pagination/PaginationEllipsis.tsx +++ b/src/compositions/Pagination/PaginationEllipsis.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { EllipsisIcon } from '../../icons'; -import { Button, ButtonProps } from '../../components/Button/Button'; +import { Button, ButtonProps } from '../../components/Button'; import { Rhythm } from '../../components/Rhythm/Rhythm'; export type PaginationEllipsisProps = Omit, 'as' | 'children'>; diff --git a/src/compositions/Pagination/PaginationJump.tsx b/src/compositions/Pagination/PaginationJump.tsx index d2d75ec6..dc45af21 100644 --- a/src/compositions/Pagination/PaginationJump.tsx +++ b/src/compositions/Pagination/PaginationJump.tsx @@ -1,6 +1,6 @@ import React, { useCallback } from 'react'; import { AsReactType, MergeProps } from '../../types'; -import { Button, ButtonElementType, ButtonProps } from '../../components/Button/Button'; +import { Button, ButtonElementType, ButtonProps } from '../../components/Button'; export interface LocalPaginationJumpProps { href?: string; diff --git a/src/compositions/Pagination/PaginationJumpIcon.tsx b/src/compositions/Pagination/PaginationJumpIcon.tsx index 767b1547..1fdd5943 100644 --- a/src/compositions/Pagination/PaginationJumpIcon.tsx +++ b/src/compositions/Pagination/PaginationJumpIcon.tsx @@ -5,7 +5,7 @@ import { ArrowDoubleLeftIcon } from '../../icons/ArrowDoubleLeftIcon'; import { ArrowDoubleRightIcon } from '../../icons/ArrowDoubleRightIcon'; import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon'; import { ArrowRightIcon } from '../../icons/ArrowRightIcon'; -import { Button, ButtonElementType, ButtonProps } from '../../components/Button/Button'; +import { Button, ButtonElementType, ButtonProps } from '../../components/Button'; import { Rhythm } from '../../components/Rhythm/Rhythm'; const icons: Record> = { diff --git a/src/compositions/Pagination/PaginationPage.tsx b/src/compositions/Pagination/PaginationPage.tsx index 8a68b471..6351cc0c 100644 --- a/src/compositions/Pagination/PaginationPage.tsx +++ b/src/compositions/Pagination/PaginationPage.tsx @@ -1,7 +1,7 @@ import React, { useCallback } from 'react'; import { AsReactType, MergeProps } from '../../types'; import { useThemeId } from '../../hooks/useThemeId'; -import { Button, ButtonElementType, ButtonProps } from '../../components/Button/Button'; +import { Button, ButtonElementType, ButtonProps } from '../../components/Button'; export interface LocalPaginationPageProps { active?: boolean; diff --git a/src/docs/helpers/PageTitle.tsx b/src/docs/helpers/PageTitle.tsx index fbbe98c4..fe6795e5 100644 --- a/src/docs/helpers/PageTitle.tsx +++ b/src/docs/helpers/PageTitle.tsx @@ -3,21 +3,21 @@ import * as React from 'react'; import { GithubIcon } from 'icons/internal/GithubIcon'; import { IconButton } from 'components/Button/IconButton'; import { Flex } from 'components/Flex'; -import { Rhythm } from 'components/Rhythm'; +import { Rhythm, RhythmProps } from 'components/Rhythm'; import { Typography } from 'components/Typography'; -export interface PageTitleProps { +export interface PageTitleProps extends RhythmProps { src?: string; title: string; url?: string; } -export function PageTitle({ title, src, url: initUrl }: PageTitleProps): React.ReactElement { +export function PageTitle({ title, src, url: initUrl, ...props }: PageTitleProps): React.ReactElement { const { repository } = useConfig(); const url = initUrl || (repository && src && `${repository}/tree/develop/src/${src}`) || undefined; return ( - + {title}