📱 Slider: added touch support #3144
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
w1nklr
referenced
this pull request
in equinor/webviz-subsurface-components
Feb 13, 2024
…ore-react from 0.33.0 to 0.36.0 in /typescript (#1892) Bumps [@equinor/eds-icons](https://github.com/equinor/design-system/tree/HEAD/packages/eds-icons) from 0.19.3 to 0.21.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/equinor/design-system/releases"><code>@equinor/eds-icons</code>'s releases</a>.</em></p> <blockquote> <h2>[email protected]</h2> <h2>[0.21.0] - 2022-09-08</h2> <h3>Fixed</h3> <ul> <li>💄 Fixes to make sure both <code>style</code> and <code>className</code> are applied to outermost element (changes to <code>switch</code>, <code>NativeSelect</code>, <code>Radio</code>, <code>Checkbox</code>, <code>Search</code>, <code>Autocomplete</code>) by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2367">equinor/design-system#2367</a></li> <li>🐛 Popover: changed to <code>overflow: auto</code> by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2431">equinor/design-system#2431</a></li> </ul> <h3>Added</h3> <ul> <li>✨ <code>Autocomplete</code>: Added disable clear button prop (<code>hideClearButton</code>) by <a href="https://github.com/Simrayz"><code>@Simrayz</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2378">equinor/design-system#2378</a></li> <li>✨ Added <code>width</code> prop to <code>SideSheet</code> by <a href="https://github.com/martalalik"><code>@martalalik</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2399">equinor/design-system#2399</a></li> <li>✨ <code>Button</code> is now a proper overridable component (can be rendered as another component/element-type with the <code>as</code> prop and typescript will only allow valid props for that component) by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2410">equinor/design-system#2410</a></li> <li>✨ Make <code>Typography</code> an overridable component by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2432">equinor/design-system#2432</a></li> <li>✨ Make <code>Breadcrumb</code> an overridable component by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2442">equinor/design-system#2442</a></li> <li>✨ Created <code>Button.Group</code> wrapper component by <a href="https://github.com/martalalik"><code>@martalalik</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2420">equinor/design-system#2420</a></li> </ul> <h3>Changed</h3> <ul> <li>♻️ Replaced <code>popperjs</code> with <code>floating-UI</code> in <code>Tooltip</code> by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2377">equinor/design-system#2377</a></li> <li>♻️ Replaced <code>popperjs</code> with <code>floating-UI</code> in <code>Popover</code> by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2384">equinor/design-system#2384</a></li> <li>♻️ Replaced <code>popperjs</code> with <code>floating-UI</code> in <code>Menu</code> by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2405">equinor/design-system#2405</a></li> <li>♻️ Replaced <code>popperjs</code> with <code>floating-UI</code> in <code>Autocomplete</code> by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2460">equinor/design-system#2460</a></li> <li>📝 Updated <code>Typography</code> documentation in storybook by <a href="https://github.com/martalalik"><code>@martalalik</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2247">equinor/design-system#2247</a></li> <li>🗑️ <code>Card</code>: removed logic to style cursor based on <code>onClick</code> listener being present by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2436">equinor/design-system#2436</a></li> <li>💄 <code>Topbar</code>: inline padding reduced from 40 to 24px by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2451">equinor/design-system#2451</a></li> </ul> <h2>[email protected]</h2> <h2>[0.21.0] - 2024-01-26</h2> <h3>Added</h3> <ul> <li><code>jacket</code></li> <li><code>monopile</code></li> </ul> <h2>[email protected]</h2> <h2>[0.20.4] - 2022-06-24</h2> <h3>Added</h3> <ul> <li>📝 App launcher documentation by <a href="https://github.com/martalalik"><code>@martalalik</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2303">equinor/design-system#2303</a></li> </ul> <h3>Fixed</h3> <ul> <li>🐛 Using <code>Icon</code> <code>data</code> should work properly if <code>size</code> is not defined by <a href="https://github.com/mimarz"><code>@mimarz</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2327">equinor/design-system#2327</a></li> <li>🐛 Fixed <code>TextField</code> <code>style</code> prop being sent container and inner input by <a href="https://github.com/mimarz"><code>@mimarz</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2337">equinor/design-system#2337</a></li> <li>🐛 Fixed <code>Autocomplete</code> <code>onOptionsChange</code> when not controlled & cleaned up react hooks form example by <a href="https://github.com/mimarz"><code>@mimarz</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2335">equinor/design-system#2335</a></li> </ul> <h2>[email protected]</h2> <h3>Added</h3> <ul> <li>✨ Elevation options to Card/Banner/TopBar by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/2313">equinor/design-system#2313</a></li> </ul> <!-- raw HTML omitted --> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/equinor/design-system/blob/develop/packages/eds-icons/CHANGELOG.md"><code>@equinor/eds-icons</code>'s changelog</a>.</em></p> <blockquote> <h2>[0.21.0] - 2024-01-26</h2> <h3>Added</h3> <ul> <li><code>jacket</code></li> <li><code>monopile</code></li> </ul> <h2>[0.20.0] - 2023-12-13</h2> <h3>Changed</h3> <ul> <li><code>IconData</code> type: <code>svgPathData</code> changed to <code>string | Array<string></code> to allow multiple paths in the eds-core-react <code>Icon</code> component by <a href="https://github.com/oddvernes"><code>@oddvernes</code></a> in <a href="https://redirect.github.com/equinor/design-system/pull/3177">equinor/design-system#3177</a></li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/equinor/design-system/commit/164370b4ff174a9df2fd904d4b97cb141b79ad37"><code>164370b</code></a> 🔖 Release [email protected] (<a href="https://github.com/equinor/design-system/tree/HEAD/packages/eds-icons/issues/3239">#3239</a>)</li> <li><a href="https://github.com/equinor/design-system/commit/39f4dcbea6201bfdf64b595994314898730ffdf3"><code>39f4dcb</code></a> 🔧 Update babel settings (<a href="https://github.com/equinor/design-system/tree/HEAD/packages/eds-icons/issues/3219">#3219</a>)</li> <li><a href="https://github.com/equinor/design-system/commit/cdffccf1e9aa8dcd64b9c1aea278495d961e0caf"><code>cdffccf</code></a> 🔖Release [email protected], [email protected], [email protected] (...</li> <li><a href="https://github.com/equinor/design-system/commit/c517a39269df85088501a6d0b9c3ce3dc2567e16"><code>c517a39</code></a> ✨ Icon: add support for multiple paths (<a href="https://github.com/equinor/design-system/tree/HEAD/packages/eds-icons/issues/3177">#3177</a>)</li> <li><a href="https://github.com/equinor/design-system/commit/75dd50b8bb19527d1d39cbe3772ec25a5a678bc7"><code>75dd50b</code></a> ⬆️ Update rollup to 4.2.0 (<a href="https://github.com/equinor/design-system/tree/HEAD/packages/eds-icons/issues/3137">#3137</a>)</li> <li><a href="https://github.com/equinor/design-system/commit/365231d718224cb3661df4a54c87647e6d16af4e"><code>365231d</code></a> ⬆️ Rollup v4.x (<a href="https://github.com/equinor/design-system/tree/HEAD/packages/eds-icons/issues/3132">#3132</a>)</li> <li><a href="https://github.com/equinor/design-system/commit/83b09db2c1e0b33922644a00e33a9c0e5fd0c8d6"><code>83b09db</code></a> ⬆️ October dependency updates (<a href="https://github.com/equinor/design-system/tree/HEAD/packages/eds-icons/issues/3121">#3121</a>)</li> <li><a href="https://github.com/equinor/design-system/commit/3f089e40db0ebe9e3401168e881a045484836bba"><code>3f089e4</code></a> ⬆️ Update typescript to 5.1.6 (<a href="https://github.com/equinor/design-system/tree/HEAD/packages/eds-icons/issues/3020">#3020</a>)</li> <li><a href="https://github.com/equinor/design-system/commit/6ffd1a3060f74e1c98d4886cb16b40bd3aab5445"><code>6ffd1a3</code></a> ⬆️ Update eslint & eslint plugins (<a href="https://github.com/equinor/design-system/tree/HEAD/packages/eds-icons/issues/3019">#3019</a>)</li> <li>See full diff in <a href="https://github.com/equinor/design-system/commits/[email protected]/packages/eds-icons">compare view</a></li> </ul> </details> <br /> Bumps [@equinor/eds-core-react](https://github.com/equinor/design-system/tree/HEAD/packages/eds-icons) from 0.33.0 to 0.36.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/equinor/design-system/releases"><code>@equinor/eds-icons</code>'s releases</a>.</em></p> <blockquote> <h2>[0.36.0] - 2024-02-09</h2> <h3>Added</h3> <ul> <li>✨ <code>Autocomplete</code>: Implemented "Select all" functionality, enabled with <code>allowSelectAll</code> prop by @yusijs in https://github.com/equinor/design-system/pull/3245</li> <li>💄 <code>Slider</code>: option to render "value label" below the track with new <code>labelBelow</code> prop by @oddvernes in https://github.com/equinor/design-system/pull/3227</li> </ul> <h3>Fixed</h3> <ul> <li>🐛 <code>Slider</code>: <code>onChangeCommitted</code> was not triggered by touch input by @oddvernes in https://github.com/equinor/design-system/pull/3244</li> <li>🐛 <code>Slider</code>: fixed bug in Firefox where "value label" did not show on hover by @oddvernes in https://github.com/equinor/design-system/pull/3224</li> <li>🐛 <code>Snackbar</code>: A missing check in the autohide timer caused <code>onClose</code> to be called twice by @oddvernes and @yusijs in https://github.com/equinor/design-system/pull/3241</li> <li>🐛 <code>Autocomplete</code>: with <code>multiple</code>, <code>readOnly</code> was still accessible when clicking in the input. <code>readOnly</code> was still accessible in both modes when using keyboard arrow buttons by @oddvernes in https://github.com/equinor/design-system/pull/3216</li> </ul> <h3>Changed</h3> <ul> <li>💄<code>Slider</code>: design adjustments to the "value label": changed color, reduced padding, removed "arrow" and moved closer to the "thumb" by @oddvernes in https://github.com/equinor/design-system/pull/3227</li> <li>💄 <code>TextField</code>/<code>InputWrapper</code>: allow line break character to work in <code>HelperText</code> by @oddvernes in https://github.com/equinor/design-system/pull/3233</li> <li>🔧 Updated <code>babel</code> browserlist from "defaults" to "last 2 versions of chrome/edge/firefox/safari". This reduces build size significantly and removes all the babel runtime helpers. by @oddvernes in https://github.com/equinor/design-system/pull/3219</li> <li>🚸 <code>Autocomplete</code> ux-changes: input cleared on blur, added "no options" dropdown and <code>noOptionsText</code> prop by @oddvernes in https://github.com/equinor/design-system/pull/3216</li> </ul> <h2>[0.35.1] - 2023-12-21</h2> <h3>Fixed</h3> <ul> <li>🐛 <code>Typography</code>: Bug affecting users of styled-components v6 where line-clamping would be applied to all <code>Typography</code> elements on the page if the <code>lines</code> prop was set on one of them by @oddvernes in https://github.com/equinor/design-system/pull/3193</li> </ul> <h2>[0.35.0] - 2023-12-13</h2> <h3>Added</h3> <ul> <li>✨ <code>Icon</code>: Added support for multiple paths (type <code>IconData.svgPathData</code> is now <code>string | Array<string></code>) by @oddvernes in https://github.com/equinor/design-system/pull/3177</li> </ul> <h3>Fixed</h3> <ul> <li>🐛 <code>Autocomplete</code>: Fixed scrollbar clipping issue that manifested in Firefox by @oddvernes in https://github.com/equinor/design-system/pull/3179</li> <li>🐛 <code>Slider</code>: Fixed a bug where label tooltip was always visible for users with <code>[email protected]</code> by @oddvernes in https://github.com/equinor/design-system/pull/3173</li> </ul> <h3>Changed</h3> <ul> <li>🧑💻 <code>SideSheet</code>: <code>open</code> prop type changed to required, conditionally render title and close button to reflect the optional types of <code>title</code> and <code>onClose</code> props by @oddvernes in https://github.com/equinor/design-system/pull/3161</li> </ul> <h2>[0.34.0] - 2023-11-17</h2> <h3>Added</h3> <ul> <li>✨ <code>Slider</code>: added <code>hideActiveTrack</code> prop by @oddvernes in https://github.com/equinor/design-system/pull/3131</li> <li>✨ <code>Slider</code>: added <code>labelAlwaysOn</code> prop by @oddvernes in https://github.com/equinor/design-system/pull/3143</li> <li>✨ <code>Autocomplete</code>: Added <code>variant</code> (<code>error</code>, <code>warning</code>, <code>success</code>) and <code>helperText</code> props by @denektenina in https://github.com/equinor/design-system/pull/3139</li> <li>✨ <code>Breadcrumbs</code>: custom <code>separator</code> prop by @oddvernes in https://github.com/equinor/design-system/pull/3142</li> </ul> <h3>Changed</h3> <ul> <li>💄 <code>Slider</code>: redesigned value label to tooltip style, increased font size by @oddvernes in https://github.com/equinor/design-system/pull/3143</li> <li>✨ <code>Label</code>/<code>TextField</code>/<code>Autocomplete</code>: The <code>label</code> prop type changed from <code>string</code> to <code>ReactNode</code> to allow it to be more customizable by @FredrikMWold in https://github.com/equinor/design-system/pull/3140</li> <li>⬆️ Updated dependencies by @oddvernes in equinor/design-system#3121 equinor/design-system#3138 equinor/design-system#3137 equinor/design-system#3132 https://github.com/equinor/design-system/pull/3148</li> </ul> <h3>Fixed</h3> <ul> <li>📱 <code>Slider</code>: added touch support for range slider by @oddvernes in https://github.com/equinor/design-system/pull/3144</li> <li>🐛 <code>Slider</code>: fixed bug in Safari where slider would grow in width on mouseover by @oddvernes in https://github.com/equinor/design-system/pull/3145</li> </ul> <h2>[0.33.1] - 2023-10-20</h2> <h3>Fixed</h3> <ul> <li>🐛<code>Chip</code>: only hover color when clickable (fixed for error variant) by @oddvernes in https://github.com/equinor/design-system/pull/3096</li> <li>🐛 <code>Table.Row</code>: fix Styled-components v6 printing a false positive console warning about <code>active</code> prop by @oddvernes in https://github.com/equinor/design-system/pull/3104</li> <li>🐛 <code>Slider</code>: change returnvalue type for <code>onChange</code> and <code>onChangeCommitted</code> from <code>number[] | number</code> to <code>number[]</code> to reflect reality. And allow value for non-range slider to be number[] (an array with only one number) by @oddvernes in https://github.com/equinor/design-system/pull/3076</li> <li>⬆️ Update <code>@babel/runtime</code> to fix a vulnerability in its dependency <code>@babel/traverse</code> (https://nvd.nist.gov/vuln/detail/CVE-2023-45133) by @oddvernes in https://github.com/equinor/design-system/pull/3115</li> </ul> </blockquote> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Christophe Winkler <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
resolves #2973
Made it so range slider works with touch input, and both range and regular slider always shows value label when using touch input. It is a dynamic solution that switches mode based on current input type so it works with devices that has both touch and mouse.