@patternfly/patternfly 6.5.0-prerelease.32 → 6.5.0-prerelease.34

package/docs/components/TreeView/examples/TreeView.md

@@ -111,16 +111,18 @@ cssPrefix: pf-v6-c-tree-view
           tabindex="0"
         >
           <div class="pf-v6-c-tree-view__content">
-            <button class="pf-v6-c-tree-view__node">
+            <div class="pf-v6-c-tree-view__node pf-m-disabled" tabindex="0">
               <span class="pf-v6-c-tree-view__node-container">
-                <span class="pf-v6-c-tree-view__node-toggle">
+                <span class="pf-v6-c-tree-view__node-toggle pf-m-disabled">
                   <span class="pf-v6-c-tree-view__node-toggle-icon">
                     <i class="fas fa-angle-right" aria-hidden="true"></i>
                   </span>
                 </span>
-                <span class="pf-v6-c-tree-view__node-text">Application 2</span>
+                <span
+                  class="pf-v6-c-tree-view__node-text"
+                >Application 2 (disabled item and toggle)</span>
               </span>
-            </button>
+            </div>
           </div>
           <ul class="pf-v6-c-tree-view__list" role="group">
             <li
@@ -130,11 +132,11 @@ cssPrefix: pf-v6-c-tree-view
               tabindex="-1"
             >
               <div class="pf-v6-c-tree-view__content">
-                <button class="pf-v6-c-tree-view__node">
+                <div class="pf-v6-c-tree-view__node" tabindex="0">
                   <span class="pf-v6-c-tree-view__node-container">
                     <span class="pf-v6-c-tree-view__node-text">Settings</span>
                   </span>
-                </button>
+                </div>
               </div>
             </li>
             <li
@@ -1594,9 +1596,9 @@ A search input can be used to filter tree view items. It is recommended that a t
           tabindex="0"
         >
           <div class="pf-v6-c-tree-view__content">
-            <button class="pf-v6-c-tree-view__node">
+            <button class="pf-v6-c-tree-view__node pf-m-disabled">
               <span class="pf-v6-c-tree-view__node-container">
-                <span class="pf-v6-c-tree-view__node-toggle">
+                <span class="pf-v6-c-tree-view__node-toggle pf-m-disabled">
                   <span class="pf-v6-c-tree-view__node-toggle-icon">
                     <i class="fas fa-angle-right" aria-hidden="true"></i>
                   </span>
@@ -1604,7 +1606,9 @@ A search input can be used to filter tree view items. It is recommended that a t
                 <span class="pf-v6-c-tree-view__node-icon">
                   <i class="fas fa-folder-open" aria-hidden="true"></i>
                 </span>
-                <span class="pf-v6-c-tree-view__node-text">Application 2</span>
+                <span
+                  class="pf-v6-c-tree-view__node-text"
+                >Application 2 (disabled item and toggle)</span>
               </span>
             </button>
           </div>
@@ -2797,10 +2801,11 @@ A search input can be used to filter tree view items. It is recommended that a t
                 >
                   <span class="pf-v6-c-tree-view__node-container">
                     <button
-                      class="pf-v6-c-tree-view__node-toggle"
+                      class="pf-v6-c-tree-view__node-toggle pf-m-disabled"
                       id="toggle-tree-view-selectable-expandable-3"
                       aria-label="Toggle"
                       aria-labelledby="toggle-tree-view-selectable-expandable-3 text-tree-view-selectable-expandable-3"
+                      disabled
                     >
                       <span class="pf-v6-c-tree-view__node-toggle-icon">
                         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2809,7 +2814,7 @@ A search input can be used to filter tree view items. It is recommended that a t
                     <button
                       class="pf-v6-c-tree-view__node-text"
                       id="text-tree-view-selectable-expandable-3"
-                    >Loader</button>
+                    >Loader (toggle disabled)</button>
                   </span>
                 </div>
               </div>
@@ -2907,7 +2912,7 @@ A search input can be used to filter tree view items. It is recommended that a t
             >
               <div class="pf-v6-c-tree-view__content">
                 <div
