Skip to content

Commit

Permalink
fix: spacings, id names, accessibility hint
Browse files Browse the repository at this point in the history
  • Loading branch information
auroraVasconcelos committed Jan 19, 2025
1 parent c6c9225 commit 650973d
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 16 deletions.
4 changes: 2 additions & 2 deletions packages/components/src/components/drawer/drawer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,7 @@ export default class SdDrawer extends SolidElement {
<div
part="panel"
class=${cx(
'absolute flex flex-col z-10 max-w-full max-h-full bg-white shadow-lg overflow-auto pointer-events-auto focus:outline-none',
'absolute flex flex-col gap-4 z-10 max-w-full max-h-full bg-white shadow-lg overflow-auto pointer-events-auto focus:outline-none',
{
end: 'top-0 end-0 bottom-auto start-auto w-[--width] h-full',
start: 'top-0 end-auto bottom-auto start-0 w-[--width] h-full'
Expand Down Expand Up @@ -353,7 +353,7 @@ export default class SdDrawer extends SolidElement {
class="absolute top-2 right-2"
><sd-icon label=${this.localize.term('close')} name="close" library="system"></sd-icon
></sd-button>`}
<div part="body" class="flex-auto block px-4 py-4" role="region" tabindex="0">
<div part="body" class="flex-auto block px-4" role="region" tabindex="0">
<slot></slot>
</div>
<footer part="footer" class=${cx(this.hasSlotController.test('footer') ? 'text-left p-4' : 'hidden')}>
Expand Down
26 changes: 13 additions & 13 deletions packages/docs/src/stories/components/drawer.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const { overrideArgs } = storybookHelpers('sd-drawer');
/**
* Used as a panel that slides out from the side of the screen which contains a set of information or actions.
*
* **Accessibility Hint:** In order to make it accessible a label must be added.
* **Accessibility Information:** Always include a label so that screenreaders correctly announce the component.
*
* **Related templates:**
* - [Drawer](?path=/docs/templates-drawer--docs)
Expand Down Expand Up @@ -76,9 +76,9 @@ export const Default = {
export const Open = {
name: 'Open',
render: () => html`
<sd-button id="openDrawer">Open Drawer</sd-button>
<sd-button id="openButton">Open Drawer</sd-button>
<div style="width: auto; height: 40vh; position: relative;">
<sd-drawer open label="example" placement="start" id="drawerOpen">
<sd-drawer open label="example" placement="start" id="openDrawer">
<sd-button slot="header" variant="tertiary">
<sd-icon slot="icon-left" name="system/arrow-left"></sd-icon>
Back
Expand All @@ -91,8 +91,8 @@ export const Open = {
</sd-drawer>
</div>
<script>
document.querySelector('#openDrawer').addEventListener('click', () => {
document.querySelector('#drawerOpen').show();
document.querySelector('#openButton').addEventListener('click', () => {
document.querySelector('#openDrawer').show();
});
</script>
`
Expand All @@ -107,9 +107,9 @@ export const Open = {
export const Placement = {
name: 'Placement',
render: () => html`
<sd-button id="openDrawerPlacement">Open Drawer</sd-button>
<sd-button id="placementButton">Open Drawer</sd-button>
<div style="width: auto; height: 40vh; position: relative;">
<sd-drawer open placement="start" id="drawerPlacement">
<sd-drawer open placement="start" id="placementDrawer">
<sd-input slot="header" type="search" size="lg" placeholder="Search"></sd-input>
<div class="slot slot--border slot--text h-full">Default slot</div>
<div slot="footer" class="flex flex-col w-full gap-4">
Expand All @@ -119,8 +119,8 @@ export const Placement = {
</sd-drawer>
</div>
<script>
document.querySelector('#openDrawerPlacement').addEventListener('click', () => {
document.querySelector('#drawerPlacement').show();
document.querySelector('#placementButton').addEventListener('click', () => {
document.querySelector('#placementDrawer').show();
});
</script>
`
Expand All @@ -132,16 +132,16 @@ export const Placement = {
export const NoHeader = {
name: 'No Header',
render: () => html`
<sd-button id="openDrawerNoHeader">Open Drawer</sd-button>
<sd-button id="noHeaderButton">Open Drawer</sd-button>
<div style="width: auto; height: 40vh; position: relative;">
<sd-drawer open no-header placement="start" id="drawerNoHeader">
<sd-drawer open no-header placement="start" id="noHeaderDrawer">
<div class="slot slot--border slot--text h-full">Default slot</div>
<div slot="footer" class="slot slot--border slot--text h-full">Footer slot</div>
</sd-drawer>
</div>
<script>
document.querySelector('#openDrawerNoHeader').addEventListener('click', () => {
document.querySelector('#drawerNoHeader').show();
document.querySelector('#noHeaderButton').addEventListener('click', () => {
document.querySelector('#noHeaderDrawer').show();
});
</script>
`
Expand Down
6 changes: 5 additions & 1 deletion packages/docs/src/stories/components/drawer.test.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,11 @@ export const Autofocus = {
{
type: 'slot',
name: 'default',
value: `<input autofocus placeholder="Autofocus input" class="mt-3 block w-full rounded-md border-0 py-1.5 px-3 text-neutral-900 shadow-sm ring-1 ring-inset ring-neutral-300 placeholder:text-gray-400 focus-visible:focus-outline sm:text-sm sm:leading-6"> </div>`
value: `<sd-input
autofocus
label="Autofocus input example"
help-text="This input will be focused when the drawer is opened."
> </sd-input>`
},
{
type: 'slot',
Expand Down

0 comments on commit 650973d

Please sign in to comment.