@atlaskit/navigation-system 0.166.0 → 0.167.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlassian/navigation-system
 
+## 0.167.0
+
+### Minor Changes
+
+- [#176198](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176198)
+  [`6f29446debd94`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f29446debd94) -
+  We have now removed the `"platform_design_system_nav4_menu_item_anchor_dnd"` feature flag. Drag
+  and drop of side navigation menu items that are anchors (eg `LinkMenuItem`) now needs to be
+  explicitly enabled with our
+  [side navigation drag and drop API](https://atlassian.design/components/navigation-system/side-navigation/drag-and-drop)
+- [#173222](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173222)
+  [`1b1ca5e516115`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1b1ca5e516115) -
+  Cleans up `platform_design_system_nav4_panel_default_bg_color` feature gate. The Panel slot will
+  now always have a default background color.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.166.0
 
 ### Minor Changes

package/constellation/layout/examples.mdx

@@ -182,7 +182,7 @@ Resizing is supported for the following areas:
 
 Advanced layouts can be created inside of the [main area](#main).
 
-<Example Component={AdvancedLayoutExample} />
+<Example Component={AdvancedLayoutExample} appearance="source-only" />
 
 ### Custom skip links
 

package/dist/cjs/ui/menu-item/menu-item.js

@@ -16,7 +16,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
 var _avatar = require("@atlaskit/avatar");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireWildcard(require("@atlaskit/tooltip"));
 var _forwardRefWithGeneric = require("../../components/forward-ref-with-generic");
@@ -384,13 +383,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
        * the element as draggable through the `draggable()` Pragmatic drag and drop function.
        * The `draggable()` function will add `draggable="true"` to the element.
        */,
-      draggable: function () {
-        if ((0, _platformFeatureFlags.fg)('platform_design_system_nav4_menu_item_anchor_dnd')) {
-          return hasDragIndicator === true ? undefined : false;
-        }
-        // legacy behaviour
-        return undefined;
-      }()
+      draggable: hasDragIndicator ? undefined : false
     }), /*#__PURE__*/_react.default.createElement("div", {
       "aria-hidden": "true",
       className: (0, _runtime.ax)([notchStyles.root])

package/dist/cjs/ui/page-layout/panel.js

@@ -61,8 +61,7 @@ function getOldResizeBounds() {
  */
 var fallbackResizeMinWidth = 400;
 var styles = {
-  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _14b54rrg _1dhy1c6w _9sns1wug",
-  backgroundColor: "_bfhk1bhr _4ap3vuon",
+  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
   border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
@@ -165,7 +164,7 @@ function Panel(_ref) {
     id: id,
     "data-layout-slot": true,
     "aria-label": label,
-    className: (0, _runtime.ax)([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, (0, _platformFeatureFlags.fg)('platform_design_system_nav4_panel_default_bg_color') && styles.backgroundColor, (0, _platformFeatureFlags.fg)('platform_design_system_nav4_panel_mobile_width_fix') ? styles.newMobileWidth : styles.oldMobileWidth, xcss]),
+    className: (0, _runtime.ax)([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, (0, _platformFeatureFlags.fg)('platform_design_system_nav4_panel_mobile_width_fix') ? styles.newMobileWidth : styles.oldMobileWidth, xcss]),
     style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.panelVar, panelVariableWidth), '--minWidth', (0, _platformFeatureFlags.fg)('platform_design_system_nav4_panel_mobile_width_fix') ? "".concat(minWidth, "px") : undefined),
     "data-testid": testId,
     ref: ref

package/dist/es2019/ui/menu-item/menu-item.js

@@ -6,7 +6,6 @@ import React, { forwardRef, lazy, Suspense, useCallback, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { AvatarContext } from '@atlaskit/avatar';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Pressable, Text } from '@atlaskit/primitives/compiled';
 import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
 import { forwardRefWithGeneric } from '../../components/forward-ref-with-generic';
@@ -368,13 +367,7 @@ const MenuItemBaseNoRef = ({
        * the element as draggable through the `draggable()` Pragmatic drag and drop function.
        * The `draggable()` function will add `draggable="true"` to the element.
        */,
-      draggable: (() => {
-        if (fg('platform_design_system_nav4_menu_item_anchor_dnd')) {
-          return hasDragIndicator === true ? undefined : false;
-        }
-        // legacy behaviour
-        return undefined;
-      })()
+      draggable: hasDragIndicator ? undefined : false
     }), /*#__PURE__*/React.createElement("div", {
       "aria-hidden": "true",
       className: ax([notchStyles.root])

package/dist/es2019/ui/page-layout/panel.js

@@ -50,8 +50,7 @@ function getOldResizeBounds() {
  */
 const fallbackResizeMinWidth = 400;
 const styles = {
-  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _14b54rrg _1dhy1c6w _9sns1wug",
-  backgroundColor: "_bfhk1bhr _4ap3vuon",
+  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
   border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
@@ -148,7 +147,7 @@ export function Panel({
     id: id,
     "data-layout-slot": true,
     "aria-label": label,
-    className: ax([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, fg('platform_design_system_nav4_panel_default_bg_color') && styles.backgroundColor, fg('platform_design_system_nav4_panel_mobile_width_fix') ? styles.newMobileWidth : styles.oldMobileWidth, xcss]),
+    className: ax([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, fg('platform_design_system_nav4_panel_mobile_width_fix') ? styles.newMobileWidth : styles.oldMobileWidth, xcss]),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
       [panelVar]: panelVariableWidth,

package/dist/esm/ui/menu-item/menu-item.js

@@ -11,7 +11,6 @@ import React, { forwardRef, lazy, Suspense, useCallback, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { AvatarContext } from '@atlaskit/avatar';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Pressable, Text } from '@atlaskit/primitives/compiled';
 import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
 import { forwardRefWithGeneric } from '../../components/forward-ref-with-generic';
@@ -373,13 +372,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
        * the element as draggable through the `draggable()` Pragmatic drag and drop function.
        * The `draggable()` function will add `draggable="true"` to the element.
        */,
-      draggable: function () {
-        if (fg('platform_design_system_nav4_menu_item_anchor_dnd')) {
-          return hasDragIndicator === true ? undefined : false;
-        }
-        // legacy behaviour
-        return undefined;
-      }()
+      draggable: hasDragIndicator ? undefined : false
     }), /*#__PURE__*/React.createElement("div", {
       "aria-hidden": "true",
       className: ax([notchStyles.root])

package/dist/esm/ui/page-layout/panel.js

@@ -52,8 +52,7 @@ function getOldResizeBounds() {
  */
 var fallbackResizeMinWidth = 400;
 var styles = {
-  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _14b54rrg _1dhy1c6w _9sns1wug",
-  backgroundColor: "_bfhk1bhr _4ap3vuon",
+  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
   border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
@@ -156,7 +155,7 @@ export function Panel(_ref) {
     id: id,
     "data-layout-slot": true,
     "aria-label": label,
-    className: ax([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, fg('platform_design_system_nav4_panel_default_bg_color') && styles.backgroundColor, fg('platform_design_system_nav4_panel_mobile_width_fix') ? styles.newMobileWidth : styles.oldMobileWidth, xcss]),
+    className: ax([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, fg('platform_design_system_nav4_panel_mobile_width_fix') ? styles.newMobileWidth : styles.oldMobileWidth, xcss]),
     style: _defineProperty(_defineProperty({}, panelVar, panelVariableWidth), '--minWidth', fg('platform_design_system_nav4_panel_mobile_width_fix') ? "".concat(minWidth, "px") : undefined),
     "data-testid": testId,
     ref: ref

package/examples/company-hub-mock.tsx

@@ -44,9 +44,6 @@ import { WithResponsiveViewport } from './utils/example-utils';
 import { MockSearch } from './utils/mock-search';
 
 const panelStyles = cssMap({
-	root: {
-		backgroundColor: token('elevation.surface'),
-	},
 	header: {
 		paddingInline: token('space.300'),
 		paddingBlock: token('space.150'),
@@ -108,14 +105,7 @@ const contentStyles = cssMap({
  * - Has a `Panel`
  * - Does not have a `SideNav`
  */
-export function CompanyHubMockExample({
-	hasPanelBackgroundColor = true,
-	defaultPanelWidth = 440,
-}: {
-	// Will remove this after cleaning up platform_design_system_nav4_panel_default_bg_color
-	hasPanelBackgroundColor?: boolean;
-	defaultPanelWidth?: number;
-}) {
+export function CompanyHubMockExample({ defaultPanelWidth = 440 }: { defaultPanelWidth?: number }) {
 	const [isChatOpen, setIsChatOpen] = useState(true);
 
 	const toggleChat = useCallback(() => {
@@ -196,10 +186,7 @@ export function CompanyHubMockExample({
 					</Stack>
 				</Main>
 				{isChatOpen && (
-					<Panel
-						xcss={hasPanelBackgroundColor && panelStyles.root}
-						defaultWidth={defaultPanelWidth}
-					>
+					<Panel defaultWidth={defaultPanelWidth}>
 						<Inline xcss={panelStyles.header}>
 							<Text weight="bold" color="color.text.subtle">
 								Chat
@@ -229,13 +216,8 @@ export function CompanyHubMockExample({
 	);
 }
 
-// Can remove after cleaning up platform_design_system_nav4_panel_default_bg_color
-export const CompanyHubMockNoPanelBackgroundColorExample = () => (
-	<CompanyHubMockExample hasPanelBackgroundColor={false} />
-);
-
 export const CompanyHubMockSmallDefaultPanelWidthExample = () => (
 	<CompanyHubMockExample defaultPanelWidth={320} />
 );
 
-export default CompanyHubMockNoPanelBackgroundColorExample;
+export default CompanyHubMockExample;

package/examples/composition.tsx

@@ -85,9 +85,6 @@ const contentStyles = cssMap({
 });
 
 const panelStyles = cssMap({
-	root: {
-		backgroundColor: token('elevation.surface'),
-	},
 	content: {
 		paddingTop: token('space.300'),
 		paddingRight: token('space.300'),
@@ -476,7 +473,7 @@ export default function Composition({
 					<PanelSplitter label="Resize aside" />
 				</Aside>
 				{isPanelVisible && (
-					<Panel xcss={panelStyles.root}>
+					<Panel>
 						<Stack space="space.200" xcss={panelStyles.content}>
 							<Heading size="small">Help</Heading>
 							<Stack space="space.050">

package/examples/confluence-mock.tsx

@@ -73,9 +73,6 @@ import { WithResponsiveViewport } from './utils/example-utils';
 import { MockSearch } from './utils/mock-search';
 
 const panelStyles = cssMap({
-	root: {
-		backgroundColor: token('elevation.surface'),
-	},
 	header: {
 		paddingInline: token('space.300'),
 		paddingBlock: token('space.150'),
@@ -258,7 +255,7 @@ export default function ConfluenceMockExample({}: {}) {
 						</Stack>
 					</Stack>
 				</Main>
-				<Panel xcss={panelStyles.root}>
+				<Panel>
 					<Inline xcss={panelStyles.header}>
 						<Inline space="space.050" alignBlock="center">
 							<ProjectIcon label="" spacing="spacious" color={token('color.icon.subtle')} />

package/examples/drag-and-drop/jira/filters/filter-move-modal.tsx

@@ -5,8 +5,7 @@
 
 import { useCallback, useMemo, useState } from 'react';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { jsx } from '@compiled/react';
 import invariant from 'tiny-invariant';
 
 import Button from '@atlaskit/button/new';

package/examples/drag-and-drop/jira/projects/project.tsx

@@ -216,11 +216,8 @@ function Project({
 				}),
 				canDrop: ({ source }) => {
 					const data = source.data;
-					if (!isProjectData(data)) {
-						return false;
-					}
-					// only allowing projects to be dropped in the same group
-					return Boolean(group.find((project) => project.id === data.id));
+					// Only allowing projects to be dropped in the same group
+					return isProjectData(data) && data.groupName === groupName;
 				},
 			},
 		});

package/examples/page-layout-full-screen.tsx

@@ -64,9 +64,6 @@ const asideStyles = cssMap({
 });
 
 const panelStyles = cssMap({
-	root: {
-		backgroundColor: token('elevation.surface'),
-	},
 	content: {
 		paddingTop: token('space.300'),
 		paddingRight: token('space.300'),
@@ -227,7 +224,7 @@ export default function FullScreenModeExample() {
 					</Aside>
 				)}
 				{isPanelVisible && !isFullscreen && (
-					<Panel xcss={panelStyles.root} defaultWidth={350}>
+					<Panel defaultWidth={350}>
 						<Stack space="space.200" xcss={panelStyles.content}>
 							<Heading size="small">Panel</Heading>
 							<Stack space="space.050">

package/examples/page-layout-panel-aside-default-widths.tsx

@@ -56,9 +56,6 @@ const asideStyles = cssMap({
 });
 
 const panelStyles = cssMap({
-	root: {
-		backgroundColor: token('elevation.surface'),
-	},
 	content: {
 		paddingTop: token('space.300'),
 		paddingRight: token('space.300'),
@@ -218,7 +215,7 @@ export default function PanelAsideDefaultWidths({
 					</Aside>
 				)}
 				{isPanelRendered && (
-					<Panel xcss={panelStyles.root} defaultWidth={panelWidth}>
+					<Panel defaultWidth={panelWidth}>
 						<Stack space="space.200" xcss={panelStyles.content}>
 							<Heading size="small">Panel</Heading>
 							<Stack space="space.050">

package/examples/resizable-slots.tsx

@@ -70,9 +70,6 @@ const asideStyles = cssMap({
 });
 
 const panelStyles = cssMap({
-	root: {
-		backgroundColor: token('elevation.surface'),
-	},
 	content: {
 		paddingTop: token('space.300'),
 		paddingRight: token('space.300'),
@@ -329,7 +326,7 @@ export function ResizableSlots() {
 				/>
 			</Aside>
 
-			<Panel xcss={panelStyles.root} defaultWidth={350} id="panel" testId="panel">
+			<Panel defaultWidth={350} id="panel" testId="panel">
 				<Stack space="space.200" xcss={panelStyles.content}>
 					<Heading size="small">Panel</Heading>
 					<Stack space="space.050">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "0.166.0",
+	"version": "0.167.0",
 	"description": "The latest navigation system for Atlassian products.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -72,7 +72,7 @@
 			"category": "Navigation",
 			"status": {
 				"type": "alpha",
-				"description": "This package is currently only available to Atlassians. We may make frequent breaking changes with limited notice."
+				"description": "This package is experimental. We may make frequent breaking changes with limited notice."
 			},
 			"subPages": [
 				{
@@ -80,7 +80,7 @@
 					"id": "layout",
 					"status": {
 						"type": "alpha",
-						"description": "This package is currently only available to Atlassians. We may make frequent breaking changes with limited notice."
+						"description": "This package is experimental. We may make frequent breaking changes with limited notice."
 					},
 					"sortKey": 1
 				},
@@ -89,7 +89,7 @@
 					"id": "side-navigation",
 					"status": {
 						"type": "alpha",
-						"description": "This package is currently only available to Atlassians. We may make frequent breaking changes with limited notice."
+						"description": "This package is experimental. We may make frequent breaking changes with limited notice."
 					},
 					"sortKey": 2
 				},
@@ -98,7 +98,7 @@
 					"id": "top-navigation",
 					"status": {
 						"type": "alpha",
-						"description": "This package is currently only available to Atlassians. We may make frequent breaking changes with limited notice."
+						"description": "This package is experimental. We may make frequent breaking changes with limited notice."
 					},
 					"sortKey": 3
 				}
@@ -117,9 +117,9 @@
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/css": "^0.11.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^27.0.0",
+		"@atlaskit/icon": "^27.2.0",
 		"@atlaskit/layering": "^3.0.0",
-		"@atlaskit/logo": "^19.1.0",
+		"@atlaskit/logo": "^19.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -127,7 +127,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.9.0",
 		"@atlaskit/temp-nav-app-icons": "^0.8.0",
-		"@atlaskit/tokens": "^5.3.0",
+		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -157,7 +157,7 @@
 		"@atlaskit/page-header": "^12.0.0",
 		"@atlaskit/page-layout": "^4.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
-		"@atlaskit/select": "^20.7.0",
+		"@atlaskit/select": "^21.0.0",
 		"@atlaskit/skeleton": "^2.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
@@ -204,18 +204,12 @@
 		"platform_design_system_nav4_live_resizing_css_vars": {
 			"type": "boolean"
 		},
-		"platform_design_system_nav4_panel_default_bg_color": {
-			"type": "boolean"
-		},
 		"platform_design_system_nav4_top_nav_columns": {
 			"type": "boolean"
 		},
 		"platform_design_system_nav4_top_nav_min_widths": {
 			"type": "boolean"
 		},
-		"platform_design_system_nav4_menu_item_anchor_dnd": {
-			"type": "boolean"
-		},
 		"platform-team25-app-icon-tiles": {
 			"type": "boolean"
 		},

package/src/ui/menu-item/menu-item.tsx

@@ -10,7 +10,6 @@ import { cssMap, cx, jsx, keyframes } from '@compiled/react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { AvatarContext, type AvatarContextProps } from '@atlaskit/avatar';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Pressable, Text, type TextColor } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 import Tooltip, {
@@ -777,13 +776,7 @@ const MenuItemBaseNoRef = <T extends HTMLAnchorElement | HTMLButtonElement>(
 								 * the element as draggable through the `draggable()` Pragmatic drag and drop function.
 								 * The `draggable()` function will add `draggable="true"` to the element.
 								 */
-								draggable={((): boolean | undefined => {
-									if (fg('platform_design_system_nav4_menu_item_anchor_dnd')) {
-										return hasDragIndicator === true ? undefined : false;
-									}
-									// legacy behaviour
-									return undefined;
-								})()}
+								draggable={hasDragIndicator ? undefined : false}
 							>
 								{/* Won't be a "grid child" */}
 								<div css={notchStyles.root} aria-hidden="true" />

package/src/ui/page-layout/__tests__/vr-tests/page-layout.vr.tsx

@@ -1,8 +1,6 @@
 import { Device, type Hooks, snapshot, type SnapshotTestOptions } from '@af/visual-regression';
 
-import CompanyHubMockExample, {
-	CompanyHubMockNoPanelBackgroundColorExample,
-} from '../../../../../examples/company-hub-mock';
+import CompanyHubMockExample from '../../../../../examples/company-hub-mock';
 import {
 	AllSlots,
 	AllSlotsBannerHeightZero,
@@ -308,7 +306,7 @@ snapshot(CompanyHubMockExample, {
 	description: 'Panel should have correct width when there is no SideNav mounted',
 });
 
-snapshot(CompanyHubMockNoPanelBackgroundColorExample, {
+snapshot(CompanyHubMockExample, {
 	variants: [
 		/**
 		 * Using dark mode because only dark mode has a difference between the elevation appearances.
@@ -330,7 +328,6 @@ snapshot(CompanyHubMockNoPanelBackgroundColorExample, {
 	],
 	featureFlags: {
 		platform_design_system_nav4_preview_panel_support: true,
-		platform_design_system_nav4_panel_default_bg_color: true,
 		platform_design_system_nav4_panel_default_border: true,
 	},
 	description: 'Panel default background color',

package/src/ui/page-layout/panel.tsx

@@ -82,22 +82,20 @@ const styles = cssMap({
 		// spec for sticky doesn't support "stick to where I'm initially rendered" so we need to tell it.
 		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
 		insetBlockStart: contentInsetBlockStart,
+		backgroundColor: token('elevation.surface.overlay'),
 		'@media (min-width: 48rem)': {
 			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
 			width: `var(${panelSplitterResizingVar}, var(${panelVar}))`,
 		},
+		'@media (min-width: 64rem)': {
+			backgroundColor: token('elevation.surface'),
+		},
 		'@media (min-width: 90rem)': {
 			gridArea: 'panel',
 			// On large viewports the panel is displayed next to other slots so we reset the zindex.
 			zIndex: 'auto',
 		},
 	},
-	backgroundColor: {
-		backgroundColor: token('elevation.surface.overlay'),
-		'@media (min-width: 64rem)': {
-			backgroundColor: token('elevation.surface'),
-		},
-	},
 	border: {
 		// We use a shadow when the panel is an overlay
 		boxShadow: token('elevation.shadow.overlay'),
@@ -281,7 +279,6 @@ export function Panel({
 				styles.root,
 				defaultWidth === 0 && styles.hidden,
 				hasBorder && styles.border,
-				fg('platform_design_system_nav4_panel_default_bg_color') && styles.backgroundColor,
 				fg('platform_design_system_nav4_panel_mobile_width_fix')
 					? styles.newMobileWidth
 					: styles.oldMobileWidth,