@wordpress/admin-ui 1.4.0 → 1.4.1-next.738bb1424.0

package/src/page/header.tsx

@@ -7,12 +7,18 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import { SidebarToggleSlot } from './sidebar-toggle-slot';
+
 export default function Header( {
 	breadcrumbs,
 	badges,
 	title,
 	subTitle,
 	actions,
+	showSidebarToggle = true,
 }: {
 	breadcrumbs?: React.ReactNode;
 	badges?: React.ReactNode;
@@ -23,12 +29,14 @@ export default function Header( {
 } ) {
 	return (
 		<VStack className="admin-ui-page__header" as="header">
-			<HStack
-				className="admin-ui-page__header-title"
-				justify="space-between"
-				spacing={ 2 }
-			>
-				<HStack spacing={ 2 }>
+			<HStack justify="space-between" spacing={ 2 }>
+				<HStack spacing={ 2 } justify="left">
+					{ showSidebarToggle && (
+						<SidebarToggleSlot
+							bubblesVirtually
+							className="admin-ui-page__sidebar-toggle-slot"
+						/>
+					) }
 					{ title && (
 						<Heading as="h2" level={ 3 } weight={ 500 } truncate>
 							{ title }

package/src/page/index.tsx

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import Header from './header';
 import NavigableRegion from '../navigable-region';
+import { SidebarToggleFill } from './sidebar-toggle-slot';
 
 function Page( {
 	breadcrumbs,
@@ -18,6 +19,7 @@ function Page( {
 	className,
 	actions,
 	hasPadding = false,
+	showSidebarToggle = true,
 }: {
 	breadcrumbs?: React.ReactNode;
 	badges?: React.ReactNode;
@@ -27,6 +29,7 @@ function Page( {
 	className?: string;
 	actions?: React.ReactNode;
 	hasPadding?: boolean;
+	showSidebarToggle?: boolean;
 } ) {
 	const classes = clsx( 'admin-ui-page', className );
 
@@ -39,6 +42,7 @@ function Page( {
 					title={ title }
 					subTitle={ subTitle }
 					actions={ actions }
+					showSidebarToggle={ showSidebarToggle }
 				/>
 			) }
 			{ hasPadding ? (
@@ -52,4 +56,6 @@ function Page( {
 	);
 }
 
+Page.SidebarToggleFill = SidebarToggleFill;
+
 export default Page;

package/src/page/sidebar-toggle-slot.tsx

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: SidebarToggleFill, Slot: SidebarToggleSlot } =
+	createSlotFill( 'SidebarToggle' );
+
+export { SidebarToggleFill, SidebarToggleSlot };

package/src/page/style.scss

@@ -11,23 +11,19 @@
 	position: relative;
 	z-index: 1;
 	flex-flow: column;
-	container: admin-ui-page / inline-size;
-
-	@media not (prefers-reduced-motion) {
-		transition: width ease-out 0.2s;
-	}
 }
 
 .admin-ui-page__header {
-	padding: $grid-unit-20 $grid-unit-60;
+	padding: $grid-unit-20 $grid-unit-30;
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;
 	top: 0;
+	z-index: 1;
+}
 
-	@container (max-width: 430px) {
-		padding: $grid-unit-20 $grid-unit-30;
-	}
+.admin-ui-page__sidebar-toggle-slot:empty {
+	display: none;
 }
 
 .admin-ui-page__header-subtitle {
@@ -44,10 +40,7 @@
 	flex-direction: column;
 
 	&.has-padding {
-		padding: $grid-unit-20 $grid-unit * 2.5;
-		@container (max-width: 430px) {
-			padding: $grid-unit-20 $grid-unit-30;
-		}
+		padding: $grid-unit-20 $grid-unit-30;
 	}
 }
 
@@ -71,4 +64,3 @@
 
 	}
 }
-

package/build/page/header.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/page/header.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\nexport default function Header( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle: React.ReactNode;\n\tactions?: React.ReactNode;\n\tshowSidebarToggle?: boolean;\n} ) {\n\treturn (\n\t\t<VStack className=\"admin-ui-page__header\" as=\"header\">\n\t\t\t<HStack\n\t\t\t\tclassName=\"admin-ui-page__header-title\"\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tspacing={ 2 }\n\t\t\t>\n\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<Heading as=\"h2\" level={ 3 } weight={ 500 } truncate>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t) }\n\t\t\t\t\t{ breadcrumbs }\n\t\t\t\t\t{ badges }\n\t\t\t\t</HStack>\n\t\t\t\t<HStack\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</HStack>\n\t\t\t</HStack>\n\t\t\t{ subTitle && (\n\t\t\t\t<p className=\"admin-ui-page__header-subtitle\">{ subTitle }</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AAuBH;AArBW,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAOI;AACH,SACC,6CAAC,kBAAAA,sBAAA,EAAO,WAAU,yBAAwB,IAAG,UAC5C;AAAA;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,SAAU;AAAA,QAEV;AAAA,uDAAC,kBAAAA,sBAAA,EAAO,SAAU,GACf;AAAA,qBACD,4CAAC,kBAAAC,uBAAA,EAAQ,IAAG,MAAK,OAAQ,GAAI,QAAS,KAAM,UAAQ,MACjD,iBACH;AAAA,YAEC;AAAA,YACA;AAAA,aACH;AAAA,UACA;AAAA,YAAC,kBAAAD;AAAA,YAAA;AAAA,cACA,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,cACvC,SAAU;AAAA,cACV,WAAU;AAAA,cAER;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACD;AAAA,IACE,YACD,4CAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA,KAE5D;AAEF;",
-  "names": ["VStack", "HStack", "Heading"]
-}

package/build/page/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/page/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\n\nfunction Page( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\thasPadding = false,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\thasPadding?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ title }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nexport default Page;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,oBAAmB;AACnB,8BAA4B;AAwB1B;AAtBF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACd,GASI;AACH,QAAM,cAAU,YAAAA,SAAM,iBAAiB,SAAU;AAEjD,SACC,6CAAC,wBAAAC,SAAA,EAAgB,WAAY,SAAU,WAAY,OAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,4CAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,IAAO,eAAQ;",
-  "names": ["clsx", "NavigableRegion", "Header"]
-}

package/tsconfig.json

@@ -1,10 +0,0 @@
-{
-	"$schema": "https://json.schemastore.org/tsconfig.json",
-	"extends": "../../tsconfig.base.json",
-	"references": [
-		{ "path": "../components" },
-		{ "path": "../element" },
-		{ "path": "../i18n" },
-		{ "path": "../route" }
-	]
-}