From 5787c1de07b7129bc9059832d7bde1b411835c7b Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 3 Aug 2023 10:57:24 -0700
Subject: [PATCH 1/2] feat(@clayui/navigation-bar): Adds fluidSize prop to
 customize container-fluid width

---
 packages/clay-navigation-bar/src/index.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/clay-navigation-bar/src/index.tsx b/packages/clay-navigation-bar/src/index.tsx
index b488731f0b..6e239136b8 100644
--- a/packages/clay-navigation-bar/src/index.tsx
+++ b/packages/clay-navigation-bar/src/index.tsx
@@ -31,6 +31,13 @@ export interface IProps
 		| Array<React.ReactElement<React.ComponentProps<typeof Item>>>
 		| React.ReactElement<React.ComponentProps<typeof Item>>;
 
+	/**
+	 * Set a maximum width on container-fluid.
+	 */
+	fluidSize?:
+		| React.ComponentProps<typeof ClayLayout.Container>['fluidSize']
+		| false;
+
 	/**
 	 * Determines the style of the Navigation Bar
 	 */
@@ -54,6 +61,7 @@ function ClayNavigationBar(props: IProps): JSX.Element & {
 function ClayNavigationBar({
 	children,
 	className,
+	fluidSize,
 	inverted = false,
 	itemAriaCurrent: ariaCurrent = true,
 	spritemap,
@@ -93,7 +101,7 @@ function ClayNavigationBar({
 			<NavigationBarContext.Provider
 				value={{ariaCurrent: ariaCurrent ? 'page' : null}}
 			>
-				<ClayLayout.ContainerFluid>
+				<ClayLayout.ContainerFluid size={fluidSize}>
 					<ClayButton
 						aria-expanded={expanded}
 						className={classNames(
@@ -139,7 +147,7 @@ function ClayNavigationBar({
 						timeout={prefersReducedMotion ? 0 : 250}
 					>
 						<div>
-							<ClayLayout.ContainerFluid>
+							<ClayLayout.ContainerFluid size={fluidSize}>
 								<ul className="navbar-nav">{children}</ul>
 							</ClayLayout.ContainerFluid>
 						</div>

From a0568aefbe644397351a4e529a31410165118ad1 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 3 Aug 2023 10:57:50 -0700
Subject: [PATCH 2/2] chore(@clayui/navigation-bar): Update storybook with
 fluidSize prop

---
 .../stories/NavigationBar.stories.tsx                 | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/clay-navigation-bar/stories/NavigationBar.stories.tsx b/packages/clay-navigation-bar/stories/NavigationBar.stories.tsx
index 27e1dd8e56..5e18b12dcc 100644
--- a/packages/clay-navigation-bar/stories/NavigationBar.stories.tsx
+++ b/packages/clay-navigation-bar/stories/NavigationBar.stories.tsx
@@ -18,7 +18,11 @@ export const NavigationBar = (args: any) => {
 	const [triggerName, setTriggerName] = useState<string>(args.active);
 
 	return (
-		<ClayNavigationBar inverted={args.inverted} triggerLabel={triggerName}>
+		<ClayNavigationBar
+			fluidSize={args.fluidSize}
+			inverted={args.inverted}
+			triggerLabel={triggerName}
+		>
 			<ClayNavigationBar.Item active={args.active === 'Item 1'}>
 				<ClayLink href="#">Item 1</ClayLink>
 			</ClayNavigationBar.Item>
@@ -47,9 +51,14 @@ NavigationBar.argTypes = {
 		control: {type: 'select'},
 		options: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
 	},
+	fluidSize: {
+		control: {type: 'select'},
+		options: [undefined, false, 'sm', 'md', 'lg', 'xl'],
+	},
 };
 
 NavigationBar.args = {
 	active: 'Item 1',
+	fluidSize: 'xl',
 	inverted: false,
 };