docs(spacing-constants): update spacing docs to show how to override …

…space key/values closes Bedrock-Layouts#542
andrewcsin · May 26, 2021 · e77d509 · e77d509
1 parent 0b4ea7b
commit e77d509
Show file tree

Hide file tree

Showing 12 changed files with 275 additions and 268 deletions.
diff --git a/.storybook/pages/Landing.stories.mdx b/.storybook/pages/Landing.stories.mdx
@@ -27,7 +27,7 @@ import { Center } from '@bedrock-layout/center'
 
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-[![Build Status](https://travis-ci.org/Bedrock-Layouts/Bedrock.svg?branch=master)](https://travis-ci.org/Bedrock-Layouts/Bedrock)
+[![Build Status](https://travis-ci.com/Bedrock-Layouts/Bedrock.svg?branch=master)](https://travis-ci.com/Bedrock-Layouts/Bedrock)
 ![GitHub](https://img.shields.io/github/license/Bedrock-Layouts/Bedrock)
 
 </Center>

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-[![Build Status](https://travis-ci.org/Bedrock-Layouts/Bedrock.svg?branch=master)](https://travis-ci.org/Bedrock-Layouts/Bedrock)
+[![Build Status](https://travis-ci.com/Bedrock-Layouts/Bedrock.svg?branch=master)](https://travis-ci.com/Bedrock-Layouts/Bedrock)
 ![GitHub](https://img.shields.io/github/license/Bedrock-Layouts/Bedrock)
 ![GitHub Repo stars](https://img.shields.io/github/stars/Bedrock-Layouts/Bedrock?style=social)
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/appboundary/__tests__/__snapshots__/appboundary.test.js.snap b/packages/appboundary/__tests__/__snapshots__/appboundary.test.js.snap
@@ -17,7 +17,7 @@ exports[`AppBoundary correct usage renders default gutters 1`] = `
   height: 100%;
 }
 
-@supports (max-inline-size: 1920px ) {
+@supports (max-inline-size:1920px) {
   .c1 {
     max-inline-size: var(--maxWidth,1023px);
   }
@@ -49,7 +49,7 @@ exports[`AppBoundary correct usage renders default gutters 1`] = `
 
 exports[`AppBoundary correct usage renders with theme overrides 1`] = `
 .c1 {
-  --maxWidth: 1600px;
+  --maxWidth: 1920px;
   box-sizing: content-box;
   margin-inline-start: auto;
   margin-inline-end: auto;
@@ -64,7 +64,7 @@ exports[`AppBoundary correct usage renders with theme overrides 1`] = `
   height: 100%;
 }
 
-@supports (max-inline-size: 1600px ) {
+@supports (max-inline-size:1920px) {
   .c1 {
     max-inline-size: var(--maxWidth,1023px);
   }

diff --git a/packages/appboundary/src/index.tsx b/packages/appboundary/src/index.tsx
@@ -1,16 +1,13 @@
 import { Center } from "@bedrock-layout/center";
-import { mergeBreakpoints } from "@bedrock-layout/spacing-constants";
 import React from "react";
-import styled, { ThemeContext } from "styled-components";
+import styled from "styled-components";
 
-const safeTheme = { breakPoints: {} };
+const XX_LARGE_BREAKPOINT = 1920;
 
 export const AppBoundary = styled.div.attrs((props) => {
-  const { breakPoints } = React.useContext(ThemeContext) ?? safeTheme;
-  const maxWidth = mergeBreakpoints(breakPoints).xxlarge;
   return {
     "data-bedrock-layout-appboundary": "",
-    children: <Center maxWidth={maxWidth}>{props.children}</Center>,
+    children: <Center maxWidth={XX_LARGE_BREAKPOINT}>{props.children}</Center>,
   };
 })`
   padding: 0;

diff --git a/packages/center/__tests__/__snapshots__/center.test.js.snap b/packages/center/__tests__/__snapshots__/center.test.js.snap
@@ -10,7 +10,7 @@ exports[`Center correct usage renders custom width 1`] = `
   max-inline-size: 1023px;
 }
 
-@supports (max-inline-size: 320px ) {
+@supports (max-inline-size:320px) {
   .c0 {
     max-inline-size: var(--maxWidth,1023px);
   }
@@ -45,7 +45,7 @@ exports[`Center correct usage renders custom width as string 1`] = `
   max-inline-size: 1023px;
 }
 
-@supports (max-inline-size: 320px ) {
+@supports (max-inline-size:320px) {
   .c0 {
     max-inline-size: var(--maxWidth,1023px);
   }
@@ -80,7 +80,7 @@ exports[`Center correct usage renders default width 1`] = `
   max-inline-size: 1023px;
 }
 
-@supports (max-inline-size: 1023px ) {
+@supports (max-inline-size:1023px) {
   .c0 {
     max-inline-size: var(--maxWidth,1023px);
   }
@@ -115,7 +115,7 @@ exports[`Center correct usage renders default width if invalid CSS length 1`] =
   max-inline-size: 1023px;
 }
 
-@supports (max-inline-size: 320pixels ) {
+@supports (max-inline-size:320pixels) {
   .c0 {
     max-inline-size: var(--maxWidth,1023px);
   }
@@ -161,7 +161,7 @@ exports[`Center correct usage renders with centered children 1`] = `
   align-items: center;
 }
 
-@supports (max-inline-size: 1023px ) {
+@supports (max-inline-size:1023px) {
   .c0 {
     max-inline-size: var(--maxWidth,1023px);
   }
@@ -197,7 +197,7 @@ exports[`Center correct usage renders with centered text 1`] = `
   text-align: center;
 }
 
-@supports (max-inline-size: 1023px ) {
+@supports (max-inline-size:1023px) {
   .c0 {
     max-inline-size: var(--maxWidth,1023px);
   }
@@ -224,15 +224,15 @@ exports[`Center correct usage renders with centered text 1`] = `
 
 exports[`Center correct usage renders with theme overrides 1`] = `
 .c0 {
-  --maxWidth: 1600px;
+  --maxWidth: 1023px;
   box-sizing: content-box;
   margin-inline-start: auto;
   margin-inline-end: auto;
   margin-inline: auto;
   max-inline-size: 1023px;
 }
 
-@supports (max-inline-size: 1600px ) {
+@supports (max-inline-size:1023px) {
   .c0 {
     max-inline-size: var(--maxWidth,1023px);
   }
@@ -267,7 +267,7 @@ exports[`Center incorrect usage renders default with console error with no child
   max-inline-size: 1023px;
 }
 
-@supports (max-inline-size: 1023px ) {
+@supports (max-inline-size:1023px) {
   .c0 {
     max-inline-size: var(--maxWidth,1023px);
   }

diff --git a/packages/center/src/index.tsx b/packages/center/src/index.tsx
@@ -1,24 +1,19 @@
-import { mergeBreakpoints } from "@bedrock-layout/spacing-constants";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 
+const MEDIUM_BREAKPOINT = "1023px";
 export interface CenterProps {
   maxWidth?: number | string;
   centerText?: boolean;
   centerChildren?: boolean;
 }
 
-function getSafeMaxWidth(
-  breakPoints: Record<string, unknown>,
-  maxWidth?: number | string
-) {
+function getSafeMaxWidth(maxWidth?: number | string) {
   if (typeof maxWidth === "string") {
     return maxWidth;
   }
 
-  return typeof maxWidth === "number"
-    ? `${maxWidth}px`
-    : mergeBreakpoints(breakPoints).medium + "px";
+  return typeof maxWidth === "number" ? `${maxWidth}px` : MEDIUM_BREAKPOINT;
 }
 
 export const Center = styled.div.attrs<CenterProps>(() => {
@@ -29,25 +24,20 @@ export const Center = styled.div.attrs<CenterProps>(() => {
   @property --maxWidth {
     syntax: "<length-percentage>";
     inherits: false;
-    initial-value: 1023px;
+    initial-value: ${MEDIUM_BREAKPOINT};
   }
-  --maxWidth: ${({ maxWidth, theme: { breakPoints } }) =>
-    getSafeMaxWidth(breakPoints, maxWidth)};
+  --maxWidth: ${({ maxWidth }) => getSafeMaxWidth(maxWidth)};
 
   box-sizing: content-box;
 
   margin-inline-start: auto;
   margin-inline-end: auto;
   margin-inline: auto;
 
-  max-inline-size: 1023px;
+  max-inline-size: ${MEDIUM_BREAKPOINT};
 
-  @supports (
-    max-inline-size:
-      ${({ maxWidth, theme: { breakPoints } }) =>
-        getSafeMaxWidth(breakPoints, maxWidth)}
-  ) {
-    max-inline-size: var(--maxWidth, 1023px);
+  @supports (max-inline-size: ${({ maxWidth }) => getSafeMaxWidth(maxWidth)}) {
+    max-inline-size: var(--maxWidth, ${MEDIUM_BREAKPOINT});
   }
 
   ${(props) => (props.centerText ? "text-align: center;" : "")}