Change default series icon shape to circle

packages/polaris-viz/CHANGELOG.md

@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Changed
+
+- Changed default series icon indicator for non-line charts to a circle from a square.
 
 ## [15.8.1] - 2025-01-21
 

packages/polaris-viz/src/components/DefaultPreview/DefaultPreview.scss

@@ -0,0 +1,9 @@
+@import '../../styles/common';
+
+.ColorPreview {
+  border-radius: 100%;
+  display: block;
+  flex: none;
+  @include print-color;
+  overflow: hidden;
+}

packages/polaris-viz/src/components/DefaultPreview/DefaultPreview.tsx

@@ -0,0 +1,24 @@
+import type {Color} from '@shopify/polaris-viz-core';
+
+import {getCSSBackgroundFromColor} from '../../utilities/getCSSBackgroundFromColor';
+
+import styles from './DefaultPreview.scss';
+
+const ANGLE = 305;
+
+export interface DefaultPreviewProps {
+  color: Color;
+}
+
+const ICON_SIZE = 8;
+
+export function DefaultPreview({color}: DefaultPreviewProps) {
+  const background = getCSSBackgroundFromColor(color, ANGLE);
+
+  return (
+    <span
+      className={styles.ColorPreview}
+      style={{background, height: ICON_SIZE, width: ICON_SIZE}}
+    />
+  );
+}

packages/polaris-viz/src/components/DefaultPreview/index.ts

@@ -0,0 +1,2 @@
+export {DefaultPreview} from './DefaultPreview';
+export type {DefaultPreviewProps} from './DefaultPreview';

packages/polaris-viz/src/components/DefaultPreview/stories/DefaultPreview.stories.tsx

@@ -0,0 +1,33 @@
+import type {Story} from '@storybook/react';
+import {COLOR_VARIABLES} from '@shopify/polaris-viz-core';
+
+export {META as default} from './meta';
+
+import type {DefaultPreviewProps} from '../..';
+
+import {Template} from './data';
+
+export const Solid: Story<DefaultPreviewProps> = Template.bind({});
+
+Solid.args = {
+  color: COLOR_VARIABLES.colorTeal80,
+};
+
+export const Gradient: Story<DefaultPreviewProps> = Template.bind({});
+
+Gradient.args = {
+  color: [
+    {
+      color: '#39337f',
+      offset: 0,
+    },
+    {
+      color: '#5052b3',
+      offset: 50,
+    },
+    {
+      color: '#1bbe9e',
+      offset: 100,
+    },
+  ],
+};

packages/polaris-viz/src/components/DefaultPreview/stories/data.tsx

@@ -0,0 +1,10 @@
+import type {Story} from '@storybook/react';
+
+import type {DefaultPreviewProps} from '../DefaultPreview';
+import {DefaultPreview} from '../DefaultPreview';
+
+export const Template: Story<DefaultPreviewProps> = (
+  args: DefaultPreviewProps,
+) => {
+  return <DefaultPreview {...args} />;
+};

packages/polaris-viz/src/components/DefaultPreview/stories/meta.tsx

@@ -0,0 +1,24 @@
+import type {Meta} from '@storybook/react';
+
+import {CONTROLS_ARGS} from '../../../storybook/constants';
+import {DefaultPreview} from '../DefaultPreview';
+
+export const META: Meta = {
+  title: 'Shared/Subcomponents/DefaultPreview',
+  component: DefaultPreview,
+  argTypes: {
+    color: {
+      description:
+        'The CSS color or gradient array color to be displayed in the square.',
+    },
+  },
+  parameters: {
+    controls: CONTROLS_ARGS,
+    docs: {
+      description: {
+        component:
+          'Used to connect chart colors and gradients to information in tooltips and legends.',
+      },
+    },
+  },
+};

packages/polaris-viz/src/components/DefaultPreview/tests/DefaultPreview.test.tsx

@@ -0,0 +1,18 @@
+import {mount} from '@shopify/react-testing';
+
+import {DefaultPreview} from '../DefaultPreview';
+import {PREVIEW_ICON_SIZE} from '../../../constants';
+
+describe('<DefaultPreview/>', () => {
+  it('renders a div with a background color', () => {
+    const actual = mount(<DefaultPreview color="rgb(222, 54, 24)" />);
+
+    expect(actual).toContainReactComponent('span', {
+      style: {
+        background: 'rgb(222, 54, 24)',
+        height: PREVIEW_ICON_SIZE,
+        width: PREVIEW_ICON_SIZE,
+      },
+    });
+  });
+});

packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.scss

@@ -38,5 +38,5 @@
 .IconContainer {
   display: flex;
   align-items: center;
-  justify-items: center;
+  justify-content: center;
 }

packages/polaris-viz/src/components/Legend/constants.ts

@@ -1,3 +1,3 @@
 export const LEGEND_ITEM_LEFT_PADDING = 8;
 export const LEGEND_ITEM_RIGHT_PADDING = 16;
-export const LEGEND_ITEM_GAP = 8;
+export const LEGEND_ITEM_GAP = 6;

packages/polaris-viz/src/components/index.ts

@@ -12,6 +12,8 @@ export type {SimpleNormalizedChartProps} from './SimpleNormalizedChart';
 export {YAxis} from './YAxis';
 export {SquareColorPreview} from './SquareColorPreview';
 export type {SquareColorPreviewProps} from './SquareColorPreview';
+export {DefaultPreview} from './DefaultPreview';
+export type {DefaultPreviewProps} from './DefaultPreview';
 export {StackedAreaChart} from './StackedAreaChart';
 export type {StackedAreaChartProps} from './StackedAreaChart';
 export {BarChart} from './BarChart';

packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx

@@ -1,7 +1,7 @@
 import type {Shape, Color, LineStyle} from '@shopify/polaris-viz-core';
 
 import {LinePreview} from '../../LinePreview';
-import {SquareColorPreview} from '../../SquareColorPreview';
+import {DefaultPreview} from '../../DefaultPreview';
 
 interface Props {
   color: Color;
@@ -16,8 +16,7 @@ export function SeriesIcon({color, lineStyle, shape = 'Bar'}: Props) {
 
       return <LinePreview color={color} lineStyle={style} />;
     }
-    case 'Bar':
     default:
-      return <SquareColorPreview color={color} />;
+      return <DefaultPreview color={color} />;
   }
 }