Skip to content

Commit 3dd75c9

Browse files
sirineJconnor-baer
andauthored
Feat/dialog component (#2859)
* update component sing native dialog and polyfill * create new ModalContext * add tests * add translations * add documentation * update NotificationModal component * export components * fix scroll-disabling styles * require min typescript version of 4.1 * fix ::backdrop inheritance issue for older browsers * add changeset * fix package-lock.json * fix animation duration * fix: classes order * Silence lint warnings in CI * Format Modal.mdx * fix CI * refactor styles * fix tests * code review Pt 1 * optimise scrolling * use useStack * export useScrollLock * refactor hasNativeDialogSupport * format file * cde review pt1 * add doc * refactor styles * improve closing modal on unmount * refactor tests * styles * fix useRef * fix scroll affordance * add layout padded * add doc to useScrollLock * fix params * restore scroll on clean up * fix CR workflow that creates previews based on main when using `issue_comment` * remove unused animation styles * add explanation for box-shadow workaround * use label workaround * change DateInput positioning to fixed * fix modal width * add post CR comment --------- Co-authored-by: Connor Bär <[email protected]>
1 parent 56f6d22 commit 3dd75c9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+2034
-592
lines changed

.changeset/cyan-knives-drop.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@sumup-oss/circuit-ui": minor
3+
---
4+
5+
Set an explicit minimum version for TypeScript of 4.1 or higher. While this is technically a breaking change, v4.1 was released over 4 years ago, so we don't expect this to break anyone's code. Please let us know if this causes you issues.

.changeset/eight-beers-think.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@sumup-oss/circuit-ui": minor
3+
---
4+
5+
Refactored the NotificationModal component to use the new Modal component under the hood.

.changeset/gold-lemons-report.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@sumup-oss/design-tokens": minor
3+
---
4+
5+
Added "::backdrop" to the list of selectors to apply theme custom properties to. See https://developer.chrome.com/blog/css-backdrop-inheritance.

.changeset/grumpy-wombats-talk.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@sumup-oss/circuit-ui": minor
3+
---
4+
5+
Added a new hook `useScrollLock` to disable page scroll on demand.

.changeset/rich-icons-pretend.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@sumup-oss/circuit-ui": minor
3+
---
4+
5+
Deprecated the `hideCloseButton` prop in the Modal and NotificationModal components. It had no effect.

.changeset/sharp-seals-leave.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@sumup-oss/circuit-ui": minor
3+
---
4+
5+
Added default translations for the Modal and NotificationModal components. The `closeButtonLabel` prop is now optional.

.changeset/wicked-pants-cough.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@sumup-oss/circuit-ui": minor
3+
---
4+
5+
Refactored the Modal component to use the native `dialog` element. The Modal component can now be rendered directly in your JSX (the older `useModal` hook continues to be supported).

.github/workflows/cr.yml

Lines changed: 79 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
name: Continuous Releases
22
on:
3-
issue_comment:
4-
types: [created]
3+
pull_request:
4+
types:
5+
- labeled
56

67
jobs:
78
build:
8-
if: ${{ github.event.comment.body == '/preview' && github.event.issue.pull_request }}
9+
if: ${{ github.event.label.name == 'preview' }}
910
runs-on: ubuntu-latest
1011

1112
steps:
@@ -25,4 +26,78 @@ jobs:
2526
run: npm run build
2627

2728
- name: Publish packages
28-
run: npx pkg-pr-new publish './packages/circuit-ui' './packages/design-tokens' './packages/icons'
29+
run: npx pkg-pr-new publish './packages/circuit-ui' './packages/design-tokens' './packages/icons' --json output.json --comment=off
30+
31+
- name: Post or update comment
32+
uses: actions/github-script@v6
33+
with:
34+
github-token: ${{ secrets.GITHUB_TOKEN }}
35+
script: |
36+
const fs = require('fs');
37+
const output = JSON.parse(fs.readFileSync('output.json', 'utf8'));
38+
console.log(output);
39+
40+
const packages = output.packages
41+
.map((p) => `- ${p.name}: ${p.url}`)
42+
.join('\n');
43+
44+
const sha = context.payload.pull_request.head.sha
45+
46+
const commitUrl = `https://github.com/${context.repo.owner}/${context.repo.repo}/commit/${sha}`;
47+
48+
const body = `## 🚀 Your packages were published
49+
50+
### Published Packages:
51+
52+
${packages}
53+
54+
[View Commit](${commitUrl})`;
55+
56+
const botCommentIdentifier = '## 🚀 Your packages were published ';
57+
58+
async function findBotComment(issueNumber) {
59+
if (!issueNumber) return null;
60+
const comments = await github.rest.issues.listComments({
61+
owner: context.repo.owner,
62+
repo: context.repo.repo,
63+
issue_number: issueNumber,
64+
});
65+
return comments.data.find((comment) =>
66+
comment.body.includes(botCommentIdentifier)
67+
);
68+
}
69+
70+
async function createOrUpdateComment(issueNumber) {
71+
if (!issueNumber) {
72+
console.log('No issue number provided. Cannot post or update comment.');
73+
return;
74+
}
75+
76+
const existingComment = await findBotComment(issueNumber);
77+
if (existingComment) {
78+
await github.rest.issues.updateComment({
79+
owner: context.repo.owner,
80+
repo: context.repo.repo,
81+
comment_id: existingComment.id,
82+
body: body,
83+
});
84+
} else {
85+
await github.rest.issues.createComment({
86+
issue_number: issueNumber,
87+
owner: context.repo.owner,
88+
repo: context.repo.repo,
89+
body: body,
90+
});
91+
}
92+
}
93+
if (context.issue.number) {
94+
await createOrUpdateComment(context.issue.number);
95+
}
96+
97+
- name: Delete label
98+
env:
99+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
100+
PR_NUMBER:
101+
${{ github.event.pull_request.number }}
102+
run: |
103+
gh pr edit $PR_NUMBER --remove-label "preview"

package-lock.json

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"test:ci": "vitest run --coverage",
2727
"lint": "biome check --diagnostic-level=error && foundry run eslint . --ext .js,.jsx,.ts,.tsx",
2828
"lint:fix": "biome check --write --diagnostic-level=error && foundry run eslint . --ext .js,.jsx,.ts,.tsx --fix",
29-
"lint:ci": "biome ci && foundry run eslint . --ext .js,.jsx,.ts,.tsx --quiet ",
29+
"lint:ci": "biome ci --diagnostic-level=error && foundry run eslint . --ext .js,.jsx,.ts,.tsx --quiet ",
3030
"lint:css": "foundry run stylelint '**/*.css'",
3131
"lint:css:fix": "foundry run stylelint '**/*.css' --fix",
3232
"dev": "npm run docs:start",

0 commit comments

Comments
 (0)