Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

💄Slider: removed arrow & added labelBelow prop #3227

Merged
merged 6 commits into from
Feb 7, 2024

Conversation

oddvernes
Copy link
Collaborator

@oddvernes oddvernes commented Jan 22, 2024

resolves #3223

Reviewed and approved by design

@oddvernes oddvernes marked this pull request as ready for review February 7, 2024 13:43
@oddvernes oddvernes requested a review from vnys as a code owner February 7, 2024 13:43
@oddvernes oddvernes merged commit 1ad69a8 into develop Feb 7, 2024
6 checks passed
@oddvernes oddvernes deleted the OOVE/3223-slider-adjustments branch February 7, 2024 14:29
w1nklr added a commit to equinor/webviz-subsurface-components that referenced this pull request 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>eds-core-react@0.21.0</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>eds-icons@0.21.0</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>eds-core-react@0.20.4</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 &amp; 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>eds-core-react@0.20.3</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&lt;string&gt;</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 eds-icons@0.21.0 (<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 eds-core-react@0.35.0, eds-icons@0.20.0,
eds-data-grid-react@0.2.0 (...</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 &amp; 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/eds-icons@0.21.0/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 &quot;Select all&quot;
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 &quot;value label&quot;
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 &quot;value
label&quot; 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 &quot;value
label&quot;: changed color, reduced padding, removed &quot;arrow&quot;
and moved closer to the &quot;thumb&quot; 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 &quot;defaults&quot;
to &quot;last 2 versions of chrome/edge/firefox/safari&quot;. 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
&quot;no options&quot; 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&lt;string&gt;</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>styled-components@5.x.x</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 />

[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@equinor/eds-icons&package-manager=npm_and_yarn&previous-version=0.19.3&new-version=0.21.0)](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] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Christophe Winkler <christophe.winkler@aspentech.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

💄 Slider: test suggested design improvements
1 participant