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.

Sign up for GitHub

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

Jump to bottom

feat: provide possibility to overwrite the standard icons #2129

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

feat: provide possibility to overwrite the standard icons #2129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1114786
feat: added possibility to define an individual icon
mfranzke Dec 6, 2023
119dd9d
feat: added possibility to define an individual icon
mfranzke Dec 6, 2023
024d671
Update db-overflow-menu.stories.mdx
mfranzke Dec 6, 2023
fc4c0ce
Update db-dropdown.stories.mdx
mfranzke Dec 6, 2023
05421ef
Merge branch 'main' into 2128-feat-provide-possibility-to-overwrite-t…
mfranzke Dec 15, 2023
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
9 changes: 8 additions & 1 deletion packages/db-ui-elements-stencil/src/components/db-dropdown/db-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ export class DbDropdown {
*/
@Prop({ reflect: true }) summary = '';

/**
* Define an icon by it's identifier (like e.g. _download_, compare to [DB UI Icons](https://db-ui.github.io/core/patterns/base-icons/index.html)) to get displayed in front of the elements content.
*/
@Prop({ reflect: true }) icon?: string;

private compData: DbLinkType[];

private hasItemsWrapper: boolean;
Expand Down Expand Up @@ -56,7 +61,9 @@ export class DbDropdown {
class="cmp-dropdown"
data-horizontal-position={this.opposite && 'opposite'}
>
<summary>{this.summary}</summary>
<summary>
{this.icon ? <db-icon icon={this.icon} /> : this.summary}
</summary>
{this.compData && (
<menu type="toolbar" innerHTML={getDefaultLinkData(this.compData)} />
)}
Expand Down
19 changes: 19 additions & 0 deletions ...-ui-elements-stencil/src/components/db-dropdown/stories/db-dropdown.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,23 @@ export type DbLinkType = {

</StyledCanvas>

<db-headline variant="2">dropdown with individual icon</db-headline>

If you'd like to define an [individual icon](https://db-ui.github.io/core/patterns/base-icons/index.html) for the button that toggles the `dropdown`, you could define it via the `icon`-attribute.

<Canvas>
<db-dropdown opposite icon="add">
<li>
<db-button title="Title text">
Modify
</db-button>
</li>
<li>
<db-button title="Title text">
Delete
</db-button>
</li>
</db-dropdown>
</Canvas>

<Readme />
9 changes: 8 additions & 1 deletion packages/db-ui-elements-stencil/src/components/db-overflow-menu/db-overflow-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ export class DbOverflowMenu {
*/
@Prop({ reflect: true }) summary = '';

/**
* Define an icon by it's identifier (like e.g. _download_, compare to [DB UI Icons](https://db-ui.github.io/core/patterns/base-icons/index.html)) to get displayed in front of the elements content.
*/
@Prop({ reflect: true }) icon?: string;

private compData: DbLinkType[];

private hasItemsWrapper: boolean;
Expand Down Expand Up @@ -56,7 +61,9 @@ export class DbOverflowMenu {
class="cmp-overflow-menu"
data-horizontal-position={this.opposite && 'opposite'}
>
<summary>{this.summary}</summary>
<summary>
{this.icon ? <db-icon icon={this.icon} /> : this.summary}
</summary>
{this.compData && (
<menu type="toolbar" innerHTML={getDefaultLinkData(this.compData)} />
)}
Expand Down
15 changes: 15 additions & 0 deletions ...ts-stencil/src/components/db-overflow-menu/stories/db-overflow-menu.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,21 @@ Only `<button>` and `<a>` HTML tags work as items content.
<db-overflow-menu data={mockData()} />
</Canvas>

<db-headline variant="2">overflow-menu with individual icon</db-headline>

If you'd like to define an [individual icon](https://db-ui.github.io/core/patterns/base-icons/index.html) for the button that toggles the `overflow-menu`, you could define it via the `icon`-attribute.

<Canvas>
<db-overflow-menu icon="add">
<li>
<db-button title="Title text">Modify</db-button>
</li>
<li>
<db-button title="Title text">Delete</db-button>
</li>
</db-overflow-menu>
</Canvas>


The data should be an object passed in with JSON.stringify()

Expand Down
Loading