GrafanaUI: Move Box out of unstable and into GrafanaUI (#77080)

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 borderColorOptions: Array<BorderColor | undefined> = [
-const borderStyleOptions: BorderStyle[] = ['dashed', 'solid'];
+  'weak',
+  'medium',
+  'strong',
+  'error',
+  'success',
+  'warning',
+  'info',
+  undefined,
+];
+const borderStyleOptions: Array<BorderStyle | undefined> = ['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<typeof Box> = (args) => {
   return (
-    <div style={{ backgroundColor: 'green' }}>
+    <Flex>
-      <Box {...args}>
+      <Box borderColor="medium" {...args}>
-        <Item background="red" />
+        Box
       </Box>
-    </div>
+    </Flex>
   );
 };
 
@@ -72,6 +81,11 @@ Basic.argTypes = {
   boxShadow: { control: 'select', options: boxShadowOptions },
 };
 
+Basic.args = {
+  borderColor: 'medium',
+  borderStyle: 'solid',
+};
+
 export const Background: StoryFn<typeof Box> = () => {
   return (
     <Flex gap={4}>

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';

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';

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 { Icon, Tooltip, Box } from '@grafana/ui';
-import { Box, Flex } from '@grafana/ui/src/unstable';
+import { Flex } from '@grafana/ui/src/unstable';
 import { Unit } from 'app/types';
 
 type OrgUnitProps = { units?: Unit[]; icon: IconName };

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';

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';

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 { Button, useStyles2, Text, Box } from '@grafana/ui';
-import { Box, Flex } from '@grafana/ui/src/unstable';
+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';

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 { Button, Select, InlineField, InlineFieldRow, Box } from '@grafana/ui';
-import { Box } from '@grafana/ui/src/unstable';
 
 import { valueMatchersUI } from './ValueMatchers/valueMatchersUI';
 

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 { Button, RadioButtonGroup, InlineField, Box } from '@grafana/ui';
-import { Box } from '@grafana/ui/src/unstable';
 
 import { DataFrameFieldsInfo, FilterByValueFilterEditor } from './FilterByValueFilterEditor';
 

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 { Field, Text, Box } from '@grafana/ui';
-import { Box } from '@grafana/ui/src/unstable';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
 
 import { StoreState } from '../../../types';