[DEV-9281] Bar Charts: labels and outline enabled by default, add too…

…ltips recommending to remain enabled (#1838)
CDCgov · Jan 15, 2025 · 05b45ee · 05b45ee
1 parent 38928fc
commit 05b45ee
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/packages/chart/src/components/EditorPanel/components/Panels/Panel.General.tsx b/packages/chart/src/components/EditorPanel/components/Panels/Panel.General.tsx
@@ -209,6 +209,10 @@ const PanelGeneral: FC<PanelProps> = props => {
                     <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                   </Tooltip.Target>
                   <Tooltip.Content>
+                    <p>
+                      Recommended set to display for Section 508 compliance.
+                    </p>
+                    <hr/>
                     <p>
                       Selecting this option will <i> not </i> hide the display of "zero value", "suppressed data", or
                       "missing data" indicators on the chart (if applicable).

diff --git a/packages/chart/src/components/EditorPanel/components/Panels/Panel.Visual.tsx b/packages/chart/src/components/EditorPanel/components/Panels/Panel.Visual.tsx
@@ -138,6 +138,21 @@ const PanelVisual: FC<PanelProps> = props => {
         )}
         {visHasBarBorders() && (
           <Select
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon
+                    display='question'
+                    style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                  />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>
+                  Recommended set to display for Section 508 compliance.
+                  </p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
             value={config.barHasBorder}
             fieldName='barHasBorder'
             label='Bar Borders'

diff --git a/packages/chart/src/data/initial-state.js b/packages/chart/src/data/initial-state.js
@@ -13,7 +13,7 @@ export default {
   animate: false,
   lineDatapointStyle: 'hover',
   lineDatapointColor: 'Same as Line',
-  barHasBorder: 'false',
+  barHasBorder: 'true',
   isLollipopChart: false,
   lollipopShape: 'circle',
   lollipopColorStyle: 'two-tone',
@@ -188,7 +188,7 @@ export default {
     palette: 'monochrome-1',
     isPaletteReversed: false
   },
-  labels: false,
+  labels: true,
   dataFormat: {
     commas: false,
     prefix: '',