Update legend icons size (#299)

package.json

@@ -144,6 +144,16 @@
     "wdio-default": "terra wdio",
     "wdio-lowlight": "NODE_OPTIONS=--max-old-space-size=2048 terra wdio --themes clinical-lowlight-theme",
     "wdio-fusion": "terra wdio --themes orion-fusion-theme",
-    "wdio": "terra wdio --themes terra-default-theme"
+    "wdio": "terra wdio --themes terra-default-theme",
+    "wdio:bar": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/BarGraph/bar-graph-spec.js",
+    "wdio:bubble": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/BubbleGraph/bubbleGraphs-spec.js",
+    "wdio:combination": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/CombinationGraph/combination-graph-spec.js",
+    "wdio:gantt": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/GanttChart/gantt-chart-spec.js",
+    "wdio:general": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/General/general-spec.js",
+    "wdio:line": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/LineGraph/line-graph-spec.js",
+    "wdio:pairedresult": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/PairedResultGraph/paired-result-graph-spec.js",
+    "wdio:pie": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/PieChart/pie-graph-spec.js",
+    "wdio:scatter": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/ScatterGraph/scatter-graph-spec.js",
+    "wdio:timeline": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/Timeline/timeline-spec.js"
   }
 }

packages/carbon-graphs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added logic to increase legend icon size when an icon is used in the legend without a line.
+
 ## 2.22.0 - (September 13, 2022)
 
 * Added

packages/carbon-graphs/src/js/helpers/legend.js

