From dbec83e22533fb7e0ef2d35c474690fbb50f8985 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 16 Jan 2019 11:39:15 -0800 Subject: [PATCH 01/27] add updated theming docs to README --- README.md | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/README.md b/README.md index 08c9217e8fc..8ba5a88a312 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,47 @@ export default () => ( This will set the `color`, `font-family`, and `line-height` CSS properties to the same ones used in [primer-base](https://github.com/primer/primer/blob/master/modules/primer-base/lib/base.scss#L15). +#### Theming + +Components are styled using Primer's theme by default, but you can provide your own theme by using [styled-component's] ``. If you'd like to fully replace the Primer theme with your custom theme, pass your theme to the `` in the root of your application like so: + +``` +import {ThemeProvider} from `styled-components` + +const theme = { ... } + +const App = (props) => { + return ( +
+ +
your app here
+ +
+ ) +} + +``` + +If you'd like to merge the Primer theme with your theme, you can do so importing the Primer theme and merging using Object.assign: + +``` +import {ThemeProvider} from `styled-components` +import {theme} from '@primer/components' + +const customTheme = { ... } + + +const App = (props) => { + return ( +
+ // matching keys in customTheme will override keys in the Primer theme +
your app here
+ +
+ ) +} +``` + #### Static CSS rendering If you're rendering React components both server-side _and_ client-side, we suggest following [styled-component's server-side rendering instructions](https://www.styled-components.com/docs/advanced#server-side-rendering) to avoid the flash of unstyled content for server-rendered components. This repo's [documentation template component](https://github.com/primer/components/blob/master/pages/_document.js) demonstrates how to do this in [Next.js]. From 052fd46a1d943ab48e87f8a12443a92cad9516bd Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 16 Jan 2019 11:42:08 -0800 Subject: [PATCH 02/27] update theming docs --- pages/components/docs/primer-theme.md | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/pages/components/docs/primer-theme.md b/pages/components/docs/primer-theme.md index ced802cbf7c..0611e91a4f8 100644 --- a/pages/components/docs/primer-theme.md +++ b/pages/components/docs/primer-theme.md @@ -20,7 +20,7 @@ Custom theming is an optional way to override the Primer values that control col There are two ways to change the theme of Primer components: -1. You can override the theme for an entire tree of components using the `` from [styled-components]: +1. You can override the entire theme for an entire tree of components using the `` from [styled-components]: ```jsx import {Block, Button, Text, theme as primer} from '@primer/components' @@ -46,8 +46,27 @@ There are two ways to change the theme of Primer components: ``` **⚠️ Note: [styled-components]'s `` only allows exactly one child.** +2. You can merge the Primer theme with your custom theme using Object.assign: -1. You can theme individual components by passing the `theme` prop directly: +``` +import {ThemeProvider} from `styled-components` +import {theme} from '@primer/components' + +const customTheme = { ... } + + +const App = (props) => { + return ( +
+ // matching keys in customTheme will override keys in the Primer theme +
your app here
+ +
+ ) +} +``` + +3. You can theme individual components by passing the `theme` prop directly: ```jsx import {Text} from '@primer/components' @@ -65,6 +84,7 @@ There are two ways to change the theme of Primer components: **☝️ This is an intentionally convoluted example, since you can use `` out of the box.** + Read the [styled-system docs](http://jxnblk.com/styled-system/getting-started#theming) for more information on theming in styled-system. [styled-components]: https://styled-components.com/ From 813c8623342708b07b3bab4e1e9e0476add73588 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 16 Jan 2019 18:39:40 -0800 Subject: [PATCH 03/27] remove destructured default of "div" from `is` prop --- src/Button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Button.js b/src/Button.js index 176dbaf4a2d..34e6ed06b5f 100644 --- a/src/Button.js +++ b/src/Button.js @@ -12,7 +12,7 @@ function fontSize({size = '14px', ...props}) { } } -const ButtonBase = ({is: Tag = 'div', onClick, disabled, theme, ...rest}) => { +const ButtonBase = ({is: Tag, onClick, disabled, theme, ...rest}) => { return } From 6086105eb478fc564be0d3d9932825e8cfc750ca Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 16 Jan 2019 22:43:28 -0800 Subject: [PATCH 04/27] update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 92ba83f5ff1..9e02d064fae 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/components", - "version": "8.2.0-beta", + "version": "8.2.1-beta", "description": "Primer react components", "main": "dist/index.umd.js", "module": "dist/index.esm.js", From 6bf4205f55724f4e7e9bb151c5c4bc4a9a83249e Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 16 Jan 2019 22:45:01 -0800 Subject: [PATCH 05/27] Update README.md Co-Authored-By: emplums --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8ba5a88a312..d3908592184 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ This will set the `color`, `font-family`, and `line-height` CSS properties to th #### Theming -Components are styled using Primer's theme by default, but you can provide your own theme by using [styled-component's] ``. If you'd like to fully replace the Primer theme with your custom theme, pass your theme to the `` in the root of your application like so: +Components are styled using Primer's theme by default, but you can provide your own theme by using [styled-component's][styled-components] ``. If you'd like to fully replace the Primer theme with your custom theme, pass your theme to the `` in the root of your application like so: ``` import {ThemeProvider} from `styled-components` From 36a62d4b31fdf28d9f5f3b29a6a0507097364408 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 16 Jan 2019 22:45:15 -0800 Subject: [PATCH 06/27] import fix Co-Authored-By: emplums --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d3908592184..6e081d26eb9 100644 --- a/README.md +++ b/README.md @@ -100,7 +100,7 @@ const App = (props) => { If you'd like to merge the Primer theme with your theme, you can do so importing the Primer theme and merging using Object.assign: ``` -import {ThemeProvider} from `styled-components` +import {ThemeProvider} from 'styled-components' import {theme} from '@primer/components' const customTheme = { ... } From 386eb3bd6c6dda53e05cae2b4279870652afabfa Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 16 Jan 2019 22:45:24 -0800 Subject: [PATCH 07/27] jsx syntax Co-Authored-By: emplums --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6e081d26eb9..56fe57c4c3a 100644 --- a/README.md +++ b/README.md @@ -80,7 +80,7 @@ This will set the `color`, `font-family`, and `line-height` CSS properties to th Components are styled using Primer's theme by default, but you can provide your own theme by using [styled-component's][styled-components] ``. If you'd like to fully replace the Primer theme with your custom theme, pass your theme to the `` in the root of your application like so: -``` +```jsx import {ThemeProvider} from `styled-components` const theme = { ... } From b6813014c5c60bf2e082dfbf1ba99ec740bc15aa Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 16 Jan 2019 22:45:36 -0800 Subject: [PATCH 08/27] jsx syntax again Co-Authored-By: emplums --- pages/components/docs/primer-theme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/components/docs/primer-theme.md b/pages/components/docs/primer-theme.md index 0611e91a4f8..d1463de2663 100644 --- a/pages/components/docs/primer-theme.md +++ b/pages/components/docs/primer-theme.md @@ -48,7 +48,7 @@ There are two ways to change the theme of Primer components: **⚠️ Note: [styled-components]'s `` only allows exactly one child.** 2. You can merge the Primer theme with your custom theme using Object.assign: -``` +```jsx import {ThemeProvider} from `styled-components` import {theme} from '@primer/components' From bb6d4d699b7fec0e85f65bca029804a805de344d Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 16 Jan 2019 22:45:56 -0800 Subject: [PATCH 09/27] Update README.md Co-Authored-By: emplums --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 56fe57c4c3a..655392afd84 100644 --- a/README.md +++ b/README.md @@ -81,7 +81,7 @@ This will set the `color`, `font-family`, and `line-height` CSS properties to th Components are styled using Primer's theme by default, but you can provide your own theme by using [styled-component's][styled-components] ``. If you'd like to fully replace the Primer theme with your custom theme, pass your theme to the `` in the root of your application like so: ```jsx -import {ThemeProvider} from `styled-components` +import {ThemeProvider} from 'styled-components' const theme = { ... } From 699ac8086a94f49d7e5f695956462464cef491b7 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 16 Jan 2019 22:46:17 -0800 Subject: [PATCH 10/27] jsx syntax (3) Co-Authored-By: emplums --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 655392afd84..2fbe0da1232 100644 --- a/README.md +++ b/README.md @@ -99,7 +99,7 @@ const App = (props) => { If you'd like to merge the Primer theme with your theme, you can do so importing the Primer theme and merging using Object.assign: -``` +```jsx import {ThemeProvider} from 'styled-components' import {theme} from '@primer/components' From 2c9e046a97059b16e8ca475a5fea08db00d7d379 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 17 Jan 2019 15:36:57 -0800 Subject: [PATCH 11/27] feat: add fontStyle prop to TYPOGRAPHY --- src/__tests__/Text.js | 5 +++++ src/constants.js | 2 ++ 2 files changed, 7 insertions(+) diff --git a/src/__tests__/Text.js b/src/__tests__/Text.js index 429ceb14d2a..4662470db79 100644 --- a/src/__tests__/Text.js +++ b/src/__tests__/Text.js @@ -51,6 +51,11 @@ describe('Text', () => { expect(render()).toHaveStyleRule('font-weight', '400') }) + it('respects fontStyle', () => { + expect(render()).toHaveStyleRule('font-style', 'italic') + expect(render()).toHaveStyleRule('font-style', 'normal') + }) + it('respects lineHeight', () => { for (const [name, value] of Object.entries(theme.lineHeights)) { expect(render()).toHaveStyleRule('line-height', String(value)) diff --git a/src/constants.js b/src/constants.js index 6c4b4fb8376..ff3d18e5a15 100644 --- a/src/constants.js +++ b/src/constants.js @@ -19,6 +19,7 @@ export const BORDER = compose( export const TYPOGRAPHY = compose( styles.fontFamily, styles.fontSize, + styles.fontStyle, styles.fontWeight, styles.lineHeight, styles.textAlign @@ -73,6 +74,7 @@ export const TYPOGRAPHY_LIST = [ // typography props 'fontFamily', 'fontSize', + 'fontStyle', 'fontWeight', 'lineHeight', 'textAlign' From 4f4fa4eab2fb864ea65c0fd60f03009445ebdad7 Mon Sep 17 00:00:00 2001 From: Emily Date: Tue, 22 Jan 2019 13:56:54 -0800 Subject: [PATCH 12/27] remove themeGet instances --- src/Avatar.js | 5 +++-- src/AvatarPair.js | 6 +++--- src/BranchName.js | 7 +++---- src/Donut.js | 5 +++-- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/Avatar.js b/src/Avatar.js index ffb2922bffd..e6cf8894311 100644 --- a/src/Avatar.js +++ b/src/Avatar.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types' import styled from 'styled-components' -import {themeGet, space} from 'styled-system' +import {get} from './constants' +import {space} from 'styled-system' import theme from './theme' function borderRadius({size}) { @@ -15,7 +16,7 @@ const Avatar = styled.img.attrs(props => ({ }))` display: inline-block; overflow: hidden; // Ensure page layout in Firefox should images fail to load - line-height: ${themeGet('lineHeights.condensedUltra', 1)}; + line-height: ${get('lineHeights.condensedUltra')}; vertical-align: middle; ${borderRadius}; ${space}; diff --git a/src/AvatarPair.js b/src/AvatarPair.js index fdbf8f068ad..87c374e0254 100644 --- a/src/AvatarPair.js +++ b/src/AvatarPair.js @@ -1,11 +1,11 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' -import {themeGet} from 'styled-system' +import {get} from './constants' import Avatar from './Avatar' import theme from './theme' -const getBackgroundColor = themeGet('colors.white', '#fff') +const getBackgroundColor = get('colors.white') const Wrapper = styled('div')` display: inline-flex; @@ -15,7 +15,7 @@ const Wrapper = styled('div')` const childStyles = props => ({ display: 'inline-block', overflow: 'hidden', // Ensure page layout in Firefox should images fail to load - lineHeight: `${themeGet('lineHeights.condensedUltra', 1)}`, + lineHeight: `${get('lineHeights.condensedUltra')}`, verticalAlign: 'middle', borderRadius: '2px', position: 'absolute', diff --git a/src/BranchName.js b/src/BranchName.js index fa433843081..baff86cece1 100644 --- a/src/BranchName.js +++ b/src/BranchName.js @@ -1,14 +1,13 @@ import PropTypes from 'prop-types' import styled from 'styled-components' -import {themeGet} from 'styled-system' import theme from './theme' -import {COMMON, Base} from './constants' +import {COMMON, Base, get} from './constants' const BranchName = styled(Base)` display: inline-block; padding: 2px 6px; - font-size: ${themeGet('fontSizes.0', theme.fontSizes[0])}px; - font-family: ${themeGet('fonts.mono', theme.fonts.mono)}; + font-size: ${get('fontSizes.0')}px; + font-family: ${get('fonts.mono')}; color: rgba(27, 31, 35, 0.6); background-color: #eaf5ff; border-radius: 3px; diff --git a/src/Donut.js b/src/Donut.js index 548734fad8a..44e5c361f24 100644 --- a/src/Donut.js +++ b/src/Donut.js @@ -2,11 +2,12 @@ import React from 'react' import PropTypes from 'prop-types' import {arc as Arc, pie as Pie} from 'd3-shape' import styled from 'styled-components' -import {themeGet, space} from 'styled-system' +import {space} from 'styled-system' +import {get} from './constants' import theme from './theme' const defaultColor = '#666' -const getStateColors = themeGet('colors.state', {}) +const getStateColors = get('colors.state') function DonutBase(props) { const {className, data, children = mapData(data), size} = props From 4a255adfc98f6f94cfeae5e4eb43012b0d370f79 Mon Sep 17 00:00:00 2001 From: Emily Date: Tue, 22 Jan 2019 13:59:16 -0800 Subject: [PATCH 13/27] update Donut tests --- src/__tests__/Donut.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/__tests__/Donut.js b/src/__tests__/Donut.js index a4b16544938..28839ebb564 100644 --- a/src/__tests__/Donut.js +++ b/src/__tests__/Donut.js @@ -69,15 +69,7 @@ describe('Donut', () => { expect(render().props.fill).toEqual(state.success) expect(render().props.fill).toEqual(state.unknown) }) - - it('renders unknown states with theme.colors.state.unknown', () => { - expect(render().props.fill).toEqual(state.unknown) - }) - - it('renders the fallback color when no state color is found in the theme', () => { - expect(render().props.fill).toEqual('#666') - }) - + it('respects the fill attribute', () => { expect(render().props.fill).toEqual('pink') }) From 0bd3b168fc1b5a1fed53815abdd125c4a889d81d Mon Sep 17 00:00:00 2001 From: Emily Date: Tue, 22 Jan 2019 14:00:16 -0800 Subject: [PATCH 14/27] lint --- src/__tests__/Donut.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__tests__/Donut.js b/src/__tests__/Donut.js index 28839ebb564..c44e447c40a 100644 --- a/src/__tests__/Donut.js +++ b/src/__tests__/Donut.js @@ -69,7 +69,7 @@ describe('Donut', () => { expect(render().props.fill).toEqual(state.success) expect(render().props.fill).toEqual(state.unknown) }) - + it('respects the fill attribute', () => { expect(render().props.fill).toEqual('pink') }) From 64dc85f8b18997414ce4ebb27e71b411bdd440c6 Mon Sep 17 00:00:00 2001 From: Emily Date: Tue, 22 Jan 2019 14:05:31 -0800 Subject: [PATCH 15/27] add back accidentally deleted test --- src/__tests__/Donut.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/__tests__/Donut.js b/src/__tests__/Donut.js index c44e447c40a..74eb3c5a64c 100644 --- a/src/__tests__/Donut.js +++ b/src/__tests__/Donut.js @@ -70,6 +70,10 @@ describe('Donut', () => { expect(render().props.fill).toEqual(state.unknown) }) + it('renders unknown states with theme.colors.state.unknown', () => { + expect(render().props.fill).toEqual(state.unknown) + }) + it('respects the fill attribute', () => { expect(render().props.fill).toEqual('pink') }) From 9877eced134612079aab87b92db95daf2b499cd2 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 23 Jan 2019 14:30:34 -0800 Subject: [PATCH 16/27] first pass refactoring Dropdown --- pages/components/docs/Dropdown.md | 15 ++-- pages/components/docs/index.js | 1 + src/Dropdown.js | 104 +++++++++++++++++-------- src/DropdownStyles.js | 125 ++++++++++++++++++++++++++++++ 4 files changed, 209 insertions(+), 36 deletions(-) create mode 100644 src/DropdownStyles.js diff --git a/pages/components/docs/Dropdown.md b/pages/components/docs/Dropdown.md index 63a0691322c..54491907e09 100644 --- a/pages/components/docs/Dropdown.md +++ b/pages/components/docs/Dropdown.md @@ -3,14 +3,19 @@ The Dropdown component is a lightweight context menu for housing navigation and actions. +Dropdown.Button is used to trigger opening and closing the dropdown. + +Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to this component to position the menu in relation to the Dropdown.Button. + ## Default example ```.jsx - - Item 1 - Item 2 - Item 3 - + Hi + + Item 1 + Item 2 + Item 3 + ``` diff --git a/pages/components/docs/index.js b/pages/components/docs/index.js index bc38be78abc..a4942e8406e 100644 --- a/pages/components/docs/index.js +++ b/pages/components/docs/index.js @@ -7,6 +7,7 @@ export {meta as CircleBadge} from './CircleBadge.md' export {meta as CircleOcticon} from './CircleOcticon.md' export {meta as CounterLabel} from './CounterLabel.md' export {meta as Details} from './Details.md' +export {meta as Dropdown} from './Dropdown.md' export {meta as Donut} from './Donut.md' export {meta as FilterList} from './FilterList.md' export {meta as Flash} from './Flash.md' diff --git a/src/Dropdown.js b/src/Dropdown.js index d29032c67ee..15e84d13d04 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -9,48 +9,90 @@ import BorderBox from './BorderBox' import Caret from './Caret' import Details from './Details' import Flex from './Flex' -import {COMMON} from './constants' +import {COMMON, get} from './constants' +import directionStyles from './DropdownStyles' import theme from './theme' -function DropdownBase({title, scheme, children, theme, className, ...rest}) { - const {minWidth} = rest +const Dropdown = styled(Details)` + position: relative; + display: inline-block; + ${COMMON} +` + +const DropdownCaret = styled.div` + border: 4px solid transparent; + border-top-color: currentcolor; + content: ""; + display: inline-block; + height: 0; + vertical-align: middle; + width: 0; +` + +const DropdownButton = ({children, ...rest}) => { return ( -
- - {({toggle}) => ( - - - - {children} - - - - )} - -
+ ) } -const Dropdown = styled(DropdownBase)(COMMON) +const DropdownMenu = styled.ul` + background-clip: padding-box; + background-color: #fff; + border: 1px solid rgba(27,31,35,.15); + border-radius: 4px; + box-shadow: 0 3px 12px rgba(27,31,35,.15); + left: 0; + list-style: none; + margin-top: 2px; + padding-bottom: 5px; + padding-top: 5px; + position: absolute; + top: 100%; + width: 160px; + z-index: 100; + + &::before { + position: absolute; + display: inline-block; + content: ""; + } + + &::after { + position: absolute; + display: inline-block; + content: ""; + } + + &::before { + border: 8px solid transparent; + border-bottom-color: ${get('colors.blackFade15')}; + } + &::after { + border: 7px solid transparent; + border-bottom-color: ${get('colors.white')} + } + + // stylelint-disable-next-line selector-max-type + > ul { + list-style: none; + } + ${props => directionStyles[props.direction]} +` Dropdown.defaultProps = { theme } +Dropdown.Button = DropdownButton +Dropdown.Menu = DropdownMenu + +Dropdown.Menu.propTypes = { + direction: PropTypes.oneOf(['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']) +} + Dropdown.propTypes = { children: PropTypes.node, scheme: Button.propTypes.scheme, diff --git a/src/DropdownStyles.js b/src/DropdownStyles.js new file mode 100644 index 00000000000..d51aba9b08b --- /dev/null +++ b/src/DropdownStyles.js @@ -0,0 +1,125 @@ +import {get} from './constants' + +const styles = { + w: ` + top: 0; + right: 100%; + left: auto; + width: auto; + margin-top: 0; + margin-right: 10px; + + &::before { + top: 10px; + right: -16px; + left: auto; + border-color: transparent; + border-left-color: ${get('colors.blackFade15')}; + } + + &::after { + top: 11px; + right: -14px; + left: auto; + border-color: transparent; + border-left-color: ${get('colors.white')}; + } + `, + e: ` + top: 0; + left: 100%; + width: auto; + margin-top: 0; + margin-left: 10px; + + &::before { + top: 10px; + left: -16px; + border-color: transparent; + border-right-color: ${get('colors.blackFade15')}; + } + + &::after { + top: 11px; + left: -14px; + border-color: transparent; + border-right-color: ${get('colors.white')}; + } + `, + ne: ` + top: auto; + bottom: 100%; + left: 0; + margin-bottom: 3px; + + &::before, + &::after { + top: auto; + right: auto; + } + + &::before { + bottom: -8px; + left: 9px; + border-top: 8px solid ${get('colors.blackFade15')}; + border-right: 8px solid transparent; + border-bottom: 0; + border-left: 8px solid transparent; + } + + &::after { + bottom: -7px; + left: 10px; + border-top: 7px solid ${get('colors.white')}; + border-right: 7px solid transparent; + border-bottom: 0; + border-left: 7px solid transparent; + } + `, + s: ` + right: 50%; + left: auto; + transform: translateX(50%); + + &::before { + top: -16px; + right: 50%; + transform: translateX(50%); + } + + &::after { + top: -14px; + right: 50%; + transform: translateX(50%); + } + `, + sw: ` + right: 0; + left: auto; + + &::before { + top: -16px; + right: 9px; + left: auto; + } + + &::after { + top: -14px; + right: 10px; + left: auto; + } + `, + se: ` + &::before { + top: -16px; + left: 9px; + } + + &::after { + top: -14px; + left: 10px; + } + ` +} + +export default styles From 9a4a9e5b7659eca8e50c71c05d7e80d943be3a90 Mon Sep 17 00:00:00 2001 From: Emily Date: Wed, 23 Jan 2019 14:33:42 -0800 Subject: [PATCH 17/27] remove unnecessary imports --- pages/components/docs/Dropdown.md | 2 -- src/Dropdown.js | 12 ++++-------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/pages/components/docs/Dropdown.md b/pages/components/docs/Dropdown.md index 54491907e09..0fda70ed7e4 100644 --- a/pages/components/docs/Dropdown.md +++ b/pages/components/docs/Dropdown.md @@ -27,7 +27,5 @@ Dropdown components get `COMMON` system props. Read our [System Props](/componen | Name | Type | Default | Description | | :- | :- | :-: | :- | -| scheme | String | | Button scheme used to style the component, can be one of `danger`, `outline` or `primary` | -| title | String | | Optional prop to set the text in the Dropdown button export const meta = {displayName: 'Dropdown'} diff --git a/src/Dropdown.js b/src/Dropdown.js index 15e84d13d04..14857cf43b2 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -1,14 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' -import classnames from 'classnames' import styled from 'styled-components' -import StyledOcticon from './StyledOcticon' -import {TriangleDown} from '@githubprimer/octicons-react' import Button from './Button' -import BorderBox from './BorderBox' -import Caret from './Caret' import Details from './Details' -import Flex from './Flex' import {COMMON, get} from './constants' import directionStyles from './DropdownStyles' import theme from './theme' @@ -93,10 +87,12 @@ Dropdown.Menu.propTypes = { direction: PropTypes.oneOf(['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']) } +Dropdown.Menu.defaultProps = { + direction: 'sw' +} + Dropdown.propTypes = { children: PropTypes.node, - scheme: Button.propTypes.scheme, - title: PropTypes.string, ...COMMON.propTypes } From 9da9ff69ab4b7c1f63a22605b96fd27e1870d89d Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 24 Jan 2019 16:53:16 -0800 Subject: [PATCH 18/27] fix the caret --- pages/components/docs/Dropdown.md | 23 +++- src/Dropdown.js | 31 ++++- src/DropdownStyles.js | 212 +++++++++++++++--------------- 3 files changed, 152 insertions(+), 114 deletions(-) diff --git a/pages/components/docs/Dropdown.md b/pages/components/docs/Dropdown.md index 0fda70ed7e4..07cb7072fe8 100644 --- a/pages/components/docs/Dropdown.md +++ b/pages/components/docs/Dropdown.md @@ -12,20 +12,35 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi Hi - Item 1 - Item 2 - Item 3 + Item 1 + Item 2 + Item 3 ``` ## System props -Dropdown components get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props. +Dropdown wrapper components get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props. + +Dropdown.Menu, Dropdown.Button, and Dropdown.Item do not get any system props. ## Component props + +#### Dropdown.Menu | Name | Type | Default | Description | | :- | :- | :-: | :- | +| direction | String | 'sw' | Sets the direction of the dropdown menu. | + +#### Dropdown.Item +No additional props. + +#### Dropdown.Button +No additional props. + +#### Dropdown +No additional props. + export const meta = {displayName: 'Dropdown'} diff --git a/src/Dropdown.js b/src/Dropdown.js index 14857cf43b2..bdd7311f865 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -4,7 +4,7 @@ import styled from 'styled-components' import Button from './Button' import Details from './Details' import {COMMON, get} from './constants' -import directionStyles from './DropdownStyles' +import getDirectionStyles from './DropdownStyles' import theme from './theme' const Dropdown = styled(Details)` @@ -41,8 +41,7 @@ const DropdownMenu = styled.ul` left: 0; list-style: none; margin-top: 2px; - padding-bottom: 5px; - padding-top: 5px; + padding: 5px 0 5px 0!important; //TODO: fix this override on our markdown styles position: absolute; top: 100%; width: 160px; @@ -74,7 +73,7 @@ const DropdownMenu = styled.ul` > ul { list-style: none; } - ${props => directionStyles[props.direction]} + ${props => props.direction ? getDirectionStyles(props.theme, props.direction) : ''}; ` Dropdown.defaultProps = { theme @@ -84,9 +83,31 @@ Dropdown.Button = DropdownButton Dropdown.Menu = DropdownMenu Dropdown.Menu.propTypes = { - direction: PropTypes.oneOf(['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']) + direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']) } +Dropdown.Item = styled.li` + display: block; + padding: ${get('space.1')}px 10px ${get('space.1')}px 15px; + overflow: hidden; + color: $get('colors.gray.9'); + text-overflow: ellipsis; + white-space: nowrap; + + &:focus { + color: ${get('colors.white')}; + text-decoration: none; + background-color: ${get('colors.blue.5')}; + } + + &:hover { + color: ${get('colors.white')} + text-decoration: none; + background-color: ${get('colors.blue.5')}; + outline: none; + } +` + Dropdown.Menu.defaultProps = { direction: 'sw' } diff --git a/src/DropdownStyles.js b/src/DropdownStyles.js index d51aba9b08b..bc22fce969c 100644 --- a/src/DropdownStyles.js +++ b/src/DropdownStyles.js @@ -1,125 +1,127 @@ import {get} from './constants' -const styles = { - w: ` - top: 0; - right: 100%; - left: auto; - width: auto; - margin-top: 0; - margin-right: 10px; - - &::before { - top: 10px; - right: -16px; +const getDirectionStyles = (theme, direction) => { + const map = { + w: ` + top: 0; + right: 100%; left: auto; - border-color: transparent; - border-left-color: ${get('colors.blackFade15')}; - } + width: auto; + margin-top: 0; + margin-right: 10px; - &::after { - top: 11px; - right: -14px; - left: auto; - border-color: transparent; - border-left-color: ${get('colors.white')}; - } - `, - e: ` - top: 0; - left: 100%; - width: auto; - margin-top: 0; - margin-left: 10px; + &::before { + top: 10px; + right: -16px; + left: auto; + border-color: transparent; + border-left-color: ${get('colors.blackfade15')(theme)}; + } - &::before { - top: 10px; - left: -16px; - border-color: transparent; - border-right-color: ${get('colors.blackFade15')}; - } + &::after { + top: 11px; + right: -14px; + left: auto; + border-color: transparent; + border-left-color: ${get('colors.white')(theme)}; + } + `, + e: ` + top: 0; + left: 100%; + width: auto; + margin-top: 0; + margin-left: 10px; - &::after { - top: 11px; - left: -14px; - border-color: transparent; - border-right-color: ${get('colors.white')}; - } - `, - ne: ` - top: auto; - bottom: 100%; - left: 0; - margin-bottom: 3px; + &::before { + top: 10px; + left: -16px; + border-color: transparent; + border-right-color: ${get('colors.blackfade15')(theme)}; + } - &::before, - &::after { + &::after { + top: 11px; + left: -14px; + border-color: transparent; + border-right-color: ${get('colors.white')(theme)}; + } + `, + ne: ` top: auto; - right: auto; - } + bottom: 100%; + left: 0; + margin-bottom: 3px; - &::before { - bottom: -8px; - left: 9px; - border-top: 8px solid ${get('colors.blackFade15')}; - border-right: 8px solid transparent; - border-bottom: 0; - border-left: 8px solid transparent; - } + &::before, + &::after { + top: auto; + right: auto; + } - &::after { - bottom: -7px; - left: 10px; - border-top: 7px solid ${get('colors.white')}; - border-right: 7px solid transparent; - border-bottom: 0; - border-left: 7px solid transparent; - } - `, - s: ` - right: 50%; - left: auto; - transform: translateX(50%); + &::before { + bottom: -8px; + left: 9px; + border-top: 8px solid ${get('colors.blackfade15')(theme)} + border-bottom: 0; + border-left: 8px solid transparent; + } - &::before { - top: -16px; + &::after { + bottom: -7px; + left: 10px; + border-top: 7px solid ${get('colors.white')(theme)}; + border-right: 7px solid transparent; + border-bottom: 0; + border-left: 7px solid transparent; + } + `, + s: ` right: 50%; + left: auto; transform: translateX(50%); - } - &::after { - top: -14px; - right: 50%; - transform: translateX(50%); - } - `, - sw: ` - right: 0; - left: auto; + &::before { + top: -16px; + right: 50%; + transform: translateX(50%); + } - &::before { - top: -16px; - right: 9px; + &::after { + top: -14px; + right: 50%; + transform: translateX(50%); + } + `, + sw: ` + right: 0; left: auto; - } - &::after { - top: -14px; - right: 10px; - left: auto; - } - `, - se: ` - &::before { - top: -16px; - left: 9px; - } + &::before { + top: -16px; + right: 9px; + left: auto; + } + + &::after { + top: -14px; + right: 10px; + left: auto; + } + `, + se: ` + &::before { + top: -16px; + left: 9px; + } - &::after { - top: -14px; - left: 10px; - } - ` + &::after { + top: -14px; + left: 10px; + } + ` + } + return map[direction] } -export default styles +export default getDirectionStyles From 345a1193ab3f6a1e045dedb4ba8515b21e476b9b Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 24 Jan 2019 17:08:10 -0800 Subject: [PATCH 19/27] update tests and snapshots --- src/__tests__/Dropdown.js | 67 ++- src/__tests__/__snapshots__/Dropdown.js.snap | 530 ++++++++++--------- 2 files changed, 354 insertions(+), 243 deletions(-) diff --git a/src/__tests__/Dropdown.js b/src/__tests__/Dropdown.js index fd62bd23d84..223ed41fd4c 100644 --- a/src/__tests__/Dropdown.js +++ b/src/__tests__/Dropdown.js @@ -9,12 +9,6 @@ describe('Dropdown', () => { expect(render(hello!)).toMatchSnapshot() }) - it('renders a
with "BtnGroup" class', () => { - const rendered = render() - expect(rendered.type).toEqual('div') - expect(rendered.props.className).toContain('BtnGroup') - }) - it('implements system props', () => { expect(Dropdown).toImplementSystemProps(COMMON) }) @@ -23,3 +17,64 @@ describe('Dropdown', () => { expect(Dropdown).toSetDefaultTheme() }) }) + +describe('Dropdown.Item', () => { + it('matches the snapshots', () => { + expect(render(hi)).toMatchSnapshot() + expect(render(hello!)).toMatchSnapshot() + }) + + it('implements system props', () => { + expect(Dropdown.Item).toImplementSystemProps(COMMON) + }) + + it('has default theme', () => { + expect(Dropdown.Item).toSetDefaultTheme() + }) +}) + +describe('Dropdown.Menu', () => { + it('matches the snapshots', () => { + expect( + render( + +
  • 1
    • +
  • 2
    • +
  • 3
    • +     + ) + ).toMatchSnapshot() + expect( + render( + +
  • 1
    • +
  • 2
    • +
  • 3
    • +     + ) + ).toMatchSnapshot() + }) + + it('implements system props', () => { + expect(Dropdown.Menu).toImplementSystemProps(COMMON) + }) + + it('has default theme', () => { + expect(Dropdown.Menu).toSetDefaultTheme() + }) +}) + +describe('Dropdown.Button', () => { + it('matches the snapshots', () => { + expect(render(hi)).toMatchSnapshot() + expect(render(hello!)).toMatchSnapshot() + }) + + it('implements system props', () => { + expect(Dropdown.Button).toImplementSystemProps(COMMON) + }) + + it('has default theme', () => { + expect(Dropdown.Button).toSetDefaultTheme() + }) +}) diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.js.snap index 51d3325f350..d01e989fc62 100644 --- a/src/__tests__/__snapshots__/Dropdown.js.snap +++ b/src/__tests__/__snapshots__/Dropdown.js.snap @@ -1,11 +1,60 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Dropdown matches the snapshots 1`] = ` -.c3 { - margin-left: 0px; +.c1 > summary { + list-style: none; +} + +.c1 > summary::before { + display: none; +} + +.c1 > summary::-webkit-details-marker { + display: none; +} + +.c0 { + position: relative; + display: inline-block; +} + +
    + hi +
    +`; + +exports[`Dropdown matches the snapshots 2`] = ` +.c1 > summary { + list-style: none; +} + +.c1 > summary::before { + display: none; +} + +.c1 > summary::-webkit-details-marker { + display: none; +} + +.c0 { + position: relative; + display: inline-block; } -.c2 { +
    + hello! +
    +`; + +exports[`Dropdown.Button matches the snapshots 1`] = ` +.c0 { position: relative; display: inline-block; padding: 6px 12px; @@ -33,7 +82,7 @@ exports[`Dropdown matches the snapshots 1`] = ` font-size: 14px; } -.c2:hover { +.c0:hover { background-color: rgb(230,235,241); background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%); background-position: -0.5em center; @@ -43,157 +92,55 @@ exports[`Dropdown matches the snapshots 1`] = ` background-repeat: repeat-x; } -.c2:active { +.c0:active { background-color: rgb(233,236,239); background-image: none; box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset; border-color: rgba(27,31,35,0.2); } -.c2:selected { +.c0:selected { background-color: rgb(233,236,239); background-image: none; box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset; border-color: rgba(27,31,35,0.2); } -.c2:disabled { +.c0:disabled { color: rgba(36,41,46,0.4); background-color: #f6f8fa; background-image: none; border-color: rgba(27,31,35,0.20) box-shadow:none; } -.c2:focus { +.c0:focus { outline: none; box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em; } -.c4 { - background-color: #fff; - margin-top: 4px; - padding-left: 16px; - padding-right: 16px; - padding-top: 8px; - padding-bottom: 8px; - border: 1px solid; - border-color: #e1e4e8; - box-shadow: 0 1px 1px rgba(27,31,35,0.1); - border-radius: 3px; -} - -.c1 > summary { - list-style: none; -} - -.c1 > summary::before { - display: none; -} - -.c1 > summary::-webkit-details-marker { - display: none; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; +.c1 { + border: 4px solid transparent; + border-top-color: currentcolor; + content: ""; + display: inline-block; + height: 0; + vertical-align: middle; + width: 0; } -
    -
    - - - -
    - hi - - - - - - -
    -
    -
    + hi +
    + `; -exports[`Dropdown matches the snapshots 2`] = ` -.c3 { - margin-left: 8px; -} - -.c2 { +exports[`Dropdown.Button matches the snapshots 2`] = ` +.c0 { position: relative; display: inline-block; padding: 6px 12px; @@ -221,7 +168,7 @@ exports[`Dropdown matches the snapshots 2`] = ` font-size: 14px; } -.c2:hover { +.c0:hover { background-color: rgb(230,235,241); background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%); background-position: -0.5em center; @@ -231,148 +178,257 @@ exports[`Dropdown matches the snapshots 2`] = ` background-repeat: repeat-x; } -.c2:active { +.c0:active { background-color: rgb(233,236,239); background-image: none; box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset; border-color: rgba(27,31,35,0.2); } -.c2:selected { +.c0:selected { background-color: rgb(233,236,239); background-image: none; box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset; border-color: rgba(27,31,35,0.2); } -.c2:disabled { +.c0:disabled { color: rgba(36,41,46,0.4); background-color: #f6f8fa; background-image: none; border-color: rgba(27,31,35,0.20) box-shadow:none; } -.c2:focus { +.c0:focus { outline: none; box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em; } -.c4 { +.c1 { + border: 4px solid transparent; + border-top-color: currentcolor; + content: ""; + display: inline-block; + height: 0; + vertical-align: middle; + width: 0; +} + + + hello! +
    +
     +`; + +exports[`Dropdown.Item matches the snapshots 1`] = ` +.c0 { + display: block; + padding: 4px 10px 4px 15px; + overflow: hidden; + color: $get('colors.gray.9'); + text-overflow: ellipsis; + white-space: nowrap; +} + +.c0:focus { + color: #fff; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #0366d6; +} + +.c0:hover { + color: #fff; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #0366d6; + outline: none; +} + +
  • + hi +
    • +`; + +exports[`Dropdown.Item matches the snapshots 2`] = ` +.c0 { + display: block; + padding: 4px 10px 4px 15px; + overflow: hidden; + color: $get('colors.gray.9'); + text-overflow: ellipsis; + white-space: nowrap; +} + +.c0:focus { + color: #fff; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #0366d6; +} + +.c0:hover { + color: #fff; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #0366d6; + outline: none; +} + +
  • + hello! +
    • +`; + +exports[`Dropdown.Menu matches the snapshots 1`] = ` +.c0 { + background-clip: padding-box; background-color: #fff; - margin-top: 4px; - padding-left: 16px; - padding-right: 16px; - padding-top: 8px; - padding-bottom: 8px; - border: 1px solid; - border-color: #e1e4e8; - box-shadow: 0 1px 1px rgba(27,31,35,0.1); - border-radius: 3px; + border: 1px solid rgba(27,31,35,.15); + border-radius: 4px; + box-shadow: 0 3px 12px rgba(27,31,35,.15); + left: 0; + list-style: none; + margin-top: 2px; + padding: 5px 0 5px 0!important; + position: absolute; + top: 100%; + width: 160px; + z-index: 100; + right: 0; + left: auto; } -.c1 > summary { +.c0::before { + position: absolute; + display: inline-block; + content: ""; +} + +.c0::after { + position: absolute; + display: inline-block; + content: ""; +} + +.c0::before { + border: 8px solid transparent; +} + +.c0::after { + border: 7px solid transparent; + border-bottom-color: #fff; +} + +.c0 > ul { list-style: none; } -.c1 > summary::before { - display: none; +.c0::before { + top: -16px; + right: 9px; + left: auto; } -.c1 > summary::-webkit-details-marker { - display: none; +.c0::after { + top: -14px; + right: 10px; + left: auto; } +
      +
    • + 1 +
      • +
    • + 2 +
      • +
    • + 3 +
      • +
    +`; + +exports[`Dropdown.Menu matches the snapshots 2`] = ` .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; + background-clip: padding-box; + background-color: #fff; + border: 1px solid rgba(27,31,35,.15); + border-radius: 4px; + box-shadow: 0 3px 12px rgba(27,31,35,.15); + left: 0; + list-style: none; + margin-top: 2px; + padding: 5px 0 5px 0!important; + position: absolute; + top: 100%; + width: 160px; + z-index: 100; + right: 0; + left: auto; +} + +.c0::before { + position: absolute; + display: inline-block; + content: ""; +} + +.c0::after { + position: absolute; + display: inline-block; + content: ""; +} + +.c0::before { + border: 8px solid transparent; +} + +.c0::after { + border: 7px solid transparent; + border-bottom-color: #fff; +} + +.c0 > ul { + list-style: none; +} + +.c0::before { + top: -16px; + right: 9px; + left: auto; +} + +.c0::after { + top: -14px; + right: 10px; + left: auto; } -
    -
    - - hi - - -
    - hello! - - - - - - -
    -
    -
    +
  • + 1 +
    • +
  • + 2 +
    • +
  • + 3 +
    • + `; From d5e0205fc48b3fe600479cdc4710bb79df64e1d4 Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 24 Jan 2019 17:08:17 -0800 Subject: [PATCH 20/27] lint fix --- src/Dropdown.js | 59 ++++++++++++++++++++++++++++++------------------- 1 file changed, 36 insertions(+), 23 deletions(-) diff --git a/src/Dropdown.js b/src/Dropdown.js index bdd7311f865..28493646879 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -10,13 +10,13 @@ import theme from './theme' const Dropdown = styled(Details)` position: relative; display: inline-block; - ${COMMON} + ${COMMON}; ` const DropdownCaret = styled.div` border: 4px solid transparent; border-top-color: currentcolor; - content: ""; + content: ''; display: inline-block; height: 0; vertical-align: middle; @@ -25,9 +25,9 @@ const DropdownCaret = styled.div` const DropdownButton = ({children, ...rest}) => { return ( - ) } @@ -35,13 +35,13 @@ const DropdownButton = ({children, ...rest}) => { const DropdownMenu = styled.ul` background-clip: padding-box; background-color: #fff; - border: 1px solid rgba(27,31,35,.15); + border: 1px solid rgba(27, 31, 35, 0.15); border-radius: 4px; - box-shadow: 0 3px 12px rgba(27,31,35,.15); + box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15); left: 0; list-style: none; margin-top: 2px; - padding: 5px 0 5px 0!important; //TODO: fix this override on our markdown styles + padding: 5px 0 5px 0 !important; //TODO: fix this override on our markdown styles position: absolute; top: 100%; width: 160px; @@ -50,13 +50,13 @@ const DropdownMenu = styled.ul` &::before { position: absolute; display: inline-block; - content: ""; + content: ''; } &::after { position: absolute; display: inline-block; - content: ""; + content: ''; } &::before { @@ -66,27 +66,18 @@ const DropdownMenu = styled.ul` &::after { border: 7px solid transparent; - border-bottom-color: ${get('colors.white')} + border-bottom-color: ${get('colors.white')}; } // stylelint-disable-next-line selector-max-type > ul { list-style: none; } - ${props => props.direction ? getDirectionStyles(props.theme, props.direction) : ''}; + ${props => (props.direction ? getDirectionStyles(props.theme, props.direction) : '')}; + ${COMMON}; ` -Dropdown.defaultProps = { - theme -} -Dropdown.Button = DropdownButton -Dropdown.Menu = DropdownMenu - -Dropdown.Menu.propTypes = { - direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']) -} - -Dropdown.Item = styled.li` +const DropdownItem = styled.li` display: block; padding: ${get('space.1')}px 10px ${get('space.1')}px 15px; overflow: hidden; @@ -106,15 +97,37 @@ Dropdown.Item = styled.li` background-color: ${get('colors.blue.5')}; outline: none; } + ${COMMON} ` +Dropdown.Button = styled(DropdownButton)(COMMON) +Dropdown.Menu = DropdownMenu +Dropdown.Item = DropdownItem + +Dropdown.Menu.propTypes = { + direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']), + ...COMMON.propTypes +} + Dropdown.Menu.defaultProps = { - direction: 'sw' + direction: 'sw', + theme } +Dropdown.defaultProps = {theme} Dropdown.propTypes = { children: PropTypes.node, ...COMMON.propTypes } +Dropdown.Button.defaultProps = {theme} +Dropdown.Button.propTypes = { + ...COMMON.propTypes +} + +Dropdown.Item.defaultProps = {theme} +Dropdown.Item.propTypes = { + ...COMMON.propTypes +} + export default Dropdown From 51564401ff258125c56cac9ea42a42360d90b674 Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 24 Jan 2019 17:10:29 -0800 Subject: [PATCH 21/27] use theme values --- src/Dropdown.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Dropdown.js b/src/Dropdown.js index 28493646879..1fd1dbae5b9 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -14,7 +14,7 @@ const Dropdown = styled(Details)` ` const DropdownCaret = styled.div` - border: 4px solid transparent; + border: ${get('space.1')}px solid transparent; border-top-color: currentcolor; content: ''; display: inline-block; @@ -34,9 +34,9 @@ const DropdownButton = ({children, ...rest}) => { const DropdownMenu = styled.ul` background-clip: padding-box; - background-color: #fff; + background-color: ${get('colors.white')}; border: 1px solid rgba(27, 31, 35, 0.15); - border-radius: 4px; + border-radius: ${get('space.1')}px; box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15); left: 0; list-style: none; @@ -60,8 +60,8 @@ const DropdownMenu = styled.ul` } &::before { - border: 8px solid transparent; - border-bottom-color: ${get('colors.blackFade15')}; + border: ${get('space.2')}px solid transparent; + border-bottom-color: ${get('colors.blackfade15')}; } &::after { From 9e685783c02fa78463031fdece97729b165fcdd5 Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 24 Jan 2019 17:11:09 -0800 Subject: [PATCH 22/27] update snapshots --- src/__tests__/__snapshots__/Dropdown.js.snap | 26 +++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.js.snap index d01e989fc62..f3a1164eb9b 100644 --- a/src/__tests__/__snapshots__/Dropdown.js.snap +++ b/src/__tests__/__snapshots__/Dropdown.js.snap @@ -121,7 +121,7 @@ exports[`Dropdown.Button matches the snapshots 1`] = ` .c1 { border: 4px solid transparent; border-top-color: currentcolor; - content: ""; + content: ''; display: inline-block; height: 0; vertical-align: middle; @@ -207,7 +207,7 @@ exports[`Dropdown.Button matches the snapshots 2`] = ` .c1 { border: 4px solid transparent; border-top-color: currentcolor; - content: ""; + content: ''; display: inline-block; height: 0; vertical-align: middle; @@ -293,13 +293,13 @@ exports[`Dropdown.Menu matches the snapshots 1`] = ` .c0 { background-clip: padding-box; background-color: #fff; - border: 1px solid rgba(27,31,35,.15); + border: 1px solid rgba(27,31,35,0.15); border-radius: 4px; - box-shadow: 0 3px 12px rgba(27,31,35,.15); + box-shadow: 0 3px 12px rgba(27,31,35,0.15); left: 0; list-style: none; margin-top: 2px; - padding: 5px 0 5px 0!important; + padding: 5px 0 5px 0 !important; position: absolute; top: 100%; width: 160px; @@ -311,17 +311,18 @@ exports[`Dropdown.Menu matches the snapshots 1`] = ` .c0::before { position: absolute; display: inline-block; - content: ""; + content: ''; } .c0::after { position: absolute; display: inline-block; - content: ""; + content: ''; } .c0::before { border: 8px solid transparent; + border-bottom-color: rgba(27,31,35,0.15); } .c0::after { @@ -365,13 +366,13 @@ exports[`Dropdown.Menu matches the snapshots 2`] = ` .c0 { background-clip: padding-box; background-color: #fff; - border: 1px solid rgba(27,31,35,.15); + border: 1px solid rgba(27,31,35,0.15); border-radius: 4px; - box-shadow: 0 3px 12px rgba(27,31,35,.15); + box-shadow: 0 3px 12px rgba(27,31,35,0.15); left: 0; list-style: none; margin-top: 2px; - padding: 5px 0 5px 0!important; + padding: 5px 0 5px 0 !important; position: absolute; top: 100%; width: 160px; @@ -383,17 +384,18 @@ exports[`Dropdown.Menu matches the snapshots 2`] = ` .c0::before { position: absolute; display: inline-block; - content: ""; + content: ''; } .c0::after { position: absolute; display: inline-block; - content: ""; + content: ''; } .c0::before { border: 8px solid transparent; + border-bottom-color: rgba(27,31,35,0.15); } .c0::after { From 1c2b460ce64bbc832a02de6517e475e0f9bc5327 Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 24 Jan 2019 17:15:36 -0800 Subject: [PATCH 23/27] update docs --- pages/components/docs/Dropdown.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/components/docs/Dropdown.md b/pages/components/docs/Dropdown.md index 07cb7072fe8..aad5606cc08 100644 --- a/pages/components/docs/Dropdown.md +++ b/pages/components/docs/Dropdown.md @@ -10,7 +10,7 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi ## Default example ```.jsx - Hi + Dropdown Item 1 Item 2 From ac3afaa7635ee9cb28a3b03ea031de9ca7987cc7 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 25 Jan 2019 10:37:57 -0800 Subject: [PATCH 24/27] test: add fontStyle tests to Heading and Link --- src/__tests__/Heading.js | 5 +++++ src/__tests__/Link.js | 5 +++++ src/__tests__/Text.js | 6 +++--- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/__tests__/Heading.js b/src/__tests__/Heading.js index 07ac2fd1015..27cc0ce97a7 100644 --- a/src/__tests__/Heading.js +++ b/src/__tests__/Heading.js @@ -82,6 +82,11 @@ describe('Heading', () => { } }) + it('respects the "fontStyle" prop', () => { + expect(render()).toHaveStyleRule('font-style', 'italic') + expect(render()).toHaveStyleRule('font-style', 'normal') + }) + xit('renders fontSize with f* classes using inverse scale', () => { expect(render()).toEqual(render()) expect(render()).toEqual(render()) diff --git a/src/__tests__/Link.js b/src/__tests__/Link.js index 98658a1261e..8c352134fa9 100644 --- a/src/__tests__/Link.js +++ b/src/__tests__/Link.js @@ -29,4 +29,9 @@ describe('Link', () => { it('respects hoverColor prop', () => { expect(render()).toMatchSnapshot() }) + + it('respects the "fontStyle" prop', () => { + expect(render()).toHaveStyleRule('font-style', 'italic') + expect(render()).toHaveStyleRule('font-style', 'normal') + }) }) diff --git a/src/__tests__/Text.js b/src/__tests__/Text.js index 4662470db79..c3037936c23 100644 --- a/src/__tests__/Text.js +++ b/src/__tests__/Text.js @@ -22,7 +22,7 @@ describe('Text', () => { expect(render().type).toEqual('b') }) - it('renders font-size', () => { + it('renders fontSize', () => { for (const fontSize of theme.fontSizes) { expect(render()).toHaveStyleRule('font-size', px(fontSize)) } @@ -51,9 +51,9 @@ describe('Text', () => { expect(render()).toHaveStyleRule('font-weight', '400') }) - it('respects fontStyle', () => { + it('respects the "fontStyle" prop', () => { expect(render()).toHaveStyleRule('font-style', 'italic') - expect(render()).toHaveStyleRule('font-style', 'normal') + expect(render()).toHaveStyleRule('font-style', 'normal') }) it('respects lineHeight', () => { From 08889ba942ec4ea393ebf647b2e8387d862a615d Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 25 Jan 2019 11:45:29 -0800 Subject: [PATCH 25/27] update docs --- pages/components/docs/Dropdown.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/pages/components/docs/Dropdown.md b/pages/components/docs/Dropdown.md index aad5606cc08..9f5f28d3546 100644 --- a/pages/components/docs/Dropdown.md +++ b/pages/components/docs/Dropdown.md @@ -21,13 +21,10 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi ## System props -Dropdown wrapper components get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props. - -Dropdown.Menu, Dropdown.Button, and Dropdown.Item do not get any system props. +Dropdown, Dropdown.Menu, Dropdown.Button, and Dropdown.Item all get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props. ## Component props - #### Dropdown.Menu | Name | Type | Default | Description | | :- | :- | :-: | :- | From d180d2c80683ec67b0e595b5203c0f79a3548d76 Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 25 Jan 2019 12:06:10 -0800 Subject: [PATCH 26/27] add note about shallow merge --- README.md | 4 +++- contributing.md | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2fbe0da1232..ca91d25ac97 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ This will set the `color`, `font-family`, and `line-height` CSS properties to th #### Theming -Components are styled using Primer's theme by default, but you can provide your own theme by using [styled-component's][styled-components] ``. If you'd like to fully replace the Primer theme with your custom theme, pass your theme to the `` in the root of your application like so: +Components are styled using Primer's [theme](https://github.com/primer/components/blob/master/src/theme.js) by default, but you can provide your own theme by using [styled-component's][styled-components] ``. If you'd like to fully replace the Primer [theme](https://github.com/primer/components/blob/master/src/theme.js) with your custom theme, pass your theme to the `` in the root of your application like so: ```jsx import {ThemeProvider} from 'styled-components' @@ -117,6 +117,8 @@ const App = (props) => { } ``` +*Note that using `Object.assign` will only create a shallow merge. This means that if both themes have a `color` object, the _entire_ `color` object will be replaced with the new `color` object, instead of only replacing duplicate values from the original theme's color object. + #### Static CSS rendering If you're rendering React components both server-side _and_ client-side, we suggest following [styled-component's server-side rendering instructions](https://www.styled-components.com/docs/advanced#server-side-rendering) to avoid the flash of unstyled content for server-rendered components. This repo's [documentation template component](https://github.com/primer/components/blob/master/pages/_document.js) demonstrates how to do this in [Next.js]. diff --git a/contributing.md b/contributing.md index 91a2879bbb3..f3e6f78ba99 100644 --- a/contributing.md +++ b/contributing.md @@ -63,7 +63,7 @@ Default values for system props can be set in `Component.defaultProps`. Prop Types from system props such as `COMMON` or `TYPOGRAPHY` as well as styled-system functions can be spread in the component's prop types declaration (see example below). - ⚠️ **Make sure to always set the default `theme` prop to our theme! This allows consumers of our components to access our theme values without a ThemeProvider.** + ⚠️ **Make sure to always set the default `theme` prop to our [theme](https://github.com/primer/components/blob/master/src/theme.js)! This allows consumers of our components to access our theme values without a ThemeProvider.** ```jsx From f53c693af7caa230d8b23031babe4271165e9381 Mon Sep 17 00:00:00 2001 From: Emily Date: Fri, 25 Jan 2019 12:16:13 -0800 Subject: [PATCH 27/27] update version to major version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9e02d064fae..8881901f619 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/components", - "version": "8.2.1-beta", + "version": "9.0.0-beta", "description": "Primer react components", "main": "dist/index.umd.js", "module": "dist/index.esm.js",