fix: ColorWheel inner border width (#9440)

* s2: fix ColorWheel inner border width

* add new stories

Author: reidbarber

packages/@react-spectrum/s2/chromatic/ColorWheel.stories.tsx

@@ -29,3 +29,14 @@ export const Example: StoryObj<typeof ColorWheel> = {
     defaultValue: 'hsl(30, 100%, 50%)'
   }
 };
+
+export const InContainer: StoryObj<typeof ColorWheel> = {
+  render: (args) => (
+    <div style={{width: 600, border: '1px solid gray', padding: 16}}>
+      <ColorWheel {...args} onChange={undefined} />
+    </div>
+  ),
+  args: {
+    defaultValue: 'hsl(30, 100%, 50%)'
+  }
+};

packages/@react-spectrum/s2/src/ColorWheel.tsx

@@ -51,7 +51,7 @@ export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps,
       outerRadius={outerRadius}
       innerRadius={innerRadius}
       ref={containerRef}
-      style={UNSAFE_style}
+      style={{...UNSAFE_style, width: outerRadius * 2, height: outerRadius * 2}}
       className={UNSAFE_className + styles}>
       {({isDisabled, state}) => (<>
         <ColorWheelTrack

packages/@react-spectrum/s2/stories/ColorWheel.stories.tsx

@@ -39,3 +39,14 @@ export const Example: Story = {
     defaultValue: 'hsl(30, 100%, 50%)'
   }
 };
+
+export const InContainer: Story = {
+  render: (args) => (
+    <div style={{width: 600, border: '1px solid gray', padding: 16}}>
+      <ColorWheel {...args} onChange={undefined} />
+    </div>
+  ),
+  args: {
+    defaultValue: 'hsl(30, 100%, 50%)'
+  }
+};