Conversation
|
✅ Deploy Preview for scouterna-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
@daBack Oj det här är coolt! Men ingen aning om varför eventen inte syns 🤔 Men det verkar vara så för alla stories så det är säkert jag som pajat något 😄 |
scriptcoded
left a comment
scriptcoded
left a comment
There was a problem hiding this comment.
Verkar funka bra! 🥳 Utöver lite petty kommentarer på koden, funderar på om vi ska "unmounta" slotten när panelen göms? Just nu finns contenten kvar i domen även när panelen är stängd.
There was a problem hiding this comment.
Pull request overview
Adds a new scout-drawer Stencil web component to the design system, along with Storybook documentation and a focus-trap dependency to support proper keyboard navigation when the drawer is open.
Changes:
- Introduces
scout-drawercomponent implementation and styling inui-webc. - Adds an accompanying Storybook story for the new component.
- Adds
dom-focus-lockdependency (and updates lockfile).
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
packages/ui-webc/src/components/drawer/drawer.tsx |
New drawer component logic, props/events, focus-lock integration |
packages/ui-webc/src/components/drawer/drawer.css |
Drawer layout, animations, backdrop and header/button styling |
packages/ui-webc/src/components/drawer/readme.md |
Auto-generated component docs for props/events |
packages/storybook/src/stories/drawer.stories.tsx |
Storybook story to demo and interact with the drawer |
packages/ui-webc/package.json |
Adds dom-focus-lock dependency |
pnpm-lock.yaml |
Lockfile updates for new dependency + deprecation metadata |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| // biome-ignore lint/a11y/useButtonType: <not needed> | ||
| <button | ||
| class="back-button" | ||
| onClick={() => this.onBackButtonClick()} | ||
| > |
| @State() focusedNode: Element = null; | ||
|
|
||
| componentWillLoad(): Promise<void> | void { | ||
| this.focusedNode = document.activeElement; | ||
| } | ||
| disconnectedCallback(): void { | ||
| this.focusedNode; |
| this.focusedNode = document.activeElement; | ||
| } | ||
| disconnectedCallback(): void { | ||
| this.focusedNode; |
| <span class="icon" innerHTML={backIcon}> | ||
| <span class="visually-hidden">{this.backButtonLabel}</span> | ||
| </span> | ||
| </button> |
| <span class="icon" innerHTML={exitIcon}> | ||
| <span class="visually-hidden">{this.exitButtonLabel}</span> | ||
| </span> | ||
| </button> |
| basic-ftp@5.0.5: | ||
| resolution: {integrity: sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==} | ||
| engines: {node: '>=10.0.0'} | ||
| deprecated: Security vulnerability fixed in 5.2.0, please upgrade |
| } | ||
|
|
||
| @Watch("open") | ||
| setDialogOpenState(open: boolean) { |
| @Watch("open") | ||
| setDialogOpenState(open: boolean) { | ||
| const drawer = this.rootElement.shadowRoot.querySelector( | ||
| ".drawer--container", | ||
| ) as HTMLElement; | ||
| if (open) { | ||
| this.drawerState = "opening"; | ||
| focusLock.on(drawer); | ||
| } else { | ||
| focusLock.off(drawer); | ||
| this.drawerState = "closing"; | ||
| } | ||
| } |
| const drawer = this.rootElement.shadowRoot.querySelector( | ||
| ".drawer--container", | ||
| ) as HTMLElement; | ||
| if (open) { | ||
| this.drawerState = "opening"; | ||
| focusLock.on(drawer); | ||
| } else { |
| "class-variance-authority": "^0.7.1", | ||
| "clsx": "^2.1.1", | ||
| "iconoir": "^7.11.0", | ||
| "dom-focus-lock": "^1.1.0", | ||
| "@tabler/icons": "^3.36.1" |
Så sheeten funkar som den ska, förutom lock. försökte importera ett paket, men fick det inte ens att funka i IDE:n. är de för att de är gamla js?