Fix responsive styles when using custom breakpoints (#1282)

apps/docs/src/NavLink.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import NextLink from 'next/link'
-import { space, color } from 'styled-system'
+import { space, color, compose } from 'styled-system'
 import { createTheme } from 'pcln-design-system'
 import { withDocs } from 'mdx-docs'
 import isAbsoluteURL from 'is-absolute-url'
@@ -12,7 +12,7 @@ const Base = styled.a`
   display: block;
   text-decoration: none;
   font-size: ${theme.fontSizes['2']}px;
-  ${space} ${color} &:hover {
+  &:hover {
     color: ${theme.colors.text};
   }
   &.active {
@@ -22,6 +22,8 @@ const Base = styled.a`
     margin-left: -16px;
     padding-left: 28px;
   }
+
+  ${(props) => compose(space, color)(props)}
 `
 Base.defaultProps = {
   pl: 3,

common/changes/pcln-design-system/fix-responsive-styles_2023-03-21-16-22.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Fix bug when using customBreakpoints with responsive style props",
+      "type": "patch",
+      "packageName": "pcln-design-system"
+    }
+  ],
+  "packageName": "pcln-design-system",
+  "email": "craig.palermo@priceline.com"
+}

common/changes/pcln-icons/fix-responsive-styles_2023-03-21-16-22.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Fix bug when using customBreakpoints with responsive style props",
+      "type": "patch",
+      "packageName": "pcln-icons"
+    }
+  ],
+  "packageName": "pcln-icons",
+  "email": "craig.palermo@priceline.com"
+}

common/changes/pcln-modal/fix-responsive-styles_2023-03-21-16-22.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Fix bug when using customBreakpoints with responsive style props",
+      "type": "patch",
+      "packageName": "pcln-modal"
+    }
+  ],
+  "packageName": "pcln-modal",
+  "email": "craig.palermo@priceline.com"
+}

common/changes/pcln-popover/fix-responsive-styles_2023-03-21-16-22.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Fix bug when using customBreakpoints with responsive style props",
+      "type": "patch",
+      "packageName": "pcln-popover"
+    }
+  ],
+  "packageName": "pcln-popover",
+  "email": "craig.palermo@priceline.com"
+}

packages/core/src/Absolute/Absolute.tsx

@@ -1,12 +1,12 @@
 import styled from 'styled-components'
-import { top, right, bottom, left, zIndex } from 'styled-system'
+import { top, right, bottom, left, zIndex, compose } from 'styled-system'
 
 import { Box } from '../Box'
 
 const Absolute = styled(Box)`
   position: absolute;
