diff --git a/.changeset/five-rockets-join.md b/.changeset/five-rockets-join.md new file mode 100644 index 0000000000..f0b9b608ef --- /dev/null +++ b/.changeset/five-rockets-join.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/ui": patch +--- + +`Slider`: Add prop `labelDescription` diff --git a/packages/ui/src/components/Slider/__tests__/__snapshots__/doubleSlider.test.tsx.snap b/packages/ui/src/components/Slider/__tests__/__snapshots__/doubleSlider.test.tsx.snap index 8192c85c37..e449d445f6 100644 --- a/packages/ui/src/components/Slider/__tests__/__snapshots__/doubleSlider.test.tsx.snap +++ b/packages/ui/src/components/Slider/__tests__/__snapshots__/doubleSlider.test.tsx.snap @@ -53,7 +53,7 @@ exports[`double slider > handles correctly onChange custom scale double 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="slider-left" - id="_r_4j_" + id="_r_4k_" max="3" min="0" name="slider" @@ -67,7 +67,7 @@ exports[`double slider > handles correctly onChange custom scale double 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="slider-right" - id="_r_4j_" + id="_r_4k_" max="3" min="0" name="slider" @@ -182,7 +182,7 @@ exports[`double slider > handles correctly onChange double 1`] = ` aria-label="input-left" class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g" data-testid="slider-input-left" - id="_r_44_" + id="_r_45_" max="100" min="0" placeholder="" @@ -215,7 +215,7 @@ exports[`double slider > handles correctly onChange double 1`] = ` aria-label="input-right" class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g" data-testid="slider-input-right" - id="_r_46_" + id="_r_47_" max="100" min="0" placeholder="" @@ -246,7 +246,7 @@ exports[`double slider > handles correctly onChange double 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="slider-left" - id="_r_43_" + id="_r_44_" max="100" min="0" name="slider" @@ -260,7 +260,7 @@ exports[`double slider > handles correctly onChange double 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="slider-right" - id="_r_43_" + id="_r_44_" max="100" min="0" name="slider" @@ -318,7 +318,7 @@ exports[`double slider > handles correctly onChange with min and max double 1`] aria-label="input-left" class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g" data-testid="slider-input-left" - id="_r_4c_" + id="_r_4d_" max="10" min="2" placeholder="" @@ -351,7 +351,7 @@ exports[`double slider > handles correctly onChange with min and max double 1`] aria-label="input-right" class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g" data-testid="slider-input-right" - id="_r_4e_" + id="_r_4f_" max="10" min="2" placeholder="" @@ -382,7 +382,7 @@ exports[`double slider > handles correctly onChange with min and max double 1`] class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="slider-left" - id="_r_4b_" + id="_r_4c_" max="10" min="2" name="slider" @@ -396,7 +396,7 @@ exports[`double slider > handles correctly onChange with min and max double 1`] class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="slider-right" - id="_r_4b_" + id="_r_4c_" max="10" min="2" name="slider" @@ -429,12 +429,21 @@ exports[`double slider > renders correctly direction row double 1`] = `
- + + + labeldescription + +
renders correctly direction row double with input 1`] = > @@ -551,7 +560,7 @@ exports[`double slider > renders correctly direction row double with input 1`] = aria-label="input-left" class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g" data-testid="slider-input-left" - id="_r_u_" + id="_r_v_" max="100" min="0" placeholder="" @@ -581,7 +590,7 @@ exports[`double slider > renders correctly direction row double with input 1`] = class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="row" data-testid="handle-left" - id="_r_s_" + id="_r_t_" max="100" min="0" name="Name" @@ -595,7 +604,7 @@ exports[`double slider > renders correctly direction row double with input 1`] = class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="row" data-testid="handle-right" - id="_r_s_" + id="_r_t_" max="100" min="0" name="Name" @@ -626,7 +635,7 @@ exports[`double slider > renders correctly direction row double with input 1`] = aria-label="input-right" class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g" data-testid="slider-input-right" - id="_r_13_" + id="_r_14_" max="100" min="0" placeholder="" @@ -663,7 +672,7 @@ exports[`double slider > renders correctly double 1`] = ` > @@ -708,7 +717,7 @@ exports[`double slider > renders correctly double 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-left" - id="_r_15_" + id="_r_16_" max="100" min="0" name="Name" @@ -722,7 +731,7 @@ exports[`double slider > renders correctly double 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-right" - id="_r_15_" + id="_r_16_" max="100" min="0" name="Name" @@ -757,7 +766,7 @@ exports[`double slider > renders correctly double custom tooltip 1`] = ` > @@ -798,8 +807,8 @@ exports[`double slider > renders correctly double custom tooltip 1`] = ` />
@@ -808,7 +817,7 @@ exports[`double slider > renders correctly double custom tooltip 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles_hasTooltip_true__a5ifr1o styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e" data-direction="column" data-testid="handle-left" - id="_r_23_" + id="_r_24_" max="100" min="0" name="Name" @@ -819,8 +828,8 @@ exports[`double slider > renders correctly double custom tooltip 1`] = ` />
@@ -829,7 +838,7 @@ exports[`double slider > renders correctly double custom tooltip 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles_hasTooltip_true__a5ifr1o styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e" data-direction="column" data-testid="handle-right" - id="_r_23_" + id="_r_24_" max="100" min="0" name="Name" @@ -865,7 +874,7 @@ exports[`double slider > renders correctly double default toolipt 1`] = ` > @@ -906,8 +915,8 @@ exports[`double slider > renders correctly double default toolipt 1`] = ` />
@@ -916,7 +925,7 @@ exports[`double slider > renders correctly double default toolipt 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles_hasTooltip_true__a5ifr1o styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e" data-direction="column" data-testid="handle-left" - id="_r_2a_" + id="_r_2b_" max="100" min="0" name="Name" @@ -927,8 +936,8 @@ exports[`double slider > renders correctly double default toolipt 1`] = ` />
@@ -937,7 +946,7 @@ exports[`double slider > renders correctly double default toolipt 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles_hasTooltip_true__a5ifr1o styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e" data-direction="column" data-testid="handle-right" - id="_r_2a_" + id="_r_2b_" max="100" min="0" name="Name" @@ -973,7 +982,7 @@ exports[`double slider > renders correctly double disabled 1`] = ` > @@ -1019,7 +1028,7 @@ exports[`double slider > renders correctly double disabled 1`] = ` data-direction="column" data-testid="handle-left" disabled="" - id="_r_1j_" + id="_r_1k_" max="100" min="0" name="Name" @@ -1034,7 +1043,7 @@ exports[`double slider > renders correctly double disabled 1`] = ` data-direction="column" data-testid="handle-right" disabled="" - id="_r_1j_" + id="_r_1k_" max="100" min="0" name="Name" @@ -1069,7 +1078,7 @@ exports[`double slider > renders correctly double input 1`] = ` > @@ -1102,7 +1111,7 @@ exports[`double slider > renders correctly double input 1`] = ` aria-label="input-left" class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g" data-testid="slider-input-left" - id="_r_1s_" + id="_r_1t_" max="100" min="0" placeholder="" @@ -1135,7 +1144,7 @@ exports[`double slider > renders correctly double input 1`] = ` aria-label="input-right" class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g" data-testid="slider-input-right" - id="_r_1u_" + id="_r_1v_" max="100" min="0" placeholder="" @@ -1166,7 +1175,7 @@ exports[`double slider > renders correctly double input 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-left" - id="_r_1q_" + id="_r_1r_" max="100" min="0" name="Name" @@ -1180,7 +1189,7 @@ exports[`double slider > renders correctly double input 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-right" - id="_r_1q_" + id="_r_1r_" max="100" min="0" name="Name" @@ -1215,7 +1224,7 @@ exports[`double slider > renders correctly double min max 1`] = ` > @@ -1260,7 +1269,7 @@ exports[`double slider > renders correctly double min max 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-left" - id="_r_3l_" + id="_r_3m_" max="10" min="1" name="Name" @@ -1274,7 +1283,7 @@ exports[`double slider > renders correctly double min max 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-right" - id="_r_3l_" + id="_r_3m_" max="10" min="1" name="Name" @@ -1309,7 +1318,7 @@ exports[`double slider > renders correctly double step 1`] = ` > @@ -1354,7 +1363,7 @@ exports[`double slider > renders correctly double step 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-left" - id="_r_3s_" + id="_r_3t_" max="100" min="0" name="Name" @@ -1368,7 +1377,7 @@ exports[`double slider > renders correctly double step 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-right" - id="_r_3s_" + id="_r_3t_" max="100" min="0" name="Name" @@ -1403,7 +1412,7 @@ exports[`double slider > renders correctly double with custom scale 1`] = ` > @@ -1448,7 +1457,7 @@ exports[`double slider > renders correctly double with custom scale 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-left" - id="_r_3a_" + id="_r_3b_" max="3" min="0" name="Name" @@ -1462,7 +1471,7 @@ exports[`double slider > renders correctly double with custom scale 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-right" - id="_r_3a_" + id="_r_3b_" max="3" min="0" name="Name" @@ -1554,7 +1563,7 @@ exports[`double slider > renders correctly double with custom ticks 1`] = ` > @@ -1599,7 +1608,7 @@ exports[`double slider > renders correctly double with custom ticks 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-left" - id="_r_2v_" + id="_r_30_" max="3" min="0" name="Name" @@ -1613,7 +1622,7 @@ exports[`double slider > renders correctly double with custom ticks 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-right" - id="_r_2v_" + id="_r_30_" max="3" min="0" name="Name" @@ -1705,7 +1714,7 @@ exports[`double slider > renders correctly double with default ticks 1`] = ` > @@ -1750,7 +1759,7 @@ exports[`double slider > renders correctly double with default ticks 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-left" - id="_r_2o_" + id="_r_2p_" max="100" min="0" name="Name" @@ -1764,7 +1773,7 @@ exports[`double slider > renders correctly double with default ticks 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-right" - id="_r_2o_" + id="_r_2p_" max="100" min="0" name="Name" @@ -1799,7 +1808,7 @@ exports[`double slider > renders correctly double with single tooltip 1`] = ` > @@ -1830,8 +1839,8 @@ exports[`double slider > renders correctly double with single tooltip 1`] = ` class="styles__a5ifr1v" >
@@ -1850,7 +1859,7 @@ exports[`double slider > renders correctly double with single tooltip 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles_hasTooltip_true__a5ifr1o styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e" data-direction="column" data-testid="handle-left" - id="_r_2h_" + id="_r_2i_" max="100" min="0" name="Name" @@ -1864,7 +1873,7 @@ exports[`double slider > renders correctly double with single tooltip 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles_hasTooltip_true__a5ifr1o styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e" data-direction="column" data-testid="handle-right" - id="_r_2h_" + id="_r_2i_" max="100" min="0" name="Name" @@ -1900,7 +1909,7 @@ exports[`double slider > renders correctly double with value outside of min-max > @@ -1945,7 +1954,7 @@ exports[`double slider > renders correctly double with value outside of min-max class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="slider-left" - id="_r_1c_" + id="_r_1d_" max="50" min="10" name="Name" @@ -1959,7 +1968,7 @@ exports[`double slider > renders correctly double with value outside of min-max class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="slider-right" - id="_r_1c_" + id="_r_1d_" max="50" min="10" name="Name" @@ -1994,7 +2003,7 @@ exports[`double slider > renders correctly with value empty 1`] = ` > @@ -2039,7 +2048,7 @@ exports[`double slider > renders correctly with value empty 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-left" - id="_r_7_" + id="_r_8_" max="100" min="0" name="Name" @@ -2053,7 +2062,7 @@ exports[`double slider > renders correctly with value empty 1`] = ` class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-right" - id="_r_7_" + id="_r_8_" max="100" min="0" name="Name" @@ -2088,7 +2097,7 @@ exports[`double slider > renders correctly with value empty array and no min max > @@ -2133,7 +2142,7 @@ exports[`double slider > renders correctly with value empty array and no min max class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-left" - id="_r_e_" + id="_r_f_" max="100" min="0" name="Name" @@ -2147,7 +2156,7 @@ exports[`double slider > renders correctly with value empty array and no min max class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-right" - id="_r_e_" + id="_r_f_" max="100" min="0" name="Name" @@ -2182,7 +2191,7 @@ exports[`double slider > renders correctly with value empty array with min max 1 > @@ -2227,7 +2236,7 @@ exports[`double slider > renders correctly with value empty array with min max 1 class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-left" - id="_r_l_" + id="_r_m_" max="10" min="0" name="Name" @@ -2241,7 +2250,7 @@ exports[`double slider > renders correctly with value empty array with min max 1 class="styles__a5ifr1l styles_disabled_false__a5ifr1n styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_true__a5ifr1e styles_hasTooltipDouble_false__a5ifr1g" data-direction="column" data-testid="handle-right" - id="_r_l_" + id="_r_m_" max="10" min="0" name="Name" diff --git a/packages/ui/src/components/Slider/__tests__/__snapshots__/singleSlider.test.tsx.snap b/packages/ui/src/components/Slider/__tests__/__snapshots__/singleSlider.test.tsx.snap index 1b73591351..a5e5852d9d 100644 --- a/packages/ui/src/components/Slider/__tests__/__snapshots__/singleSlider.test.tsx.snap +++ b/packages/ui/src/components/Slider/__tests__/__snapshots__/singleSlider.test.tsx.snap @@ -36,7 +36,7 @@ exports[`single slider > handles correctly onChange with min and max 1`] = ` aria-label="input" class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g" data-testid="slider-input" - id="_r_37_" + id="_r_38_" max="10" min="2" placeholder="" @@ -59,7 +59,7 @@ exports[`single slider > handles correctly onChange with min and max 1`] = ` data-direction="column" data-error="false" data-testid="slider" - id="_r_36_" + id="_r_37_" max="10" min="2" name="slider" @@ -109,7 +109,7 @@ exports[`single slider > handles correctly with custom scale 1`] = ` data-direction="column" data-error="false" data-testid="slider" - id="_r_3a_" + id="_r_3b_" max="3" min="0" name="slider" @@ -198,12 +198,21 @@ exports[`single slider > renders correctly 1`] = `
- + + + labeldescription + +
renders correctly custom tooltip 1`] = ` > @@ -283,8 +292,8 @@ exports[`single slider > renders correctly custom tooltip 1`] = ` style="--_4k0ekn0: 100%;" >
@@ -293,7 +302,7 @@ exports[`single slider > renders correctly custom tooltip 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_2a_" + id="_r_2b_" max="100" min="0" name="Name" @@ -328,7 +337,7 @@ exports[`single slider > renders correctly default tooltip 1`] = ` > @@ -348,8 +357,8 @@ exports[`single slider > renders correctly default tooltip 1`] = ` style="--_4k0ekn0: 100%;" >
@@ -358,7 +367,7 @@ exports[`single slider > renders correctly default tooltip 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_2e_" + id="_r_2f_" max="100" min="0" name="Name" @@ -393,7 +402,7 @@ exports[`single slider > renders correctly direction row 1`] = ` > @@ -410,7 +419,7 @@ exports[`single slider > renders correctly direction row 1`] = ` class="styles__a5ifr1p styles_direction_row__a5ifr1u styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="row" data-error="false" - id="_r_s_" + id="_r_t_" max="100" min="0" name="Name" @@ -451,7 +460,7 @@ exports[`single slider > renders correctly direction row with input 1`] = ` > @@ -468,7 +477,7 @@ exports[`single slider > renders correctly direction row with input 1`] = ` class="styles__a5ifr1p styles_direction_row__a5ifr1u styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="row" data-error="false" - id="_r_10_" + id="_r_11_" max="100" min="0" name="Name" @@ -500,7 +509,7 @@ exports[`single slider > renders correctly direction row with input 1`] = ` aria-label="input" class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g" data-testid="slider-input" - id="_r_13_" + id="_r_14_" max="100" min="0" placeholder="" @@ -535,7 +544,7 @@ exports[`single slider > renders correctly disabled 1`] = ` > @@ -561,7 +570,7 @@ exports[`single slider > renders correctly disabled 1`] = ` data-direction="column" data-error="false" disabled="" - id="_r_1d_" + id="_r_1e_" max="100" min="0" name="Name" @@ -595,7 +604,7 @@ exports[`single slider > renders correctly error boolean 1`] = ` > @@ -619,7 +628,7 @@ exports[`single slider > renders correctly error boolean 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles_error_true__a5ifr1s styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="true" - id="_r_1h_" + id="_r_1i_" max="100" min="0" name="Name" @@ -658,7 +667,7 @@ exports[`single slider > renders correctly error boolean and helper 1`] = ` > @@ -682,7 +691,7 @@ exports[`single slider > renders correctly error boolean and helper 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles_error_true__a5ifr1s styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="true" - id="_r_1m_" + id="_r_1n_" max="100" min="0" name="Name" @@ -721,7 +730,7 @@ exports[`single slider > renders correctly error string 1`] = ` > @@ -745,7 +754,7 @@ exports[`single slider > renders correctly error string 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles_error_true__a5ifr1s styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="true" - id="_r_1r_" + id="_r_1s_" max="100" min="0" name="Name" @@ -784,7 +793,7 @@ exports[`single slider > renders correctly error string and helper 1`] = ` > @@ -808,7 +817,7 @@ exports[`single slider > renders correctly error string and helper 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles_error_true__a5ifr1s styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="true" - id="_r_20_" + id="_r_21_" max="100" min="0" name="Name" @@ -847,7 +856,7 @@ exports[`single slider > renders correctly input 1`] = ` > @@ -872,7 +881,7 @@ exports[`single slider > renders correctly input 1`] = ` aria-label="input" class="styles__1ce7gb6b styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g" data-testid="slider-input" - id="_r_27_" + id="_r_28_" max="100" min="0" placeholder="" @@ -897,7 +906,7 @@ exports[`single slider > renders correctly input 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_25_" + id="_r_26_" max="100" min="0" name="Name" @@ -931,7 +940,7 @@ exports[`single slider > renders correctly min max 1`] = ` > @@ -955,7 +964,7 @@ exports[`single slider > renders correctly min max 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_2u_" + id="_r_2v_" max="10" min="1" name="Name" @@ -989,7 +998,7 @@ exports[`single slider > renders correctly prefix 1`] = ` > @@ -1013,7 +1022,7 @@ exports[`single slider > renders correctly prefix 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_o_" + id="_r_p_" max="100" min="0" name="Name" @@ -1050,7 +1059,7 @@ exports[`single slider > renders correctly required 1`] = ` > @@ -1080,7 +1089,7 @@ exports[`single slider > renders correctly required 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_5_" + id="_r_6_" max="100" min="0" name="Name" @@ -1114,7 +1123,7 @@ exports[`single slider > renders correctly step 1`] = ` > @@ -1138,7 +1147,7 @@ exports[`single slider > renders correctly step 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_32_" + id="_r_33_" max="100" min="0" name="Name" @@ -1172,7 +1181,7 @@ exports[`single slider > renders correctly suffix complex 1`] = ` > @@ -1201,7 +1210,7 @@ exports[`single slider > renders correctly suffix complex 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_e_" + id="_r_f_" max="100" min="0" name="Name" @@ -1235,7 +1244,7 @@ exports[`single slider > renders correctly suffix string 1`] = ` > @@ -1259,7 +1268,7 @@ exports[`single slider > renders correctly suffix string 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_a_" + id="_r_b_" max="100" min="0" name="Name" @@ -1293,7 +1302,7 @@ exports[`single slider > renders correctly suffix string input 1`] = ` > @@ -1318,7 +1327,7 @@ exports[`single slider > renders correctly suffix string input 1`] = ` aria-label="input" class="styles__1ce7gb6b styles_hasUnit_true__1ce7gb6c styles_size_small__1ce7gb6d styles_controls_false__1ce7gb6g" data-testid="slider-input" - id="_r_k_" + id="_r_l_" max="100" min="0" placeholder="" @@ -1348,7 +1357,7 @@ exports[`single slider > renders correctly suffix string input 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_i_" + id="_r_j_" max="100" min="0" name="Name" @@ -1382,7 +1391,7 @@ exports[`single slider > renders correctly with custom ticks 1`] = ` > @@ -1406,7 +1415,7 @@ exports[`single slider > renders correctly with custom ticks 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_2i_" + id="_r_2j_" max="1" min="0" name="Name" @@ -1471,7 +1480,7 @@ exports[`single slider > renders correctly with default ticks without label 1`] > @@ -1495,7 +1504,7 @@ exports[`single slider > renders correctly with default ticks without label 1`] class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_2o_" + id="_r_2p_" max="1" min="0" name="Name" @@ -1560,7 +1569,7 @@ exports[`single slider > renders correctly with value < min 1`] = ` > @@ -1584,7 +1593,7 @@ exports[`single slider > renders correctly with value < min 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_15_" + id="_r_16_" max="100" min="10" name="Name" @@ -1618,7 +1627,7 @@ exports[`single slider > renders correctly with value > max 1`] = ` > @@ -1642,7 +1651,7 @@ exports[`single slider > renders correctly with value > max 1`] = ` class="styles__a5ifr1p styles_direction_column__a5ifr1t styles__a5ifr1b styles_disabled_false__a5ifr1d styles_isDouble_false__a5ifr1f" data-direction="column" data-error="false" - id="_r_19_" + id="_r_1a_" max="10" min="0" name="Name" diff --git a/packages/ui/src/components/Slider/__tests__/doubleSlider.test.tsx b/packages/ui/src/components/Slider/__tests__/doubleSlider.test.tsx index 7033bdc04c..d80491bec2 100644 --- a/packages/ui/src/components/Slider/__tests__/doubleSlider.test.tsx +++ b/packages/ui/src/components/Slider/__tests__/doubleSlider.test.tsx @@ -29,6 +29,7 @@ describe('double slider', () => { direction="row" double label="Label" + labelDescription="labeldescription" name="Name" value={[1, 14]} />, diff --git a/packages/ui/src/components/Slider/__tests__/singleSlider.test.tsx b/packages/ui/src/components/Slider/__tests__/singleSlider.test.tsx index 23ea4624ff..0679426971 100644 --- a/packages/ui/src/components/Slider/__tests__/singleSlider.test.tsx +++ b/packages/ui/src/components/Slider/__tests__/singleSlider.test.tsx @@ -25,7 +25,13 @@ describe('single slider', () => { test('renders correctly', () => { shouldMatchSnapshot( - , + , ) }) diff --git a/packages/ui/src/components/Slider/components/DoubleSlider.tsx b/packages/ui/src/components/Slider/components/DoubleSlider.tsx index 9fc0781e01..b2326b740d 100644 --- a/packages/ui/src/components/Slider/components/DoubleSlider.tsx +++ b/packages/ui/src/components/Slider/components/DoubleSlider.tsx @@ -49,6 +49,7 @@ export const DoubleSlider = ({ required, tooltipPosition, 'aria-label': ariaLabel, + labelDescription, }: DoubleSliderProps) => { const theme = useTheme() const localId = useId() @@ -274,7 +275,11 @@ export const DoubleSlider = ({ {label ? ( - diff --git a/packages/ui/src/components/Slider/components/SingleSlider.tsx b/packages/ui/src/components/Slider/components/SingleSlider.tsx index 05912f5c77..2e7f05d550 100644 --- a/packages/ui/src/components/Slider/components/SingleSlider.tsx +++ b/packages/ui/src/components/Slider/components/SingleSlider.tsx @@ -45,6 +45,7 @@ export const SingleSlider = ({ prefix, suffix, required, + labelDescription, 'aria-label': ariaLabel, tooltipPosition, }: SingleSliderProps) => { @@ -193,7 +194,11 @@ export const SingleSlider = ({ direction="row" justifyContent="space-between" > -