Skip to content

Commit

Permalink
Toggle: fix missing space between toggle and its slotted content when…
Browse files Browse the repository at this point in the history 
… slot=end in item (#3739)
  • Loading branch information
@Fuzzy3
Fuzzy3 authored Feb 4, 2025
1 parent 20938dd commit a4b7a69
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 89 deletions.
5 changes: 3 additions & 2 deletions apps/cookbook/src/app/examples/item-example/examples/settings/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import { ToggleComponent } from '@kirbydesign/designsystem/toggle';
const config = {
selector: 'cookbook-item-example-settings',
template: `<kirby-item>
<p class="kirby-item-title">Title</p>
<kirby-toggle slot="end" checked="true"></kirby-toggle>
<kirby-toggle slot="end" checked="true">
Title
</kirby-toggle>
</kirby-item>`,
};

Expand Down
126 changes: 60 additions & 66 deletions libs/designsystem/item/src/item.component.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -604,98 +604,92 @@ export const ItemWithToggleModernSyntax: Story = {
styles: [`h2 { margin-top: 32px; }`],
template: `<h2>Extra small</h2>
<kirby-item size="xs">
<kirby-toggle [checked]="true" slot="start"></kirby-toggle>
<kirby-label>Slot start, selected</kirby-label>
</kirby-item>
<kirby-toggle [checked]="true" slot="start">Slot start, selected</kirby-toggle>
</kirby-item>
<kirby-item size="xs">
<kirby-toggle slot="start"></kirby-toggle>
<kirby-label>Slot start</kirby-label>
</kirby-item>
<kirby-toggle slot="start">Slot start</kirby-toggle>
</kirby-item>
<kirby-item size="xs">
<kirby-toggle slot="end"></kirby-toggle>
<kirby-label>Slot end</kirby-label>
</kirby-item>
<kirby-toggle slot="end">Slot end</kirby-toggle>
</kirby-item>
<kirby-item size="xs">
<kirby-toggle slot="start"></kirby-toggle>
<kirby-label>No slot</kirby-label>
</kirby-item>
<kirby-toggle>No slot</kirby-toggle>
</kirby-item>
<kirby-item size="xs">
<kirby-toggle slot="start"></kirby-toggle>
<kirby-label>
<h3>Slot start, complex label</h3>
<p detail>Label</p>
</kirby-label>
</kirby-item>
<kirby-toggle slot="start">
<kirby-label>
<p class="kirby-item-title">Slot start, complex label</p>
<p class="kirby-item-detail">Label</p>
</kirby-label>
</kirby-toggle>
</kirby-item>
<kirby-item size="xs">
<kirby-toggle slot="end"></kirby-toggle>
<kirby-label>
<h3>Slot end, complex label</h3>
<p detail>Label</p>
</kirby-label>
<kirby-toggle slot="end">
<kirby-label>
<p class="kirby-item-title">Slot end, complex label</p>
<p class="kirby-item-detail">Label</p>
</kirby-label>
</kirby-toggle>
</kirby-item>
<h2>Small</h2>
<kirby-item size="sm">
<kirby-toggle [checked]="true" slot="start"></kirby-toggle>
<kirby-label>Slot start, selected</kirby-label>
</kirby-item>
<kirby-toggle [checked]="true" slot="start">Slot start, selected</kirby-toggle>
</kirby-item>
<kirby-item size="sm">
<kirby-toggle slot="start"></kirby-toggle>
<kirby-label>Slot start</kirby-label>
</kirby-item>
<kirby-toggle slot="start">Slot start</kirby-toggle>
</kirby-item>
<kirby-item size="sm">
<kirby-toggle slot="end"></kirby-toggle>
<kirby-label>Slot end</kirby-label>
</kirby-item>
<kirby-toggle slot="end">Slot end</kirby-toggle>
</kirby-item>
<kirby-item size="sm">
<kirby-toggle slot="start"></kirby-toggle>
<kirby-label>No slot</kirby-label>
</kirby-item>
<kirby-toggle>No slot</kirby-toggle>
</kirby-item>
<kirby-item size="sm">
<kirby-toggle slot="start"></kirby-toggle>
<kirby-label>
<h3>Slot start, complex label</h3>
<p detail>Label</p>
</kirby-label>
</kirby-item>
<kirby-toggle slot="start">
<kirby-label>
<p class="kirby-item-title">Slot start, complex label</p>
<p class="kirby-item-detail">Label</p>
</kirby-label>
</kirby-toggle>
</kirby-item>
<kirby-item size="sm">
<kirby-toggle slot="end"></kirby-toggle>
<kirby-label>
<h3>Slot end, complex label</h3>
<p detail>Label</p>
</kirby-label>
<kirby-toggle slot="end">
<kirby-label>
<p class="kirby-item-title">Slot end, complex label</p>
<p class="kirby-item-detail">Label</p>
</kirby-label>
</kirby-toggle>
</kirby-item>
<h2>Medium</h2>
<kirby-item size="md">
<kirby-toggle [checked]="true" slot="start"></kirby-toggle>
<kirby-label>Slot start, selected</kirby-label>
</kirby-item>
<kirby-toggle [checked]="true" slot="start">Slot start, selected</kirby-toggle>
</kirby-item>
<kirby-item size="md">
<kirby-toggle slot="start"></kirby-toggle>
<kirby-label>Slot start</kirby-label>
</kirby-item>
<kirby-toggle slot="start">Slot start</kirby-toggle>
</kirby-item>
<kirby-item size="md">
<kirby-toggle slot="end"></kirby-toggle>
<kirby-label>Slot end</kirby-label>
<kirby-toggle slot="end">Slot end</kirby-toggle>
</kirby-item>
<kirby-item size="md">
<kirby-toggle slot="start"></kirby-toggle>
<kirby-label>No slot</kirby-label>
<kirby-toggle>No slot</kirby-toggle>
</kirby-item>
<kirby-item size="md">
<kirby-toggle slot="start"></kirby-toggle>
<kirby-label>
<h3>Slot start, complex label</h3>
<p detail>Label</p>
</kirby-label>
<kirby-toggle slot="start">
<kirby-label>
<p class="kirby-item-title">Slot start, complex label</p>
<p class="kirby-item-detail">Label</p>
</kirby-label>
</kirby-toggle>
</kirby-item>
<kirby-item size="md">
<kirby-toggle slot="end"></kirby-toggle>
<kirby-label>
<h3>Slot end, complex label</h3>
<p detail>Label</p>
</kirby-label>
<kirby-toggle slot="end">
<kirby-label>
<p class="kirby-item-title">Slot end, complex label</p>
<p class="kirby-item-detail">Label</p>
</kirby-label>
</kirby-toggle>
</kirby-item>`,
}),
};
Expand Down
8 changes: 6 additions & 2 deletions libs/designsystem/toggle/src/toggle.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@
(keyup.space)="_onInactive()"
(blur)="_onInactive()"
(ionChange)="onCheckedChange($event.detail.checked)"
[attr.aria-label]="_ariaLabel"
[justify]="_justify"
[labelPlacement]="_labelPlacement"
>
<ng-content></ng-content>
<span class="hidden-label" *ngIf="_labelText">{{ _labelText }}</span>
<span class="default-content">
<ng-content></ng-content>
</span>
</ion-toggle>
78 changes: 78 additions & 0 deletions libs/designsystem/toggle/src/toggle.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,45 @@
@use 'sass:math';
@use 'sass:map';
@use '@kirbydesign/core/src/scss/interaction-state';
@use '@kirbydesign/core/src/scss/utils';

