Merge pull request #837 from MyPureCloud/fix/range_slider/GDS-2631_im…

…provements

chore(tokens): update range-slider token names

packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-range/gux-form-field-range.light.scss

@@ -1,14 +1,20 @@
 @use '~genesys-spark/dist/scss/focus.scss';
 
 // Variables part
-$range-active: var(--gse-ui-slider-bar-selected-backgroundColor);
-$thumb-diameter: var(--gse-ui-slider-handle-width);
+$range-active: var(--gse-ui-rangeSlider-bar-selected-backgroundColor);
+$thumb-diameter: var(--gse-ui-rangeSlider-handle-width);
 $track-width: 100%;
-$track-height: var(--gse-ui-slider-bar-height);
+$track-height: var(--gse-ui-rangeSlider-bar-height);
 $track-radius: 0;
-$handle-enabled-background: var(--gse-ui-slider-handle-default-backgroundColor);
-$handle-hover-background: var(--gse-ui-slider-handle-hover-backgroundColor);
-$handle-active-background: var(--gse-ui-slider-handle-active-backgroundColor);
+$handle-enabled-background: var(
+  --gse-ui-rangeSlider-handle-default-backgroundColor
+);
+$handle-hover-background: var(
+  --gse-ui-rangeSlider-handle-hover-backgroundColor
+);
+$handle-active-background: var(
+  --gse-ui-rangeSlider-handle-active-backgroundColor
+);
 $handle-border-radius: 100%;
 $contrast: 5%;
 $slider-border: #b4bccb;

packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-range/gux-form-field-range.scss

@@ -32,10 +32,10 @@
 @include gux-form-field-help.Style;
 
 // Variables part
-$range-active: var(--gse-ui-slider-bar-selected-backgroundColor);
+$range-active: var(--gse-ui-rangeSlider-bar-selected-backgroundColor);
 $track-width: 100%;
-$track-height: var(--gse-ui-slider-bar-height);
-$thumb-diameter: calc(var(--gse-ui-slider-handle-width) / 2);
+$track-height: var(--gse-ui-rangeSlider-bar-height);
+$thumb-diameter: calc(var(--gse-ui-rangeSlider-handle-width) / 2);
 
 @mixin gux-track {
   inline-size: $track-width;
@@ -48,7 +48,7 @@ $thumb-diameter: calc(var(--gse-ui-slider-handle-width) / 2);
   inline-size: var($gse-ui-slider-handle-width);
   block-size: var($gse-ui-slider-handle-height);
   cursor: pointer;
-  border-radius: var(--gse-ui-slider-handle-borderRadius);
+  border-radius: var(--gse-ui-rangeSlider-handle-borderRadius);
 }
 
 :host {
@@ -82,15 +82,15 @@ $thumb-diameter: calc(var(--gse-ui-slider-handle-width) / 2);
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
-    gap: var(--gse-ui-slider-gap);
+    gap: var(--gse-ui-rangeSlider-gap);
     place-content: stretch flex-start;
     align-items: center;
     // We will not use a token for this height style below
     block-size: 32px;
-    font-size: var(--gse-ui-slider-label-text-fontSize);
+    font-size: var(--gse-ui-rangeSlider-label-text-fontSize);
 
     &.gux-disabled {
-      opacity: var(--gse-ui-slider-disabled-opacity);
+      opacity: var(--gse-ui-rangeSlider-disabled-opacity);
     }
 
     .gux-range {
@@ -112,13 +112,13 @@ $thumb-diameter: calc(var(--gse-ui-slider-handle-width) / 2);
         // We are not using a token for this margin below since it this 6px margin is used to center position the head on the track
         margin-block: 6px;
         margin-inline: 0;
-        background: var(--gse-ui-slider-bar-default-backgroundColor);
-        border-radius: var(--gse-ui-slider-track-borderRadius);
+        background: var(--gse-ui-rangeSlider-bar-default-backgroundColor);
+        border-radius: var(--gse-ui-rangeSlider-track-borderRadius);
 
         .gux-progress {
           block-size: $track-height;
           background-color: $range-active;
-          border-radius: var(--gse-ui-slider-track-borderRadius);
+          border-radius: var(--gse-ui-rangeSlider-track-borderRadius);
         }
       }
     }
