Change default series icon shape to circle

Author: envex

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,17 @@
+import {mount} from '@shopify/react-testing';
+
+import {DefaultPreview} from '../DefaultPreview';
+
+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: 8,
+        width: 8,
+      },
+    });
+  });
+});

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;