$spacing-to-edge: map.get(utils.$checkbox-radio-spacing, 'to-edge');
$spacing-to-label: map.get(utils.$checkbox-radio-spacing, 'to-label');

:host {
display: inline-flex;

&:has(ion-toggle.in-item.toggle-justify-space-between) {
width: 100%;
}

&.has-hidden-label {
position: initial;

&[slot='end'] {
ion-toggle {
margin-inline-start: $spacing-to-label;
}
}

ion-toggle {
position: initial;

&::part(label) {
position: initial;
}

&.in-item::part(label-text-wrapper) {
margin-inline: 0;
}
}

.hidden-label {
position: absolute;
inset: 0;
opacity: 0;
}
}
}

ion-toggle {
Expand Down Expand Up @@ -66,6 +102,36 @@ ion-toggle {
height: $toggle-size;
}
}

::part(label-text-wrapper) {
line-height: utils.line-height('n');
white-space: pre-line;
}

// Overrides for kirby-toggle inside kirby-item
&.in-item {
&::part(label) {
align-items: center;
padding-inline: 0;
}

&::part(label),
&::part(label-text-wrapper) {
margin-block: 0;
}

&.toggle-label-placement-start {
&::part(label-text-wrapper) {
margin-inline: 0 $spacing-to-label;
}
}

&.toggle-label-placement-end {
&::part(label-text-wrapper) {
margin-inline: $spacing-to-label 0;
}
}
}
/* stylelint-enable no-duplicate-selectors */
}

Expand All @@ -77,3 +143,15 @@ ion-toggle {
ion-toggle.in-item.legacy-toggle {
padding: 0;
}

:host-context(kirby-item) {
z-index: utils.z('default'); // Makes whole kirby-item clickable above item-inner.

ion-toggle {
margin: 0;
}

&[slot='start'] {
margin-inline-end: $spacing-to-label;
}
}
Loading

0 comments on commit a4b7a69

Please sign in to comment.