From b25667223c77f8acdb6225d9454525f4416b1b72 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Fri, 23 Feb 2024 11:38:36 +0000 Subject: [PATCH] Box: add `direction` prop to `Box` (#83296) add "direction" prop to Box --- .../src/components/Layout/Box/Box.story.tsx | 1 + .../src/components/Layout/Box/Box.tsx | 9 ++- .../EmptyState/CallToAction.tsx | 18 +++-- .../EmptyState/InfoPaneLeft.tsx | 70 +++++++++---------- .../EmptyState/InfoPaneRight.tsx | 66 +++++++++-------- 5 files changed, 83 insertions(+), 81 deletions(-) diff --git a/packages/grafana-ui/src/components/Layout/Box/Box.story.tsx b/packages/grafana-ui/src/components/Layout/Box/Box.story.tsx index 203f9f13108..b564a3d2476 100644 --- a/packages/grafana-ui/src/components/Layout/Box/Box.story.tsx +++ b/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 }, diff --git a/packages/grafana-ui/src/components/Layout/Box/Box.tsx b/packages/grafana-ui/src/components/Layout/Box/Box.tsx index 754f0889552..3f4a36c6950 100644 --- a/packages/grafana-ui/src/components/Layout/Box/Box.tsx +++ b/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, 'c // Flex Props alignItems?: ResponsiveProp; + direction?: ResponsiveProp; justifyContent?: ResponsiveProp; gap?: ResponsiveProp; @@ -91,6 +92,7 @@ export const Box = forwardRef>((props, borderColor, borderStyle, borderRadius, + direction, justifyContent, alignItems, boxShadow, @@ -123,6 +125,7 @@ export const Box = forwardRef>((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, })), diff --git a/public/app/features/admin/migrate-to-cloud/EmptyState/CallToAction.tsx b/public/app/features/admin/migrate-to-cloud/EmptyState/CallToAction.tsx index b44796c8c11..75ac9236136 100644 --- a/public/app/features/admin/migrate-to-cloud/EmptyState/CallToAction.tsx +++ b/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 ( - - - - Let us manage your Grafana stack - - - + + + Let us manage your Grafana stack + + ); }; diff --git a/public/app/features/admin/migrate-to-cloud/EmptyState/InfoPaneLeft.tsx b/public/app/features/admin/migrate-to-cloud/EmptyState/InfoPaneLeft.tsx index 91eceb990e7..babc542e3e2 100644 --- a/public/app/features/admin/migrate-to-cloud/EmptyState/InfoPaneLeft.tsx +++ b/public/app/features/admin/migrate-to-cloud/EmptyState/InfoPaneLeft.tsx @@ -1,47 +1,45 @@ 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 ( - - - - - Grafana cloud is a fully managed cloud-hosted observability platform ideal for cloud native environments. - It's everything you love about Grafana without the overhead of maintaining, upgrading, and supporting - an installation. - - - - - In addition to the convenience of managed hosting, Grafana Cloud includes many cloud-exclusive features like - SLOs, incident management, machine learning, and powerful observability integrations. - - - - - Grafana Labs is committed to maintaining the highest standards of data privacy and security. By implementing - industry-standard security technologies and procedures, we help protect our customers' data from - unauthorized access, use, or disclosure. - - - + + + + Grafana cloud is a fully managed cloud-hosted observability platform ideal for cloud native environments. + It's everything you love about Grafana without the overhead of maintaining, upgrading, and supporting an + installation. + + + + + In addition to the convenience of managed hosting, Grafana Cloud includes many cloud-exclusive features like + SLOs, incident management, machine learning, and powerful observability integrations. + + + + + Grafana Labs is committed to maintaining the highest standards of data privacy and security. By implementing + industry-standard security technologies and procedures, we help protect our customers' data from + unauthorized access, use, or disclosure. + + ); }; diff --git a/public/app/features/admin/migrate-to-cloud/EmptyState/InfoPaneRight.tsx b/public/app/features/admin/migrate-to-cloud/EmptyState/InfoPaneRight.tsx index 48cbb1acd87..56fccbefaaf 100644 --- a/public/app/features/admin/migrate-to-cloud/EmptyState/InfoPaneRight.tsx +++ b/public/app/features/admin/migrate-to-cloud/EmptyState/InfoPaneRight.tsx @@ -1,45 +1,43 @@ 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 ( - - - - - Exposing your data sources to the internet can raise security concerns. Private data source connect (PDC) - allows Grafana Cloud to access your existing data sources over a secure network tunnel. - - - - - Grafana Cloud has a generous free plan and a 14 day unlimited usage trial. After your trial expires, - you'll be billed based on usage over the free plan limits. - - - - - Once you connect this installation to a cloud stack, you'll be able to upload data sources and - dashboards. - - - + + + + Exposing your data sources to the internet can raise security concerns. Private data source connect (PDC) + allows Grafana Cloud to access your existing data sources over a secure network tunnel. + + + + + Grafana Cloud has a generous free plan and a 14 day unlimited usage trial. After your trial expires, + you'll be billed based on usage over the free plan limits. + + + + + Once you connect this installation to a cloud stack, you'll be able to upload data sources and + dashboards. + + ); };