diff --git a/.github/workflows/chromatic-main.yml b/.github/workflows/chromatic-main.yml
index 464ef073c..835e0b987 100644
--- a/.github/workflows/chromatic-main.yml
+++ b/.github/workflows/chromatic-main.yml
@@ -3,7 +3,7 @@ on: push
jobs:
chromatic:
runs-on: ubuntu-latest
- if: ${{ github.actor != 'dependabot[bot]' }}
+ if: github.ref == 'refs/heads/main'
continue-on-error: true
steps:
- name: Checkout 🛎️
@@ -19,7 +19,6 @@ jobs:
- name: Install and Build 🔧
run: yarn
- name: Publish to Chromatic and auto accept changes
- if: github.ref == 'refs/heads/main'
uses: chromaui/action@v1
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
index b3659821f..5803a78a2 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
+
+### Fixed
+
+- Fixed issue where `` bar width would be 1px when data changes from all 0 values to data with non-zero values.
## [9.12.0] - 2023-09-19
diff --git a/packages/polaris-viz/src/components/BarChart/stories/playground/ZeroDataChange.stories.tsx b/packages/polaris-viz/src/components/BarChart/stories/playground/ZeroDataChange.stories.tsx
new file mode 100644
index 000000000..274721c6f
--- /dev/null
+++ b/packages/polaris-viz/src/components/BarChart/stories/playground/ZeroDataChange.stories.tsx
@@ -0,0 +1,106 @@
+import type {Story} from '@storybook/react';
+
+import {BarChart, BarChartProps} from '../../../../components';
+import {META} from '../meta';
+import {useState} from 'react';
+
+export default {
+ ...META,
+ title: `${META.title}/Playground`,
+};
+
+const DATA = [
+ {
+ data: [
+ {
+ value: 4,
+ key: '0',
+ },
+ {
+ value: 3,
+ key: '1',
+ },
+ {
+ value: 0,
+ key: '2',
+ },
+ {
+ value: 0,
+ key: '3',
+ },
+ {
+ value: 0,
+ key: '4',
+ },
+ {
+ value: 1,
+ key: '5',
+ },
+ {
+ value: 0,
+ key: '6',
+ },
+ {
+ value: 4,
+ key: '7',
+ },
+ {
+ value: 3,
+ key: '8',
+ },
+ {
+ value: 4,
+ key: '9',
+ },
+ {
+ value: 8,
+ key: '10',
+ },
+ {
+ value: 8,
+ key: '11',
+ },
+ {
+ value: 5,
+ key: '12',
+ },
+ {
+ value: 7,
+ key: '13',
+ },
+ {
+ value: 5,
+ key: '14',
+ },
+ ],
+ name: 'First-time',
+ },
+];
+
+const ZERO_DATA = [
+ {...DATA[0], data: DATA[0].data.map((data) => ({...data, value: 0}))},
+];
+
+const Template: Story = () => {
+ const [data, setData] = useState(DATA);
+
+ return (
+ <>
+
+
+
+
+ >
+ );
+};
+
+export const ZeroData = Template.bind({});
diff --git a/packages/polaris-viz/src/components/VerticalBarChart/components/VerticalBar/VerticalBar.tsx b/packages/polaris-viz/src/components/VerticalBarChart/components/VerticalBar/VerticalBar.tsx
index 1ede84486..848f94bb6 100644
--- a/packages/polaris-viz/src/components/VerticalBarChart/components/VerticalBar/VerticalBar.tsx
+++ b/packages/polaris-viz/src/components/VerticalBarChart/components/VerticalBar/VerticalBar.tsx
@@ -40,7 +40,7 @@ export const VerticalBar = memo(function Bar({
}: VerticalBarProps) {
const selectedTheme = useTheme();
const borderRadius = selectedTheme.bar.borderRadius;
- const treatAsNegative = rawValue < 0 || rawValue === 0;
+ const treatAsNegative = rawValue < 0;
const zeroValue = rawValue === 0;
const yPosition = useMemo(() => {
@@ -67,7 +67,7 @@ export const VerticalBar = memo(function Bar({
);
const springConfig = useBarSpringConfig({animationDelay});
- const rotate = `${treatAsNegative ? 'rotate(180)' : ''}`;
+ const rotate = `${treatAsNegative ? 'rotate(180)' : 'rotate(0)'}`;
const {pathD, transform} = useSpring({
from: {