@@ -129,10 +129,10 @@ $thumb-diameter: calc(var(--gse-ui-slider-handle-width) / 2);
       order: 0;
       margin-block: 0;
       margin-inline: var(--gux-spacing-medium) 0;
-      font-family: var(--gse-ui-slider-label-text-fontFamily);
-      font-size: var(--gse-ui-slider-label-text-fontSize);
-      font-weight: var(--gse-ui-slider-label-text-fontWeight);
-      line-height: var(--gse-ui-slider-label-text-lineHeight);
+      font-family: var(--gse-ui-rangeSlider-label-text-fontFamily);
+      font-size: var(--gse-ui-rangeSlider-label-text-fontSize);
+      font-weight: var(--gse-ui-rangeSlider-label-text-fontWeight);
+      line-height: var(--gse-ui-rangeSlider-label-text-lineHeight);
       text-align: end;
 
       &.gux-hidden {

packages/genesys-spark-tokens/data/$themes.json

@@ -1535,7 +1535,6 @@
       "calendar_menu.date.current_text": "S:87b245f7ee7c5ecea48680f35a03e2e52e27e50a,",
       "toggle.label": "S:61e3e13f68ff6df87dd51195d941cee108f707c3,",
       "color_picker.label.text": "S:71d2e26901474650cafa14fca5b51aac770c6c34,",
-      "slider.label.text": "S:e3316f5ef27b989de71b87f66159be9fcd2ece6b,",
       "form_control.input.content_text": "S:eb0eaab8c7b317a599e17e5185ad2c9bf86a0ee5,",
       "form_control.input.prefix_sufix.text": "S:ed5286ce31443a4346dc177d56812f90f6f1b243,",
       "form_control.label.text": "S:628ae8172661b2baca6becb7789b8fa0f853dd8b,",
@@ -1600,7 +1599,8 @@
       "tag.text_large": "S:1d3f8a03d0e21141301f73aa193ef19a81db1edf,",
       "tag.text_small": "S:148e69e969ba4155158122d4107221039900f502,",
       "links.standalone.small.text": "S:ea0e6bb1842db6b0059d825780b3d78706991abc,",
-      "links.standalone.small.underlined_text": "S:07dcc0cc87ea8d8686b6f1339b49f9947f0e4e32,"
+      "links.standalone.small.underlined_text": "S:07dcc0cc87ea8d8686b6f1339b49f9947f0e4e32,",
+      "range_slider.label.text": "S:e3316f5ef27b989de71b87f66159be9fcd2ece6b,"
     },
     "selectedTokenSets": {
       "ui/unordered": "enabled",
@@ -2026,21 +2026,6 @@
       "color_picker.input.swatch_sizing": "0a21c243a60178d508afa274e08198518ff30cc7",
       "color_picker.input.swatch_border_radius": "7ce702ecbfa68d3112e2cbef3585b3158bb0664c",
       "color_picker.gap": "226a45d75c9d366720f22afde292147f3bb6e389",
-      "slider.handle.width": "1b590946c40fcf66c735a17b808ae8b1e5d59899",
-      "slider.handle.height": "5d5fde812f085bdfd5f2669f242e15ef6947a288",
-      "slider.handle.default.background_color": "d15d3493180f28d29044e1405636d3d99f0d47a5",
-      "slider.handle.hover.background_color": "70794674cba2016781c6fccc85732bf81bff31df",
-      "slider.handle.active.background_color": "4f6c1c9ffb76b3e5e31e407af1dd8d51cd0594fd",
-      "slider.handle.disabled.background_color": "05a470dc89243caba2703a5ebd676e0535c73a61",
-      "slider.handle.border_radius": "19f8c84aac4ff098aef95061fbf320e22ad7b15f",
-      "slider.disabled.opacity": "f1f529008e5ac2f9304c6478312e028bc2b6d4b3",
-      "slider.label.foreground_color": "d5bc929f59eb6ca70e031c5dd5b04ba74053f4bb",
-      "slider.bar.selected.background_color": "1b02a09224641ce65dd60e4df223175ad630d293",
-      "slider.bar.default.background_color": "e8f5a1b43cd7eabeeefea83d7c40513af08bd393",
-      "slider.bar.height": "2d6ba3dad887becb119035dd49f4b3814f83d37c",
-      "slider.gap": "ce4a45b9fd1b54cc73f4b8cd4c24922971f70392",
-      "slider.focus_ring.border_radius": "6f64737097bba6db6aa7c7f8680c65d7c8422e43",
-      "slider.track.border_radius": "5c76f5ed2c6ae8b83be905fea18d09539f44807f",
       "flyout_menu.anchor.height": "89e30ae7bc336c99affe616c9a162e8ab13515de",
       "flyout_menu.anchor.width": "0061cb13adadb574a2928a27a968f937e62df0d5",
       "flyout_menu.width": "9a1d4dee4e0b790715317e6ec3dace38f2b4641e",
@@ -2502,7 +2487,15 @@
       "blank_state.gap_main": "69de3be05eeb22851286036d89111acb7e4c627a",
       "blank_state.gap_content": "15ff02c5635d64e3b7783047132a288e1c544c29",
       "blank_state.icon_color": "03e52d060cdc4dcc32623015a44f91f0b07bffa8",
-      "blank_state.foreground_color": "f40fea58f608d3c2a0ffa2cd3028fe44621a01ff"
+      "blank_state.foreground_color": "f40fea58f608d3c2a0ffa2cd3028fe44621a01ff",
+      "range_slider.handle.width": "1b590946c40fcf66c735a17b808ae8b1e5d59899",
+      "range_slider.handle.height": "5d5fde812f085bdfd5f2669f242e15ef6947a288",
+      "range_slider.bar.height": "2d6ba3dad887becb119035dd49f4b3814f83d37c",
+      "range_slider.gap": "ce4a45b9fd1b54cc73f4b8cd4c24922971f70392",
+      "range_slider.handle.border_radius": "19f8c84aac4ff098aef95061fbf320e22ad7b15f",
+      "range_slider.focus_ring.border_radius": "6f64737097bba6db6aa7c7f8680c65d7c8422e43",
+      "range_slider.track.border_radius": "5c76f5ed2c6ae8b83be905fea18d09539f44807f",
+      "range_slider.disabled.opacity": "f1f529008e5ac2f9304c6478312e028bc2b6d4b3"
     },
     "group": ".ui"
   }

