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

Modus dropdown : Updated the Modus dropdown list UI #2749

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Modus dropdown : Updated the Modus dropdown list UI #2749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 2 additions & 0 deletions stencil-workspace/src/components/modus-dropdown/modus-dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
.dropdown-list {
border-collapse: collapse;
border-radius: $rem-4px;
box-shadow: 0 0 4px 0 rgba(54, 53, 69, 0.3);
display: none;
margin-top: 4px;
max-height: 200px;
max-width: 300px;
opacity: 1;
Expand Down
2 changes: 1 addition & 1 deletion stencil-workspace/src/components/modus-dropdown/modus-dropdown.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ describe('modus-dropdown', () => {
<mock:shadow-root>
<div class="dropdown">
<slot name='dropdownToggle'></slot>
<div class='bottom dropdown-list hidden list-border' style='left: unset; min-width: 0px;'>
<div class='bottom dropdown-list hidden list-border' style='left: unset; min-width: 240px;'>
<slot name='dropdownList'></slot>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion stencil-workspace/src/components/modus-dropdown/modus-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export class ModusDropdown {
this.showDropdownListBorder ? 'list-border' : ''
} ${this.animateList ? 'animate-list' : ''} ${this.classByPlacement.get(this.placement)}`;
const left = this.placement === 'right' ? `${this.toggleElement?.offsetWidth}px` : 'unset';
const width = `${this.toggleElement?.offsetWidth ? this.toggleElement?.offsetWidth : 0}px`;
const width = `${(this.toggleElement?.offsetWidth || 0) < 240 ? 240 : this.toggleElement?.offsetWidth ? this.toggleElement?.offsetWidth : 0}px`;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

As per modus UI, Apply the minimum width 240px.

const dropdownClass = {
dropdown: true,
disabled: this.disabled,
Expand Down
4 changes: 4 additions & 0 deletions stencil-workspace/src/components/modus-list-item/modus-list-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@ li {
fill: $modus-list-item-color;
}

&.radiusless {
border-radius: 0;
}

&.small {
gap: $rem-10px;
min-height: $rem-32px;
Expand Down
5 changes: 4 additions & 1 deletion stencil-workspace/src/components/modus-list-item/modus-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ export class ModusListItem {
/** An event that fires on list item click */
@Event() itemClick: EventEmitter;

/** (optional) Whether the list item has a radius or not */
@Prop() radiusless: boolean;

listItemRef: HTMLLIElement;

@Method()
Expand All @@ -58,7 +61,7 @@ export class ModusListItem {
render(): unknown {
const containerClass = `${this.classBySize.get(this.size)} ${this.disabled ? 'disabled' : ''} ${
this.selected ? 'selected' : ''
} ${this.borderless ? 'borderless' : ''}`;
} ${this.borderless ? 'borderless' : ''} ${this.radiusless ? 'radiusless' : ''}`;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added a new prop to make list border less.

const iconCheckSize = this.size === 'condensed' ? '16' : '24';

return (
Expand Down
1 change: 1 addition & 0 deletions stencil-workspace/src/components/modus-list-item/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
| `borderless` | `borderless` | (optional) Whether the list item has a border or not | `boolean` | `undefined` |
| `disabled` | `disabled` | (optional) Disables the list item | `boolean` | `undefined` |
| `leftIcon` | `left-icon` | (optional) Takes the icon name and shows the icon aligned to the left of the button text. | `string` | `undefined` |
| `radiusless` | `radiusless` | (optional) Whether the list item has a radius or not | `boolean` | `undefined` |
| `selected` | `selected` | (optional) The selected state of the list item | `boolean` | `undefined` |
| `size` | `size` | (optional) The size of list item | `"condensed" \| "large" \| "standard"` | `'standard'` |
| `subText` | `sub-text` | (optional) Whether to show Subtext below the Slot content or not | `string` | `undefined` |
Expand Down
17 changes: 8 additions & 9 deletions ...workspace/storybook/stories/components/modus-list/modus-list-storybook-docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,23 +25,21 @@ The `<modus-list-item>` utilizes the slot element, allowing you to render your o
<modus-list-item selected size="large">
Large & Selected
</modus-list-item>
<modus-list-item borderless>
Borderless
</modus-list-item>
<modus-list-item borderless>Borderless</modus-list-item>
<modus-list-item radiusless>Radiusless</modus-list-item>
</modus-list>

```html
<modus-list>
<modus-list-item size="condensed">Condensed</modus-list-item>
<modus-list-item selected size="condensed"
>Condensed & Selected</modus-list-item
>
<modus-list-item selected size="condensed">Condensed & Selected</modus-list-item>
<modus-list-item wrap-sub-text="true" sub-text="default">Default</modus-list-item>
<modus-list-item selected>Selected</modus-list-item>
<modus-list-item disabled>Disabled</modus-list-item>
<modus-list-item size="large">Large</modus-list-item>
<modus-list-item selected size="large">Large & Selected</modus-list-item>
<modus-list-item borderless>Borderless</modus-list-item>
<modus-list-item radiusless>Radiusless</modus-list-item>
</modus-list>
```

Expand All @@ -53,6 +51,7 @@ The `<modus-list-item>` utilizes the slot element, allowing you to render your o
| ------------- | --------------- | ---------------------------------------------------------------- | -------------------------------------- | ------------ |
| `borderless` | `borderless` | (optional) Whether the list item has a border or not | `boolean` | `undefined` |
| `disabled` | `disabled` | (optional) Disables the list item | `boolean` | `undefined` |
| `radiusless` | `radiusless` | (optional) Whether the list item has a radius or not | `boolean` | `undefined` |
| `selected` | `selected` | (optional) The selected state of the list item | `boolean` | `undefined` |
| `size` | `size` | (optional) The size of list item | `"condensed" \| "large" \| "standard"` | `'standard'` |
| `subText` | `sub-text` | (optional) Whether to show Subtext below the Slot content or not | `string` | `undefined` |
Expand All @@ -71,9 +70,9 @@ The `<modus-list-item>` utilizes the slot element, allowing you to render your o

##### Modus List Item

| Method name | Description | Parameter | Return |
| ------------ | ------------------------------- | ------------------ | ----------------- | ----- |
| `focusItem` | Focus the list item | `Promise<void>` | `Promise<void>` |
| Method name | Description | Parameter | Return |
| ----------- | ------------------- | --------------- | --------------- |
| `focusItem` | Focus the list item | `Promise<void>` | `Promise<void>` |

### Shadow Parts

Expand Down