@atlaskit/grid - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

CHANGELOG.md

 # @atlaskit/grid
 
+## 0.4.0
+
+### Minor Changes
+
+- [`cbd0b817e56`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cbd0b817e56) - Adds `hasInlinePadding` prop that controls whether the grid includes `padding-inline` gutters
+
 ## 0.3.0
@@ -4,0 +10,0 @@

dist/cjs/grid.js

@@ -17,15 +17,19 @@ "use strict";
 
-var breakPointMediaQueries = _config.BREAKPOINTS_LIST.reduce(function (configs, breakpoint) {
-  var config = _config.BREAKPOINTS_CONFIG[breakpoint];
-  return Object.assign(configs, (0, _defineProperty2.default)({}, _mediaHelper.UNSAFE_media.between[breakpoint], {
-    gap: config.gutter,
-    gridTemplateColumns: "repeat(var(--ds-grid-columns), 1fr)",
-    '--ds-grid-columns': config.columns,
-    paddingInline: config.margin,
-    marginInline: 'auto'
-  }));
-}, {});
+var breakPointMediaQueries = function breakPointMediaQueries(hasInlinePadding) {
+  return _config.BREAKPOINTS_LIST.reduce(function (configs, breakpoint) {
+    var config = _config.BREAKPOINTS_CONFIG[breakpoint];
+    return Object.assign(configs, (0, _defineProperty2.default)({}, _mediaHelper.UNSAFE_media.between[breakpoint], {
+      gap: config.gutter,
+      gridTemplateColumns: "repeat(var(--ds-grid-columns), 1fr)",
+      '--ds-grid-columns': config.columns,
+      paddingInline: hasInlinePadding ? config.margin : undefined,
+      marginInline: 'auto'
+    }));
+  }, {});
+};
 
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var gridMediaQueryStyles = (0, _react2.css)(breakPointMediaQueries);
+var gridMediaQueryStyles = function gridMediaQueryStyles(hasInlinePadding) {
+  return (0, _react2.css)(breakPointMediaQueries(hasInlinePadding));
+};
 var baseStyles = (0, _react2.css)({
@@ -67,3 +71,5 @@ display: 'grid',
     children = _ref.children,
-    maxWidth = _ref.maxWidth;
+    maxWidth = _ref.maxWidth,
+    _ref$hasInlinePadding = _ref.hasInlinePadding,
+    hasInlinePadding = _ref$hasInlinePadding === void 0 ? true : _ref$hasInlinePadding;
   var isNested = (0, _react.useContext)(GridContext);
@@ -73,3 +79,3 @@ (0, _tinyInvariant.default)(!isNested, '@atlaskit/grid: Nesting grids are not supported at this time, please only use a top-level grid.');
     "data-testid": testId,
-    css: [baseStyles, maxWidth && gridMaxWidthMap[maxWidth], gridMediaQueryStyles]
+    css: [baseStyles, maxWidth && gridMaxWidthMap[maxWidth], gridMediaQueryStyles(hasInlinePadding)]
   }, (0, _react2.jsx)(GridContext.Provider, {
@@ -76,0 +82,0 @@ value: true

dist/cjs/version.json

 {
 	"name": "@atlaskit/grid",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"sideEffects": false
 }

dist/es2019/grid.js

@@ -8,3 +8,3 @@ /* eslint-disable @repo/internal/react/consistent-css-prop-usage */
 import { UNSAFE_media as media } from './media-helper';
-const breakPointMediaQueries = BREAKPOINTS_LIST.reduce((configs, breakpoint) => {
+const breakPointMediaQueries = hasInlinePadding => BREAKPOINTS_LIST.reduce((configs, breakpoint) => {
   const config = BREAKPOINTS_CONFIG[breakpoint];
@@ -16,3 +16,3 @@ return Object.assign(configs, {
       '--ds-grid-columns': config.columns,
-      paddingInline: config.margin,
+      paddingInline: hasInlinePadding ? config.margin : undefined,
       marginInline: 'auto'
@@ -24,3 +24,3 @@ }
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-const gridMediaQueryStyles = css(breakPointMediaQueries);
+const gridMediaQueryStyles = hasInlinePadding => css(breakPointMediaQueries(hasInlinePadding));
 const baseStyles = css({
@@ -62,3 +62,4 @@ display: 'grid',
   children,
-  maxWidth
+  maxWidth,
+  hasInlinePadding = true
 }) => {
@@ -69,3 +70,3 @@ const isNested = useContext(GridContext);
     "data-testid": testId,
-    css: [baseStyles, maxWidth && gridMaxWidthMap[maxWidth], gridMediaQueryStyles]
+    css: [baseStyles, maxWidth && gridMaxWidthMap[maxWidth], gridMediaQueryStyles(hasInlinePadding)]
   }, jsx(GridContext.Provider, {
@@ -72,0 +73,0 @@ value: true

dist/es2019/version.json

 {
 	"name": "@atlaskit/grid",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"sideEffects": false
 }

dist/esm/grid.js

@@ -9,15 +9,19 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { UNSAFE_media as media } from './media-helper';
-var breakPointMediaQueries = BREAKPOINTS_LIST.reduce(function (configs, breakpoint) {
-  var config = BREAKPOINTS_CONFIG[breakpoint];
-  return Object.assign(configs, _defineProperty({}, media.between[breakpoint], {
-    gap: config.gutter,
-    gridTemplateColumns: "repeat(var(--ds-grid-columns), 1fr)",
-    '--ds-grid-columns': config.columns,
-    paddingInline: config.margin,
-    marginInline: 'auto'
-  }));
-}, {});
+var breakPointMediaQueries = function breakPointMediaQueries(hasInlinePadding) {
+  return BREAKPOINTS_LIST.reduce(function (configs, breakpoint) {
+    var config = BREAKPOINTS_CONFIG[breakpoint];
+    return Object.assign(configs, _defineProperty({}, media.between[breakpoint], {
+      gap: config.gutter,
+      gridTemplateColumns: "repeat(var(--ds-grid-columns), 1fr)",
+      '--ds-grid-columns': config.columns,
+      paddingInline: hasInlinePadding ? config.margin : undefined,
+      marginInline: 'auto'
+    }));
+  }, {});
+};
 
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var gridMediaQueryStyles = css(breakPointMediaQueries);
+var gridMediaQueryStyles = function gridMediaQueryStyles(hasInlinePadding) {
+  return css(breakPointMediaQueries(hasInlinePadding));
+};
 var baseStyles = css({
@@ -59,3 +63,5 @@ display: 'grid',
     children = _ref.children,
-    maxWidth = _ref.maxWidth;
+    maxWidth = _ref.maxWidth,
+    _ref$hasInlinePadding = _ref.hasInlinePadding,
+    hasInlinePadding = _ref$hasInlinePadding === void 0 ? true : _ref$hasInlinePadding;
   var isNested = useContext(GridContext);
@@ -65,3 +71,3 @@ invariant(!isNested, '@atlaskit/grid: Nesting grids are not supported at this time, please only use a top-level grid.');
     "data-testid": testId,
-    css: [baseStyles, maxWidth && gridMaxWidthMap[maxWidth], gridMediaQueryStyles]
+    css: [baseStyles, maxWidth && gridMaxWidthMap[maxWidth], gridMediaQueryStyles(hasInlinePadding)]
   }, jsx(GridContext.Provider, {
@@ -68,0 +74,0 @@ value: true

dist/esm/version.json

 {
 	"name": "@atlaskit/grid",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"sideEffects": false
 }

dist/types/grid.d.ts

@@ -19,2 +19,8 @@ /** @jsx jsx */
     children: ReactNode;
+    /**
+     * Remove inline padding from grid.
+     *
+     * @default true
+     */
+    hasInlinePadding?: boolean;
 };
@@ -21,0 +27,0 @@ /**

package.json

 {
   "name": "@atlaskit/grid",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A grid is a responsive layout component designed to manage the content of a page.",
@@ -18,3 +18,2 @@ "publishConfig": {
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
@@ -21,0 +20,0 @@ "releaseModel": "continuous",

report.api.md

@@ -60,2 +60,3 @@ <!-- API Report Version: 2.3 -->
   children: ReactNode;
+  hasInlinePadding?: boolean;
 };
@@ -62,0 +63,0 @@

tmp/api-report-tmp.d.ts

@@ -49,2 +49,3 @@ ## API Report File for "@atlaskit/grid"
     children: ReactNode;
+    hasInlinePadding?: boolean;
 };
@@ -51,0 +52,0 @@

No alert changes

Improved metrics

Total package byte prevSize

44401

increased by2.78%

Lines of code

1011

increased by2.02%

No dependency changes