Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dropdown & overflow-menu): possibility to overwrite the icons #667

Draft
wants to merge 11 commits into
base: main
Choose a base branch
from
Draft
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.
Loading