Skip to content
Draft
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion source/_patterns/02-components/dropdown/dropdown.hbs
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{{> components-overflow-menu patternName="cmp-dropdown" entry01="Profileinstellungen" entry02="Logout" }}
{{> components-overflow-menu patternName="cmp-dropdown" entry01="Profileinstellungen" entry02="Logout" icon=icon }}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"icon": "add"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Dropddown - Individual icon
state: inreview
order: 3
---

## Individual icon

By defining an `[data-icon]` on the included `summary` HTML tag, you could overwrite the included standard icon for the button to open the overflow menu.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{#if linkEntries }}<!-- [html-validate-disable-next prefer-native-element -- TODO: Evaluate again on this HTML] -->{{/if }}
<details class="{{#if patternName }}{{ patternName }}{{else}}cmp-overflow-menu{{/if }}{{ styleModifier }}"{{#if linkEntries }} role="navigation"{{/if }}{{#if oppositePosition}} data-horizontal-position="opposite"{{/if }}>
<summary>{{ summary }}</summary>
<summary{{#if icon}} data-icon="{{icon}}"{{/if }}>{{ summary }}</summary>
{{#if linkEntries }}<ul role="group">{{else}}<menu type="toolbar">{{/if }}
{{#if linkEntries }}
<li>{{> elements-link href="#" value=entry01 }}</li>
Expand Down
20 changes: 13 additions & 7 deletions source/_patterns/02-components/overflow-menu/overflow-menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,21 @@
}

summary {
@include icon(
$cmp-overflow-menu-icon,
20,
"outline",
$partial: $partial
);

display: inline-block;

&:not([data-icon]) {
@include icon(
$cmp-overflow-menu-icon,
20,
"outline",
$partial: $partial
);
}
// Possibility to define an individual icon
&[data-icon] {
@include icon("", 20, "outline", $partial: $partial);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ist it also possible to include a solid icon then?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good question.

}

&::before {
display: inline-block;
padding: to-rem($pxValue: 9) to-rem($pxValue: 12);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should open with "oppositeDirection" or have a "flex-end" to work like the default dropdown

image

"linkEntries": true,
"id": "menu05",
"icon": "add"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Overflow menu - Individual icon
state: inreview
order: 5
---

## Individual icon

By defining an `[data-icon]` on the included `summary` HTML tag, you could overwrite the included standard icon for the button to open the overflow menu.