Box: add direction prop to Box (#83296)

add "direction" prop to Box

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

@@ -73,6 +73,7 @@ Basic.argTypes = {
   paddingBottom: SpacingTokenControl,
   paddingLeft: SpacingTokenControl,
   paddingRight: SpacingTokenControl,
+  direction: { control: 'select', options: ['row', 'row-reverse', 'column', 'column-reverse'] },
   display: { control: 'select', options: ['flex', 'block', 'inline', 'none'] },
   backgroundColor: { control: 'select', options: backgroundOptions },
   borderStyle: { control: 'select', options: borderStyleOptions },

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

@@ -4,7 +4,7 @@ import React, { ElementType, forwardRef, PropsWithChildren } from 'react';
 import { GrafanaTheme2, ThemeSpacingTokens, ThemeShape, ThemeShadows } from '@grafana/data';
 
 import { useStyles2 } from '../../../themes';
-import { AlignItems, FlexProps, JustifyContent } from '../types';
+import { AlignItems, Direction, FlexProps, JustifyContent } from '../types';
 import { ResponsiveProp, getResponsiveStyle } from '../utils/responsiveness';
 
 type Display = 'flex' | 'block' | 'inline' | 'inline-block' | 'none';
@@ -54,6 +54,7 @@ interface BoxProps extends FlexProps, Omit<React.HTMLAttributes<HTMLElement>, 'c
 
   // Flex Props
   alignItems?: ResponsiveProp<AlignItems>;
+  direction?: ResponsiveProp<Direction>;
   justifyContent?: ResponsiveProp<JustifyContent>;
   gap?: ResponsiveProp<ThemeSpacingTokens>;
 
@@ -91,6 +92,7 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
     borderColor,
     borderStyle,
     borderRadius,
+    direction,
     justifyContent,
     alignItems,
     boxShadow,
@@ -123,6 +125,7 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
     borderColor,
     borderStyle,
     borderRadius,
+    direction,
     justifyContent,
     alignItems,
     boxShadow,
@@ -188,6 +191,7 @@ const getStyles = (
   borderColor: BoxProps['borderColor'],
   borderStyle: BoxProps['borderStyle'],
   borderRadius: BoxProps['borderRadius'],
+  direction: BoxProps['direction'],
   justifyContent: BoxProps['justifyContent'],
   alignItems: BoxProps['alignItems'],
   boxShadow: BoxProps['boxShadow'],
@@ -247,6 +251,9 @@ const getStyles = (
       getResponsiveStyle(theme, backgroundColor, (val) => ({
         backgroundColor: customBackgroundColor(val, theme),
       })),
+      getResponsiveStyle(theme, direction, (val) => ({
+        flexDirection: val,
+      })),
       getResponsiveStyle(theme, grow, (val) => ({
         flexGrow: val,
       })),

public/app/features/admin/migrate-to-cloud/EmptyState/CallToAction.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, Button, Stack, Text } from '@grafana/ui';
+import { Box, Button, Text } from '@grafana/ui';
 import { Trans } from 'app/core/internationalization';
 
 export const CallToAction = () => {
@@ -9,15 +9,13 @@ export const CallToAction = () => {
   };
 
   return (
-    <Box padding={5} backgroundColor="secondary">
-      <Stack gap={2} direction="column" alignItems="center">
+    <Box display="flex" padding={5} gap={2} direction="column" alignItems="center" backgroundColor="secondary">
       <Text variant="h3" textAlignment="center">
         <Trans i18nKey="migrate-to-cloud.cta.header">Let us manage your Grafana stack</Trans>
       </Text>
       <Button onClick={onClickMigrate}>
         <Trans i18nKey="migrate-to-cloud.cta.button">Migrate this instance to Cloud</Trans>
       </Button>
-      </Stack>
     </Box>
   );
 };

public/app/features/admin/migrate-to-cloud/EmptyState/InfoPaneLeft.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 
-import { Box, Stack } from '@grafana/ui';
+import { Box } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { InfoItem } from './InfoItem';
 
 export const InfoPaneLeft = () => {
   return (
-    <Box padding={2} backgroundColor="secondary">
-      <Stack gap={2} direction="column">
+    <Box display="flex" padding={2} gap={2} direction="column" backgroundColor="secondary">
       <InfoItem
         title={t('migrate-to-cloud.what-is-cloud.title', 'What is Grafana Cloud?')}
         linkTitle={t('migrate-to-cloud.what-is-cloud.link-title', 'Learn about cloud features')}
@@ -16,8 +15,8 @@ export const InfoPaneLeft = () => {
       >
         <Trans i18nKey="migrate-to-cloud.what-is-cloud.body">
           Grafana cloud is a fully managed cloud-hosted observability platform ideal for cloud native environments.
-            It&apos;s everything you love about Grafana without the overhead of maintaining, upgrading, and supporting
-            an installation.
+          It&apos;s everything you love about Grafana without the overhead of maintaining, upgrading, and supporting an
+          installation.
         </Trans>
       </InfoItem>
       <InfoItem
@@ -41,7 +40,6 @@ export const InfoPaneLeft = () => {
           unauthorized access, use, or disclosure.
         </Trans>
       </InfoItem>
-      </Stack>
     </Box>
   );
 };

public/app/features/admin/migrate-to-cloud/EmptyState/InfoPaneRight.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 
-import { Box, Stack } from '@grafana/ui';
+import { Box } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { InfoItem } from './InfoItem';
 
 export const InfoPaneRight = () => {
   return (
-    <Box padding={2} backgroundColor="secondary">
-      <Stack gap={2} direction="column">
+    <Box display="flex" direction="column" gap={2} padding={2} backgroundColor="secondary">
       <InfoItem
         title={t('migrate-to-cloud.pdc.title', 'Not all my data sources are on the public internet')}
         linkTitle={t('migrate-to-cloud.pdc.link-title', 'Learn about PDC')}
@@ -39,7 +38,6 @@ export const InfoPaneRight = () => {
           dashboards.
         </Trans>
       </InfoItem>
-      </Stack>
     </Box>
   );
 };