-                  class="pf-v6-c-tree-view__node pf-m-selectable"
+                  class="pf-v6-c-tree-view__node pf-m-selectable pf-m-disabled"
                   tabindex="0"
                   id="node-tree-view-selectable-expandable-6"
                   aria-label="Select"
@@ -2927,7 +2932,7 @@ A search input can be used to filter tree view items. It is recommended that a t
                     <button
                       class="pf-v6-c-tree-view__node-text"
                       id="text-tree-view-selectable-expandable-6"
-                    >Loader</button>
+                    >Loader (disabled item but toggle is enabled)</button>
                   </span>
                 </div>
               </div>
@@ -2941,7 +2946,7 @@ A search input can be used to filter tree view items. It is recommended that a t
                 >
                   <div class="pf-v6-c-tree-view__content">
                     <div
-                      class="pf-v6-c-tree-view__node pf-m-selectable pf-m-current"
+                      class="pf-v6-c-tree-view__node pf-m-selectable pf-m-current pf-m-disabled"
                       tabindex="0"
                       id="node-tree-view-selectable-expandable-7"
                       aria-label="Select"
@@ -2949,10 +2954,11 @@ A search input can be used to filter tree view items. It is recommended that a t
                     >
                       <span class="pf-v6-c-tree-view__node-container">
                         <button
-                          class="pf-v6-c-tree-view__node-toggle"
+                          class="pf-v6-c-tree-view__node-toggle pf-m-disabled"
                           id="toggle-tree-view-selectable-expandable-7"
                           aria-label="Toggle"
                           aria-labelledby="toggle-tree-view-selectable-expandable-7 text-tree-view-selectable-expandable-7"
+                          disabled
                         >
                           <span class="pf-v6-c-tree-view__node-toggle-icon">
                             <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2961,7 +2967,7 @@ A search input can be used to filter tree view items. It is recommended that a t
                         <button
                           class="pf-v6-c-tree-view__node-text"
                           id="text-tree-view-selectable-expandable-7"
-                        >Loader app 1</button>
+                        >Loader app 1 (disabled item and toggle)</button>
                       </span>
                     </div>
                   </div>
@@ -3455,10 +3461,12 @@ A search input can be used to filter tree view items. It is recommended that a t
       tabindex="-1"
     >
       <div class="pf-v6-c-tree-view__content">
-        <button class="pf-v6-c-tree-view__node">
+        <button class="pf-v6-c-tree-view__node pf-m-disabled">
           <span class="pf-v6-c-tree-view__node-container">
             <span class="pf-v6-c-tree-view__node-content">
-              <span class="pf-v6-c-tree-view__node-title">metadata</span>
+              <span
+                class="pf-v6-c-tree-view__node-title"
+              >metadata (disabled item)</span>
               <span
                 class="pf-v6-c-tree-view__node-text"
               >Standard object metadata</span>
@@ -3624,9 +3632,9 @@ A search input can be used to filter tree view items. It is recommended that a t
               tabindex="0"
             >
               <div class="pf-v6-c-tree-view__content">
-                <button class="pf-v6-c-tree-view__node">
+                <button class="pf-v6-c-tree-view__node pf-m-disabled">
                   <span class="pf-v6-c-tree-view__node-container">
-                    <span class="pf-v6-c-tree-view__node-toggle">
+                    <span class="pf-v6-c-tree-view__node-toggle pf-m-disabled">
                       <span class="pf-v6-c-tree-view__node-toggle-icon">
                         <i class="fas fa-angle-right" aria-hidden="true"></i>
                       </span>
@@ -3634,7 +3642,7 @@ A search input can be used to filter tree view items. It is recommended that a t
                     <span class="pf-v6-c-tree-view__node-content">
                       <span
                         class="pf-v6-c-tree-view__node-title"
-                      >matchExpressions</span>
+                      >matchExpressions (disabled item and toggle)</span>
                       <span
                         class="pf-v6-c-tree-view__node-text"
                       >matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
@@ -3767,10 +3775,12 @@ A search input can be used to filter tree view items. It is recommended that a t
       tabindex="-1"
     >
       <div class="pf-v6-c-tree-view__content">