-  ${top} ${bottom} ${left} ${right}
-  ${zIndex}
+
+  ${(props) => compose(top, bottom, left, right, zIndex)(props)}
 `
 
 Absolute.propTypes = {

packages/core/src/Avatar/__snapshots__/Avatar.spec.tsx.snap

@@ -14,12 +14,12 @@ exports[`Avatar renders default 1`] = `
 }
 
 .c1 {
-  min-width: 40px;
+  background-color: #0068ef;
+  color: #fff;
   width: 40px;
   height: 40px;
+  min-width: 40px;
   padding: 8px;
-  background-color: #0068ef;
-  color: #fff;
 }
 
 .c0 {
@@ -79,12 +79,12 @@ exports[`Avatar renders default 1`] = `
 
 exports[`Avatar renders initials 1`] = `
 .c1 {
-  min-width: 40px;
+  background-color: #0068ef;
+  color: #fff;
   width: 40px;
   height: 40px;
+  min-width: 40px;
   padding: 8px;
-  background-color: #0068ef;
-  color: #fff;
 }
 
 .c0 {
@@ -139,12 +139,12 @@ exports[`Avatar renders initials 1`] = `
 exports[`Avatar renders mr elon 1`] = `
 <DocumentFragment>
   .c2 {
-  min-width: 40px;
+  background-color: #0068ef;
+  color: #fff;
   width: 40px;
   height: 40px;
+  min-width: 40px;
   padding: 8px;
-  background-color: #0068ef;
-  color: #fff;
 }
 
 .c4 {
@@ -163,13 +163,13 @@ exports[`Avatar renders mr elon 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
 }
 
 .c6 {

packages/core/src/BackgroundImage/BackgroundImage.tsx

@@ -1,7 +1,15 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
 import PropTypes from 'prop-types'
-import { width, height, borderRadius, WidthProps, HeightProps, BorderRadiusProps } from 'styled-system'
+import {
+  width,
+  height,
+  borderRadius,
+  WidthProps,
+  HeightProps,
+  BorderRadiusProps,
+  compose,
+} from 'styled-system'
 import propTypes from '@styled-system/prop-types'
 import {
   getPaletteColor,
@@ -50,7 +58,9 @@ const BackgroundImage: React.FC<IBackgroundImageProps> = styled.div.attrs(border
   background-repeat: no-repeat;
   background-color: ${getPaletteColor('border.light')};
   ${applyVariations('BackgroundImage', variations)}
-  ${image} ${height} ${width} ${borderRadius};
+  ${image} 
+
+  ${(props) => compose(height, width, borderRadius)(props)}
 `
 
 BackgroundImage.propTypes = backgroundImagePropTypes

packages/core/src/Badge/Badge.tsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
 import themeGet from '@styled-system/theme-get'
 import { applySizes, applyVariations, color, deprecatedColorValue, borderRadiusAttrs } from '../utils'
-import { space, borderRadius, SpaceProps } from 'styled-system'
+import { space, borderRadius, SpaceProps, compose } from 'styled-system'
 
 const type = (props) => {
   const badgeColors = {
@@ -70,9 +70,9 @@ const Badge: React.FC<IBadgeProps> = styled.div.attrs(borderRadiusAttrs)`
   letter-spacing: ${themeGet('letterSpacings.caps')};
   ${({ theme }) => applySizes(sizes, undefined, theme.mediaQueries)};
   ${applyVariations('Badge')};
-  ${space} ${type} ${color};
+  ${type} ${color};
 
-  ${borderRadius}
+  ${(props) => compose(space, borderRadius)(props)}
 `
 
 Badge.displayName = 'Badge'

packages/core/src/Badge/__snapshots__/Badge.spec.tsx.snap

@@ -17,13 +17,13 @@ exports[`Badge bg blue sets background-color and color 1`] = `
   letter-spacing: 0.025em;
   text-transform: uppercase;
   line-height: 1.4;
+  background-color: #0068ef;
+  color: #fff;
+  background-color: #0068ef;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
-  background-color: #0068ef;
-  color: #fff;
-  background-color: #0068ef;
   border-radius: 9999px;
 }
 
@@ -50,13 +50,13 @@ exports[`Badge bg green sets background-color and color 1`] = `
   letter-spacing: 0.025em;
   text-transform: uppercase;
   line-height: 1.4;
+  background-color: #0a0;
+  color: #fff;
+  background-color: #0a0;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
-  background-color: #0a0;
-  color: #fff;
-  background-color: #0a0;
   border-radius: 9999px;
 }
 
@@ -83,13 +83,13 @@ exports[`Badge bg lightBlue sets background-color and color 1`] = `
   letter-spacing: 0.025em;
   text-transform: uppercase;
   line-height: 1.4;
+  background-color: #e8f2ff;
+  color: #049;
+  background-color: #e8f2ff;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
-  background-color: #e8f2ff;
-  color: #049;
-  background-color: #e8f2ff;
   border-radius: 9999px;
 }
 
@@ -116,13 +116,13 @@ exports[`Badge bg lightGreen sets background-color and color 1`] = `
   letter-spacing: 0.025em;
   text-transform: uppercase;
   line-height: 1.4;
+  background-color: #ecf7ec;
+  color: #060;
+  background-color: #ecf7ec;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
-  background-color: #ecf7ec;
-  color: #060;
-  background-color: #ecf7ec;
   border-radius: 9999px;
 }
 
@@ -149,13 +149,13 @@ exports[`Badge bg lightRed sets background-color and color 1`] = `
   letter-spacing: 0.025em;
   text-transform: uppercase;
   line-height: 1.4;
+  background-color: #fbebeb;
+  color: #800;
+  background-color: #fbebeb;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
-  background-color: #fbebeb;
-  color: #800;
-  background-color: #fbebeb;
   border-radius: 9999px;
 }
 
@@ -182,13 +182,13 @@ exports[`Badge bg orange sets background-color and color 1`] = `
   letter-spacing: 0.025em;
   text-transform: uppercase;
   line-height: 1.4;
+  background-color: #f68013;
+  color: #001833;
+  background-color: #f68013;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
-  background-color: #f68013;
-  color: #001833;
-  background-color: #f68013;
   border-radius: 9999px;
 }
 
@@ -215,13 +215,13 @@ exports[`Badge bg red sets background-color and color 1`] = `
   letter-spacing: 0.025em;
   text-transform: uppercase;
   line-height: 1.4;
+  background-color: #c00;
+  color: #fff;
+  background-color: #c00;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
-  background-color: #c00;
-  color: #fff;
-  background-color: #c00;
   border-radius: 9999px;
 }
 
@@ -248,12 +248,12 @@ exports[`Badge can escape preset: bg lightBlue sets background-color and color t
   letter-spacing: 0.025em;
   text-transform: uppercase;
   line-height: 1.4;
+  background-color: #e8f2ff;
+  color: #001833;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
-  background-color: #e8f2ff;
-  color: #001833;
   border-radius: 9999px;
 }
 
@@ -281,12 +281,12 @@ exports[`Badge non-preset: bg text sets background-color and color white sets co
   letter-spacing: 0.025em;
   text-transform: uppercase;
   line-height: 1.4;
+  background-color: #001833;
+  color: #fff;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
-  background-color: #001833;
-  color: #fff;
   border-radius: 9999px;
 }
 
@@ -314,12 +314,12 @@ exports[`Badge renders 1`] = `
   letter-spacing: 0.025em;
   text-transform: uppercase;
   line-height: 1.4;
+  background-color: #f4f6f8;
+  color: #001833;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
-  background-color: #f4f6f8;
-  color: #001833;
   border-radius: 9999px;
 }
 
@@ -341,12 +341,12 @@ exports[`Badge renders small 1`] = `
   font-weight: 700;
   line-height: 1.4;
   line-height: 1.25;
+  background-color: #f4f6f8;
+  color: #001833;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
-  background-color: #f4f6f8;
-  color: #001833;
   border-radius: 9999px;
 }