Skip to content

Commit

Permalink
Merge pull request #511 from Infineon/398-design-review-component-dro…
Browse files Browse the repository at this point in the history 
…pdown-menu

Dropdown Menu: Updated in accordance with design review
  • Loading branch information
@verena-ifx
verena-ifx committed Sep 12, 2023
2 parents 1fe3d0f + 1ba46ab commit 1bef62c
Show file tree
Hide file tree
Showing 11 changed files with 77 additions and 75 deletions.
12 changes: 6 additions & 6 deletions examples/stencil-components/vanilla-cdn/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,14 +235,14 @@ <h2>Dropdown</h2>
dropdown
</ifx-dropdown-trigger-button>
<ifx-dropdown-menu size="l">
<ifx-dropdown-header>Header Text</ifx-dropdown-header>
<ifx-dropdown-header>Header Text</ifx-dropdown-header>
<ifx-search-field show-delete-icon="false"></ifx-search-field>
<ifx-dropdown-item target="_blank" href="https://www.google.de">First</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
<ifx-dropdown-separator></ifx-dropdown-separator>
<ifx-dropdown-item icon="calendar16">One</ifx-dropdown-item>
<ifx-dropdown-item>Two</ifx-dropdown-item>
<ifx-dropdown-item>Three</ifx-dropdown-item>
<ifx-dropdown-item>Four</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
</ifx-dropdown-menu>
</ifx-dropdown>
<br />
Expand Down
14 changes: 7 additions & 7 deletions examples/wrapper-components/react-javascript/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions examples/wrapper-components/react-javascript/src/components/Dropdown/Dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ function Dropdown() {
</IfxDropdownTriggerButton>
<IfxDropdownMenu size="l" onIfxDropdownMenu={handleValue}>
<IfxDropdownHeader>Header Text</IfxDropdownHeader>
<IfxDropdownItem target="_blank" href="https://www.google.de">lorem10</IfxDropdownItem>
<IfxDropdownItem>Menu Item</IfxDropdownItem>
<IfxDropdownSeparator></IfxDropdownSeparator>
<IfxDropdownItem icon="calendar16">Link Item</IfxDropdownItem>
<IfxDropdownItem>Menu Item lorem10</IfxDropdownItem>
<IfxDropdownItem>Menu Item</IfxDropdownItem>
<IfxDropdownItem>Menu Item</IfxDropdownItem>
</IfxDropdownMenu>
</IfxDropdown>
);
Expand Down
6 changes: 3 additions & 3 deletions examples/wrapper-components/react-typescript/src/components/Dropdown/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ function Dropdown() {
</IfxDropdownTriggerButton>
<IfxDropdownMenu size="l">
<IfxDropdownHeader>Header Text</IfxDropdownHeader>
<IfxDropdownItem target="_blank" href="https://www.google.de">lorem10</IfxDropdownItem>
<IfxDropdownItem>Menu Item</IfxDropdownItem>
<IfxDropdownSeparator></IfxDropdownSeparator>
<IfxDropdownItem icon="calendar16">Link Item</IfxDropdownItem>
<IfxDropdownItem>Menu Item lorem10</IfxDropdownItem>
<IfxDropdownItem>Menu Item</IfxDropdownItem>
<IfxDropdownItem>Menu Item</IfxDropdownItem>
</IfxDropdownMenu>
</IfxDropdown>
);
Expand Down
10 changes: 5 additions & 5 deletions examples/wrapper-components/vue-javascript/src/components/Dropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
<ifx-dropdown-menu size="l">
<ifx-dropdown-header>Header Text</ifx-dropdown-header>
<ifx-search-field show-delete-icon="false"></ifx-search-field>
<ifx-dropdown-item target="_blank" href="https://www.google.de">First</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
<ifx-dropdown-separator></ifx-dropdown-separator>
<ifx-dropdown-item icon="calendar16">One</ifx-dropdown-item>
<ifx-dropdown-item>Two</ifx-dropdown-item>
<ifx-dropdown-item>Three</ifx-dropdown-item>
<ifx-dropdown-item>Four</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
</ifx-dropdown-menu>
</ifx-dropdown>
</div>
Expand Down
16 changes: 10 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/components-vue/lib/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,8 +154,8 @@ export const IfxDropdownTrigger = /*@__PURE__*/ defineContainer<JSX.IfxDropdownT

