GrafanaUI: Allow wrap prop on Stack to be a boolean (#90145)

packages/grafana-ui/src/components/Layout/Stack/Stack.story.tsx

@@ -80,13 +80,13 @@ export const AlignItemsExamples: StoryFn<typeof Stack> = () => {
   return (
     <div style={{ width: '600px' }}>
       <p>Align items flex-start</p>
-      <Stack direction="row" wrap="wrap" alignItems="flex-start" justifyContent="start" gap={2}>
+      <Stack direction="row" wrap alignItems="flex-start" justifyContent="start" gap={2}>
         {Array.from({ length: 5 }).map((_, i) => (
           <Item key={i} color={theme.colors.error.main} text={i + 1} />
         ))}
       </Stack>
       <p>Align items flex-end</p>
-      <Stack direction="row" wrap="wrap" alignItems="flex-end" justifyContent="end" gap={2}>
+      <Stack direction="row" wrap alignItems="flex-end" justifyContent="end" gap={2}>
         {Array.from({ length: 5 }).map((_, i) => (
           <Item key={i} color={theme.colors.error.main} text={i + 1} />
         ))}
@@ -98,13 +98,13 @@ export const AlignItemsExamples: StoryFn<typeof Stack> = () => {
         ))}
       </Stack>
       <p>Align items center</p>
-      <Stack direction="row" wrap="wrap" alignItems="center" justifyContent="center" gap={2}>
+      <Stack direction="row" wrap alignItems="center" justifyContent="center" gap={2}>
         {Array.from({ length: 5 }).map((_, i) => (
           <Item key={i} color={theme.colors.error.main} text={i + 1} />
         ))}
       </Stack>
       <p>Align items stretch</p>
-      <Stack direction="row" wrap="wrap" alignItems="stretch" justifyContent="center" gap={2}>
+      <Stack direction="row" wrap alignItems="stretch" justifyContent="center" gap={2}>
         <Item color={theme.colors.error.main} height="10em" />
         <Item color={theme.colors.error.main} />
         <Item color={theme.colors.error.main} height="3em" />
@@ -131,7 +131,7 @@ export const JustifyContentExamples: StoryFn<typeof Stack> = () => {
       {justifyContentOptions.map((justifyContent) => (
         <>
           <p>Justify Content {justifyContent}</p>
-          <Stack direction="row" wrap="wrap" alignItems="center" justifyContent={justifyContent} gap={2}>
+          <Stack direction="row" wrap alignItems="center" justifyContent={justifyContent} gap={2}>
             {Array.from({ length: 5 }).map((_, i) => (
               <Item key={i} color={theme.colors.warning.main} text={i + 1} />
             ))}
@@ -150,7 +150,7 @@ export const GapExamples: StoryFn<typeof Stack> = () => {
       {gapOptions.map((gap) => (
         <>
           <p>Gap with spacingToken set to {gap}</p>
-          <Stack direction="row" wrap="wrap" alignItems="flex-start" justifyContent="flex-start" gap={gap}>
+          <Stack direction="row" wrap alignItems="flex-start" justifyContent="flex-start" gap={gap}>
             {Array.from({ length: 5 }).map((_, i) => (
               <Item key={i} color={theme.colors.error.main} text={i + 1} />
             ))}
@@ -188,7 +188,7 @@ export const DirectionExamples: StoryFn<typeof Stack> = () => {
       {directionOptions.map((direction) => (
         <>
           <p>Direction {direction}</p>
-          <Stack direction={direction} wrap="wrap" alignItems="center" justifyContent="center" gap={2}>
+          <Stack direction={direction} wrap alignItems="center" justifyContent="center" gap={2}>
             {Array.from({ length: 5 }).map((_, i) => (
               <Item key={i} color={theme.colors.warning.main} text={i + 1} />
             ))}

packages/grafana-ui/src/components/Layout/Stack/Stack.tsx

@@ -69,7 +69,7 @@ const getStyles = (
         flexDirection: val,
       })),
       getResponsiveStyle(theme, wrap, (val) => ({
-        flexWrap: val,
+        flexWrap: typeof val === 'boolean' ? (val ? 'wrap' : 'nowrap') : val,
       })),
       getResponsiveStyle(theme, alignItems, (val) => ({
         alignItems: val,

packages/grafana-ui/src/components/Layout/types.ts

@@ -24,7 +24,7 @@ export type JustifyContent =
   | 'right';
 
 export type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type Wrap = boolean | 'nowrap' | 'wrap' | 'wrap-reverse';
 
 type FlexGrow = number;
 type FlexShrink = number;