feat(core): Fieldset revisited!

packages/core/.storybook/main.js

@@ -6,6 +6,7 @@ import { ImageLoader } from 'esbuild-vanilla-image-loader';
 export default {
   // stories: [, '../stories/(?!all)*.stories.tsx'],
   stories: [
+    '../stories/fieldset.stories.tsx',
     '../stories/dropdown.stories.tsx',
     '../stories/checkbox.stories.tsx',
     '../stories/avatar.stories.tsx',

packages/core/components/Fieldset/Fieldset.css.ts

@@ -0,0 +1,23 @@
+import { style } from '@vanilla-extract/css';
+import { contract } from '../ThemeProvider/themes/contract.css';
+
+export const field = style({
+  borderTopStyle: 'groove',
+  borderTopWidth: contract.space[2],
+  borderTopColor: contract.colors.borderLighter,
+  borderLeftStyle: 'groove',
+  borderLeftWidth: contract.space[2],
+  borderLeftColor: contract.colors.borderLighter,
+  borderBottomStyle: 'solid',
+  borderBottomWidth: contract.space[1],
+  borderBottomColor: contract.colors.borderDark,
+  borderRightStyle: 'solid',
+  borderRightWidth: contract.space[1],
+  borderRightColor: contract.colors.borderDark,
+  boxShadow: `1px 1px 0 0 ${contract.colors.borderLighter}`,
+});
+
+export const legend = style({
+  paddingLeft: contract.space[4],
+  paddingRight: contract.space[1],
+});

packages/core/components/Fieldset/Fieldset.tsx

@@ -1,42 +1,17 @@
 import React, { forwardRef } from 'react';
-import styled, { th } from '@xstyled/styled-components';
-
-const Field = styled.fieldset`
-  border-top-style: groove;
-  border-top-width: 2;
-  border-top-color: borderLighter;
-
-  border-left-style: groove;
-  border-left-width: 2;
-  border-left-color: borderLighter;
-
-  border-bottom-style: solid;
-  border-bottom-width: 1;
-  border-bottom-color: borderDark;
-
-  border-right-style: solid;
-  border-right-width: 1;
-  border-right-color: borderDark;
-
-  box-shadow: 1px 1px 0 0 ${th('colors.borderLighter')};
-`;
-
-const Legend = styled.legend`
-  padding-left: 4px;
-  padding-right: 1px;
-`;
+import * as styles from './Fieldset.css';
+import { Frame, FrameProps } from '../Frame/Frame';
 
 export type FieldSetProps = {
   legend?: string;
-} & React.HTMLAttributes<HTMLFieldSetElement>;
+} & React.HTMLAttributes<HTMLFieldSetElement> &
+  FrameProps;
 
-const Fieldset = forwardRef<HTMLFieldSetElement, FieldSetProps>(
+export const Fieldset = forwardRef<HTMLFieldSetElement, FieldSetProps>(
   ({ legend, children, ...rest }, ref) => (
-    <Field {...rest} ref={ref}>
-      {legend && <Legend>{legend}</Legend>}
+    <Frame as="fieldset" {...rest} ref={ref} className={styles.field}>
+      {legend && <legend className={styles.legend}>{legend}</legend>}
       {children}
-    </Field>
+    </Frame>
   ),
 );
-
-export default Fieldset;

packages/core/components/Fieldset/index.ts

@@ -1,3 +1,3 @@
-import Fieldset from './Fieldset';
+import { Fieldset } from './Fieldset';
 
 export default Fieldset;

packages/core/stories/fieldset.stories.tsx

@@ -1,29 +1,24 @@
 import type { Meta } from '@storybook/react';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import Checkbox from '../components/Checkbox';
-import Fieldset from '../components/Fieldset';
-
-const CheckboxList = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
+import { Fieldset, FieldSetProps } from '../components/Fieldset/Fieldset';
+import { Frame } from '../components';
 
 export default {
   title: 'Fieldset',
   component: Fieldset,
   tags: ['autodocs'],
-} as Meta<typeof Fieldset>;
+} as Meta<FieldSetProps>;
 
 export const Simple = {
   render: () => (
-    <Fieldset legend="Connection Settings" style={{ width: '300px' }}>
-      <CheckboxList>
+    <Fieldset legend="Connection Settings" width="300px">
+      <Frame display="flex" flexDirection="column">
         <Checkbox checked={false}>Disable Remote Keyboard & Pointer</Checkbox>
         <Checkbox checked={false}>Disable Local Keyboard & Pointer</Checkbox>
         <Checkbox checked>Remove Desktop Wallpaper</Checkbox>
-      </CheckboxList>
+      </Frame>
     </Fieldset>
   ),