From f183e68b1c6b55f18cfd5061a7d4689215dee39c Mon Sep 17 00:00:00 2001 From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com> Date: Thu, 26 Oct 2023 13:46:11 +0100 Subject: [PATCH] GrafanaUI: Move Box out of unstable and into GrafanaUI (#77080) --- .../{Box.internal.story.tsx => Box.story.tsx} | 26 ++++++++++++++----- packages/grafana-ui/src/components/index.ts | 1 + packages/grafana-ui/src/unstable.ts | 1 - public/app/features/admin/Users/OrgUnits.tsx | 4 +-- .../features/admin/Users/OrgUsersTable.tsx | 3 ++- .../DashboardSettings/GeneralSettings.tsx | 2 +- .../dashboard/dashgrid/DashboardEmpty.tsx | 4 +-- .../FilterByValueFilterEditor.tsx | 3 +-- .../FilterByValueTransformerEditor.tsx | 3 +-- .../variables/query/QueryVariableEditor.tsx | 3 +-- 10 files changed, 31 insertions(+), 19 deletions(-) rename packages/grafana-ui/src/components/Layout/Box/{Box.internal.story.tsx => Box.story.tsx} (90%) diff --git a/packages/grafana-ui/src/components/Layout/Box/Box.internal.story.tsx b/packages/grafana-ui/src/components/Layout/Box/Box.story.tsx similarity index 90% rename from packages/grafana-ui/src/components/Layout/Box/Box.internal.story.tsx rename to packages/grafana-ui/src/components/Layout/Box/Box.story.tsx index 6e9b265a01e..42d0b7f759e 100644 --- a/packages/grafana-ui/src/components/Layout/Box/Box.internal.story.tsx +++ b/packages/grafana-ui/src/components/Layout/Box/Box.story.tsx @@ -9,8 +9,17 @@ import { Box, BackgroundColor, BorderColor, BorderStyle, BorderRadius, BoxShadow import mdx from './Box.mdx'; const backgroundOptions: BackgroundColor[] = ['primary', 'secondary', 'canvas', 'error', 'success', 'warning', 'info']; -const borderColorOptions: BorderColor[] = ['weak', 'medium', 'strong', 'error', 'success', 'warning', 'info']; -const borderStyleOptions: BorderStyle[] = ['dashed', 'solid']; +const borderColorOptions: Array = [ + 'weak', + 'medium', + 'strong', + 'error', + 'success', + 'warning', + 'info', + undefined, +]; +const borderStyleOptions: Array = ['dashed', 'solid', undefined]; const borderRadiusOptions: BorderRadius[] = ['default', 'pill', 'circle']; const boxShadowOptions: BoxShadow[] = ['z1', 'z2', 'z3']; @@ -39,11 +48,11 @@ const Item = ({ background }: { background?: string }) => { export const Basic: StoryFn = (args) => { return ( -
- - + + + Box -
+ ); }; @@ -72,6 +81,11 @@ Basic.argTypes = { boxShadow: { control: 'select', options: boxShadowOptions }, }; +Basic.args = { + borderColor: 'medium', + borderStyle: 'solid', +}; + export const Background: StoryFn = () => { return ( diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 3d967e90118..0f5dd38ea02 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -214,6 +214,7 @@ export { fieldMatchersUI } from './MatchersUI/fieldMatchersUI'; export { Link } from './Link/Link'; export { TextLink } from './Link/TextLink'; export { Text } from './Text/Text'; +export { Box } from './Layout/Box/Box'; export { Label } from './Forms/Label'; export { Field, type FieldProps } from './Forms/Field'; diff --git a/packages/grafana-ui/src/unstable.ts b/packages/grafana-ui/src/unstable.ts index 680689fa9c7..dedc5841a5b 100644 --- a/packages/grafana-ui/src/unstable.ts +++ b/packages/grafana-ui/src/unstable.ts @@ -9,7 +9,6 @@ * be subject to the standard policies */ -export * from './components/Layout/Box/Box'; export * from './components/Layout/Flex/Flex'; export { Grid } from './components/Layout/Grid/Grid'; diff --git a/public/app/features/admin/Users/OrgUnits.tsx b/public/app/features/admin/Users/OrgUnits.tsx index ae84b3e5d8b..846abb95f70 100644 --- a/public/app/features/admin/Users/OrgUnits.tsx +++ b/public/app/features/admin/Users/OrgUnits.tsx @@ -1,8 +1,8 @@ import React, { forwardRef, PropsWithChildren } from 'react'; import { IconName } from '@grafana/data'; -import { Icon, Tooltip } from '@grafana/ui'; -import { Box, Flex } from '@grafana/ui/src/unstable'; +import { Icon, Tooltip, Box } from '@grafana/ui'; +import { Flex } from '@grafana/ui/src/unstable'; import { Unit } from 'app/types'; type OrgUnitProps = { units?: Unit[]; icon: IconName }; diff --git a/public/app/features/admin/Users/OrgUsersTable.tsx b/public/app/features/admin/Users/OrgUsersTable.tsx index b4a6c229ea6..be169eab5f2 100644 --- a/public/app/features/admin/Users/OrgUsersTable.tsx +++ b/public/app/features/admin/Users/OrgUsersTable.tsx @@ -14,8 +14,9 @@ import { FetchDataFunc, Pagination, Avatar, + Box, } from '@grafana/ui'; -import { Flex, Stack, Box } from '@grafana/ui/src/unstable'; +import { Flex, Stack } from '@grafana/ui/src/unstable'; import { UserRolePicker } from 'app/core/components/RolePicker/UserRolePicker'; import { fetchRoleOptions } from 'app/core/components/RolePicker/api'; import { TagBadge } from 'app/core/components/TagFilter/TagBadge'; diff --git a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx index 9799ff63c91..85d05afbe6d 100644 --- a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx +++ b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx @@ -12,8 +12,8 @@ import { Label, HorizontalGroup, TextArea, + Box, } from '@grafana/ui'; -import { Box } from '@grafana/ui/src/unstable'; import { Page } from 'app/core/components/Page/Page'; import { FolderPicker } from 'app/core/components/Select/FolderPicker'; import { t, Trans } from 'app/core/internationalization'; diff --git a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx index 22fa9fe0261..2e9e7c0eef6 100644 --- a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx @@ -4,8 +4,8 @@ import React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { config, locationService, reportInteraction } from '@grafana/runtime'; -import { Button, useStyles2, Text } from '@grafana/ui'; -import { Box, Flex } from '@grafana/ui/src/unstable'; +import { Button, useStyles2, Text, Box } from '@grafana/ui'; +import { Flex } from '@grafana/ui/src/unstable'; import { Trans } from 'app/core/internationalization'; import { DashboardModel } from 'app/features/dashboard/state'; import { onAddLibraryPanel, onCreateNewPanel, onImportDashboard } from 'app/features/dashboard/utils/dashboard'; diff --git a/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx b/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx index 312e2646b0b..61dc9d3a8cf 100644 --- a/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx +++ b/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx @@ -2,8 +2,7 @@ import React, { useCallback } from 'react'; import { Field, SelectableValue, valueMatchers } from '@grafana/data'; import { FilterByValueFilter } from '@grafana/data/src/transformations/transformers/filterByValue'; -import { Button, Select, InlineField, InlineFieldRow } from '@grafana/ui'; -import { Box } from '@grafana/ui/src/unstable'; +import { Button, Select, InlineField, InlineFieldRow, Box } from '@grafana/ui'; import { valueMatchersUI } from './ValueMatchers/valueMatchersUI'; diff --git a/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx b/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx index 08b18d2e289..4fccd5651bd 100644 --- a/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx +++ b/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx @@ -20,8 +20,7 @@ import { FilterByValueTransformerOptions, FilterByValueType, } from '@grafana/data/src/transformations/transformers/filterByValue'; -import { Button, RadioButtonGroup, InlineField } from '@grafana/ui'; -import { Box } from '@grafana/ui/src/unstable'; +import { Button, RadioButtonGroup, InlineField, Box } from '@grafana/ui'; import { DataFrameFieldsInfo, FilterByValueFilterEditor } from './FilterByValueFilterEditor'; diff --git a/public/app/features/variables/query/QueryVariableEditor.tsx b/public/app/features/variables/query/QueryVariableEditor.tsx index c234adba079..d3a3d6fe350 100644 --- a/public/app/features/variables/query/QueryVariableEditor.tsx +++ b/public/app/features/variables/query/QueryVariableEditor.tsx @@ -4,8 +4,7 @@ import { connect, ConnectedProps } from 'react-redux'; import { DataSourceInstanceSettings, getDataSourceRef, LoadingState, SelectableValue } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { getTemplateSrv } from '@grafana/runtime'; -import { Field, Text } from '@grafana/ui'; -import { Box } from '@grafana/ui/src/unstable'; +import { Field, Text, Box } from '@grafana/ui'; import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { StoreState } from '../../../types';