-        <button class="pf-v6-c-tree-view__node">
+        <button class="pf-v6-c-tree-view__node pf-m-disabled">
           <span class="pf-v6-c-tree-view__node-container">
             <span class="pf-v6-c-tree-view__node-content">
-              <span class="pf-v6-c-tree-view__node-title">metadata</span>
+              <span
+                class="pf-v6-c-tree-view__node-title"
+              >metadata (disabled item)</span>
               <span
                 class="pf-v6-c-tree-view__node-text"
               >Standard object metadata</span>
@@ -3936,9 +3946,9 @@ A search input can be used to filter tree view items. It is recommended that a t
               tabindex="0"
             >
               <div class="pf-v6-c-tree-view__content">
-                <button class="pf-v6-c-tree-view__node">
+                <button class="pf-v6-c-tree-view__node pf-m-disabled">
                   <span class="pf-v6-c-tree-view__node-container">
-                    <span class="pf-v6-c-tree-view__node-toggle">
+                    <span class="pf-v6-c-tree-view__node-toggle pf-m-disabled">
                       <span class="pf-v6-c-tree-view__node-toggle-icon">
                         <i class="fas fa-angle-right" aria-hidden="true"></i>
                       </span>
@@ -3946,7 +3956,7 @@ A search input can be used to filter tree view items. It is recommended that a t
                     <span class="pf-v6-c-tree-view__node-content">
                       <span
                         class="pf-v6-c-tree-view__node-title"
-                      >matchExpressions</span>
+                      >matchExpressions (disabled item and toggle)</span>
                       <span
                         class="pf-v6-c-tree-view__node-text"
                       >matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
@@ -4052,4 +4062,6 @@ A search input can be used to filter tree view items. It is recommended that a t
 | `.pf-m-no-background` | `.pf-v6-c-tree-view.pf-m-compact` | Modifies the tree view compact variant node containers to have a transparent background. |
 | `.pf-m-current` | `.pf-v6-c-tree-view__node` | Modifies the tree view node to be current. |
 | `.pf-m-selectable` | `.pf-v6-c-tree-view__node` | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
+| `.pf-m-disabled` | `.pf-v6-c-tree-view__node` | Modifies the tree view node to display as disabled. |
+| `.pf-m-disabled` | `.pf-v6-c-tree-view__node-toggle` | Modifies the tree view node toggle to display as disabled. |
 | `.pf-m-truncate` | `.pf-v6-c-tree-view`, `.pf-v6-c-tree-view__node-title`, `.pf-v6-c-tree-view__node-text` | Modifies the tree view title or text to truncate. |

package/layouts/Flex/flex.scss

@@ -1,4 +1,6 @@
 @use '../../sass-utilities' as *;
+@use 'sass:list';
+@use 'sass:map';
 
 // Always keep list of spacers and breakpoints up-to-date
 $pf-v6-l-flex--breakpoint-map: build-breakpoint-map();