packages/genesys-spark-tokens/data/ui/forms_and_inputs.json

@@ -1311,7 +1311,7 @@
       "type": "spacing"
     }
   },
-  "slider": {
+  "range_slider": {
     "handle": {
       "width": {
         "value": "{interactive.xs.size}",
@@ -1399,6 +1399,12 @@
         "value": "{theme.border_radius.interactive.small}",
         "type": "borderRadius"
       }
+    },
+    "set": {
+      "height": {
+        "value": "{interactive.xs.size}",
+        "type": "sizing"
+      }
     }
   },
   "flyout_menu": {

packages/genesys-spark-tokens/reports/unused-defined-ui-tokens.json

@@ -356,6 +356,11 @@
   "--gse-ui-progressAndLoading-pageLoading-gap",
   "--gse-ui-progressAndLoading-thinBorder",
   "--gse-ui-radioButton-label-text-fontSize",
+  "--gse-ui-rangeSlider-focusRing-borderRadius",
+  "--gse-ui-rangeSlider-handle-disabled-backgroundColor",
+  "--gse-ui-rangeSlider-handle-height",
+  "--gse-ui-rangeSlider-label-foregroundColor",
+  "--gse-ui-rangeSlider-set-height",
   "--gse-ui-rating-active-color",
   "--gse-ui-rte-colorPalette-gap",
   "--gse-ui-rte-colorPalette-padding",
@@ -411,10 +416,6 @@
   "--gse-ui-selectorCard-error-border-width",
   "--gse-ui-selectorCard-error-selectedIndicator-foregroundColor",
   "--gse-ui-simpleFilter-gap",
-  "--gse-ui-slider-focusRing-borderRadius",
-  "--gse-ui-slider-handle-disabled-backgroundColor",
-  "--gse-ui-slider-handle-height",
-  "--gse-ui-slider-label-foregroundColor",
   "--gse-ui-tabs-item-divider-vertical-height",
   "--gse-ui-tabs-item-focusRing-offset",
   "--gse-ui-tabs-item-gap",

packages/genesys-spark-tokens/reports/used-tokens.json

@@ -802,6 +802,21 @@
   "--gse-ui-radioButton-label-text-fontFamily",
   "--gse-ui-radioButton-label-text-fontWeight",
   "--gse-ui-radioButton-label-text-lineHeight",
+  "--gse-ui-rangeSlider-bar-default-backgroundColor",
+  "--gse-ui-rangeSlider-bar-height",
+  "--gse-ui-rangeSlider-bar-selected-backgroundColor",
+  "--gse-ui-rangeSlider-disabled-opacity",
+  "--gse-ui-rangeSlider-gap",
+  "--gse-ui-rangeSlider-handle-active-backgroundColor",
+  "--gse-ui-rangeSlider-handle-borderRadius",
+  "--gse-ui-rangeSlider-handle-default-backgroundColor",
+  "--gse-ui-rangeSlider-handle-hover-backgroundColor",
+  "--gse-ui-rangeSlider-handle-width",
+  "--gse-ui-rangeSlider-label-text-fontFamily",
+  "--gse-ui-rangeSlider-label-text-fontSize",
+  "--gse-ui-rangeSlider-label-text-fontWeight",
+  "--gse-ui-rangeSlider-label-text-lineHeight",
+  "--gse-ui-rangeSlider-track-borderRadius",
   "--gse-ui-rating-default-color",
   "--gse-ui-rating-disabled-color",
   "--gse-ui-rating-disabled-opacity",
@@ -965,21 +980,6 @@
   "--gse-ui-sidePanel-widthSize-lg",
   "--gse-ui-sidePanel-widthSize-md",
   "--gse-ui-sidePanel-widthSize-sm",
-  "--gse-ui-slider-bar-default-backgroundColor",
-  "--gse-ui-slider-bar-height",
-  "--gse-ui-slider-bar-selected-backgroundColor",
-  "--gse-ui-slider-disabled-opacity",
-  "--gse-ui-slider-gap",
-  "--gse-ui-slider-handle-active-backgroundColor",
-  "--gse-ui-slider-handle-borderRadius",
-  "--gse-ui-slider-handle-default-backgroundColor",
-  "--gse-ui-slider-handle-hover-backgroundColor",
-  "--gse-ui-slider-handle-width",
-  "--gse-ui-slider-label-text-fontFamily",
-  "--gse-ui-slider-label-text-fontSize",
-  "--gse-ui-slider-label-text-fontWeight",
-  "--gse-ui-slider-label-text-lineHeight",
-  "--gse-ui-slider-track-borderRadius",
   "--gse-ui-tabs-focusRing-border-color",
   "--gse-ui-tabs-focusRing-border-style",
   "--gse-ui-tabs-focusRing-border-width",

packages/genesys-spark-tokens/snapshot/json/gse-ui-flare-dark.json

@@ -1655,7 +1655,7 @@
     },
     "gap": "8px"
   },
