IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Box: add direction prop to Box (#83296)

Browse Source 
add "direction" prop to Box
This commit is contained in:
Ashley Harrison 2024-02-23 11:38:36 +00:00 committed by GitHub
parent a0353b237a
commit b25667223c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 83 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

9
packages/grafana-ui/src/components/Layout/Box/Box.tsx
View File

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

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

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

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

@ -1,47 +1,45 @@
import React from 'react'; import React from 'react';
import { Box, Stack } from '@grafana/ui'; import { Box } from '@grafana/ui';
import { t, Trans } from 'app/core/internationalization'; import { t, Trans } from 'app/core/internationalization';
import { InfoItem } from './InfoItem'; import { InfoItem } from './InfoItem';
export const InfoPaneLeft = () => { export const InfoPaneLeft = () => {
return ( return (
<Box padding={2} backgroundColor="secondary"> <Box display="flex" padding={2} gap={2} direction="column" backgroundColor="secondary">
<Stack gap={2} direction="column"> <InfoItem
<InfoItem title={t('migrate-to-cloud.what-is-cloud.title', 'What is Grafana Cloud?')}
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')}
linkTitle={t('migrate-to-cloud.what-is-cloud.link-title', 'Learn about cloud features')} linkHref="https://grafana.com/products/cloud"
linkHref="https://grafana.com/products/cloud" >
> <Trans i18nKey="migrate-to-cloud.what-is-cloud.body">
<Trans i18nKey="migrate-to-cloud.what-is-cloud.body"> Grafana cloud is a fully managed cloud-hosted observability platform ideal for cloud native environments.
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
It&apos;s everything you love about Grafana without the overhead of maintaining, upgrading, and supporting installation.
an installation. </Trans>
</Trans> </InfoItem>
</InfoItem> <InfoItem
<InfoItem title={t('migrate-to-cloud.why-host.title', 'Why host with Grafana?')}
title={t('migrate-to-cloud.why-host.title', 'Why host with Grafana?')} linkTitle={t('migrate-to-cloud.why-host.link-title', 'More questions? Talk to an expert')}
linkTitle={t('migrate-to-cloud.why-host.link-title', 'More questions? Talk to an expert')} linkHref="https://grafana.com/contact"
linkHref="https://grafana.com/contact" >
> <Trans i18nKey="migrate-to-cloud.why-host.body">
<Trans i18nKey="migrate-to-cloud.why-host.body"> In addition to the convenience of managed hosting, Grafana Cloud includes many cloud-exclusive features like
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.
SLOs, incident management, machine learning, and powerful observability integrations. </Trans>
</Trans> </InfoItem>
</InfoItem> <InfoItem
<InfoItem title={t('migrate-to-cloud.is-it-secure.title', 'Is it secure?')}
title={t('migrate-to-cloud.is-it-secure.title', 'Is it secure?')} linkTitle={t('migrate-to-cloud.is-it-secure.link-title', 'Grafana Labs Trust Center')}
linkTitle={t('migrate-to-cloud.is-it-secure.link-title', 'Grafana Labs Trust Center')} linkHref="https://trust.grafana.com"
linkHref="https://trust.grafana.com" >
> <Trans i18nKey="migrate-to-cloud.is-it-secure.body">
<Trans i18nKey="migrate-to-cloud.is-it-secure.body"> Grafana Labs is committed to maintaining the highest standards of data privacy and security. By implementing
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&apos; data from
industry-standard security technologies and procedures, we help protect our customers&apos; data from unauthorized access, use, or disclosure.
unauthorized access, use, or disclosure. </Trans>
</Trans> </InfoItem>
</InfoItem>
</Stack>
</Box> </Box>
); );
}; };

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

@ -1,45 +1,43 @@
import React from 'react'; import React from 'react';
import { Box, Stack } from '@grafana/ui'; import { Box } from '@grafana/ui';
import { t, Trans } from 'app/core/internationalization'; import { t, Trans } from 'app/core/internationalization';
import { InfoItem } from './InfoItem'; import { InfoItem } from './InfoItem';
export const InfoPaneRight = () => { export const InfoPaneRight = () => {
return ( return (
<Box padding={2} backgroundColor="secondary"> <Box display="flex" direction="column" gap={2} padding={2} backgroundColor="secondary">
<Stack gap={2} direction="column"> <InfoItem
<InfoItem title={t('migrate-to-cloud.pdc.title', 'Not all my data sources are on the public internet')}
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')}
linkTitle={t('migrate-to-cloud.pdc.link-title', 'Learn about PDC')} linkHref="https://grafana.com/docs/grafana-cloud/connect-externally-hosted/private-data-source-connect"
linkHref="https://grafana.com/docs/grafana-cloud/connect-externally-hosted/private-data-source-connect" >
> <Trans i18nKey="migrate-to-cloud.pdc.body">
<Trans i18nKey="migrate-to-cloud.pdc.body"> Exposing your data sources to the internet can raise security concerns. Private data source connect (PDC)
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.
allows Grafana Cloud to access your existing data sources over a secure network tunnel. </Trans>
</Trans> </InfoItem>
</InfoItem> <InfoItem
<InfoItem title={t('migrate-to-cloud.pricing.title', 'How much does it cost?')}
title={t('migrate-to-cloud.pricing.title', 'How much does it cost?')} linkTitle={t('migrate-to-cloud.pricing.link-title', 'Grafana Cloud pricing')}
linkTitle={t('migrate-to-cloud.pricing.link-title', 'Grafana Cloud pricing')} linkHref="https://grafana.com/pricing"
linkHref="https://grafana.com/pricing" >
> <Trans i18nKey="migrate-to-cloud.pricing.body">
<Trans i18nKey="migrate-to-cloud.pricing.body"> Grafana Cloud has a generous free plan and a 14 day unlimited usage trial. After your trial expires,
Grafana Cloud has a generous free plan and a 14 day unlimited usage trial. After your trial expires, you&apos;ll be billed based on usage over the free plan limits.
you&apos;ll be billed based on usage over the free plan limits. </Trans>
</Trans> </InfoItem>
</InfoItem> <InfoItem
<InfoItem title={t('migrate-to-cloud.can-i-move.title', 'Can I move this installation to Grafana Cloud?')}
title={t('migrate-to-cloud.can-i-move.title', 'Can I move this installation to Grafana Cloud?')} linkTitle={t('migrate-to-cloud.can-i-move.link-title', 'Learn about migrating other settings')}
linkTitle={t('migrate-to-cloud.can-i-move.link-title', 'Learn about migrating other settings')} linkHref="https://grafana.com/docs/grafana-cloud/account-management/migration-guide"
linkHref="https://grafana.com/docs/grafana-cloud/account-management/migration-guide" >
> <Trans i18nKey="migrate-to-cloud.can-i-move.body">
<Trans i18nKey="migrate-to-cloud.can-i-move.body"> Once you connect this installation to a cloud stack, you&apos;ll be able to upload data sources and
Once you connect this installation to a cloud stack, you&apos;ll be able to upload data sources and dashboards.
dashboards. </Trans>
</Trans> </InfoItem>
</InfoItem>
</Stack>
</Box> </Box>
); );
}; };