export const IfxDropdownTriggerButton = /*@__PURE__*/ defineContainer<JSX.IfxDropdownTriggerButton>('ifx-dropdown-trigger-button', undefined, [
'isOpen',
'theme',
'variant',
'color',
'size',
'disabled',
'hideArrow'
Expand Down
7 changes: 4 additions & 3 deletions ...es/components/src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ import { IOpenable } from '../IOpenable';

export class DropdownItem implements IOpenable {
@Prop() isOpen: boolean = false;
@Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';
@Prop() color: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' = 'primary';

@Prop() theme: 'default' | 'danger' | 'inverse' = 'default';
@Prop() variant: 'primary';
@Prop() size: 's' | 'm' = 'm';
@Prop() disabled: boolean;
@Prop() hideArrow: boolean = false;
Expand All @@ -20,7 +21,7 @@ export class DropdownItem implements IOpenable {
return (
<ifx-button
variant={this.variant}
color={this.color}
theme={this.theme}
size={this.size}
disabled={this.disabled}
class="dropdown-trigger-button"
Expand Down
16 changes: 8 additions & 8 deletions packages/components/src/components/dropdown/dropdown-trigger-button/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ----------- | ---------------------------------------------------------------- | ----------- |
| `color` | `color` | | `"danger" \| "primary" \| "secondary" \| "success" \| "warning"` | `'primary'` |
| `disabled` | `disabled` | | `boolean` | `undefined` |
| `hideArrow` | `hide-arrow` | | `boolean` | `false` |
| `isOpen` | `is-open` | | `boolean` | `false` |
| `size` | `size` | | `"m" \| "s"` | `'m'` |
| `variant` | `variant` | | `"primary" \| "secondary" \| "tertiary"` | `'primary'` |
| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ----------- | ------------------------------------ | ----------- |
| `disabled` | `disabled` | | `boolean` | `undefined` |
| `hideArrow` | `hide-arrow` | | `boolean` | `false` |
| `isOpen` | `is-open` | | `boolean` | `false` |
| `size` | `size` | | `"m" \| "s"` | `'m'` |
| `theme` | `theme` | | `"danger" \| "default" \| "inverse"` | `'default'` |
| `variant` | `variant` | | `"primary"` | `undefined` |


## Dependencies
Expand Down
62 changes: 29 additions & 33 deletions packages/components/src/components/dropdown/dropdown.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,14 @@ export default {
label: "Dropdown",
size: "m",
disabled: false,
search: false,
header: false,
separator: false,
variant: "solid",
color: "primary",
url: "",
target: "_self",
icon: "c-check-16",
dropdownMenuItemIcon: false,
defaultOpen: false,
noCloseOnOutsideClick: false,
noCloseOnMenuClick: false,
Expand Down Expand Up @@ -50,11 +55,12 @@ export default {
options: ['primary', 'secondary', 'tertiary'],
control: { type: 'radio' },
},
color: {
description: 'The color scheme of the dropdown button. Accepted values are "primary", "secondary", "success", "danger", "warning"',
options: ['primary', 'secondary', 'success', 'danger', 'warning'],

target: {
options: ['_self', '_blank'],
control: { type: 'radio' },
},

icon: {
description: 'The icon to be displayed on the dropdown button',
options: Object.values(icons).map(i => i['name']),
Expand Down Expand Up @@ -87,29 +93,21 @@ export default {

const DefaultTemplate = (args) => {
const wrapper = document.createElement('div');
wrapper.innerHTML = `<ifx-dropdown
placement="${args.placement}"
${args.defaultOpen ? 'default-open' : ''}
${args.noCloseOnOutsideClick ? 'no-close-on-outside-click' : ''}
${args.noCloseOnMenuClick ? 'no-close-on-menu-click' : ''}
${args.disabled ? 'disabled' : ''}
${args.noAppendToBody ? 'no-append-to-body' : ''}
>
<ifx-dropdown-trigger-button
variant="${args.variant}"
color="${args.color}"
icon="${args.icon}"
type="${args.type}"
>${args.label}</ifx-dropdown-trigger-button>
<ifx-dropdown-menu size="${args.size}">
<ifx-dropdown-item target="_blank" href="https://www.google.de">Link Item</ifx-dropdown-item>
<ifx-dropdown-separator></ifx-dropdown-separator>
<ifx-dropdown-item href="javascript:void(0)">Console log from click event</ifx-dropdown-item>
<ifx-dropdown-item icon="c-check-16">Item with Icon</ifx-dropdown-item>
<ifx-dropdown-separator></ifx-dropdown-separator>
<ifx-dropdown-item>Boring Item</ifx-dropdown-item>
</ifx-dropdown-menu>
</ifx-dropdown>`;
wrapper.innerHTML = `<ifx-dropdown placement="bottom-start" no-close-on-menu-click="true">
<ifx-dropdown-trigger-button variant="${args.variant}">
dropdown
</ifx-dropdown-trigger-button>
<ifx-dropdown-menu size="${args.size}">
${args.header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ""}
${args.search ? `<ifx-search-field show-delete-icon="false"></ifx-search-field>` : ""}
<ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
<ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
<ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
<ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
${args.separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ""}
<ifx-dropdown-item icon="${args.dropdownMenuItemIcon ? 'c-info-16' : ""}" target="${args.target}" href="${args.url !== "" ? args.url : ""}">Menu Item</ifx-dropdown-item>
</ifx-dropdown-menu>
</ifx-dropdown>`;

const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;
const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
Expand Down Expand Up @@ -139,12 +137,10 @@ const LabelTriggerTemplate = (args) => {
</ifx-dropdown-trigger>
Some more text
<ifx-dropdown-menu>
<ifx-dropdown-item target="_blank" href="https://www.google.de">Link Item</ifx-dropdown-item>
<ifx-dropdown-separator></ifx-dropdown-separator>
<ifx-dropdown-item href="javascript:void(0)">Console log from click event</ifx-dropdown-item>
<ifx-dropdown-item icon="c-check-16">Item with Icon</ifx-dropdown-item>
<ifx-dropdown-separator></ifx-dropdown-separator>
<ifx-dropdown-item>Boring Item</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
<ifx-dropdown-item>Menu Item</ifx-dropdown-item>
</ifx-dropdown-menu>
</ifx-dropdown>`;

Expand Down
1 change: 1 addition & 0 deletions packages/components/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
</head>

<body>



</body>
Expand Down

0 comments on commit 1bef62c

Please sign in to comment.