@@ -74,7 +76,11 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
 .#{$flex} {
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       // display
@@ -301,13 +307,17 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
   // .pf-m-space-items-{size}{-on-[breakpoint]}
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       @each $spacer, $spacer-value in $pf-v6-l-flex--spacer-map {
         &.pf-m-space-items-#{$spacer}#{$breakpoint-name} {
           > * {
-            --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
+            --#{$flex}--spacer: var(#{map.get($pf-v6-l-flex--variable-map, $spacer-value)});
           }
 
           > :last-child {
@@ -320,15 +330,19 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
   // .pf-m-spacer-{size}{-on-[breakpoint]}
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       @each $spacer, $spacer-value in $pf-v6-l-flex--spacer-map {
         .pf-m-spacer-#{$spacer}#{$breakpoint-name} {
-          --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
+          --#{$flex}--spacer: var(#{map.get($pf-v6-l-flex--variable-map, $spacer-value)});
 
           &:last-child {
-            --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
+            --#{$flex}--spacer: var(#{map.get($pf-v6-l-flex--variable-map, $spacer-value)});
           }
         }
       }
@@ -341,12 +355,32 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
       @include pf-v6-apply-breakpoint($breakpoint) {
         @each $spacer, $value in $pf-v6-l-flex--gap-map {
-          $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
-          $spacer-name: if($spacer == "base", "", -#{$spacer});
-          $spacer-row: if($spacer == "base", var(--#{$flex}--m-gap--RowGap), $value);
-          $spacer-column: if($spacer == "base", var(--#{$flex}--m-gap--ColumnGap), $value);
+          $breakpoint-name: -on-#{$breakpoint};
+
+          @if $breakpoint == "base" {
+            $breakpoint-name: "";
+          }
+
+          $spacer-name: -#{$spacer};
+
+          @if $spacer == "base" {
+            $spacer-name: "";
+          }
+
+          $spacer-row: $value;
+
+          @if $spacer == "base" {
+            $spacer-row: var(--#{$flex}--m-gap--RowGap);
+          }
+
+          $spacer-column: $value;
+
+          @if $spacer == "base" {
+            $spacer-column: var(--#{$flex}--m-gap--ColumnGap);
+          }
+
           $selector: ".pf-m-gap#{$spacer-name}#{$breakpoint-name}";
-          $pf-v6-l-flex--gap--selectors: append($pf-v6-l-flex--gap--selectors, $selector, $separator: comma);
+          $pf-v6-l-flex--gap--selectors: list.append($pf-v6-l-flex--gap--selectors, $selector, $separator: comma);
 
           &#{$selector} {
             --#{$flex}--RowGap: #{$spacer-row};
@@ -369,11 +403,26 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
       $pf-v6-l-flex--row-gap--selectors: ();
 
       @each $spacer, $value in $pf-v6-l-flex--gap-map {
-        $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
-        $spacer-name: if($spacer == "base", "", -#{$spacer});
-        $spacer-value: if($spacer == "base", var(--#{$flex}--m-row-gap--RowGap), $value);
+        $breakpoint-name: -on-#{$breakpoint};
+
+        @if $breakpoint == "base" {
+          $breakpoint-name: "";
+        }
+
+        $spacer-name: -#{$spacer};
+
+        @if $spacer == "base" {
+          $spacer-name: "";
+        }
+
+        $spacer-value: $value;
+
+        @if $spacer == "base" {
+          $spacer-value: var(--#{$flex}--m-row-gap--RowGap);
+        }
+
         $selector: ".pf-m-row-gap#{$spacer-name}#{$breakpoint-name}";
-        $pf-v6-l-flex--row-gap--selectors: append($pf-v6-l-flex--row-gap--selectors, $selector, $separator: comma);
+        $pf-v6-l-flex--row-gap--selectors: list.append($pf-v6-l-flex--row-gap--selectors, $selector, $separator: comma);
 
        &#{$selector} {
           --#{$flex}--RowGap: #{$spacer-value};
@@ -394,11 +443,26 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       @each $spacer, $value in $pf-v6-l-flex--gap-map {
-        $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
-        $spacer-name: if($spacer == "base", "", -#{$spacer});
-        $spacer-value: if($spacer == "base", var(--#{$flex}--m-column-gap--ColumnGap), $value);
+        $breakpoint-name: -on-#{$breakpoint};
+
+        @if $breakpoint == "base" {
+          $breakpoint-name: "";
+        }
+
+        $spacer-name: -#{$spacer};
+
+        @if $spacer == "base" {
+          $spacer-name: "";
+        }
+
+        $spacer-value: $value;
+
+        @if $spacer == "base" {
+          $spacer-value: var(--#{$flex}--m-column-gap--ColumnGap);
+        }
+
         $selector: ".pf-m-column-gap#{$spacer-name}#{$breakpoint-name}";
-        $pf-v6-l-flex--column-gap--selectors: append($pf-v6-l-flex--column-gap--selectors, $selector, $separator: comma);
+        $pf-v6-l-flex--column-gap--selectors: list.append($pf-v6-l-flex--column-gap--selectors, $selector, $separator: comma);
 
         &#{$selector} {
           --#{$flex}--ColumnGap: #{$spacer-value};

package/layouts/Gallery/gallery.css

@@ -12,12 +12,13 @@
   display: grid;
   grid-template-rows: var(--pf-v6-l-gallery--GridTemplateRows);
   grid-template-columns: var(--pf-v6-l-gallery--GridTemplateColumns);
-  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
-  --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
 }
 .pf-v6-l-gallery.pf-m-gutter {
   grid-gap: var(--pf-v6-l-gallery--m-gutter--GridGap);
 }
+.pf-v6-l-gallery {
+  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
+}
 @media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min));
@@ -43,6 +44,9 @@
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))))));
   }
 }
+.pf-v6-l-gallery {
+  --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
+}
 @media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max));

package/layouts/_index.css

@@ -2406,12 +2406,13 @@
   display: grid;
   grid-template-rows: var(--pf-v6-l-gallery--GridTemplateRows);
   grid-template-columns: var(--pf-v6-l-gallery--GridTemplateColumns);
-  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
-  --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
 }
 .pf-v6-l-gallery.pf-m-gutter {
   grid-gap: var(--pf-v6-l-gallery--m-gutter--GridGap);
 }
+.pf-v6-l-gallery {
+  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
+}
 @media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min));
@@ -2437,6 +2438,9 @@
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))))));
   }
 }
