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.

Sign up for GitHub

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

Jump to bottom

🧑‍💻SideSheet: open required, conditional render header, title, button #3161

Merged
merged 2 commits into from
Dec 4, 2023
Merged

🧑‍💻SideSheet: open required, conditional render header, title, button #3161

merged 2 commits into from
Dec 4, 2023

Conversation

oddvernes
Copy link
Collaborator

@oddvernes oddvernes commented Nov 28, 2023 •
edited
Loading

resolves #3157

changes:

  • made open a required prop
  • conditionally render header if title and/or onClose exists
  • conditionally render title
  • conditionally render close button if onClose is defined

@oddvernes oddvernes merged commit 1904d9f into develop Dec 4, 2023
6 checks passed
@oddvernes oddvernes deleted the OOVE/3157-sidesheet-prop-type-improvements branch December 4, 2023 11:29
@AgeAKristiansen
Copy link

Thank you!

@odinr odinr mentioned this pull request Jan 10, 2024
Closed
@w1nklr w1nklr mentioned this pull request Feb 13, 2024
Merged
w1nklr referenced this pull request in equinor/webviz-subsurface-components Feb 13, 2024
@dependabot @w1nklr
fix: bump @equinor/eds-icons from 0.19.3 to 0.21.0 and @equinor/eds-c…
c7bd611 
…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 &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>[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&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 [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 &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/[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 &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>[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 />

[![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] <[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
Reviewers

@vnys vnys Awaiting requested review from vnys vnys is a code owner

@denektenina denektenina Awaiting requested review from denektenina

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Optional props on Sidesheet component not really optional
2 participants
@oddvernes @AgeAKristiansen