diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index fdaf99670..d2b1b13b9 100644 --- a/packages/polaris-viz/CHANGELOG.md +++ b/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 + +### Changed + +- Changed default series icon indicator for non-line charts to a circle from a square. ## [15.8.1] - 2025-01-21 diff --git a/packages/polaris-viz/src/components/DefaultPreview/DefaultPreview.scss b/packages/polaris-viz/src/components/DefaultPreview/DefaultPreview.scss new file mode 100644 index 000000000..ea7be0fe8 --- /dev/null +++ b/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; +} diff --git a/packages/polaris-viz/src/components/DefaultPreview/DefaultPreview.tsx b/packages/polaris-viz/src/components/DefaultPreview/DefaultPreview.tsx new file mode 100644 index 000000000..1a1b68695 --- /dev/null +++ b/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 ( + + ); +} diff --git a/packages/polaris-viz/src/components/DefaultPreview/index.ts b/packages/polaris-viz/src/components/DefaultPreview/index.ts new file mode 100644 index 000000000..e53b64b51 --- /dev/null +++ b/packages/polaris-viz/src/components/DefaultPreview/index.ts @@ -0,0 +1,2 @@ +export {DefaultPreview} from './DefaultPreview'; +export type {DefaultPreviewProps} from './DefaultPreview'; diff --git a/packages/polaris-viz/src/components/DefaultPreview/stories/DefaultPreview.stories.tsx b/packages/polaris-viz/src/components/DefaultPreview/stories/DefaultPreview.stories.tsx new file mode 100644 index 000000000..1d87b4b9c --- /dev/null +++ b/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 = Template.bind({}); + +Solid.args = { + color: COLOR_VARIABLES.colorTeal80, +}; + +export const Gradient: Story = Template.bind({}); + +Gradient.args = { + color: [ + { + color: '#39337f', + offset: 0, + }, + { + color: '#5052b3', + offset: 50, + }, + { + color: '#1bbe9e', + offset: 100, + }, + ], +}; diff --git a/packages/polaris-viz/src/components/DefaultPreview/stories/data.tsx b/packages/polaris-viz/src/components/DefaultPreview/stories/data.tsx new file mode 100644 index 000000000..f71926abe --- /dev/null +++ b/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 = ( + args: DefaultPreviewProps, +) => { + return ; +}; diff --git a/packages/polaris-viz/src/components/DefaultPreview/stories/meta.tsx b/packages/polaris-viz/src/components/DefaultPreview/stories/meta.tsx new file mode 100644 index 000000000..e420501ce --- /dev/null +++ b/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.', + }, + }, + }, +}; diff --git a/packages/polaris-viz/src/components/DefaultPreview/tests/DefaultPreview.test.tsx b/packages/polaris-viz/src/components/DefaultPreview/tests/DefaultPreview.test.tsx new file mode 100644 index 000000000..3f0c3e185 --- /dev/null +++ b/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('', () => { + it('renders a div with a background color', () => { + const actual = mount(); + + expect(actual).toContainReactComponent('span', { + style: { + background: 'rgb(222, 54, 24)', + height: 8, + width: 8, + }, + }); + }); +}); diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.scss b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.scss index e05c8cb39..b959bf5af 100644 --- a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.scss +++ b/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; } diff --git a/packages/polaris-viz/src/components/Legend/constants.ts b/packages/polaris-viz/src/components/Legend/constants.ts index e2862bfb0..4c2e4ac2c 100644 --- a/packages/polaris-viz/src/components/Legend/constants.ts +++ b/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; diff --git a/packages/polaris-viz/src/components/index.ts b/packages/polaris-viz/src/components/index.ts index 84295f149..a17653c0f 100644 --- a/packages/polaris-viz/src/components/index.ts +++ b/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'; diff --git a/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx b/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx index 33c1b97a0..b0f2fd6a9 100644 --- a/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx +++ b/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 ; } - case 'Bar': default: - return ; + return ; } }