+.pf-v6-l-gallery {
+  --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
+}
 @media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.5.0-prerelease.32",
+  "version": "6.5.0-prerelease.34",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -12,6 +12,7 @@
     "backstop:approve": "backstop approve --config='backstop.js'",
     "backstop:approve:dark": "backstop approve --config='backstop.js' --dark",
     "backstop:chrome": "node backstop_data/engine_scripts/puppet/chrome.js",
+    "playwright": "node ./node_modules/playwright/cli.js",
     "build-patternfly": "gulp buildPatternfly",
     "build": "gulp build",
     "build:docs": "gulp buildWebpack",
@@ -48,7 +49,7 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.1.0",
-    "@patternfly/documentation-framework": "6.31.15",
+    "@patternfly/documentation-framework": "6.33.3",
     "@patternfly/patternfly-a11y": "5.1.0",
     "@patternfly/react-code-editor": "6.4.0",
     "@patternfly/react-core": "6.4.0",
@@ -90,6 +91,7 @@
     "react-dom": "^18.2.0",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
+    "resemblejs": "^5.0.0",
     "rimraf": "^6.0.1",
     "sass": "^1.74.1",
     "stylelint": "^16.3.1",

package/patternfly-charts.css

@@ -699,12 +699,12 @@
   --pf-v6-chart-echarts-graph--line-style--BorderWidth: 1;
   --pf-v6-chart-echarts-graph--Smooth: false;
   --pf-v6-chart-echarts-graph--SymbolSize: 4;
-  --pf-v6-chart-echarts-graph--Symbol: "square";
+  --pf-v6-chart-echarts-graph--Symbol: 'square';
   --pf-v6-chart-echarts-line--item-style--BorderWidth: 1;
   --pf-v6-chart-echarts-line--line-style--BorderWidth: 2;
   --pf-v6-chart-echarts-line--Smooth: false;
   --pf-v6-chart-echarts-line--SymbolSize: 4;
-  --pf-v6-chart-echarts-line--Symbol: "square";
+  --pf-v6-chart-echarts-line--Symbol: 'square';
   --pf-v6-chart-echarts-map--emphasis--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--400);
   --pf-v6-chart-echarts-map--emphasis--item-style--BorderWidth: 1;
   --pf-v6-chart-echarts-map--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
@@ -743,5 +743,5 @@
   --pf-v6-chart-echarts-radar--line-style--BorderWidth: 2;
   --pf-v6-chart-echarts-radar--Smooth: false;
   --pf-v6-chart-echarts-radar--SymbolSize: 4;
-  --pf-v6-chart-echarts-radar--Symbol: "square";
+  --pf-v6-chart-echarts-radar--Symbol: 'square';
 }