@atlaskit/button 16.3.6 → 16.3.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/button
 
+## 16.3.7
+
+### Patch Changes
+
+- [`14d635468f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/14d635468f6) - [ux] DSP-6696: prevent empty ButtonGroup items from showing spacing by switching to flexbox gap
+
 ## 16.3.6
 
 ### Patch Changes

package/dist/cjs/button-group.js

@@ -1,48 +1,38 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ButtonGroup;
-exports.groupItemStyles = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
-var _constants = require("@atlaskit/theme/constants");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /** @jsx jsx */
-var groupItemStyles = {
-  flex: '1 0 auto',
-  display: 'flex',
-
-  /* margins don't flip when the layout uses dir="rtl", whereas pseudos do */
-  '& + &::before': {
-    content: "''",
-    display: 'inline-block',
-    width: "".concat((0, _constants.gridSize)() / 2, "px")
-  }
-};
-exports.groupItemStyles = groupItemStyles;
+var buttonGroupStyles = (0, _core.css)({
+  display: 'inline-flex',
+  gap: 4
+});
 
 function ButtonGroup(_ref) {
   var appearance = _ref.appearance,
       children = _ref.children;
   return (0, _core.jsx)("div", {
-    css: {
-      display: 'inline-flex'
-    }
+    css: buttonGroupStyles
   }, _react.default.Children.map(children, function (child, idx) {
     if (!child) {
       return null;
     }
 
-    return (0, _core.jsx)("div", {
-      key: idx,
-      css: groupItemStyles
+    return (0, _core.jsx)(_react.Fragment, {
+      key: idx
     }, appearance ?
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-clone-element

package/dist/cjs/shared/button-base.js

@@ -101,7 +101,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.6",
+    packageVersion: "16.3.7",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.3.6",
+	"version": "16.3.7",
 	"sideEffects": false
 }

package/dist/es2019/button-group.js

@@ -1,34 +1,23 @@
 /** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/core';
-import { gridSize } from '@atlaskit/theme/constants';
-export const groupItemStyles = {
-  flex: '1 0 auto',
-  display: 'flex',
-
-  /* margins don't flip when the layout uses dir="rtl", whereas pseudos do */
-  '& + &::before': {
-    content: `''`,
-    display: 'inline-block',
-    width: `${gridSize() / 2}px`
-  }
-};
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/core';
+const buttonGroupStyles = css({
+  display: 'inline-flex',
+  gap: 4
+});
 export default function ButtonGroup({
   appearance,
   children
 }) {
   return jsx("div", {
-    css: {
-      display: 'inline-flex'
-    }
+    css: buttonGroupStyles
   }, React.Children.map(children, (child, idx) => {
     if (!child) {
       return null;
     }
 
-    return jsx("div", {
-      key: idx,
-      css: groupItemStyles
+    return jsx(Fragment, {
+      key: idx
     }, appearance ?
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-clone-element

package/dist/es2019/shared/button-base.js

@@ -68,7 +68,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.6",
+    packageVersion: "16.3.7",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.3.6",
+	"version": "16.3.7",
 	"sideEffects": false
 }

package/dist/esm/button-group.js

@@ -1,33 +1,22 @@
 /** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/core';
-import { gridSize } from '@atlaskit/theme/constants';
-export var groupItemStyles = {
-  flex: '1 0 auto',
-  display: 'flex',
-
-  /* margins don't flip when the layout uses dir="rtl", whereas pseudos do */
-  '& + &::before': {
-    content: "''",
-    display: 'inline-block',
-    width: "".concat(gridSize() / 2, "px")
-  }
-};
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/core';
+var buttonGroupStyles = css({
+  display: 'inline-flex',
+  gap: 4
+});
 export default function ButtonGroup(_ref) {
   var appearance = _ref.appearance,
       children = _ref.children;
   return jsx("div", {
-    css: {
-      display: 'inline-flex'
-    }
+    css: buttonGroupStyles
   }, React.Children.map(children, function (child, idx) {
     if (!child) {
       return null;
     }
 
-    return jsx("div", {
-      key: idx,
-      css: groupItemStyles
+    return jsx(Fragment, {
+      key: idx
     }, appearance ?
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-clone-element

package/dist/esm/shared/button-base.js

@@ -77,7 +77,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.6",
+    packageVersion: "16.3.7",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.3.6",
+	"version": "16.3.7",
 	"sideEffects": false
 }

package/dist/types/button-group.d.ts

@@ -8,13 +8,4 @@ export declare type ButtonGroupProps = {
     appearance?: Appearance;
     children?: React.ReactNode;
 };
-export declare const groupItemStyles: {
-    flex: string;
-    display: string;
-    '& + &::before': {
-        content: string;
-        display: string;
-        width: string;
-    };
-};
 export default function ButtonGroup({ appearance, children, }: ButtonGroupProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.3.6",
+  "version": "16.3.7",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
@@ -46,14 +46,14 @@
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/logo": "^13.8.0",
-    "@atlaskit/section-message": "^6.1.0",
-    "@atlaskit/select": "^15.6.0",
+    "@atlaskit/logo": "^13.9.0",
+    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
     "@types/react-router-dom": "^4.3.1",
     "ast-types": "^0.13.3",
     "bind-event-listener": "^2.1.1",