@atlaskit/menu 2.1.1 → 2.1.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/menu
 
+## 2.1.2
+
+### Patch Changes
+
+- [#42474](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42474) [`d7400cb1aa2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7400cb1aa2) - Adds a platform feature flag to adjust Menu Section seperator border widths from 2px to 1px.
+- Updated dependencies
+
 ## 2.1.1
 
 ### Patch Changes

package/dist/cjs/menu-section/section.js

@@ -70,9 +70,12 @@ var scrollableStyles = (0, _react2.css)({
 var unscrollableStyles = (0, _react2.css)({
   flexShrink: 0
 });
-var separatorStyles = (0, _react2.css)({
+var thickSeparatorStyles = (0, _react2.css)({
   borderBlockStart: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30A, ")"), ")")
 });
+var thinSeparatorStyles = (0, _react2.css)({
+  borderBlockStart: "1px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30A, ")"), ")")
+});
 var noSeparatorStyles = (0, _react2.css)({
   // this is to ensure that adjacent sections without separators don't get additional margins.
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -133,7 +136,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
     "data-testid": testId,
     role: "group",

package/dist/es2019/menu-section/section.js

@@ -61,9 +61,12 @@ const scrollableStyles = css({
 const unscrollableStyles = css({
   flexShrink: 0
 });
-const separatorStyles = css({
+const thickSeparatorStyles = css({
   borderBlockStart: `2px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30A})`})`
 });
+const thinSeparatorStyles = css({
+  borderBlockStart: `1px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30A})`})`
+});
 const noSeparatorStyles = css({
   // this is to ensure that adjacent sections without separators don't get additional margins.
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -126,7 +129,7 @@ const Section = /*#__PURE__*/forwardRef(({
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? getBooleanFF('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
     "data-testid": testId,
     role: "group",

package/dist/esm/menu-section/section.js

@@ -63,9 +63,12 @@ var scrollableStyles = css({
 var unscrollableStyles = css({
   flexShrink: 0
 });
-var separatorStyles = css({
+var thickSeparatorStyles = css({
   borderBlockStart: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(N30A, ")"), ")")
 });
+var thinSeparatorStyles = css({
+  borderBlockStart: "1px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(N30A, ")"), ")")
+});
 var noSeparatorStyles = css({
   // this is to ensure that adjacent sections without separators don't get additional margins.
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -126,7 +129,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? getBooleanFF('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
     "data-testid": testId,
     role: "group",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.6.0",
+    "@atlaskit/primitives": "^1.9.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -106,8 +107,11 @@
   "platform-feature-flags": {
     "platform.design-system-team.unsafe-overrides-killswitch_c8j9m": {
       "type": "boolean"
+    },
+    "platform.design-system-team.section-1px-seperator-borders": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/menu/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}