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 borderStyleOptions: BorderStyle[] = ['dashed', 'solid'];
+const borderColorOptions: Array<BorderColor | undefined> = [
+  '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' }}>
-      <Box {...args}>
-        <Item background="red" />
+    <Flex>
+      <Box borderColor="medium" {...args}>
+        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';