Merge pull request #5657 from pat270/LPS-192418

feat(@clayui/navigation-bar): Adds fluidSize prop to customize container-fluid width
liferay · Aug 3, 2023 · d3d90de · d3d90de
2 parents d6b28ef + a0568ae
commit d3d90de
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git 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>

diff --git 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,
 };