From 00ee3ffba760af3e9721e479a0f263d9a2f2c2e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Tue, 3 Aug 2021 17:47:53 +0200 Subject: [PATCH] Update Hamburger design (#1082) --- .changeset/fluffy-ravens-know.md | 5 + .changeset/silly-laws-tap.md | 5 + .../circuit-ui/components/Button/Button.tsx | 2 +- .../Button/__snapshots__/Button.spec.tsx.snap | 2 +- .../components/Hamburger/Hamburger.spec.tsx | 7 + .../Hamburger/Hamburger.stories.tsx | 4 +- .../components/Hamburger/Hamburger.tsx | 131 ++++--- .../__snapshots__/Hamburger.spec.tsx.snap | 368 ++++++++++++++++-- .../__snapshots__/Pagination.spec.tsx.snap | 4 +- .../__snapshots__/PageList.spec.tsx.snap | 4 +- 10 files changed, 451 insertions(+), 81 deletions(-) create mode 100644 .changeset/fluffy-ravens-know.md create mode 100644 .changeset/silly-laws-tap.md diff --git a/.changeset/fluffy-ravens-know.md b/.changeset/fluffy-ravens-know.md new file mode 100644 index 0000000000..fc1d8ceef4 --- /dev/null +++ b/.changeset/fluffy-ravens-know.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': major +--- + +Tweaked the Hamburger design and aligned its height with the Button component. diff --git a/.changeset/silly-laws-tap.md b/.changeset/silly-laws-tap.md new file mode 100644 index 0000000000..ec3c67fb32 --- /dev/null +++ b/.changeset/silly-laws-tap.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': patch +--- + +Reduced the height of the Button's `kilo` size from 34px to 32px to align it with the other components. diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx index b8f27aea49..83ac37f876 100644 --- a/packages/circuit-ui/components/Button/Button.tsx +++ b/packages/circuit-ui/components/Button/Button.tsx @@ -239,7 +239,7 @@ const tertiaryStyles = ({ const sizeStyles = ({ theme, size = 'giga' }: ButtonProps & StyleProps) => { const sizeMap = { kilo: { - padding: `${theme.spacings.bit} calc(${theme.spacings.mega} - ${BORDER_WIDTH})`, + padding: `calc(${theme.spacings.bit} - ${BORDER_WIDTH}) calc(${theme.spacings.mega} - ${BORDER_WIDTH})`, }, giga: { padding: `calc(${theme.spacings.kilo} - ${BORDER_WIDTH}) calc(${theme.spacings.giga} - ${BORDER_WIDTH})`, diff --git a/packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap b/packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap index 1d32be94db..3174816a60 100644 --- a/packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap +++ b/packages/circuit-ui/components/Button/__snapshots__/Button.spec.tsx.snap @@ -280,7 +280,7 @@ exports[`Button styles should render a kilo button 1`] = ` background-color: #FFF; border-color: #999; color: #000; - padding: 4px calc(16px - 1px); + padding: calc(4px - 1px) calc(16px - 1px); } .circuit-0:focus { diff --git a/packages/circuit-ui/components/Hamburger/Hamburger.spec.tsx b/packages/circuit-ui/components/Hamburger/Hamburger.spec.tsx index 0d58358719..ac63348e66 100644 --- a/packages/circuit-ui/components/Hamburger/Hamburger.spec.tsx +++ b/packages/circuit-ui/components/Hamburger/Hamburger.spec.tsx @@ -48,6 +48,13 @@ describe('Hamburger', () => { expect(actual).toMatchSnapshot(); }); + const sizes: HamburgerProps['size'][] = ['kilo', 'giga']; + + it.each(sizes)('should render with %s styles', (size) => { + const actual = renderHamburger(create, { ...baseProps, size }); + expect(actual).toMatchSnapshot(); + }); + /** * Logic tests. */ diff --git a/packages/circuit-ui/components/Hamburger/Hamburger.stories.tsx b/packages/circuit-ui/components/Hamburger/Hamburger.stories.tsx index 0357c46efe..5bd7b900e8 100644 --- a/packages/circuit-ui/components/Hamburger/Hamburger.stories.tsx +++ b/packages/circuit-ui/components/Hamburger/Hamburger.stories.tsx @@ -23,11 +23,11 @@ export default { }; export const Base = (args: HamburgerProps) => { - const [active, setActive] = useState(false); + const [active, setActive] = useState(args.isActive); const handleClick = () => { setActive((prev) => !prev); }; - return ; + return ; }; Base.args = { diff --git a/packages/circuit-ui/components/Hamburger/Hamburger.tsx b/packages/circuit-ui/components/Hamburger/Hamburger.tsx index 8e6f3c82d9..f3a7b6f5b4 100644 --- a/packages/circuit-ui/components/Hamburger/Hamburger.tsx +++ b/packages/circuit-ui/components/Hamburger/Hamburger.tsx @@ -13,7 +13,6 @@ * limitations under the License. */ -import { HTMLProps } from 'react'; import { css } from '@emotion/core'; import { Dispatch as TrackingProps } from '@sumup/collector'; @@ -43,69 +42,103 @@ export interface HamburgerProps } const LAYER_HEIGHT = '2px'; -const HAMBURGER_WIDTH = '14px'; -const buttonStyles = () => css` +const buttonStyles = ({ theme, size }: StyleProps & IconButtonProps) => css` border: 0; + padding: ${size === 'giga' ? theme.spacings.kilo : theme.spacings.byte}; `; const Button = styled(IconButton)(buttonStyles); -const boxStyles = ({ theme }: StyleProps) => css` +type BoxProps = Required>; +const boxStyles = css` position: relative; display: flex; justify-content: center; - width: ${theme.iconSizes.mega}; - height: ${theme.iconSizes.mega}; transform: translateY(-1px); `; -const Box = styled.span>(boxStyles); - -const layersBaseStyles = () => css` - top: 50%; - width: ${HAMBURGER_WIDTH}; - - &, - &::after, - &::before { - background-color: currentColor; - border-radius: 1px; - display: block; - height: ${LAYER_HEIGHT}; - position: absolute; - transition: width 0.2s ease-out 0.15s, opacity 0.1s ease-in, - transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); - } +const boxSizeStyles = ({ theme, size }: StyleProps & BoxProps) => { + const iconSizeMap = { + giga: 'mega', + kilo: 'kilo', + } as const; + const iconSize = iconSizeMap[size]; - &::before, - &::after { - top: 0; - content: ''; - } + return css` + width: ${theme.iconSizes[iconSize]}; + height: ${theme.iconSizes[iconSize]}; + `; +}; - &::before { - transform: translateY(-5px); - width: ${HAMBURGER_WIDTH}; - } +const Box = styled.span(boxStyles, boxSizeStyles); + +type LayerProps = Required>; + +const widthMap = { + kilo: '14px', + giga: '22px', +} as const; + +const offsetMap = { + kilo: '5px', + giga: '7px', +} as const; - &::after { - transform: translateY(5px); - width: ${HAMBURGER_WIDTH}; +const layersBaseStyles = ({ size }: LayerProps) => { + const width = widthMap[size]; + const offset = offsetMap[size]; + + return css` + top: 50%; + width: ${width}; + + &, + &::after, + &::before { + background-color: currentColor; + border-radius: 1px; + display: block; + height: ${LAYER_HEIGHT}; + position: absolute; + transition: width 0.2s ease-out 0.15s, opacity 0.1s ease-in, + transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + + &::before, + &::after { + top: 0; + content: ''; + } + + &::before { + transform: translateY(-${offset}); + width: calc(${width} * 0.64); + } + + &::after { + transform: translateY(${offset}); + width: calc(${width} * 0.82); + } + `; +}; + +const layersActiveStyles = ({ isActive, size }: LayerProps) => { + if (!isActive) { + return null; } -`; -const layersActiveStyles = ({ isActive }: { isActive?: boolean }) => - isActive && - css` + const width = widthMap[size]; + + return css` transform: rotate(225deg); &, &::before, &::after { - transition: width 0.2s ease-out, opacity 0.1s ease-out 0.15s, + transition: width 0.2s ease-out 0.15s, opacity 0.1s ease-out 0.15s, transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s; - width: ${HAMBURGER_WIDTH}; + width: ${width}; } &::before { @@ -117,19 +150,18 @@ const layersActiveStyles = ({ isActive }: { isActive?: boolean }) => transform: translateY(0) rotate(-90deg); } `; +}; -const Layers = styled('span')<{ isActive?: boolean }>( - layersBaseStyles, - layersActiveStyles, -); +const Layers = styled('span')(layersBaseStyles, layersActiveStyles); /** * A hamburger button for menus. Morphs into a close icon when active. */ export const Hamburger = ({ - isActive, + isActive = false, activeLabel, inactiveLabel, + size = 'giga', tracking = {}, ...props }: HamburgerProps): JSX.Element => { @@ -145,13 +177,14 @@ export const Hamburger = ({ return ( ); diff --git a/packages/circuit-ui/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap b/packages/circuit-ui/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap index 817b0e8cd9..4c714ec2fc 100644 --- a/packages/circuit-ui/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap +++ b/packages/circuit-ui/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap @@ -35,6 +35,7 @@ exports[`Hamburger should render with active styles when passed the isActive pro padding: calc(12px - 1px) calc(24px - 1px); padding: calc(16px - 1px); border: 0; + padding: 12px; } .circuit-3:focus { @@ -79,11 +80,11 @@ exports[`Hamburger should render with active styles when passed the isActive pro -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - width: 24px; - height: 24px; -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); + width: 24px; + height: 24px; } .circuit-2 { @@ -101,7 +102,7 @@ exports[`Hamburger should render with active styles when passed the isActive pro .circuit-0 { top: 50%; - width: 14px; + width: 22px; -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); @@ -127,26 +128,26 @@ exports[`Hamburger should render with active styles when passed the isActive pro } .circuit-0::before { - -webkit-transform: translateY(-5px); - -ms-transform: translateY(-5px); - transform: translateY(-5px); - width: 14px; + -webkit-transform: translateY(-7px); + -ms-transform: translateY(-7px); + transform: translateY(-7px); + width: calc(22px * 0.64); } .circuit-0::after { - -webkit-transform: translateY(5px); - -ms-transform: translateY(5px); - transform: translateY(5px); - width: 14px; + -webkit-transform: translateY(7px); + -ms-transform: translateY(7px); + transform: translateY(7px); + width: calc(22px * 0.82); } .circuit-0, .circuit-0::before, .circuit-0::after { - -webkit-transition: width 0.2s ease-out,opacity 0.1s ease-out 0.15s,-webkit-transform 0.3s cubic-bezier(0.215,0.61,0.355,1) 0.15s; - -webkit-transition: width 0.2s ease-out,opacity 0.1s ease-out 0.15s,transform 0.3s cubic-bezier(0.215,0.61,0.355,1) 0.15s; - transition: width 0.2s ease-out,opacity 0.1s ease-out 0.15s,transform 0.3s cubic-bezier(0.215,0.61,0.355,1) 0.15s; - width: 14px; + -webkit-transition: width 0.2s ease-out 0.15s,opacity 0.1s ease-out 0.15s,-webkit-transform 0.3s cubic-bezier(0.215,0.61,0.355,1) 0.15s; + -webkit-transition: width 0.2s ease-out 0.15s,opacity 0.1s ease-out 0.15s,transform 0.3s cubic-bezier(0.215,0.61,0.355,1) 0.15s; + transition: width 0.2s ease-out 0.15s,opacity 0.1s ease-out 0.15s,transform 0.3s cubic-bezier(0.215,0.61,0.355,1) 0.15s; + width: 22px; } .circuit-0::before { @@ -218,6 +219,7 @@ exports[`Hamburger should render with default styles 1`] = ` padding: calc(12px - 1px) calc(24px - 1px); padding: calc(16px - 1px); border: 0; + padding: 12px; } .circuit-3:focus { @@ -262,16 +264,175 @@ exports[`Hamburger should render with default styles 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; + -webkit-transform: translateY(-1px); + -ms-transform: translateY(-1px); + transform: translateY(-1px); width: 24px; height: 24px; +} + +.circuit-0 { + top: 50%; + width: 22px; +} + +.circuit-0, +.circuit-0::after, +.circuit-0::before { + background-color: currentColor; + border-radius: 1px; + display: block; + height: 2px; + position: absolute; + -webkit-transition: width 0.2s ease-out 0.15s,opacity 0.1s ease-in,-webkit-transform 0.3s cubic-bezier(0.55,0.055,0.675,0.19); + -webkit-transition: width 0.2s ease-out 0.15s,opacity 0.1s ease-in,transform 0.3s cubic-bezier(0.55,0.055,0.675,0.19); + transition: width 0.2s ease-out 0.15s,opacity 0.1s ease-in,transform 0.3s cubic-bezier(0.55,0.055,0.675,0.19); +} + +.circuit-0::before, +.circuit-0::after { + top: 0; + content: ''; +} + +.circuit-0::before { + -webkit-transform: translateY(-7px); + -ms-transform: translateY(-7px); + transform: translateY(-7px); + width: calc(22px * 0.64); +} + +.circuit-0::after { + -webkit-transform: translateY(7px); + -ms-transform: translateY(7px); + transform: translateY(7px); + width: calc(22px * 0.82); +} + +.circuit-2 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} + + +`; + +exports[`Hamburger should render with giga styles 1`] = ` +.circuit-3 { + font-size: 16px; + line-height: 24px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: auto; + height: auto; + margin: 0; + cursor: pointer; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + font-weight: 700; + border-width: 1px; + border-style: solid; + border-radius: 999999px; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + background-color: #FFF; + border-color: #999; + color: #000; + padding: calc(12px - 1px) calc(24px - 1px); + padding: calc(16px - 1px); + border: 0; + padding: 12px; +} + +.circuit-3:focus { + outline: 0; + box-shadow: 0 0 0 4px #AFD0FE; +} + +.circuit-3:focus::-moz-focus-inner { + border: 0; +} + +.circuit-3:focus:not(:focus-visible) { + box-shadow: none; +} + +.circuit-3:disabled, +.circuit-3[disabled] { + opacity: 0.5; + pointer-events: none; + box-shadow: none; +} + +.circuit-3:hover { + background-color: #F5F5F5; + border-color: #666; +} + +.circuit-3:active, +.circuit-3[aria-expanded='true'], +.circuit-3[aria-pressed='true'] { + background-color: #E6E6E6; + border-color: #333; +} + +.circuit-1 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); + width: 24px; + height: 24px; } .circuit-0 { top: 50%; - width: 14px; + width: 22px; } .circuit-0, @@ -294,17 +455,17 @@ exports[`Hamburger should render with default styles 1`] = ` } .circuit-0::before { - -webkit-transform: translateY(-5px); - -ms-transform: translateY(-5px); - transform: translateY(-5px); - width: 14px; + -webkit-transform: translateY(-7px); + -ms-transform: translateY(-7px); + transform: translateY(-7px); + width: calc(22px * 0.64); } .circuit-0::after { - -webkit-transform: translateY(5px); - -ms-transform: translateY(5px); - transform: translateY(5px); - width: 14px; + -webkit-transform: translateY(7px); + -ms-transform: translateY(7px); + transform: translateY(7px); + width: calc(22px * 0.82); } .circuit-2 { @@ -340,3 +501,162 @@ exports[`Hamburger should render with default styles 1`] = ` `; + +exports[`Hamburger should render with kilo styles 1`] = ` +.circuit-2 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.circuit-3 { + font-size: 16px; + line-height: 24px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: auto; + height: auto; + margin: 0; + cursor: pointer; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + font-weight: 700; + border-width: 1px; + border-style: solid; + border-radius: 999999px; + -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; + background-color: #FFF; + border-color: #999; + color: #000; + padding: calc(12px - 1px) calc(24px - 1px); + padding: calc(8px - 1px); + border: 0; + padding: 8px; +} + +.circuit-3:focus { + outline: 0; + box-shadow: 0 0 0 4px #AFD0FE; +} + +.circuit-3:focus::-moz-focus-inner { + border: 0; +} + +.circuit-3:focus:not(:focus-visible) { + box-shadow: none; +} + +.circuit-3:disabled, +.circuit-3[disabled] { + opacity: 0.5; + pointer-events: none; + box-shadow: none; +} + +.circuit-3:hover { + background-color: #F5F5F5; + border-color: #666; +} + +.circuit-3:active, +.circuit-3[aria-expanded='true'], +.circuit-3[aria-pressed='true'] { + background-color: #E6E6E6; + border-color: #333; +} + +.circuit-1 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-transform: translateY(-1px); + -ms-transform: translateY(-1px); + transform: translateY(-1px); + width: 16px; + height: 16px; +} + +.circuit-0 { + top: 50%; + width: 14px; +} + +.circuit-0, +.circuit-0::after, +.circuit-0::before { + background-color: currentColor; + border-radius: 1px; + display: block; + height: 2px; + position: absolute; + -webkit-transition: width 0.2s ease-out 0.15s,opacity 0.1s ease-in,-webkit-transform 0.3s cubic-bezier(0.55,0.055,0.675,0.19); + -webkit-transition: width 0.2s ease-out 0.15s,opacity 0.1s ease-in,transform 0.3s cubic-bezier(0.55,0.055,0.675,0.19); + transition: width 0.2s ease-out 0.15s,opacity 0.1s ease-in,transform 0.3s cubic-bezier(0.55,0.055,0.675,0.19); +} + +.circuit-0::before, +.circuit-0::after { + top: 0; + content: ''; +} + +.circuit-0::before { + -webkit-transform: translateY(-5px); + -ms-transform: translateY(-5px); + transform: translateY(-5px); + width: calc(14px * 0.64); +} + +.circuit-0::after { + -webkit-transform: translateY(5px); + -ms-transform: translateY(5px); + transform: translateY(5px); + width: calc(14px * 0.82); +} + + +`; diff --git a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap index 555dd99e4e..1c7f502092 100644 --- a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap +++ b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap @@ -145,7 +145,7 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = ` background-color: #3063E9; border-color: #3063E9; color: #FFF; - padding: 4px calc(16px - 1px); + padding: calc(4px - 1px) calc(16px - 1px); min-width: 34px; padding: 4px; margin-right: 4px; @@ -215,7 +215,7 @@ li:last-child .circuit-2 { border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - padding: 4px calc(16px - 1px); + padding: calc(4px - 1px) calc(16px - 1px); background-color: transparent; border-color: transparent; color: #3063E9; diff --git a/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap b/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap index 92b66724e9..ba48f29d76 100644 --- a/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap +++ b/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap @@ -44,7 +44,7 @@ exports[`PageList styles should render with default styles 1`] = ` background-color: #3063E9; border-color: #3063E9; color: #FFF; - padding: 4px calc(16px - 1px); + padding: calc(4px - 1px) calc(16px - 1px); min-width: 34px; padding: 4px; margin-right: 4px; @@ -114,7 +114,7 @@ li:last-child .circuit-0 { border-radius: 999999px; -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out; - padding: 4px calc(16px - 1px); + padding: calc(4px - 1px) calc(16px - 1px); background-color: transparent; border-color: transparent; color: #3063E9;