From 15e6fc16fad0054f791f650399b2e279860d0102 Mon Sep 17 00:00:00 2001 From: Arun Kumaar Date: Wed, 30 Aug 2023 16:19:39 +0200 Subject: [PATCH] feat(ui-library): bug fix --- .../range-legend-min-max-slider/index.ts | 54 ++++--- .../components/range-legend-slider/index.ts | 32 ++-- .../range-min-max-slider/index.stories.ts | 2 +- .../range-min-max-slider/index.test.ts | 2 +- .../components/range-min-max-slider/index.ts | 107 +++++++------ .../components/range-slider/index.stories.ts | 2 +- .../src/components/range-slider/index.test.ts | 149 ++++++++++++++++++ .../src/components/range-slider/index.ts | 39 +++-- .../__component-tokens.Dark.generated.js | 2 +- .../__component-tokens.Light.generated.js | 2 +- .../__semantic-tokens.Dark.generated.js | 2 +- .../__semantic-tokens.Light.generated.js | 2 +- .../_border-radius.generated.scss | 2 +- .../_border-width.generated.scss | 2 +- .../_tokens-generated/_color.generated.scss | 2 +- .../_font-families.generated.scss | 2 +- .../_font-sizes.generated.scss | 2 +- .../_font-weights.generated.scss | 2 +- .../_letter-spacing.generated.scss | 2 +- .../_line-heights.generated.scss | 2 +- .../_pargraph-spacing.generated.scss | 2 +- .../__component-config.generated.js | 2 +- .../component-tokens/slider-legend.css.js | 3 +- .../foundation/component-tokens/slider.css.js | 14 ++ .../src/utils/range-slider-utils.ts | 26 ++- 25 files changed, 333 insertions(+), 125 deletions(-) create mode 100644 packages/ui-library/src/components/range-slider/index.test.ts diff --git a/packages/ui-library/src/components/range-legend-min-max-slider/index.ts b/packages/ui-library/src/components/range-legend-min-max-slider/index.ts index 9876f42a5..b6f2b58a9 100644 --- a/packages/ui-library/src/components/range-legend-min-max-slider/index.ts +++ b/packages/ui-library/src/components/range-legend-min-max-slider/index.ts @@ -6,6 +6,7 @@ import { map } from 'lit/directives/map.js'; import { styleCustom } from './index.css'; import { sliderDark, sliderLight } from '../../foundation/component-tokens/slider-legend.css'; import { FormSizesType, ActionVariantType } from '../../globals/types'; +import { findToolTipPosition, setOnclickValue } from '../../utils/range-slider-utils'; import { BlrIconButtonRenderFunction } from '../icon-button'; import { RenderBtnProps } from '../../globals/types'; @@ -38,13 +39,16 @@ export class BlrRangeLegendMinMaxSlider extends LitElement { @property() theme: ThemeType = 'Light'; + @property({ type: Boolean }) isUpdated? = false; + @state() protected selectedStartIndex = 0; @state() protected selectedEndIndex = 0; protected updated(changedProperties: Map) { - if (changedProperties.has('startValue') || changedProperties.has('endValue')) { + if ((changedProperties.has('selectedStartIndex') || changedProperties.has('selectedEndIndex')) && !this.isUpdated) { this.selectedStartIndex = this.list.indexOf(this.startValue) || 0; this.selectedEndIndex = this.list.indexOf(this.endValue) || 0; + this.isUpdated = true; } } @@ -75,10 +79,9 @@ export class BlrRangeLegendMinMaxSlider extends LitElement { }; const setMinValue = (btnType: string) => { - if (btnType === 'INC' && this.selectedStartIndex < stepsArray.length - 1) { - this.selectedStartIndex = this.selectedStartIndex + this.stepFactor; - } else if (btnType === 'DEC' && this.selectedStartIndex > 0) { - this.selectedStartIndex = this.selectedStartIndex - this.stepFactor; + const modifiedValue = setOnclickValue(this.selectedStartIndex, this.stepFactor, btnType, stepsArray.length); + if (modifiedValue !== undefined) { + this.selectedStartIndex = modifiedValue; } return this.onClickMin?.(this.selectedStartIndex, this.selectedEndIndex); }; @@ -89,10 +92,9 @@ export class BlrRangeLegendMinMaxSlider extends LitElement { }; const setMaxValue = (btnType: string) => { - if (btnType === 'INC' && this.selectedEndIndex < stepsArray.length - 1) { - this.selectedEndIndex = this.selectedEndIndex + this.stepFactor; - } else if (btnType === 'DEC' && this.selectedEndIndex > 0) { - this.selectedEndIndex = this.selectedEndIndex - this.stepFactor; + const modifiedValue = setOnclickValue(this.selectedEndIndex, this.stepFactor, btnType, stepsArray.length); + if (modifiedValue !== undefined) { + this.selectedEndIndex = modifiedValue; } return this.onClickMax?.(this.selectedStartIndex, this.selectedEndIndex); }; @@ -103,10 +105,16 @@ export class BlrRangeLegendMinMaxSlider extends LitElement { [`${this.size || 'md'}`]: this.size || 'md', }); - const toolTipMinQuerySelector = this.shadowRoot?.querySelector(`#pip-${this.selectedStartIndex}`); - const toolTipMinPos = toolTipMinQuerySelector?.getBoundingClientRect().left; - const toolTipMaxQuerySelector = this.shadowRoot?.querySelector(`#pip-${this.selectedEndIndex}`); - const toolTipMaxPos = toolTipMaxQuerySelector?.getBoundingClientRect().left; + const minSliderId = this.rangeInputId ? `${this.rangeInputId}-1` : `rangeInputId-1`; + const maxSliderId = this.rangeInputId ? `${this.rangeInputId}-2` : `rangeInputId-2`; + + const minSlider = this.shadowRoot?.querySelector(`#${minSliderId}`) as HTMLInputElement; + const maxSlider = this.shadowRoot?.querySelector(`#${maxSliderId}`) as HTMLInputElement; + + const toolTipMinPos = + minSlider && findToolTipPosition(minSlider.min, minSlider.max, minSlider.offsetWidth, this.selectedStartIndex); + const toolTipMaxPos = + minSlider && findToolTipPosition(maxSlider.min, maxSlider.max, maxSlider.offsetWidth, this.selectedEndIndex); return html` @@ -128,12 +130,12 @@ export class BlrRangeMinMaxSlider extends LitElement {
${this.renderBtn({ btnId: 'inc_btn_min', - btnEventHandler: () => setMinValue('INC'), + btnEventHandler: () => this.setMinValue('INC'), iconName: this.incrementIcon, })} ${this.renderBtn({ btnId: 'dec_btn_min', - btnEventHandler: () => setMinValue('DEC'), + btnEventHandler: () => this.setMinValue('DEC'), iconName: this.decrementIcon, })}
@@ -147,24 +149,24 @@ export class BlrRangeMinMaxSlider extends LitElement { id=${this.rangeInputId ? `${this.rangeInputId}-1` : `rangeInputId-1`} type="range" min="0" - value=${this.startValueToSlider} + .value=${this.startValueToSlider} max="100" step="${this.stepFactor}" - class="range blr-slider-bar" - @change=${showMinVal} - @input=${showMinVal} + class="range" + @change=${this.showMinVal} + @input=${this.showMinVal} ?disabled=${this.disabled} /> @@ -174,17 +176,18 @@ export class BlrRangeMinMaxSlider extends LitElement {
${this.endValue} ${this.units}
+
${this.showLegend ? html`

${this.maxValue} ${this.units}

` : nothing}
${this.renderBtn({ btnId: 'inc_btn_max', - btnEventHandler: () => setMaxValue('INC'), + btnEventHandler: () => this.setMaxValue('INC'), iconName: this.incrementIcon, })} ${this.renderBtn({ btnId: 'dec_btn_max', - btnEventHandler: () => setMaxValue('DEC'), + btnEventHandler: () => this.setMaxValue('DEC'), iconName: this.decrementIcon, })}
diff --git a/packages/ui-library/src/components/range-slider/index.stories.ts b/packages/ui-library/src/components/range-slider/index.stories.ts index 36c4be5ee..c05717f27 100644 --- a/packages/ui-library/src/components/range-slider/index.stories.ts +++ b/packages/ui-library/src/components/range-slider/index.stories.ts @@ -93,7 +93,7 @@ BlrRangeSlider.args = { onChange: logEventType, rangeInputId: 'range-id', initialValue: 80, - minValue: 75, + minValue: 30, maxValue: 130, units: '$', stepFactor: 1, diff --git a/packages/ui-library/src/components/range-slider/index.test.ts b/packages/ui-library/src/components/range-slider/index.test.ts new file mode 100644 index 000000000..f13da1cfe --- /dev/null +++ b/packages/ui-library/src/components/range-slider/index.test.ts @@ -0,0 +1,149 @@ +import { BlrRangeSliderType, BlrRangeSliderRenderFunction } from './index'; + +import { fixture, expect } from '@open-wc/testing'; +import { querySelectorDeep, querySelectorAllDeep } from 'query-selector-shadow-dom'; + +const sampleParams: BlrRangeSliderType = { + theme: 'Light', + rangeInputId: 'range-id', + initialValue: 80, + minValue: 75, + maxValue: 130, + units: '$', + stepFactor: 1, + size: 'md', + btnVariant: 'silent', + showLegend: true, + disabled: false, + incrementIcon: 'blrPlusMd', + decrementIcon: 'blrMinusMd', + onChange: () => null, +}; + +describe('blr-range-slider', () => { + it('is having a slider containing the right className', async () => { + const element = await fixture(BlrRangeSliderRenderFunction(sampleParams)); + const inputWrapper = querySelectorDeep('.range-wrapper', element.getRootNode() as HTMLElement); + const textarea = querySelectorDeep('input', inputWrapper?.getRootNode() as HTMLElement); + const className = textarea?.className; + + expect(className).to.contain('range'); + }); + + it('is is disabled when attribute disabled is set', async () => { + const element = await fixture( + BlrRangeSliderRenderFunction({ + ...sampleParams, + disabled: true, + }) + ); + + const textarea = querySelectorDeep('input', element.getRootNode() as HTMLElement); + const disabled = textarea?.getAttribute('disabled'); + + // in html disabled will become an empty string when its true + expect(disabled).to.be.equal(''); + }); + + it('is is disabled when attribute disabled is set', async () => { + const element = await fixture( + BlrRangeSliderRenderFunction({ + ...sampleParams, + disabled: false, + }) + ); + + const textarea = querySelectorDeep('input', element.getRootNode() as HTMLElement); + const disabled = textarea?.getAttribute('disabled'); + + // in html disabled will become null when its false + expect(disabled).to.be.equal(null); + }); + + it('is not having a legends', async () => { + const element = await fixture( + BlrRangeSliderRenderFunction({ + ...sampleParams, + showLegend: false, + }) + ); + + const inputWrapper = querySelectorDeep('.input-wrapper', element.getRootNode() as HTMLElement); + const inlineLegendClassElement = querySelectorDeep('.inline-legend', inputWrapper?.getRootNode() as HTMLElement); + + // Check if the

element exists + expect(inlineLegendClassElement).not.exist; + }); + + it('should find all legends with min & max values', async () => { + const element = await fixture( + BlrRangeSliderRenderFunction({ + ...sampleParams, + initialValue: 80, + minValue: 75, + maxValue: 130, + disabled: false, + }) + ); + + const inputWrapper = querySelectorAllDeep('.input-wrapper', element.getRootNode() as HTMLElement); + const expectedLabels = [75, 130]; + + const inlineLegendElements = []; + + for (let i = 0; i < inputWrapper.length; i++) { + const wrapperElement = inputWrapper[i]; + const rootNode = wrapperElement.getRootNode() as HTMLElement; + + const inlineLegendClassElements = querySelectorAllDeep('.inline-legend', rootNode); + + // Push the found .inline-legend elements into the array + inlineLegendElements.push(...inlineLegendClassElements); + } + + // Process the collected inlineLegendElements array + inlineLegendElements.forEach((inlineLegendElement, j) => { + // Assuming that the text content of .inline-legend elements is the expected value + const expectedValue = expectedLabels[j]; + + // Assert that the expected value exists in the text content of the element + expect(inlineLegendElement).to.exist; + expect(inlineLegendElement).to.have.text(`${expectedValue} $`); + }); + }); + + it('should find all buttons for with min & max', async () => { + const element = await fixture( + BlrRangeSliderRenderFunction({ + ...sampleParams, + initialValue: 80, + minValue: 75, + maxValue: 130, + disabled: false, + }) + ); + + const inputWrapper = querySelectorAllDeep('.input-wrapper', element.getRootNode() as HTMLElement); + const expectedLabels = ['dec_btn', 'inc_btn']; + + const inlineButtonElements = []; + + for (let i = 0; i < inputWrapper.length; i++) { + const wrapperElement = inputWrapper[i]; + const rootNode = wrapperElement.getRootNode() as HTMLElement; + + const inlineButtonClassElements = querySelectorAllDeep('.blr-icon-button', rootNode); + + // Push the found .inline-legend elements into the array + inlineButtonElements.push(...inlineButtonClassElements); + } + + // Process the collected inlineLegendElements array + inlineButtonElements.forEach((inlineButtonElement, j) => { + const expectedValue = expectedLabels[j]; + + expect(inlineButtonElement).to.exist; + expect(inlineButtonElement).to.have.attr('aria-label', expectedValue); + }); + }); +}); diff --git a/packages/ui-library/src/components/range-slider/index.ts b/packages/ui-library/src/components/range-slider/index.ts index 740f5d123..ad24ca8ae 100644 --- a/packages/ui-library/src/components/range-slider/index.ts +++ b/packages/ui-library/src/components/range-slider/index.ts @@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { styleCustom } from './index.css'; import { sliderDark, sliderLight } from '../../foundation/component-tokens/slider.css'; import { FormSizesType, ActionVariantType } from '../../globals/types'; -import { findNearestValue, findPercentage, generateRangeBar } from '../../utils/range-slider-utils'; +import { findNearestValue, findPercentage, generateRangeBar, setOnclickValue } from '../../utils/range-slider-utils'; import { BlrIconButtonRenderFunction } from '../icon-button'; import { RenderBtnProps } from '../../globals/types'; @@ -38,11 +38,14 @@ export class BlrRangeSlider extends LitElement { @property() theme: ThemeType = 'Light'; + @property({ type: Boolean }) isUpdated? = false; + @state() protected valueToSlider = 0; protected updated(changedProperties: Map) { - if (changedProperties.has('valueToSlider')) { + if (changedProperties.has('valueToSlider') && !this.isUpdated) { this.valueToSlider = findPercentage(this.minValue, this.maxValue, this.initialValue); + this.isUpdated = true; } } @@ -65,33 +68,34 @@ export class BlrRangeSlider extends LitElement { const generatedStyles = this.theme === 'Light' ? [sliderLight] : [sliderDark]; const dynamicStyles = [...generatedStyles, ...rangeStyle]; + const classes = classMap({ + 'blr-semantic-action': true, + 'blr-slider': true, + [`${this.size || 'md'}`]: this.size || 'md', + }); + const setValue = (btnType: string) => { - if (btnType === 'INC' && this.valueToSlider < 100) { - this.valueToSlider = this.valueToSlider + this.stepFactor; - this.initialValue = findNearestValue(this.minValue, this.maxValue, this.valueToSlider + this.stepFactor); - } else if (btnType === 'DEC' && this.valueToSlider > 0) { - this.valueToSlider = this.valueToSlider - this.stepFactor; - this.initialValue = findNearestValue(this.minValue, this.maxValue, this.valueToSlider - this.stepFactor); + const modifiedValue = setOnclickValue(this.valueToSlider, this.stepFactor, btnType); + if (modifiedValue !== undefined) { + this.valueToSlider = modifiedValue; + this.initialValue = findNearestValue(this.minValue, this.maxValue, modifiedValue); } + return this.onClickMinMax?.(this.initialValue); }; const showVal = (event: Event) => { const value = Number((event.target as HTMLInputElement).value); this.valueToSlider = value; - this.initialValue = findNearestValue(this.minValue, this.maxValue, value); + this.initialValue = findNearestValue(this.minValue, this.maxValue, this.valueToSlider); this.onChange?.(this.initialValue, event); }; - const classes = classMap({ - 'blr-semantic-action': true, - 'blr-slider': true, - [`${this.size || 'md'}`]: this.size || 'md', - }); - const inlineLegendStyles = !this.disabled ? 'inline-legend' : 'inline-legend inline-legend-disabled'; + const barClasses = `range__bar blr-slider-bar ${this.disabled ? `bar-disabled` : ``}`; + return html` @@ -111,10 +115,10 @@ export class BlrRangeSlider extends LitElement { id=${this.rangeInputId || 'rangeInputId'} type="range" min="0" - value=${this.valueToSlider} + .value=${this.valueToSlider} max="100" step="${this.stepFactor}" - class="range blr-slider-bar" + class="range" ?disabled=${this.disabled} @change=${showVal} @input=${showVal} @@ -122,6 +126,7 @@ export class BlrRangeSlider extends LitElement {

${this.initialValue} ${this.units}
+
${this.showLegend ? html`

${this.maxValue} ${this.units}

` diff --git a/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Dark.generated.js b/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Dark.generated.js index 74e7fdf96..1ed3dad81 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Dark.generated.js +++ b/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Dark.generated.js @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:13 GMT + * Generated on Thu, 07 Sep 2023 08:50:01 GMT */ export const componentTokens = { diff --git a/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Light.generated.js b/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Light.generated.js index ed666c1d2..31ec51643 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Light.generated.js +++ b/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.Light.generated.js @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:14 GMT + * Generated on Thu, 07 Sep 2023 08:50:02 GMT */ export const componentTokens = { diff --git a/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Dark.generated.js b/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Dark.generated.js index 1bba2eb5c..4d7e2978c 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Dark.generated.js +++ b/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Dark.generated.js @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:13 GMT + * Generated on Thu, 07 Sep 2023 08:50:01 GMT */ export const semanticTokens = { diff --git a/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Light.generated.js b/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Light.generated.js index 810ca3be8..c78e15877 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Light.generated.js +++ b/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.Light.generated.js @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:14 GMT + * Generated on Thu, 07 Sep 2023 08:50:02 GMT */ export const semanticTokens = { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss index bde5f810a..bb66eed31 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:14 GMT + * Generated on Thu, 07 Sep 2023 08:50:01 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss index ab4d8afa1..2cee01de6 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:14 GMT + * Generated on Thu, 07 Sep 2023 08:50:01 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss index 36c8d3ebc..2e0c49942 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:14 GMT + * Generated on Thu, 07 Sep 2023 08:50:01 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss index 589aa2db0..1f8aff0db 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:14 GMT + * Generated on Thu, 07 Sep 2023 08:50:01 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss index 70f8ebdba..442caee25 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:14 GMT + * Generated on Thu, 07 Sep 2023 08:50:01 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_font-weights.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_font-weights.generated.scss index 22c018f51..837fdb9bd 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_font-weights.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_font-weights.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:14 GMT + * Generated on Thu, 07 Sep 2023 08:50:01 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_letter-spacing.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_letter-spacing.generated.scss index dae1d0706..e7ac05344 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_letter-spacing.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_letter-spacing.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:14 GMT + * Generated on Thu, 07 Sep 2023 08:50:01 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_line-heights.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_line-heights.generated.scss index 6612a1ab0..4df404700 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_line-heights.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_line-heights.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:14 GMT + * Generated on Thu, 07 Sep 2023 08:50:01 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_pargraph-spacing.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_pargraph-spacing.generated.scss index 81767ae31..cdeb991af 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_pargraph-spacing.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_pargraph-spacing.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:14 GMT + * Generated on Thu, 07 Sep 2023 08:50:01 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/config-tokens/__component-config.generated.js b/packages/ui-library/src/foundation/_tokens-generated/config-tokens/__component-config.generated.js index 3340f9067..dd0cbd14c 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/config-tokens/__component-config.generated.js +++ b/packages/ui-library/src/foundation/_tokens-generated/config-tokens/__component-config.generated.js @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 07 Sep 2023 08:23:14 GMT + * Generated on Thu, 07 Sep 2023 08:50:02 GMT */ export const componentConfig = { diff --git a/packages/ui-library/src/foundation/component-tokens/slider-legend.css.js b/packages/ui-library/src/foundation/component-tokens/slider-legend.css.js index f742ccf01..137424bda 100644 --- a/packages/ui-library/src/foundation/component-tokens/slider-legend.css.js +++ b/packages/ui-library/src/foundation/component-tokens/slider-legend.css.js @@ -29,6 +29,7 @@ export const { tokenizedLight: sliderLight, tokenizedDark: sliderDark } = render & > .range-wrapper { position: relative; width: 100%; + z-index: 20; } } } @@ -56,7 +57,7 @@ export const { tokenizedLight: sliderLight, tokenizedDark: sliderDark } = render outline: none; border-radius: 5px; margin: 10px 0; - background-color: ${Forms.Slider.Track.Stroke.Inactive.Default}; + background-color: transparent; &::-webkit-slider-thumb { -webkit-appearance: none; diff --git a/packages/ui-library/src/foundation/component-tokens/slider.css.js b/packages/ui-library/src/foundation/component-tokens/slider.css.js index b75dae6c8..2e0a8e460 100644 --- a/packages/ui-library/src/foundation/component-tokens/slider.css.js +++ b/packages/ui-library/src/foundation/component-tokens/slider.css.js @@ -31,6 +31,7 @@ export const { tokenizedLight: sliderLight, tokenizedDark: sliderDark } = render appearance: none; outline: none; border-radius: 5px; + background-color: transparent; &::-webkit-slider-thumb { -webkit-appearance: none; @@ -154,6 +155,19 @@ export const { tokenizedLight: sliderLight, tokenizedDark: sliderDark } = render color: ${Forms.Slider.Legend.Color.Disabled}; } } + + .range__bar { + width: 100%; + height: 5px; + position: absolute; + top: 2px; + border-radius: 5px; + } + @-moz-document url-prefix("") { + input[type="range"] { + z-index: 10; /* Apply z-index property only in Firefox */ + } + } } `; }); diff --git a/packages/ui-library/src/utils/range-slider-utils.ts b/packages/ui-library/src/utils/range-slider-utils.ts index 620b2cd45..9ceedd7d9 100644 --- a/packages/ui-library/src/utils/range-slider-utils.ts +++ b/packages/ui-library/src/utils/range-slider-utils.ts @@ -2,6 +2,20 @@ import { css } from 'nested-css-to-flat/lit-css'; import { renderThemedCssStrings } from '../foundation/_tokens-generated/index.pseudo.generated'; import { ThemeType } from '../foundation/_tokens-generated/index.themes'; +export const findToolTipPosition = (minVal: string, maxVal: string, offsetWidthVal: number, value: number) => { + const min = parseFloat(minVal); + const max = parseFloat(maxVal); + const width = offsetWidthVal; + + // Calculate the percentage value + const percentage = ((value - min) / (max - min)) * 100; + + // Calculate the tooltip position based on the percentage and width + const tooltipPosition = (percentage / 100) * width - 10; + + return `${tooltipPosition.toString()}px`; +}; + export const findNearestValue = (min: number, max: number, givenValue: number) => { const percentage = givenValue / 100; const range = max - min; @@ -38,7 +52,7 @@ export const generateRangeBar = ( const generateGradient = twoKonbs ? `linear-gradient( to right, - ${muteColor} ${startValueToSlider}%, + ${muteColor} ${startValueToSlider + 1}%, ${defaultColor} ${startValueToSlider}%, ${defaultColor} ${endValueToSlider}%, ${muteColor} ${endValueToSlider}% @@ -60,3 +74,13 @@ export const generateRangeBar = ( return theme === 'Light' ? [tokenizedLight] : [tokenizedDark]; }; + +export const setOnclickValue = (value: number, stepperNumber: number, btnType: string, arrLength?: number) => { + const incConditionValue = arrLength !== undefined ? arrLength - 1 : 100; + + if (btnType === 'INC' && value < incConditionValue) { + return value + stepperNumber; + } else if (btnType === 'DEC' && value > 0) { + return value - stepperNumber; + } +};