fix(graphCardChartLegend): sw-235 style, spacing (#1028)

RedHatInsights · Dec 16, 2022 · 8f2574b · 8f2574b
1 parent 28ea22d
commit 8f2574b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap
@@ -86,7 +86,7 @@ exports[`GraphCardChartLegend Component should render a basic component: basic 1
     position="top"
   >
     <span
-      className="pf-c-button pf-m-link"
+      className="pf-c-button pf-m-link curiosity-usage-graph__legend-item-wrapper"
     >
       <Button
         className="curiosity-usage-graph__legend-item"
@@ -132,7 +132,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
     position="top"
   >
     <span
-      className="pf-c-button pf-m-link"
+      className="pf-c-button pf-m-link curiosity-usage-graph__legend-item-wrapper"
     >
       <Button
         className="curiosity-usage-graph__legend-item"
@@ -173,7 +173,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
     position="top"
   >
     <span
-      className="pf-c-button pf-m-link"
+      className="pf-c-button pf-m-link curiosity-usage-graph__legend-item-wrapper"
     >
       <Button
         className="curiosity-usage-graph__legend-item"
@@ -209,7 +209,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
     position="top"
   >
     <span
-      className="pf-c-button pf-m-link"
+      className="pf-c-button pf-m-link curiosity-usage-graph__legend-item-wrapper"
     >
       <Button
         className="curiosity-usage-graph__legend-item"
@@ -250,7 +250,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
     position="top"
   >
     <span
-      className="pf-c-button pf-m-link"
+      className="pf-c-button pf-m-link curiosity-usage-graph__legend-item-wrapper"
     >
       <Button
         className="curiosity-usage-graph__legend-item"

diff --git a/src/components/graphCard/graphCardChartLegend.js b/src/components/graphCard/graphCardChartLegend.js
@@ -143,7 +143,7 @@ const GraphCardChartLegend = ({
               enableFlip
               distance={5}
             >
-              <span className="pf-c-button pf-m-link">{button}</span>
+              <span className="pf-c-button pf-m-link curiosity-usage-graph__legend-item-wrapper">{button}</span>
             </Tooltip>
           );
         }

diff --git a/src/styles/_usage-graph.scss b/src/styles/_usage-graph.scss
@@ -47,14 +47,23 @@
       word-break: break-word;
     }
 
-    &__legend-item {
-      &:first-child {
+    &__legend-item-wrapper {
+      > .pf-c-button {
         padding-left: 0;
-      }
-      &:last-child {
         padding-right: 0;
       }
-    };
+    }
+
+    @media (min-width: $pf-global--breakpoint--lg) {
+      &__legend-item-wrapper {
+        &:first-child {
+          padding-left: 0;
+        }
+        &:last-child {
+          padding-right: 0;
+        }
+      }
+    }
 
     &__tooltip {
       color: var(--pf-global--Color--light-100);