@@ -65,7 +65,9 @@ const legendDisplayStyle = (input) => (input.legendOptions
  */
 const createLegendIcon = (buttonPath, input) => buttonPath.append(() => new Shape(getShapeForTarget(input)).getShapeElement(
   getDefaultSVGProps({
-    svgClassNames: styles.legendItemIcon,
+    svgClassNames: (input.legendOptions && input.legendOptions.showLine)
+      ? styles.legendItemIconWithLine
+      : styles.legendItemIcon,
     svgStyles: `fill: ${getColorForTarget(input)};`,
   }),
   true,
@@ -75,14 +77,13 @@ const createLegendIcon = (buttonPath, input) => buttonPath.append(() => new Shap
  *
  * @private
  * @param {object} buttonPath - d3 svg object
- * @param {object} t - input item object processed from the input JSON
+ * @param {object} input - input item object processed from the input JSON
  */
-const createLegendLine = (buttonPath, t) => {
-  const { legendOptions } = t;
+const createLegendLine = (buttonPath, input) => {
   const svg = buttonPath
     .append('svg')
     .classed(
-      legendOptions.showShape
+      input.legendOptions.showShape
         ? styles.legendItemLineWithIcon
         : styles.legendItemLine,
       true,
@@ -94,16 +95,16 @@ const createLegendLine = (buttonPath, t) => {
     .attr('x1', 1)
     .attr(
       'x2',
-      legendOptions.showShape
+      input.legendOptions.showShape
         ? constants.DEFAULT_LEGEND_LINE_WIDTH_WITH_SYMBOL - 1
         : constants.DEFAULT_LEGEND_LINE_WIDTH - 1,
     )
     .attr('y1', constants.LEGEND_LINE_POSITION)
     .attr('y2', constants.LEGEND_LINE_POSITION)
     .attr(
       'style',
-      `stroke: ${getColorForTarget(t)};
-            stroke-dasharray: ${legendOptions.style.strokeDashArray};
+      `stroke: ${getColorForTarget(input)};
+            stroke-dasharray: ${input.legendOptions.style.strokeDashArray};
             stroke-width: 1px;`,
     );
 };
@@ -117,10 +118,8 @@ const createLegendLine = (buttonPath, t) => {
 const processLegendOptions = (buttonPath, input) => {
   if (input.legendOptions) {
     // Create a legend icon only if the showShape is true
-    if (input.showShapes || input.showShapes === undefined) {
-      if (input.legendOptions.showShape) {
-        createLegendIcon(buttonPath, input);
-      }
+    if ((input.showShapes || input.showShapes === undefined) && input.legendOptions.showShape) {
+      createLegendIcon(buttonPath, input);
     }
     if (input.legendOptions.showLine) {
       createLegendLine(buttonPath, input);

packages/carbon-graphs/src/js/helpers/styles.js

@@ -39,6 +39,7 @@ export default {
   legendItem: 'carbon-legend-item',
   legendItemBtn: 'carbon-legend-item-btn',
   legendItemIcon: 'carbon-legend-item-icon',
+  legendItemIconWithLine: 'carbon-legend-item-icon-with-line',
   legendItemLine: 'carbon-legend-item-line',
   legendItemLineWithIcon: 'carbon-legend-item-line-with-icon',
   legendItemSpan: 'carbon-legend-item-span',

packages/carbon-graphs/src/less/core.less

@@ -7,6 +7,7 @@ svg:not(:root) {
 }
 
 .carbon-svg-icon {
+
     width: 0.625rem;
     height: 0.625rem;
     display: inline-block;
@@ -151,8 +152,20 @@ svg:not(:root) {
             }
         }
 
+        // refers to the icon itself IF there is no line next to it
         & .carbon-legend-item-icon {
             display: block;
+            height: 0.857rem;
+            width: 0.857rem;
+            stroke: @white;
+            stroke-width: 5px;
+        }
+
+        // refers to the icon IF there is a line next to it
+        & .carbon-legend-item-icon-with-line {
+            display: block;
+            height: 0.625rem;
+            width: 0.625rem;
             stroke: @white;
             stroke-width: 5px;
         }
@@ -164,12 +177,14 @@ svg:not(:root) {
             align-items: center;
         }
 
+        // refers to the line itself IF there is no icon next to it
         & .carbon-legend-item-line {
             height: 5px;
             width: 28px;
             padding-top: 1px;
         }
 
+        // refers to the line IF there is an icon next to it
         & .carbon-legend-item-line-with-icon {
             height: 5px;
             width: 18px;

packages/carbon-graphs/tests/unit/controls/Line/LineLoad-spec.js

@@ -1104,7 +1104,7 @@ describe('Line - Load', () => {
       expect(iconPath.getAttribute('d')).not.toBeNull();
     });
     describe('when showShapes is true', () => {
-      it('loads  shape and line if user sets showLine to be true  and showShape to be true', () => {
+      it('loads shape and line if user sets showLine to be true and showShape to be true', () => {
         const input = getInput(valuesDefault, false, false);
         input.legendOptions = {
           showShape: true,
@@ -1121,7 +1121,7 @@ describe('Line - Load', () => {
         expect(SVGElements.length).toBe(2);
 
         expect(iconSVG).not.toBeNull();
-        expect(iconSVG.classList).toContain(styles.legendItemIcon);
+        expect(iconSVG.classList).toContain(styles.legendItemIconWithLine);
         expect(iconPath).not.toBeNull();
         expect(iconPath.getAttribute('d')).not.toBeNull();
 
@@ -1154,7 +1154,7 @@ describe('Line - Load', () => {
         expect(SVGElements.length).toBe(2);
 
         expect(iconSVG).not.toBeNull();
-        expect(iconSVG.classList).toContain(styles.legendItemIcon);
+        expect(iconSVG.classList).toContain(styles.legendItemIconWithLine);
         expect(iconPath).not.toBeNull();
         expect(iconPath.getAttribute('d')).not.toBeNull();
 

packages/carbon-graphs/tests/unit/controls/PairedResult/PairedResultLoad-spec.js

@@ -1533,7 +1533,7 @@ describe('Paired Result - Load', () => {
         const lineSVG = svgElements[1];
         expect(svgElements.length).toBe(2);
         expect(iconSVG).not.toBeNull();
-        expect(iconSVG.classList).toContain(styles.legendItemIcon);
+        expect(iconSVG.classList).toContain(styles.legendItemIconWithLine);
         expect(lineSVG).not.toBeNull();
         expect(lineSVG.classList).toContain(
           styles.legendItemLineWithIcon,

packages/terra-graphs-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated css for examples to increase size of a legend icon without a line.
+
 ## 1.3.0 - (September 13, 2022)
 
 * Added

packages/terra-graphs-docs/src/terra-graphs-src/components/Graph.module.scss

@@ -147,10 +147,22 @@
       }
     }
 
+    // refers to the icon itself IF there is no line next to it
     .carbon-legend-item-icon {
       display: block;
+      height: 0.857rem;
       stroke: var(--terra-graphs-white);
       stroke-width: 5px;
+      width: 0.857rem;
+    }
+
+    // refers to the icon IF there is a line next to it
+    .carbon-legend-item-icon-with-line {
+      display: block;
+      height: 0.857rem;
+      stroke: var(--terra-graphs-white);
+      stroke-width: 5px;
+      width: 0.857rem;
     }
 
     .carbon-legend-item-span {
@@ -160,12 +172,14 @@
       justify-content: center;
     }
 
+    // refers to the line itself IF there is no icon next to it
     .carbon-legend-item-line {
       height: 5px;
       padding-top: 1px;
       width: 28px;
     }
 
+    // refers to the line IF there is an icon next to it
     .carbon-legend-item-line-with-icon {
       height: 5px;
       padding-top: 1px;

packages/terra-graphs/src/components/Graph.module.scss

@@ -147,10 +147,22 @@
       }
     }
 
+    // refers to the icon itself IF there is no line next to it
     .carbon-legend-item-icon {
       display: block;
+      height: 0.857rem;
       stroke: var(--terra-graphs-white);
       stroke-width: 5px;
+      width: 0.857rem;
+    }
+
+    // refers to the icon IF there is a line next to it
+    .carbon-legend-item-icon-with-line {
+      display: block;
+      height: 0.857rem;
+      stroke: var(--terra-graphs-white);
+      stroke-width: 5px;
+      width: 0.857rem;
     }
 
     .carbon-legend-item-span {
@@ -160,12 +172,14 @@
       justify-content: center;
     }
 
+    // refers to the line itself IF there is no icon next to it
     .carbon-legend-item-line {
       height: 5px;
       padding-top: 1px;
       width: 28px;
     }
 
+    // refers to the line IF there is an icon next to it
     .carbon-legend-item-line-with-icon {
       height: 5px;
       padding-top: 1px;