-  "slider": {
+  "range_slider": {
     "handle": {
       "width": "20px",
       "height": "20px",
@@ -1700,6 +1700,9 @@
     },
     "track": {
       "border_radius": "4px"
+    },
+    "set": {
+      "height": "20px"
     }
   },
   "flyout_menu": {

packages/genesys-spark-tokens/snapshot/json/gse-ui-flare-light.json

@@ -1655,7 +1655,7 @@
     },
     "gap": "8px"
   },
-  "slider": {
+  "range_slider": {
     "handle": {
       "width": "20px",
       "height": "20px",
@@ -1700,6 +1700,9 @@
     },
     "track": {
       "border_radius": "4px"
+    },
+    "set": {
+      "height": "20px"
     }
   },
   "flyout_menu": {

packages/genesys-spark-tokens/snapshot/json/gse-ui-legacy-light.json

@@ -1655,7 +1655,7 @@
     },
     "gap": "8px"
   },
-  "slider": {
+  "range_slider": {
     "handle": {
       "width": "20px",
       "height": "20px",
@@ -1700,6 +1700,9 @@
     },
     "track": {
       "border_radius": "4px"
+    },
+    "set": {
+      "height": "20px"
     }
   },
   "flyout_menu": {

packages/genesys-spark-tokens/snapshot/scss/gse-ui-flare-dark.scss

@@ -787,25 +787,26 @@
   --gse-ui-colorPicker-input-swatchSizing: 24px;
   --gse-ui-colorPicker-input-swatchBorderRadius: 2px;
   --gse-ui-colorPicker-gap: 8px;
-  --gse-ui-slider-handle-width: 20px;
-  --gse-ui-slider-handle-height: 20px;
-  --gse-ui-slider-handle-default-backgroundColor: #5476d5;
-  --gse-ui-slider-handle-hover-backgroundColor: #829ce5;
-  --gse-ui-slider-handle-active-backgroundColor: #adbff0;
-  --gse-ui-slider-handle-disabled-backgroundColor: #5476d5;
-  --gse-ui-slider-handle-borderRadius: 100%;
-  --gse-ui-slider-disabled-opacity: 0.5;
-  --gse-ui-slider-label-text-fontFamily: 'Noto Sans';
-  --gse-ui-slider-label-text-fontWeight: 600;
-  --gse-ui-slider-label-text-fontSize: 14px;
-  --gse-ui-slider-label-text-lineHeight: 20px;
-  --gse-ui-slider-label-foregroundColor: #ffffff;
-  --gse-ui-slider-bar-selected-backgroundColor: #5476d5;
-  --gse-ui-slider-bar-default-backgroundColor: #848891;
-  --gse-ui-slider-bar-height: 4px;
-  --gse-ui-slider-gap: 16px;
-  --gse-ui-slider-focusRing-borderRadius: 100%;
-  --gse-ui-slider-track-borderRadius: 4px;
+  --gse-ui-rangeSlider-handle-width: 20px;
+  --gse-ui-rangeSlider-handle-height: 20px;
+  --gse-ui-rangeSlider-handle-default-backgroundColor: #5476d5;
+  --gse-ui-rangeSlider-handle-hover-backgroundColor: #829ce5;
+  --gse-ui-rangeSlider-handle-active-backgroundColor: #adbff0;
+  --gse-ui-rangeSlider-handle-disabled-backgroundColor: #5476d5;
+  --gse-ui-rangeSlider-handle-borderRadius: 100%;
+  --gse-ui-rangeSlider-disabled-opacity: 0.5;
+  --gse-ui-rangeSlider-label-text-fontFamily: 'Noto Sans';
+  --gse-ui-rangeSlider-label-text-fontWeight: 600;
+  --gse-ui-rangeSlider-label-text-fontSize: 14px;
+  --gse-ui-rangeSlider-label-text-lineHeight: 20px;
+  --gse-ui-rangeSlider-label-foregroundColor: #ffffff;
+  --gse-ui-rangeSlider-bar-selected-backgroundColor: #5476d5;
+  --gse-ui-rangeSlider-bar-default-backgroundColor: #848891;
+  --gse-ui-rangeSlider-bar-height: 4px;
+  --gse-ui-rangeSlider-gap: 16px;
+  --gse-ui-rangeSlider-focusRing-borderRadius: 100%;
+  --gse-ui-rangeSlider-track-borderRadius: 4px;
+  --gse-ui-rangeSlider-set-height: 20px;
   --gse-ui-flyoutMenu-anchor-height: 8px;
   --gse-ui-flyoutMenu-anchor-width: 76px;
   --gse-ui-flyoutMenu-width: 208px;

packages/genesys-spark-tokens/snapshot/scss/gse-ui-flare-light.scss

@@ -787,25 +787,26 @@
   --gse-ui-colorPicker-input-swatchSizing: 24px;
   --gse-ui-colorPicker-input-swatchBorderRadius: 2px;
   --gse-ui-colorPicker-gap: 8px;
-  --gse-ui-slider-handle-width: 20px;
-  --gse-ui-slider-handle-height: 20px;
-  --gse-ui-slider-handle-default-backgroundColor: #2143a2;
-  --gse-ui-slider-handle-hover-backgroundColor: #19327a;
-  --gse-ui-slider-handle-active-backgroundColor: #102251;
-  --gse-ui-slider-handle-disabled-backgroundColor: #2143a2;
-  --gse-ui-slider-handle-borderRadius: 100%;
-  --gse-ui-slider-disabled-opacity: 0.5;
-  --gse-ui-slider-label-text-fontFamily: 'Noto Sans';
-  --gse-ui-slider-label-text-fontWeight: 600;
-  --gse-ui-slider-label-text-fontSize: 14px;
-  --gse-ui-slider-label-text-lineHeight: 20px;
-  --gse-ui-slider-label-foregroundColor: #2a2a2e;
-  --gse-ui-slider-bar-selected-backgroundColor: #2143a2;
-  --gse-ui-slider-bar-default-backgroundColor: #c1c6d4;
-  --gse-ui-slider-bar-height: 4px;
-  --gse-ui-slider-gap: 16px;
-  --gse-ui-slider-focusRing-borderRadius: 100%;
-  --gse-ui-slider-track-borderRadius: 4px;
+  --gse-ui-rangeSlider-handle-width: 20px;
+  --gse-ui-rangeSlider-handle-height: 20px;
+  --gse-ui-rangeSlider-handle-default-backgroundColor: #2143a2;
+  --gse-ui-rangeSlider-handle-hover-backgroundColor: #19327a;
+  --gse-ui-rangeSlider-handle-active-backgroundColor: #102251;
+  --gse-ui-rangeSlider-handle-disabled-backgroundColor: #2143a2;
+  --gse-ui-rangeSlider-handle-borderRadius: 100%;
+  --gse-ui-rangeSlider-disabled-opacity: 0.5;
+  --gse-ui-rangeSlider-label-text-fontFamily: 'Noto Sans';
+  --gse-ui-rangeSlider-label-text-fontWeight: 600;
+  --gse-ui-rangeSlider-label-text-fontSize: 14px;
+  --gse-ui-rangeSlider-label-text-lineHeight: 20px;
+  --gse-ui-rangeSlider-label-foregroundColor: #2a2a2e;
+  --gse-ui-rangeSlider-bar-selected-backgroundColor: #2143a2;
+  --gse-ui-rangeSlider-bar-default-backgroundColor: #c1c6d4;
+  --gse-ui-rangeSlider-bar-height: 4px;
+  --gse-ui-rangeSlider-gap: 16px;
+  --gse-ui-rangeSlider-focusRing-borderRadius: 100%;
+  --gse-ui-rangeSlider-track-borderRadius: 4px;
+  --gse-ui-rangeSlider-set-height: 20px;
   --gse-ui-flyoutMenu-anchor-height: 8px;
   --gse-ui-flyoutMenu-anchor-width: 76px;
   --gse-ui-flyoutMenu-width: 208px;