From f3e531dbd813268828bcd519b22b3e56202a53da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Ramos?= Date: Thu, 25 May 2017 15:59:58 +0100 Subject: [PATCH] feat(cp-frontend,ui-toolkit): style inheritance using `.extend` (#458) styled-components@2 exposes a new `.extend`[1] API. It is less problematic than styled(Parent). [1]: https://www.styled-components.com/docs/basics#extending-styles --- packages/cp-frontend/src/components/layout/container.js | 2 +- .../cp-frontend/src/components/navigation/breadcrumb.js | 2 +- packages/cp-frontend/src/components/navigation/header.js | 2 +- packages/cp-frontend/src/components/navigation/menu.js | 4 ++-- packages/cp-frontend/src/containers/services/menu.js | 6 +++--- packages/ui-toolkit/src/anchor/index.js | 2 +- packages/ui-toolkit/src/baseline/index.js | 6 +++--- packages/ui-toolkit/src/button/index.js | 4 ++-- packages/ui-toolkit/src/card/card.js | 2 +- packages/ui-toolkit/src/card/description.js | 2 +- packages/ui-toolkit/src/card/group-view.js | 2 +- packages/ui-toolkit/src/card/header.js | 2 +- packages/ui-toolkit/src/card/meta.js | 2 +- packages/ui-toolkit/src/card/options.js | 4 ++-- packages/ui-toolkit/src/card/outlet.js | 2 +- packages/ui-toolkit/src/card/subtitle.js | 2 +- packages/ui-toolkit/src/card/view.js | 2 +- packages/ui-toolkit/src/form/base/toggle.js | 2 +- packages/ui-toolkit/src/form/fieldset.js | 2 +- packages/ui-toolkit/src/form/label.js | 2 +- packages/ui-toolkit/src/form/legend.js | 2 +- packages/ui-toolkit/src/form/meta.js | 2 +- packages/ui-toolkit/src/form/toggle.js | 2 +- packages/ui-toolkit/src/styleguide/wrapper.js | 2 +- packages/ui-toolkit/src/text/headings.js | 2 +- packages/ui-toolkit/src/text/small.js | 2 +- packages/ui-toolkit/src/theme/colors.js | 2 +- packages/ui-toolkit/src/topology/index.js | 2 +- 28 files changed, 35 insertions(+), 35 deletions(-) diff --git a/packages/cp-frontend/src/components/layout/container.js b/packages/cp-frontend/src/components/layout/container.js index 7d3092df..2dbd68ad 100644 --- a/packages/cp-frontend/src/components/layout/container.js +++ b/packages/cp-frontend/src/components/layout/container.js @@ -3,7 +3,7 @@ import { Grid } from 'react-styled-flexboxgrid'; import { breakpoints } from 'joyent-ui-toolkit'; -export default styled(Grid)` +export default Grid.extend` padding: 2rem; ${breakpoints.large` diff --git a/packages/cp-frontend/src/components/navigation/breadcrumb.js b/packages/cp-frontend/src/components/navigation/breadcrumb.js index 76032c90..a5881334 100644 --- a/packages/cp-frontend/src/components/navigation/breadcrumb.js +++ b/packages/cp-frontend/src/components/navigation/breadcrumb.js @@ -14,7 +14,7 @@ const StyledDiv = styled.div` margin-bottom: ${remcalc(18)}; `; -const StyledH2 = styled(H2)` +const StyledH2 = H2.extend` color: ${props => props.theme.primary}; margin: 0; `; diff --git a/packages/cp-frontend/src/components/navigation/header.js b/packages/cp-frontend/src/components/navigation/header.js index a2dcec24..31efca04 100644 --- a/packages/cp-frontend/src/components/navigation/header.js +++ b/packages/cp-frontend/src/components/navigation/header.js @@ -13,7 +13,7 @@ const StyledHeader = styled.div` padding: ${unitcalc(2.5)} ${unitcalc(3)} ${unitcalc(2)} ${unitcalc(3)}; `; -const StyledLogo = styled(Img)` +const StyledLogo = Img.extend` width: ${remcalc(87)}; height: ${remcalc(25)}; `; diff --git a/packages/cp-frontend/src/components/navigation/menu.js b/packages/cp-frontend/src/components/navigation/menu.js index 1cd0c966..6eb9855a 100644 --- a/packages/cp-frontend/src/components/navigation/menu.js +++ b/packages/cp-frontend/src/components/navigation/menu.js @@ -9,11 +9,11 @@ import remcalc from 'remcalc'; import { breakpoints, Ul, Li } from 'joyent-ui-toolkit'; import { LayoutContainer } from '@components/layout'; -const StyledHorizontalList = styled(Ul)` +const StyledHorizontalList = Ul.extend` padding: 0; `; -const StyledHorizontalListItem = styled(Li)` +const StyledHorizontalListItem = Li.extend` ${breakpoints.smallOnly` display: block; `} diff --git a/packages/cp-frontend/src/containers/services/menu.js b/packages/cp-frontend/src/containers/services/menu.js index d89f3607..37b70932 100644 --- a/packages/cp-frontend/src/containers/services/menu.js +++ b/packages/cp-frontend/src/containers/services/menu.js @@ -20,17 +20,17 @@ import { // import { servicesForTopologySelector } from '@state/selectors'; -const StyledLegend = styled(Legend)` +const StyledLegend = Legend.extend` float: left; padding-top: ${unitcalc(2)}; margin-right: ${unitcalc(1.5)}; `; -const PaddedRow = styled(Row)` +const PaddedRow = Row.extend` margin-bottom: ${remcalc(18)} `; -const StyledForm = styled(FormGroup)` +const StyledForm = FormGroup.extend` width: 60%; float: left; margin: 0; diff --git a/packages/ui-toolkit/src/anchor/index.js b/packages/ui-toolkit/src/anchor/index.js index 2b5d6b8e..a2459b09 100644 --- a/packages/ui-toolkit/src/anchor/index.js +++ b/packages/ui-toolkit/src/anchor/index.js @@ -15,7 +15,7 @@ const style = css` `} `; -const StyledAnchor = styled(A)` +const StyledAnchor = A.extend` ${style} `; diff --git a/packages/ui-toolkit/src/baseline/index.js b/packages/ui-toolkit/src/baseline/index.js index eb7b677c..d5c94bf7 100644 --- a/packages/ui-toolkit/src/baseline/index.js +++ b/packages/ui-toolkit/src/baseline/index.js @@ -28,6 +28,6 @@ const unitsFromProps = props => ) .join(';\n'); -export default Component => styled(Component)` - ${unitsFromProps} -`; +export default Component => Component.extend + ? Component.extend`${unitsFromProps}` + : styled(Component)`${unitsFromProps}`; diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js index af0d6394..eaa0f10a 100644 --- a/packages/ui-toolkit/src/button/index.js +++ b/packages/ui-toolkit/src/button/index.js @@ -148,7 +148,7 @@ const style = css` `} `; -const StyledButton = styled(NButton)` +const StyledButton = NButton.extend` min-width: ${remcalc(120)}; ${style} @@ -157,7 +157,7 @@ const StyledButton = styled(NButton)` } `; -const StyledAnchor = styled(A)` +const StyledAnchor = A.extend` display: inline-block; ${style} `; diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js index d9ae880c..c4c84191 100644 --- a/packages/ui-toolkit/src/card/card.js +++ b/packages/ui-toolkit/src/card/card.js @@ -9,7 +9,7 @@ import { Row } from 'react-styled-flexboxgrid'; import PropTypes from 'prop-types'; import React from 'react'; -const StyledCard = styled(Row)` +const StyledCard = Row.extend` position: relative; height: auto; min-height: ${remcalc(126)}; diff --git a/packages/ui-toolkit/src/card/description.js b/packages/ui-toolkit/src/card/description.js index fe939d0e..ae080b89 100644 --- a/packages/ui-toolkit/src/card/description.js +++ b/packages/ui-toolkit/src/card/description.js @@ -8,7 +8,7 @@ import PropTypes from 'prop-types'; import Title from './title'; import React from 'react'; -const StyledTitle = styled(Title)` +const StyledTitle = Title.extend` ${typography.fontFamily}; ${typography.normal}; diff --git a/packages/ui-toolkit/src/card/group-view.js b/packages/ui-toolkit/src/card/group-view.js index 35f15016..4a69be7a 100644 --- a/packages/ui-toolkit/src/card/group-view.js +++ b/packages/ui-toolkit/src/card/group-view.js @@ -4,7 +4,7 @@ import Baseline from '../baseline'; import View from './view'; import React from 'react'; -const StyledView = styled(View)` +const StyledView = View.extend` display: block; padding: ${remcalc(62, 23, 5, 23)}; background-color: ${props => props.grey}; diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js index bba9aac4..ddda2ace 100644 --- a/packages/ui-toolkit/src/card/header.js +++ b/packages/ui-toolkit/src/card/header.js @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'; import Baseline from '../baseline'; import Card from './card'; -const StyledCard = styled(Card)` +const StyledCard = Card.extend` position: absolute; background-color: ${props => props.theme.primary}; diff --git a/packages/ui-toolkit/src/card/meta.js b/packages/ui-toolkit/src/card/meta.js index e069b5a8..677bb135 100644 --- a/packages/ui-toolkit/src/card/meta.js +++ b/packages/ui-toolkit/src/card/meta.js @@ -8,7 +8,7 @@ import PropTypes from 'prop-types'; import View from './view'; import React from 'react'; -const InnerRow = styled(Row)` +const InnerRow = Row.extend` display: block; height: 100%; diff --git a/packages/ui-toolkit/src/card/options.js b/packages/ui-toolkit/src/card/options.js index 07fa3a32..0efdfa40 100644 --- a/packages/ui-toolkit/src/card/options.js +++ b/packages/ui-toolkit/src/card/options.js @@ -8,7 +8,7 @@ import PropTypes from 'prop-types'; import Button from '../button'; import React from 'react'; -const StyledNav = styled(Nav)` +const StyledNav = Nav.extend` flex: 0 0 ${remcalc(47)}; border-left: ${remcalc(1)} solid ${props => props.theme.grey}; box-sizing: border-box; @@ -18,7 +18,7 @@ const StyledNav = styled(Nav)` `}; `; -const StyledButton = styled(Button)` +const StyledButton = Button.extend` position: relative; border-width: 0; box-shadow: none; diff --git a/packages/ui-toolkit/src/card/outlet.js b/packages/ui-toolkit/src/card/outlet.js index 4cac77cc..ab3f2f6e 100644 --- a/packages/ui-toolkit/src/card/outlet.js +++ b/packages/ui-toolkit/src/card/outlet.js @@ -8,7 +8,7 @@ import styled from 'styled-components'; import PropTypes from 'prop-types'; import React from 'react'; -const StyledCol = styled(Col)` +const StyledCol = Col.extend` ${typography.fontFamily}; ${typography.normal}; diff --git a/packages/ui-toolkit/src/card/subtitle.js b/packages/ui-toolkit/src/card/subtitle.js index 009b3f4f..eb477f7f 100644 --- a/packages/ui-toolkit/src/card/subtitle.js +++ b/packages/ui-toolkit/src/card/subtitle.js @@ -29,7 +29,7 @@ const Span = styled.span` `}; `; -const StyledTitle = styled(Title)` +const StyledTitle = Title.extend` display: inline-block; padding: 0 ${remcalc(18)}; diff --git a/packages/ui-toolkit/src/card/view.js b/packages/ui-toolkit/src/card/view.js index 34d6bfdb..dc3badb2 100644 --- a/packages/ui-toolkit/src/card/view.js +++ b/packages/ui-toolkit/src/card/view.js @@ -7,7 +7,7 @@ import { Row } from 'react-styled-flexboxgrid'; import PropTypes from 'prop-types'; import React from 'react'; -const StyledView = styled(Row)` +const StyledView = Row.extend` flex: 1; margin: 0; height: auto; diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js index 1831eec6..e64f4457 100644 --- a/packages/ui-toolkit/src/form/base/toggle.js +++ b/packages/ui-toolkit/src/form/base/toggle.js @@ -9,7 +9,7 @@ import unitcalc from 'unitcalc'; import is from 'styled-is'; import rndId from 'rnd-id'; -const StyledInput = styled(Input)` +const StyledInput = Input.extend` display: none; &:checked + label::after { diff --git a/packages/ui-toolkit/src/form/fieldset.js b/packages/ui-toolkit/src/form/fieldset.js index 92533056..ec23cbb6 100644 --- a/packages/ui-toolkit/src/form/fieldset.js +++ b/packages/ui-toolkit/src/form/fieldset.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; import { Fieldset } from 'normalized-styled-components'; import Baseline from '../baseline'; -const StyledFieldset = styled(Fieldset)` +const StyledFieldset = Fieldset.extend` display: inline-block; margin: 0; padding: 0; diff --git a/packages/ui-toolkit/src/form/label.js b/packages/ui-toolkit/src/form/label.js index 925fcd70..1f76db60 100644 --- a/packages/ui-toolkit/src/form/label.js +++ b/packages/ui-toolkit/src/form/label.js @@ -4,7 +4,7 @@ import styled from 'styled-components'; import remcalc from 'remcalc'; import Label from '../label'; -const StyledLabel = styled(Label)` +const StyledLabel = Label.extend` margin-right: ${remcalc(12)}; `; diff --git a/packages/ui-toolkit/src/form/legend.js b/packages/ui-toolkit/src/form/legend.js index 5554313f..00ed9348 100644 --- a/packages/ui-toolkit/src/form/legend.js +++ b/packages/ui-toolkit/src/form/legend.js @@ -3,7 +3,7 @@ import { Legend } from 'normalized-styled-components'; import Baseline from '../baseline'; import typography from '../typography'; -const StyledLegend = styled(Legend)` +const StyledLegend = Legend.extend` ${typography.fontFamily}; ${typography.semibold}; `; diff --git a/packages/ui-toolkit/src/form/meta.js b/packages/ui-toolkit/src/form/meta.js index 9a2e81ae..254049f4 100644 --- a/packages/ui-toolkit/src/form/meta.js +++ b/packages/ui-toolkit/src/form/meta.js @@ -7,7 +7,7 @@ import Label from '../label'; import PropTypes from 'prop-types'; import React from 'react'; -const StyledLabel = styled(Label)` +const StyledLabel = Label.extend` ${breakpoints.medium` text-align: right; `}; diff --git a/packages/ui-toolkit/src/form/toggle.js b/packages/ui-toolkit/src/form/toggle.js index ca97454d..e03c5940 100644 --- a/packages/ui-toolkit/src/form/toggle.js +++ b/packages/ui-toolkit/src/form/toggle.js @@ -11,7 +11,7 @@ import Baseline from '../baseline'; import BaseInput from './base/input'; import typography from '../typography'; -const StyledInput = styled(Input)` +const StyledInput = Input.extend` display: none; &:checked + label { diff --git a/packages/ui-toolkit/src/styleguide/wrapper.js b/packages/ui-toolkit/src/styleguide/wrapper.js index f787350f..46c5c7ea 100644 --- a/packages/ui-toolkit/src/styleguide/wrapper.js +++ b/packages/ui-toolkit/src/styleguide/wrapper.js @@ -3,7 +3,7 @@ import styled, { ThemeProvider, injectGlobal } from 'styled-components'; import theme from '../theme'; import Base, { global } from '../base'; -const StyledBase = styled(Base)` +const StyledBase = Base.extend` background-color: transparent; `; diff --git a/packages/ui-toolkit/src/text/headings.js b/packages/ui-toolkit/src/text/headings.js index 480a0760..72bd737b 100644 --- a/packages/ui-toolkit/src/text/headings.js +++ b/packages/ui-toolkit/src/text/headings.js @@ -3,7 +3,7 @@ import { H1 as NH1 } from 'normalized-styled-components'; import remcalc from 'remcalc'; import typography from '../typography'; -export const H1 = styled(NH1)` +export const H1 = NH1.extend` ${typography.fontFamily}; ${typography.medium}; diff --git a/packages/ui-toolkit/src/text/small.js b/packages/ui-toolkit/src/text/small.js index bc1a93dd..2a82f750 100644 --- a/packages/ui-toolkit/src/text/small.js +++ b/packages/ui-toolkit/src/text/small.js @@ -3,7 +3,7 @@ import { Small } from 'normalized-styled-components'; import remcalc from 'remcalc'; import typography from '../typography'; -export default styled(Small)` +export default Small.extend` ${typography.fontFamily}; ${typography.normal}; diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js index 1e1b0389..bba9c980 100644 --- a/packages/ui-toolkit/src/theme/colors.js +++ b/packages/ui-toolkit/src/theme/colors.js @@ -31,7 +31,7 @@ const Preview = styled.div` width: 100%; `; -const Paragraph = styled(P)` +const Paragraph = P.extend` margin: 0; `; diff --git a/packages/ui-toolkit/src/topology/index.js b/packages/ui-toolkit/src/topology/index.js index 8beb535f..e309da77 100644 --- a/packages/ui-toolkit/src/topology/index.js +++ b/packages/ui-toolkit/src/topology/index.js @@ -11,7 +11,7 @@ import TopologyLink from './link'; import TopologyLinkArrow from './link/arrow'; import { calculateLineLayout } from './link/functions'; -const StyledSvg = styled(Svg)` +const StyledSvg = Svg.extend` width: 100%; height: 1400px; `;