Skip to content

Commit

Permalink
BREAKING CHANGE(web): Remove fullWidth and data-breakpoint modifi…
Browse files Browse the repository at this point in the history 
…ers from `Dropdown` #DS-588

Also improved demo and docs.

 ## Migration Guide

Use `data-spirit-fullwidthmode` instead of `Dropdown--fullWidth`
 and `data-breakpoint` on `Dropdown` component.
`spirit` infix is made mandatory in PR #935.

- `<div class="Dropdown Dropdown--fullWidth" …>`
→ `<div class="Dropdown" data-spirit-fullwidthmode="all" …>`
(`spirit` infix is made mandatory in PR #935)
- `<div class="Dropdown Dropdown--fullWidth" data-breakpoint="mobile" …>`
→ `<div class="Dropdown" data-spirit-fullwidthmode="mobile-only" …>`
(`spirit` infix is made mandatory in PR #935)

Please refer back to this guide or reach out to our team
if you encounter any issues during migration.
  • Loading branch information
@crishpeen
crishpeen committed Jul 18, 2023
1 parent 9c7cf80 commit 609bfc3
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 152 deletions.
179 changes: 154 additions & 25 deletions packages/web/src/scss/components/Dropdown/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,68 @@
```html
<div class="DropdownWrapper">
<button
type="button"
data-toggle="dropdown"
data-target="#DropdownDemo1"
data-target="#dropdownDefault"
class="Button Button--primary Button--medium"
aria-expanded="false"
aria-controls="#DropdownDemo1"
aria-controls="#dropdownDefault"
>
toggle
Button as anchor
</button>
<div class="Dropdown Dropdown--bottom Dropdown--left" id="DropdownDemo1">
<div class="Dropdown Dropdown--bottom Dropdown--left" id="dropdownDefault">
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<span>Information</span>
</a>
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#link" />
</svg>
<span>Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
</a>
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#profile" />
</svg>
<span>Profile</span>
</a>
<a href="#" class="d-flex">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#help" />
</svg>
<span>Help</span>
</a>
</div>
</div>
```

## Usage with top-right align

```html
<div class="DropdownWrapper">
<button
data-toggle="dropdown"
data-target="#dropdownTopRight"
class="Button Button--primary Button--medium"
aria-expanded="false"
aria-controls="#dropdownTopRight"
>
Button as anchor
</button>
<div class="Dropdown Dropdown--top Dropdown--right" id="dropdownTopRight">
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<span>Information</span>
</a>
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#link" />
</svg>
<span>More links</span>
<span>Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
</a>
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
Expand All @@ -43,38 +84,129 @@
</div>
```

## Usage with full-width
## Usage with disabled autoclose

```html
<div class="DropdownWrapper">
<button
type="button"
data-toggle="dropdown"
data-target="#DropdownDemo2"
data-target="#dropdownDisabledAutoClose"
class="Button Button--primary Button--medium"
aria-expanded="false"
aria-controls="#DropdownDemo2"
aria-controls="#dropdownDisabledAutoClose"
data-autoclose="true"
>
toggle
Button as anchor
</button>
<div class="Dropdown Dropdown--bottom Dropdown--left Dropdown--fullWidth" id="DropdownDemo2">...</div>
<div class="Dropdown Dropdown--bottom Dropdown--left" id="dropdownDisabledAutoClose">
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<span>Information</span>
</a>
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#link" />
</svg>
<span>Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
</a>
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#profile" />
</svg>
<span>Profile</span>
</a>
<a href="#" class="d-flex">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#help" />
</svg>
<span>Help</span>
</a>
</div>
</div>
```

## Responsive usage
## Usage with full width mode `all`

```html
<div class="DropdownWrapper">
<button
type="button"
data-toggle="dropdown"
data-target="#DropdownDemo2"
data-target="#dropdownFullWidthModeAll"
class="Button Button--primary Button--medium"
aria-expanded="false"
aria-controls="#DropdownDemo2"
aria-controls="#dropdownFullWidthModeAll"
>
toggle
Finibus quis imperdiet, semper imperdiet aliquam
</button>
<div class="Dropdown Dropdown--fullWidth Dropdown--bottom Dropdown--left" id="DropdownDemo2" data-breakpoint="tablet">
...
<div class="Dropdown Dropdown--top Dropdown--left" id="dropdownFullWidthModeAll" data-fullwidthmode="all">
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<span>Information</span>
</a>
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#link" />
</svg>
<span>Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
</a>
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#profile" />
</svg>
<span>Profile</span>
</a>
<a href="#" class="d-flex">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#help" />
</svg>
<span>Help</span>
</a>
</div>
</div>
```

## Usage with full width mode `mobile-only`

```html
<div class="DropdownWrapper">
<button
data-toggle="dropdown"
data-target="#dropdownFullWidthModeMobile"
class="Button Button--primary Button--medium"
aria-expanded="false"
aria-controls="#dropdownFullWidthModeMobile"
>
Finibus quis imperdiet, semper imperdiet aliquam
</button>
<div class="Dropdown Dropdown--top Dropdown--left" id="dropdownFullWidthModeMobile" data-fullwidthmode="mobile-only">
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<span>Information</span>
</a>
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#link" />
</svg>
<span>Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
</a>
<a href="#" class="d-flex mb-400">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#profile" />
</svg>
<span>Profile</span>
</a>
<a href="#" class="d-flex">
<svg width="24" height="24" aria-hidden="true" class="mr-400">
<use xlink:href="/icons/svg/sprite.svg#help" />
</svg>
<span>Help</span>
</a>
</div>
</div>
```
Expand All @@ -98,10 +230,9 @@ There are two options here. Use the trigger element as an anchor or wrap the men

## Dropdown

| Attribute | Type | Default | Required | Description |
| -------------------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `data-breakpoint` | `'mobile','tablet','desktop'` | - | no | [**DEPRECATED**][deprecated] in favor of `data-fullwidthmode`; Breakpoint to switch from the full-width to the auto-width mode. |
| `data-fullwidthmode` | `'off','mobile-only','all'` | - | no | Full-width mode |
| Attribute | Type | Default | Required | Description |
| -------------------- | --------------------------- | ------- | -------- | --------------- |
| `data-fullwidthmode` | `'off','mobile-only','all'` | - | no | Full-width mode |

## JavaScript API

Expand Down Expand Up @@ -140,5 +271,3 @@ myDropdownEl.addEventListener('hidden.dropdown', () => {

dropdown.hide();
```

[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/README.md#deprecations
17 changes: 0 additions & 17 deletions packages/web/src/scss/components/Dropdown/_Dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,6 @@
background-color: theme.$background;
box-shadow: theme.$shadow;

/** @deprecated Will be removed in the next major version. */
@each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
&[data-breakpoint='#{$breakpoint-name}'] {
@include breakpoint.up(map.get(theme.$breakpoints, $breakpoint-name)) {
/* stylelint-disable-next-line declaration-no-important -- overriding js */
width: max-content !important;
}
}
}

&[data-fullwidthmode='mobile-only'] {
@include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
width: 100%;
Expand All @@ -33,13 +23,6 @@
}
}

/** @deprecated Will be removed in the next major version. */
.Dropdown[data-breakpoint],
/** @deprecated Will be removed in the next major version. */
.Dropdown--fullWidth {
width: 100%;
}

.Dropdown.is-open {
display: block;
}
Expand Down
Loading

0 comments on commit 609bfc3

Please sign in to comment.