@atlaskit/page - npm Package Compare versions

Comparing version 12.1.1 to 12.1.2

CHANGELOG.md

 # @atlaskit/page
 
+## 12.1.2
+
+### Patch Changes
+
+- [`b3ea181f8ed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3ea181f8ed) - Regressions in version `12.1.0` have been fixed:
+
+  - Move to CSS `gap` has been reverted, as some use cases were not properly handled.
+  - The `theme` prop has been re-introduced, mapping to the new props introduced in `12.1.0`.
+
+  This version should be properly minor compatible with version `12.0.7`.
+
 ## 12.1.1
@@ -4,0 +15,0 @@

dist/cjs/constants.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.varColumnsNum = exports.varColumnSpan = exports.spacingMapping = exports.defaultSpacing = exports.defaultMedium = exports.defaultLayout = exports.defaultGridSize = exports.defaultGridColumns = exports.defaultGridColumnWidth = exports.defaultBannerHeight = void 0;
+exports.varGridSpacing = exports.varColumnsNum = exports.varColumnSpan = exports.spacingMapping = exports.defaultSpacing = exports.defaultMedium = exports.defaultLayout = exports.defaultGridSize = exports.defaultGridColumns = exports.defaultGridColumnWidth = exports.defaultBannerHeight = void 0;
 var defaultGridSize = 8;
@@ -28,6 +28,20 @@ exports.defaultGridSize = defaultGridSize;
 var defaultLayout = 'fixed';
+/**
+ * The number of available columns in each row.
+ */
+
 exports.defaultLayout = defaultLayout;
 var varColumnsNum = '--ds-columns-num';
+/**
+ * The number of columns that a `GridColumn` covers.
+ */
+
 exports.varColumnsNum = varColumnsNum;
 var varColumnSpan = '--ds-column-span';
-exports.varColumnSpan = varColumnSpan;
+/**
+ * The spacing (in `px`) between each column.
+ */
+
+exports.varColumnSpan = varColumnSpan;
+var varGridSpacing = '--ds-grid-spacing';
+exports.varGridSpacing = varGridSpacing;

dist/cjs/grid-column.js

@@ -20,43 +20,38 @@ "use strict";
 
-/** @jsx jsx */
-// IE11 and Edge both have rounding issues for flexbox which is why a width of
-// 99.9999% is used. Using 100% here causes columns to wrap prematurely.
-var divisibleFullWidth = '99.9999%';
+var _gridColumnWidthStyle;
+
 /**
- * Sets flex basis to occupy the specified number of columns.
+ * Determines the method by which column width is calculated.
  */
+var ColumnVariant;
 
-var getGridColumnSpanStyles = function getGridColumnSpanStyles(spacing) {
-  var gap = "".concat(_constants.spacingMapping[spacing], "px");
-  /**
-   * We need to add the gap here to get the same results as before
-   * because of how gaps were emulated with margins.
-   *
-   * Before the margins on the edges could extend past the edges
-   * of the container, while still contributing to width calculations.
-   */
+(function (ColumnVariant) {
+  ColumnVariant["Auto"] = "auto";
+  ColumnVariant["Bounded"] = "bounded";
+  ColumnVariant["FullWidth"] = "fullWidth";
+})(ColumnVariant || (ColumnVariant = {}));
 
-  var availableWidth = "(".concat(divisibleFullWidth, " + ").concat(gap, ")");
-  var singleColumnWidth = "".concat(availableWidth, " / var(").concat(_constants.varColumnsNum, ")");
-  return (0, _core.css)({
-    minWidth: "calc(".concat(singleColumnWidth, " - ").concat(gap, ")"),
-    maxWidth: "calc(".concat(singleColumnWidth, " *  var(").concat(_constants.varColumnSpan, ") - ").concat(gap, ")"),
-    flexBasis: "100%"
-  });
+var getVariant = function getVariant(_ref) {
+  var medium = _ref.medium,
+      columns = _ref.columns;
+
+  if (medium === _constants.defaultMedium) {
+    return ColumnVariant.Auto;
+  } else if (medium < columns) {
+    return ColumnVariant.Bounded;
+  }
+
+  return ColumnVariant.FullWidth;
 };
+/**
+ * IE11 and Edge both have rounding issues for flexbox which is why a width of
+ * 99.9999% is used. Using 100% here causes columns to wrap prematurely.
+ */
 
-var gridColumnSpanStyles = {
-  cosy: getGridColumnSpanStyles('cosy'),
-  comfortable: getGridColumnSpanStyles('comfortable'),
-  compact: getGridColumnSpanStyles('compact'),
-  fullWidth: (0, _core.css)({
-    maxWidth: '100%',
-    flexBasis: '100%'
-  }),
-  fillAvailable: (0, _core.css)({
-    maxWidth: '100%',
-    flexBasis: 'auto'
-  })
-};
+
+var availableWidth = '99.9999%';
+var singleColumnWidth = "(".concat(availableWidth, " / var(").concat(_constants.varColumnsNum, "))");
 var gridColumnStyles = (0, _core.css)({
+  minWidth: "calc(".concat(singleColumnWidth, " - var(").concat(_constants.varGridSpacing, "))"),
+  margin: "0 calc(var(".concat(_constants.varGridSpacing, ") / 2)"),
   flexGrow: 1,
@@ -66,2 +61,12 @@ flexShrink: 0,
 });
+var gridColumnWidthStyles = (_gridColumnWidthStyle = {}, (0, _defineProperty2.default)(_gridColumnWidthStyle, ColumnVariant.Auto, (0, _core.css)({
+  maxWidth: "calc(100% - var(".concat(_constants.varGridSpacing, "))"),
+  flexBasis: "auto"
+})), (0, _defineProperty2.default)(_gridColumnWidthStyle, ColumnVariant.Bounded, (0, _core.css)({
+  maxWidth: "calc(".concat(singleColumnWidth, " *  var(").concat(_constants.varColumnSpan, ") - var(").concat(_constants.varGridSpacing, "))"),
+  flexBasis: "100%"
+})), (0, _defineProperty2.default)(_gridColumnWidthStyle, ColumnVariant.FullWidth, (0, _core.css)({
+  maxWidth: "calc(100% - var(".concat(_constants.varGridSpacing, "))"),
+  flexBasis: "100%"
+})), _gridColumnWidthStyle);
 /**
@@ -86,10 +91,9 @@ * __Grid column context__
 
-var GridColumn = function GridColumn(_ref) {
-  var _ref$medium = _ref.medium,
-      medium = _ref$medium === void 0 ? _constants.defaultMedium : _ref$medium,
-      children = _ref.children,
-      testId = _ref.testId;
+var GridColumn = function GridColumn(_ref2) {
+  var _ref2$medium = _ref2.medium,
+      medium = _ref2$medium === void 0 ? _constants.defaultMedium : _ref2$medium,
+      children = _ref2.children,
+      testId = _ref2.testId;
 
   var _useContext = (0, _react.useContext)(_gridContext.GridContext),
-      spacing = _useContext.spacing,
       columns = _useContext.columns;
@@ -102,19 +106,21 @@
   }, [medium]);
-  var colSpan = Math.max(1, Math.min(medium, columns));
   /**
-   * The full-width case is handled separately because of rounding.
+   * The real column span,
+   * obtained by clamping the passed `medium` value within the allowed range.
    */
 
-  var isFullWidth = colSpan === columns;
+  var colSpan = Math.max(1, Math.min(medium, columns));
   /**
-   * A `medium` of 0 (the default) equates to an automatic flex-basis,
-   * meaning the column will fill available space.
+   * How we should calculate the column width.
    */
 
-  var shouldFillAvailable = medium === _constants.defaultMedium;
+  var variant = getVariant({
+    medium: medium,
+    columns: columns
+  });
   return (0, _core.jsx)(GridColumnContext.Provider, {
     value: contextValue
   }, (0, _core.jsx)("div", {
-    css: [gridColumnStyles, gridColumnSpanStyles[spacing], isFullWidth && gridColumnSpanStyles.fullWidth, shouldFillAvailable && gridColumnSpanStyles.fillAvailable],
-    style: (0, _defineProperty2.default)({}, _constants.varColumnSpan, shouldFillAvailable ? 'auto' : colSpan),
+    css: [gridColumnStyles, gridColumnWidthStyles[variant]],
+    style: (0, _defineProperty2.default)({}, _constants.varColumnSpan, variant === ColumnVariant.Auto ? 'auto' : colSpan),
     "data-testid": testId
@@ -121,0 +127,0 @@ }, children));

dist/cjs/grid-wrapper.js

@@ -32,8 +32,10 @@ "use strict";
 var GridWrapper = function GridWrapper(_ref) {
-  var _ref$spacing = _ref.spacing,
-      spacing = _ref$spacing === void 0 ? _constants.defaultSpacing : _ref$spacing,
-      columns = _ref.columns,
+  var _ref2, _ref3, _theme$isNestedGrid;
+
+  var spacingProp = _ref.spacing,
+      columnsProp = _ref.columns,
       layout = _ref.layout,
       testId = _ref.testId,
-      children = _ref.children;
+      children = _ref.children,
+      theme = _ref.theme;
 
@@ -55,10 +57,18 @@ /**
   var defaultColumns = medium > 0 ? medium : _constants.defaultGridColumns;
+  /**
+   * This is to account for the eventual removal of the `theme` prop. In theory, this should not be exposed.
+   * However, consumers are still using it - there should be a major rerelease with the complete removal of this prop later.
+   */
+
+  var spacing = (_ref2 = spacingProp !== null && spacingProp !== void 0 ? spacingProp : theme === null || theme === void 0 ? void 0 : theme.spacing) !== null && _ref2 !== void 0 ? _ref2 : _constants.defaultSpacing;
+  var columns = (_ref3 = columnsProp !== null && columnsProp !== void 0 ? columnsProp : theme === null || theme === void 0 ? void 0 : theme.columns) !== null && _ref3 !== void 0 ? _ref3 : defaultColumns;
+  var isNested = (_theme$isNestedGrid = theme === null || theme === void 0 ? void 0 : theme.isNestedGrid) !== null && _theme$isNestedGrid !== void 0 ? _theme$isNestedGrid : !isRoot;
   var contextValue = (0, _react.useMemo)(function () {
     return {
       isRoot: false,
-      isNested: !isRoot,
+      isNested: isNested,
       spacing: spacing,
-      columns: columns !== null && columns !== void 0 ? columns : defaultColumns
+      columns: columns
     };
-  }, [spacing, columns, isRoot, defaultColumns]);
+  }, [spacing, columns, isNested]);
   return /*#__PURE__*/_react.default.createElement(_gridContext.GridContext.Provider, {
@@ -65,0 +75,0 @@ value: contextValue

dist/cjs/grid.js

@@ -21,54 +21,6 @@ "use strict";
 /** @jsx jsx */
-
-/**
- * Maximum width styles for a grid using a fixed layout.
- *
- * Equal to the space occupied by the columns + the padding required.
- */
-var getGridFixedLayoutMaxWidthStyles = function getGridFixedLayoutMaxWidthStyles(spacing) {
-  return (0, _core.css)({
-    maxWidth: "calc(var(".concat(_constants.varColumnsNum, ") * ").concat(_constants.defaultGridColumnWidth, "px + ").concat(_constants.spacingMapping[spacing], "px)")
-  });
-};
-/**
- * Horizontal padding for the grid.
- *
- * Not applied for nested grids as they should not be inset.
- */
-
-
-var getGridPaddingStyles = function getGridPaddingStyles(spacing) {
-  return (0, _core.css)({
-    padding: "0 ".concat(_constants.spacingMapping[spacing], "px")
-  });
-};
-
-var getGridColumnGapStyles = function getGridColumnGapStyles(spacing) {
-  return (0, _core.css)({
-    columnGap: _constants.spacingMapping[spacing]
-  });
-};
-
-var gridFixedLayoutMaxWidthStyles = {
-  cosy: getGridFixedLayoutMaxWidthStyles('cosy'),
-  comfortable: getGridFixedLayoutMaxWidthStyles('comfortable'),
-  compact: getGridFixedLayoutMaxWidthStyles('compact')
-};
-var gridFluidLayoutMaxWidthStyles = (0, _core.css)({
-  maxWidth: '100%'
-});
-var gridPaddingStyles = {
-  cosy: getGridPaddingStyles('cosy'),
-  comfortable: getGridPaddingStyles('comfortable'),
-  compact: getGridPaddingStyles('compact')
-};
-var gridColumnGapStyles = {
-  cosy: getGridColumnGapStyles('cosy'),
-  comfortable: getGridColumnGapStyles('comfortable'),
-  compact: getGridColumnGapStyles('compact')
-};
 var gridStyles = (0, _core.css)({
   display: 'flex',
-  boxSizing: 'border-box',
   margin: '0 auto',
+  padding: "0 calc(var(".concat(_constants.varGridSpacing, ") / 2)"),
   position: 'relative',
@@ -78,2 +30,13 @@ alignItems: 'flex-start',
 });
+var gridLayoutStyles = {
+  fixed: (0, _core.css)({
+    maxWidth: "calc(var(".concat(_constants.varColumnsNum, ") * ").concat(_constants.defaultGridColumnWidth, "px)")
+  }),
+  fluid: (0, _core.css)({
+    maxWidth: '100%'
+  })
+};
+var nestedGridStyles = (0, _core.css)({
+  margin: "0 calc(-1 * var(".concat(_constants.varGridSpacing, "))")
+});
 /**
@@ -91,2 +54,4 @@ * __Grid__
 var Grid = function Grid(_ref) {
+  var _ref2;
+
   var _ref$layout = _ref.layout,
@@ -103,4 +68,4 @@ layout = _ref$layout === void 0 ? _constants.defaultLayout : _ref$layout,
   return (0, _core.jsx)("div", {
-    css: [gridStyles, !isNested && gridPaddingStyles[spacing], layout === 'fixed' ? gridFixedLayoutMaxWidthStyles[spacing] : gridFluidLayoutMaxWidthStyles, gridColumnGapStyles[spacing]],
-    style: (0, _defineProperty2.default)({}, _constants.varColumnsNum, columns),
+    css: [gridStyles, gridLayoutStyles[layout], isNested && nestedGridStyles],
+    style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _constants.varColumnsNum, columns), (0, _defineProperty2.default)(_ref2, _constants.varGridSpacing, "".concat(_constants.spacingMapping[spacing], "px")), _ref2),
     "data-testid": testId
@@ -107,0 +72,0 @@ }, children);

dist/cjs/version.json

 {
 	"name": "@atlaskit/page",
-	"version": "12.1.1",
+	"version": "12.1.2",
 	"sideEffects": false
 }

dist/es2019/constants.js

@@ -14,3 +14,16 @@ export const defaultGridSize = 8;
 export const defaultLayout = 'fixed';
+/**
+ * The number of available columns in each row.
+ */
+
 export const varColumnsNum = '--ds-columns-num';
-export const varColumnSpan = '--ds-column-span';
+/**
+ * The number of columns that a `GridColumn` covers.
+ */
+
+export const varColumnSpan = '--ds-column-span';
+/**
+ * The spacing (in `px`) between each column.
+ */
+
+export const varGridSpacing = '--ds-grid-spacing';

dist/es2019/grid-column.js

 /** @jsx jsx */
 import { createContext, useContext, useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
-import { defaultMedium, spacingMapping, varColumnsNum, varColumnSpan } from './constants';
+import { defaultMedium, varColumnsNum, varColumnSpan, varGridSpacing } from './constants';
 import { GridContext } from './grid-context';
-// IE11 and Edge both have rounding issues for flexbox which is why a width of
-// 99.9999% is used. Using 100% here causes columns to wrap prematurely.
-const divisibleFullWidth = '99.9999%';
+
 /**
- * Sets flex basis to occupy the specified number of columns.
+ * Determines the method by which column width is calculated.
  */
+var ColumnVariant;
 
-const getGridColumnSpanStyles = spacing => {
-  const gap = `${spacingMapping[spacing]}px`;
-  /**
-   * We need to add the gap here to get the same results as before
-   * because of how gaps were emulated with margins.
-   *
-   * Before the margins on the edges could extend past the edges
-   * of the container, while still contributing to width calculations.
-   */
+(function (ColumnVariant) {
+  ColumnVariant["Auto"] = "auto";
+  ColumnVariant["Bounded"] = "bounded";
+  ColumnVariant["FullWidth"] = "fullWidth";
+})(ColumnVariant || (ColumnVariant = {}));
 
-  const availableWidth = `(${divisibleFullWidth} + ${gap})`;
-  const singleColumnWidth = `${availableWidth} / var(${varColumnsNum})`;
-  return css({
-    minWidth: `calc(${singleColumnWidth} - ${gap})`,
-    maxWidth: `calc(${singleColumnWidth} *  var(${varColumnSpan}) - ${gap})`,
-    flexBasis: `100%`
-  });
+const getVariant = ({
+  medium,
+  columns
+}) => {
+  if (medium === defaultMedium) {
+    return ColumnVariant.Auto;
+  } else if (medium < columns) {
+    return ColumnVariant.Bounded;
+  }
+
+  return ColumnVariant.FullWidth;
 };
+/**
+ * IE11 and Edge both have rounding issues for flexbox which is why a width of
+ * 99.9999% is used. Using 100% here causes columns to wrap prematurely.
+ */
 
-const gridColumnSpanStyles = {
-  cosy: getGridColumnSpanStyles('cosy'),
-  comfortable: getGridColumnSpanStyles('comfortable'),
-  compact: getGridColumnSpanStyles('compact'),
-  fullWidth: css({
-    maxWidth: '100%',
-    flexBasis: '100%'
-  }),
-  fillAvailable: css({
-    maxWidth: '100%',
-    flexBasis: 'auto'
-  })
-};
+
+const availableWidth = '99.9999%';
+const singleColumnWidth = `(${availableWidth} / var(${varColumnsNum}))`;
 const gridColumnStyles = css({
+  minWidth: `calc(${singleColumnWidth} - var(${varGridSpacing}))`,
+  margin: `0 calc(var(${varGridSpacing}) / 2)`,
   flexGrow: 1,
@@ -50,2 +45,16 @@ flexShrink: 0,
 });
+const gridColumnWidthStyles = {
+  [ColumnVariant.Auto]: css({
+    maxWidth: `calc(100% - var(${varGridSpacing}))`,
+    flexBasis: `auto`
+  }),
+  [ColumnVariant.Bounded]: css({
+    maxWidth: `calc(${singleColumnWidth} *  var(${varColumnSpan}) - var(${varGridSpacing}))`,
+    flexBasis: `100%`
+  }),
+  [ColumnVariant.FullWidth]: css({
+    maxWidth: `calc(100% - var(${varGridSpacing}))`,
+    flexBasis: `100%`
+  })
+};
 /**
@@ -74,3 +83,2 @@ * __Grid column context__
   const {
-    spacing,
     columns
@@ -81,24 +89,26 @@ } = useContext(GridContext);
   }), [medium]);
-  const colSpan = Math.max(1, Math.min(medium, columns));
   /**
-   * The full-width case is handled separately because of rounding.
+   * The real column span,
+   * obtained by clamping the passed `medium` value within the allowed range.
    */
 
-  const isFullWidth = colSpan === columns;
+  const colSpan = Math.max(1, Math.min(medium, columns));
   /**
-   * A `medium` of 0 (the default) equates to an automatic flex-basis,
-   * meaning the column will fill available space.
+   * How we should calculate the column width.
    */
 
-  const shouldFillAvailable = medium === defaultMedium;
+  const variant = getVariant({
+    medium,
+    columns
+  });
   return jsx(GridColumnContext.Provider, {
     value: contextValue
   }, jsx("div", {
-    css: [gridColumnStyles, gridColumnSpanStyles[spacing], isFullWidth && gridColumnSpanStyles.fullWidth, shouldFillAvailable && gridColumnSpanStyles.fillAvailable],
+    css: [gridColumnStyles, gridColumnWidthStyles[variant]],
     style: {
       /**
        * The 'auto' value here isn't actually consumed anywhere and is
-       * just to better reflect what is happening.
+       * just to better reflect what is happening when inspecting CSS.
        */
-      [varColumnSpan]: shouldFillAvailable ? 'auto' : colSpan
+      [varColumnSpan]: variant === ColumnVariant.Auto ? 'auto' : colSpan
     },
@@ -105,0 +115,0 @@ "data-testid": testId

dist/es2019/grid-wrapper.js

@@ -15,8 +15,11 @@ import React, { useContext, useMemo } from 'react';
 const GridWrapper = ({
-  spacing = defaultSpacing,
-  columns,
+  spacing: spacingProp,
+  columns: columnsProp,
   layout,
   testId,
-  children
+  children,
+  theme
 }) => {
+  var _ref, _ref2, _theme$isNestedGrid;
+
   /**
@@ -37,8 +40,16 @@ * isRoot is `true` only in the default context (i.e. no ancestor Grid).
   const defaultColumns = medium > 0 ? medium : defaultGridColumns;
+  /**
+   * This is to account for the eventual removal of the `theme` prop. In theory, this should not be exposed.
+   * However, consumers are still using it - there should be a major rerelease with the complete removal of this prop later.
+   */
+
+  const spacing = (_ref = spacingProp !== null && spacingProp !== void 0 ? spacingProp : theme === null || theme === void 0 ? void 0 : theme.spacing) !== null && _ref !== void 0 ? _ref : defaultSpacing;
+  const columns = (_ref2 = columnsProp !== null && columnsProp !== void 0 ? columnsProp : theme === null || theme === void 0 ? void 0 : theme.columns) !== null && _ref2 !== void 0 ? _ref2 : defaultColumns;
+  const isNested = (_theme$isNestedGrid = theme === null || theme === void 0 ? void 0 : theme.isNestedGrid) !== null && _theme$isNestedGrid !== void 0 ? _theme$isNestedGrid : !isRoot;
   const contextValue = useMemo(() => ({
     isRoot: false,
-    isNested: !isRoot,
+    isNested,
     spacing,
-    columns: columns !== null && columns !== void 0 ? columns : defaultColumns
-  }), [spacing, columns, isRoot, defaultColumns]);
+    columns: columns
+  }), [spacing, columns, isNested]);
   return /*#__PURE__*/React.createElement(GridContext.Provider, {
@@ -45,0 +56,0 @@ value: contextValue

dist/es2019/grid.js

 /** @jsx jsx */
 import { useContext } from 'react';
 import { css, jsx } from '@emotion/core';
-import { defaultGridColumnWidth, defaultLayout, spacingMapping, varColumnsNum } from './constants';
+import { defaultGridColumnWidth, defaultLayout, spacingMapping, varColumnsNum, varGridSpacing } from './constants';
 import { GridContext } from './grid-context';
-
-/**
- * Maximum width styles for a grid using a fixed layout.
- *
- * Equal to the space occupied by the columns + the padding required.
- */
-const getGridFixedLayoutMaxWidthStyles = spacing => css({
-  maxWidth: `calc(var(${varColumnsNum}) * ${defaultGridColumnWidth}px + ${spacingMapping[spacing]}px)`
-});
-/**
- * Horizontal padding for the grid.
- *
- * Not applied for nested grids as they should not be inset.
- */
-
-
-const getGridPaddingStyles = spacing => css({
-  padding: `0 ${spacingMapping[spacing]}px`
-});
-
-const getGridColumnGapStyles = spacing => css({
-  columnGap: spacingMapping[spacing]
-});
-
-const gridFixedLayoutMaxWidthStyles = {
-  cosy: getGridFixedLayoutMaxWidthStyles('cosy'),
-  comfortable: getGridFixedLayoutMaxWidthStyles('comfortable'),
-  compact: getGridFixedLayoutMaxWidthStyles('compact')
-};
-const gridFluidLayoutMaxWidthStyles = css({
-  maxWidth: '100%'
-});
-const gridPaddingStyles = {
-  cosy: getGridPaddingStyles('cosy'),
-  comfortable: getGridPaddingStyles('comfortable'),
-  compact: getGridPaddingStyles('compact')
-};
-const gridColumnGapStyles = {
-  cosy: getGridColumnGapStyles('cosy'),
-  comfortable: getGridColumnGapStyles('comfortable'),
-  compact: getGridColumnGapStyles('compact')
-};
 const gridStyles = css({
   display: 'flex',
-  boxSizing: 'border-box',
   margin: '0 auto',
+  padding: `0 calc(var(${varGridSpacing}) / 2)`,
   position: 'relative',
@@ -56,2 +14,13 @@ alignItems: 'flex-start',
 });
+const gridLayoutStyles = {
+  fixed: css({
+    maxWidth: `calc(var(${varColumnsNum}) * ${defaultGridColumnWidth}px)`
+  }),
+  fluid: css({
+    maxWidth: '100%'
+  })
+};
+const nestedGridStyles = css({
+  margin: `0 calc(-1 * var(${varGridSpacing}))`
+});
 /**
@@ -79,5 +48,6 @@ * __Grid__
   return jsx("div", {
-    css: [gridStyles, !isNested && gridPaddingStyles[spacing], layout === 'fixed' ? gridFixedLayoutMaxWidthStyles[spacing] : gridFluidLayoutMaxWidthStyles, gridColumnGapStyles[spacing]],
+    css: [gridStyles, gridLayoutStyles[layout], isNested && nestedGridStyles],
     style: {
-      [varColumnsNum]: columns
+      [varColumnsNum]: columns,
+      [varGridSpacing]: `${spacingMapping[spacing]}px`
     },
@@ -84,0 +54,0 @@ "data-testid": testId

dist/es2019/version.json

 {
 	"name": "@atlaskit/page",
-	"version": "12.1.1",
+	"version": "12.1.2",
 	"sideEffects": false
 }

dist/esm/constants.js

@@ -14,3 +14,16 @@ export var defaultGridSize = 8;
 export var defaultLayout = 'fixed';
+/**
+ * The number of available columns in each row.
+ */
+
 export var varColumnsNum = '--ds-columns-num';
-export var varColumnSpan = '--ds-column-span';
+/**
+ * The number of columns that a `GridColumn` covers.
+ */
+
+export var varColumnSpan = '--ds-column-span';
+/**
+ * The spacing (in `px`) between each column.
+ */
+
+export var varGridSpacing = '--ds-grid-spacing';

dist/esm/grid-column.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
+var _gridColumnWidthStyle;
+
 /** @jsx jsx */
 import { createContext, useContext, useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
-import { defaultMedium, spacingMapping, varColumnsNum, varColumnSpan } from './constants';
+import { defaultMedium, varColumnsNum, varColumnSpan, varGridSpacing } from './constants';
 import { GridContext } from './grid-context';
-// IE11 and Edge both have rounding issues for flexbox which is why a width of
-// 99.9999% is used. Using 100% here causes columns to wrap prematurely.
-var divisibleFullWidth = '99.9999%';
+
 /**
- * Sets flex basis to occupy the specified number of columns.
+ * Determines the method by which column width is calculated.
  */
+var ColumnVariant;
 
-var getGridColumnSpanStyles = function getGridColumnSpanStyles(spacing) {
-  var gap = "".concat(spacingMapping[spacing], "px");
-  /**
-   * We need to add the gap here to get the same results as before
-   * because of how gaps were emulated with margins.
-   *
-   * Before the margins on the edges could extend past the edges
-   * of the container, while still contributing to width calculations.
-   */
+(function (ColumnVariant) {
+  ColumnVariant["Auto"] = "auto";
+  ColumnVariant["Bounded"] = "bounded";
+  ColumnVariant["FullWidth"] = "fullWidth";
+})(ColumnVariant || (ColumnVariant = {}));
 
-  var availableWidth = "(".concat(divisibleFullWidth, " + ").concat(gap, ")");
-  var singleColumnWidth = "".concat(availableWidth, " / var(").concat(varColumnsNum, ")");
-  return css({
-    minWidth: "calc(".concat(singleColumnWidth, " - ").concat(gap, ")"),
-    maxWidth: "calc(".concat(singleColumnWidth, " *  var(").concat(varColumnSpan, ") - ").concat(gap, ")"),
-    flexBasis: "100%"
-  });
+var getVariant = function getVariant(_ref) {
+  var medium = _ref.medium,
+      columns = _ref.columns;
+
+  if (medium === defaultMedium) {
+    return ColumnVariant.Auto;
+  } else if (medium < columns) {
+    return ColumnVariant.Bounded;
+  }
+
+  return ColumnVariant.FullWidth;
 };
+/**
+ * IE11 and Edge both have rounding issues for flexbox which is why a width of
+ * 99.9999% is used. Using 100% here causes columns to wrap prematurely.
+ */
 
-var gridColumnSpanStyles = {
-  cosy: getGridColumnSpanStyles('cosy'),
-  comfortable: getGridColumnSpanStyles('comfortable'),
-  compact: getGridColumnSpanStyles('compact'),
-  fullWidth: css({
-    maxWidth: '100%',
-    flexBasis: '100%'
-  }),
-  fillAvailable: css({
-    maxWidth: '100%',
-    flexBasis: 'auto'
-  })
-};
+
+var availableWidth = '99.9999%';
+var singleColumnWidth = "(".concat(availableWidth, " / var(").concat(varColumnsNum, "))");
 var gridColumnStyles = css({
+  minWidth: "calc(".concat(singleColumnWidth, " - var(").concat(varGridSpacing, "))"),
+  margin: "0 calc(var(".concat(varGridSpacing, ") / 2)"),
   flexGrow: 1,
@@ -52,2 +49,12 @@ flexShrink: 0,
 });
+var gridColumnWidthStyles = (_gridColumnWidthStyle = {}, _defineProperty(_gridColumnWidthStyle, ColumnVariant.Auto, css({
+  maxWidth: "calc(100% - var(".concat(varGridSpacing, "))"),
+  flexBasis: "auto"
+})), _defineProperty(_gridColumnWidthStyle, ColumnVariant.Bounded, css({
+  maxWidth: "calc(".concat(singleColumnWidth, " *  var(").concat(varColumnSpan, ") - var(").concat(varGridSpacing, "))"),
+  flexBasis: "100%"
+})), _defineProperty(_gridColumnWidthStyle, ColumnVariant.FullWidth, css({
+  maxWidth: "calc(100% - var(".concat(varGridSpacing, "))"),
+  flexBasis: "100%"
+})), _gridColumnWidthStyle);
 /**
@@ -70,10 +77,9 @@ * __Grid column context__
 
-var GridColumn = function GridColumn(_ref) {
-  var _ref$medium = _ref.medium,
-      medium = _ref$medium === void 0 ? defaultMedium : _ref$medium,
-      children = _ref.children,
-      testId = _ref.testId;
+var GridColumn = function GridColumn(_ref2) {
+  var _ref2$medium = _ref2.medium,
+      medium = _ref2$medium === void 0 ? defaultMedium : _ref2$medium,
+      children = _ref2.children,
+      testId = _ref2.testId;
 
   var _useContext = useContext(GridContext),
-      spacing = _useContext.spacing,
       columns = _useContext.columns;
@@ -86,19 +92,21 @@
   }, [medium]);
-  var colSpan = Math.max(1, Math.min(medium, columns));
   /**
-   * The full-width case is handled separately because of rounding.
+   * The real column span,
+   * obtained by clamping the passed `medium` value within the allowed range.
    */
 
-  var isFullWidth = colSpan === columns;
+  var colSpan = Math.max(1, Math.min(medium, columns));
   /**
-   * A `medium` of 0 (the default) equates to an automatic flex-basis,
-   * meaning the column will fill available space.
+   * How we should calculate the column width.
    */
 
-  var shouldFillAvailable = medium === defaultMedium;
+  var variant = getVariant({
+    medium: medium,
+    columns: columns
+  });
   return jsx(GridColumnContext.Provider, {
     value: contextValue
   }, jsx("div", {
-    css: [gridColumnStyles, gridColumnSpanStyles[spacing], isFullWidth && gridColumnSpanStyles.fullWidth, shouldFillAvailable && gridColumnSpanStyles.fillAvailable],
-    style: _defineProperty({}, varColumnSpan, shouldFillAvailable ? 'auto' : colSpan),
+    css: [gridColumnStyles, gridColumnWidthStyles[variant]],
+    style: _defineProperty({}, varColumnSpan, variant === ColumnVariant.Auto ? 'auto' : colSpan),
     "data-testid": testId
@@ -105,0 +113,0 @@ }, children));

dist/esm/grid-wrapper.js

@@ -15,8 +15,10 @@ import React, { useContext, useMemo } from 'react';
 var GridWrapper = function GridWrapper(_ref) {
-  var _ref$spacing = _ref.spacing,
-      spacing = _ref$spacing === void 0 ? defaultSpacing : _ref$spacing,
-      columns = _ref.columns,
+  var _ref2, _ref3, _theme$isNestedGrid;
+
+  var spacingProp = _ref.spacing,
+      columnsProp = _ref.columns,
       layout = _ref.layout,
       testId = _ref.testId,
-      children = _ref.children;
+      children = _ref.children,
+      theme = _ref.theme;
 
@@ -38,10 +40,18 @@ /**
   var defaultColumns = medium > 0 ? medium : defaultGridColumns;
+  /**
+   * This is to account for the eventual removal of the `theme` prop. In theory, this should not be exposed.
+   * However, consumers are still using it - there should be a major rerelease with the complete removal of this prop later.
+   */
+
+  var spacing = (_ref2 = spacingProp !== null && spacingProp !== void 0 ? spacingProp : theme === null || theme === void 0 ? void 0 : theme.spacing) !== null && _ref2 !== void 0 ? _ref2 : defaultSpacing;
+  var columns = (_ref3 = columnsProp !== null && columnsProp !== void 0 ? columnsProp : theme === null || theme === void 0 ? void 0 : theme.columns) !== null && _ref3 !== void 0 ? _ref3 : defaultColumns;
+  var isNested = (_theme$isNestedGrid = theme === null || theme === void 0 ? void 0 : theme.isNestedGrid) !== null && _theme$isNestedGrid !== void 0 ? _theme$isNestedGrid : !isRoot;
   var contextValue = useMemo(function () {
     return {
       isRoot: false,
-      isNested: !isRoot,
+      isNested: isNested,
       spacing: spacing,
-      columns: columns !== null && columns !== void 0 ? columns : defaultColumns
+      columns: columns
     };
-  }, [spacing, columns, isRoot, defaultColumns]);
+  }, [spacing, columns, isNested]);
   return /*#__PURE__*/React.createElement(GridContext.Provider, {
@@ -48,0 +58,0 @@ value: contextValue

dist/esm/grid.js

@@ -6,56 +6,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css, jsx } from '@emotion/core';
-import { defaultGridColumnWidth, defaultLayout, spacingMapping, varColumnsNum } from './constants';
+import { defaultGridColumnWidth, defaultLayout, spacingMapping, varColumnsNum, varGridSpacing } from './constants';
 import { GridContext } from './grid-context';
-
-/**
- * Maximum width styles for a grid using a fixed layout.
- *
- * Equal to the space occupied by the columns + the padding required.
- */
-var getGridFixedLayoutMaxWidthStyles = function getGridFixedLayoutMaxWidthStyles(spacing) {
-  return css({
-    maxWidth: "calc(var(".concat(varColumnsNum, ") * ").concat(defaultGridColumnWidth, "px + ").concat(spacingMapping[spacing], "px)")
-  });
-};
-/**
- * Horizontal padding for the grid.
- *
- * Not applied for nested grids as they should not be inset.
- */
-
-
-var getGridPaddingStyles = function getGridPaddingStyles(spacing) {
-  return css({
-    padding: "0 ".concat(spacingMapping[spacing], "px")
-  });
-};
-
-var getGridColumnGapStyles = function getGridColumnGapStyles(spacing) {
-  return css({
-    columnGap: spacingMapping[spacing]
-  });
-};
-
-var gridFixedLayoutMaxWidthStyles = {
-  cosy: getGridFixedLayoutMaxWidthStyles('cosy'),
-  comfortable: getGridFixedLayoutMaxWidthStyles('comfortable'),
-  compact: getGridFixedLayoutMaxWidthStyles('compact')
-};
-var gridFluidLayoutMaxWidthStyles = css({
-  maxWidth: '100%'
-});
-var gridPaddingStyles = {
-  cosy: getGridPaddingStyles('cosy'),
-  comfortable: getGridPaddingStyles('comfortable'),
-  compact: getGridPaddingStyles('compact')
-};
-var gridColumnGapStyles = {
-  cosy: getGridColumnGapStyles('cosy'),
-  comfortable: getGridColumnGapStyles('comfortable'),
-  compact: getGridColumnGapStyles('compact')
-};
 var gridStyles = css({
   display: 'flex',
-  boxSizing: 'border-box',
   margin: '0 auto',
+  padding: "0 calc(var(".concat(varGridSpacing, ") / 2)"),
   position: 'relative',
@@ -65,2 +17,13 @@ alignItems: 'flex-start',
 });
+var gridLayoutStyles = {
+  fixed: css({
+    maxWidth: "calc(var(".concat(varColumnsNum, ") * ").concat(defaultGridColumnWidth, "px)")
+  }),
+  fluid: css({
+    maxWidth: '100%'
+  })
+};
+var nestedGridStyles = css({
+  margin: "0 calc(-1 * var(".concat(varGridSpacing, "))")
+});
 /**
@@ -78,2 +41,4 @@ * __Grid__
 export var Grid = function Grid(_ref) {
+  var _ref2;
+
   var _ref$layout = _ref.layout,
@@ -90,6 +55,6 @@ layout = _ref$layout === void 0 ? defaultLayout : _ref$layout,
   return jsx("div", {
-    css: [gridStyles, !isNested && gridPaddingStyles[spacing], layout === 'fixed' ? gridFixedLayoutMaxWidthStyles[spacing] : gridFluidLayoutMaxWidthStyles, gridColumnGapStyles[spacing]],
-    style: _defineProperty({}, varColumnsNum, columns),
+    css: [gridStyles, gridLayoutStyles[layout], isNested && nestedGridStyles],
+    style: (_ref2 = {}, _defineProperty(_ref2, varColumnsNum, columns), _defineProperty(_ref2, varGridSpacing, "".concat(spacingMapping[spacing], "px")), _ref2),
     "data-testid": testId
   }, children);
 };

dist/esm/version.json

 {
 	"name": "@atlaskit/page",
-	"version": "12.1.1",
+	"version": "12.1.2",
 	"sideEffects": false
 }

dist/types/constants.d.ts

@@ -14,3 +14,13 @@ export declare const defaultGridSize = 8;
 export declare const defaultLayout = "fixed";
+/**
+ * The number of available columns in each row.
+ */
 export declare const varColumnsNum = "--ds-columns-num";
+/**
+ * The number of columns that a `GridColumn` covers.
+ */
 export declare const varColumnSpan = "--ds-column-span";
+/**
+ * The spacing (in `px`) between each column.
+ */
+export declare const varGridSpacing = "--ds-grid-spacing";

dist/types/grid-wrapper.d.ts

@@ -10,3 +10,3 @@ /// <reference types="react" />
  */
-declare const GridWrapper: ({ spacing, columns, layout, testId, children, }: GridProps) => JSX.Element;
+declare const GridWrapper: ({ spacing: spacingProp, columns: columnsProp, layout, testId, children, theme, }: GridProps) => JSX.Element;
 export default GridWrapper;

dist/types/types.d.ts

@@ -22,2 +22,19 @@ import type { ReactNode } from 'react';
 /**
+ * Values set for the theme.
+ */
+export declare type ThemeProps = {
+    /**
+     * Number of columns in the grid.
+     */
+    columns: number;
+    /**
+     * Desired spacing of the grid.
+     */
+    spacing: GridSpacing;
+    /**
+     * Sets whether the grid is nested or not.
+     */
+    isNestedGrid?: boolean;
+};
+/**
  * The props accepted by the external `Grid` element.
@@ -38,2 +55,6 @@ *
     columns?: number;
+    /**
+     * For consumers still using the theme prop to set the grid layout.
+     */
+    theme?: ThemeProps;
 };
@@ -40,0 +61,0 @@ export declare type GridColumnProps = {

package.json

 {
   "name": "@atlaskit/page",
-  "version": "12.1.1",
+  "version": "12.1.2",
   "description": "A component for building page layouts. Also includes the Grid and GridColumn components.",
@@ -5,0 +5,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

69756

increased by1.73%

Lines of code

1293

increased by1.02%

No dependency changes