fix(ListItemSlider): min and max value coordinate to correct set valu…

…es (#507) * fix(ListItemSlider): min and max value coordinate to correct set values * fix(ListItemSlider): reorder min and max to match rest of file * fix(ListItemSlider): updated snapshot * fix(ListItemSlider): fixed breaking tests * fix(ListItemSlider): slider update method updates min and max value * fix(ListItemSlider): delay allows slider position to update * fix(ListItemSlider): comment explains delay * fix(ListItemSlider): slider preserves min and max values
rdkcentral · May 22, 2024 · 703cf69 · 703cf69
1 parent 9f30521
commit 703cf69
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.js b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.js
@@ -54,7 +54,7 @@ export default class ListItemSlider extends ListItem {
   }
 
   static get properties() {
-    return [...super.properties, 'slider', 'value'];
+    return [...super.properties, 'slider', 'value', 'max', 'min'];
   }
 
   static get aliasStyles() {
@@ -72,6 +72,8 @@ export default class ListItemSlider extends ListItem {
   _construct() {
     super._construct();
     this.value = 50;
+    this.max = 100;
+    this.min = 0;
   }
 
   _update() {
@@ -121,7 +123,9 @@ export default class ListItemSlider extends ListItem {
       visible: !this._collapse,
       alpha: this.style.alpha,
       ...this.slider,
-      value: this.value
+      value: this.value,
+      max: this.max,
+      min: this.min
     };
 
     this._Slider.patch(sliderProps);

diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.stories.js b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.stories.js
@@ -46,7 +46,9 @@ ListItemSlider.args = {
   title: 'List Item',
   value: 50,
   shouldCollapse: false,
-  mode: 'focused'
+  mode: 'focused',
+  max: 100,
+  min: 0
 };
 ListItemSlider.argTypes = {
   ...createModeControl({ summaryValue: 'focused' }),
@@ -74,6 +76,22 @@ ListItemSlider.argTypes = {
       defaultValue: { summary: false },
       type: { summary: 'boolean' }
     }
+  },
+  max: {
+    control: 'number',
+    description: 'Upper bound of value',
+    table: {
+      defaultValue: { summary: 100 },
+      type: { summary: 'number' }
+    }
+  },
+  min: {
+    control: 'number',
+    description: 'Lower bound of value',
+    table: {
+      defaultValue: { summary: 0 },
+      type: { summary: 'number' }
+    }
   }
 };
 
@@ -88,5 +106,5 @@ generateSubStory({
   baseStory: ListItemSlider,
   subStory: SliderStory,
   targetProperty: 'slider',
-  include: ['min', 'max', 'step']
+  include: ['step']
 });
diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.test.js b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.test.js
@@ -83,7 +83,7 @@ describe('ListItemSlider', () => {
 
   it('should not exceed slider max value when handleRight is clicked', () => {
     listItemSlider.value = 10;
-    listItemSlider._Slider.max = 10;
+    listItemSlider.max = 10;
     testRenderer.forceAllUpdates();
     listItemSlider._handleRight();
     expect(listItemSlider._Slider.value).toEqual(10);