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

SWED-2339 dialog UI update #977

Merged
merged 16 commits into from
May 14, 2024
Merged

SWED-2339 dialog UI update #977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
2981333
SWED-2339 non-breaking UI changes
goldenraphti Apr 24, 2024
e5630c7
SWED-2339 dialog script & UI & transitions
goldenraphti May 2, 2024
17cfac3
SWED-2339 add transition horizontal + prevent scroll
goldenraphti May 2, 2024
2417c42
SWED-2339 fix tests & transitions
goldenraphti May 6, 2024
cf205bc
SWED-2339 new dialog & comment out old silent support
goldenraphti May 6, 2024
1e72d49
SWED-2339 style large variant & mobile
goldenraphti May 7, 2024
b8a69a8
SWED-2339 add documentation preview
goldenraphti May 7, 2024
100626f
SWED-2339 update jest test snaps
goldenraphti May 7, 2024
6ceea88
SWED-2339 skip 1 jest test
goldenraphti May 7, 2024
edfeebc
SWED-2339 adjust UI & E2E tests
goldenraphti May 7, 2024
ed70c6b
SWED-2339 style UI dialog
goldenraphti May 10, 2024
5081025
SWED-2339 dialog E2E screenshots
goldenraphti May 14, 2024
60b4c00
SWED-2339 E2E dialog
goldenraphti May 14, 2024
baf6559
SWED-2339 add utils dialog open() & close()
goldenraphti May 14, 2024
0ec444b
SWED-2339 clean obsolete attr & update tests
goldenraphti May 14, 2024
ac39872
SWED-2339 fix tests
goldenraphti May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions RELEASE_NOTES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,24 @@
- It is now possible to add a subtext inside the checkmark variant (use span.subtext)

- Buttons

- minor non-breaking UI updates (height for size large, unify hover state, modify active & focus-visible UI, and more)
- add Danish MitId button style (you can use either `i.bank-id-dk` OR `i.mitid-dk`, both are supported)

- Cards

- fix style .cards-wide on mobile

- Dialog

- UI update
- new syntax, leveraging the standard <dialog> tag
- silent support for the old syntax until the next major release
- add transitions

- Buttons
- secondary buttons get a transparent background-color

## Technical changes

- chore deps (update deps packages minor versions)
Expand Down
46 changes: 23 additions & 23 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
"@babel/eslint-parser": "^7.24.1",
"@babel/preset-env": "^7.24.4",
"@babel/preset-react": "^7.24.1",
"@playwright/test": "^1.43.0",
"@playwright/test": "^1.44.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.2.2",
"@testing-library/user-event": "^14.5.2",
Expand Down
240 changes: 0 additions & 240 deletions src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,245 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Documentation: Dialog Example renders 1`] = `
Array [
<h2
id="overview"
>
Example
</h2>,
<div
className="showcase-panel"
>
<button
className="btn btn-primary"
data-dialog-open="demo-dialog"
type="button"
>
Open dialog
</button>
<div
aria-describedby="aria-describe-dia"
aria-labelledby="aria-label-dia"
aria-modal="true"
className="dialog"
id="demo-dialog"
role="dialog"
>
<section>
<header
className="dialog-header"
id="aria-label-dia"
>
<h4>
Delete
</h4>
<button
aria-label="Close dialog"
className="dialog-close"
type="button"
/>
</header>
<div
className="dialog-body"
id="aria-describe-dia"
>
<p>
You’re about to permanently delete
<i>
German Swashbuckle (456)?
</i>
</p>
</div>
<footer
className="dialog-footer"
>
<button
className="btn btn-secondary"
data-dialog-close={true}
type="button"
>
Cancel
</button>
<button
className="btn btn-primary"
type="button"
>
Delete
</button>
</footer>
</section>
</div>
</div>,
<figure>
<div
className="code-view"
>
<header
className="code-view-header"
>
HTML
<button
aria-describedby="tooltipCopy"
className="tooltip"
onClick={[Function]}
>
<i
aria-hidden="true"
className="at-clipboard small"
/>
<div
id="tooltipCopy"
role="tooltip"
>
Copy to clipboard
</div>
</button>
</header>
<table
className="code-view-table"
>
<tbody>
<tr>
<td
className="code-view-numbers"
>
<pre>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</pre>
</td>
<td
className="code-view-code"
>
<pre>
&lt;button class="btn btn-primary" type="button" data-dialog-open="demo-dialog"&gt;
Open dialog
&lt;/button&gt;
&lt;div class="dialog" id="demo-dialog" role="dialog" aria-modal="true" aria-labelledby="aria-label-dia" aria-describedby="aria-describe-dia"&gt;
&lt;section&gt;
&lt;header class="dialog-header" id="aria-label-dia"&gt;
&lt;h4&gt;Delete&lt;/h4&gt;
&lt;button type="button" class="dialog-close" aria-label="Close dialog"&gt;&lt;/button&gt;
&lt;/header&gt;
&lt;div class="dialog-body" id="aria-describe-dia"&gt;
&lt;p&gt;You’re about to permanently delete &lt;i&gt;German Swashbuckle (456)?&lt;/i&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;footer class="dialog-footer"&gt;
&lt;button class="btn btn-secondary" type="button" data-dialog-close="true"&gt;Cancel&lt;/button&gt;
&lt;button class="btn btn-primary" type="button"&gt;Delete&lt;/button&gt;
&lt;/footer&gt;
&lt;/section&gt;
&lt;/div&gt;
</pre>
</td>
</tr>
</tbody>
</table>
</div>
</figure>,
]
`;

exports[`Documentation: Dialog HowItWorks renders 1`] = `
Array [
<h2
Expand Down
Loading
Loading