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): add new side & align possibilities #48

Merged
merged 1 commit into from
Sep 28, 2024
Merged
Show file tree
Hide file tree
Changes from all 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
1 change: 1 addition & 0 deletions biome.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"rules": {
"recommended": true,
"suspicious": {
"noAssignInExpressions": "off",
"noEmptyBlock": "error",
"noExplicitAny": "off",
"noConfusingVoidType": "off",
Expand Down
6 changes: 3 additions & 3 deletions packages/core/api.txt
Original file line number Diff line number Diff line change
Expand Up @@ -116,11 +116,11 @@ pop-drawer,part,backdrop
pop-drawer,part,side

pop-dropdown,shadow
pop-dropdown,prop,align,"end" | "start",undefined,false,true
pop-dropdown,prop,debounce,number,100,false,false
pop-dropdown,prop,align,"center" | "end" | "start",undefined,false,true
pop-dropdown,prop,debounce,number,undefined,false,false
pop-dropdown,prop,open,boolean,undefined,false,true
pop-dropdown,prop,showBackdrop,boolean,undefined,false,true
pop-dropdown,prop,side,"bottom" | "left" | "right" | "top",undefined,false,true
pop-dropdown,prop,side,"bottom" | "end" | "left" | "right" | "start" | "top",undefined,false,true
pop-dropdown,prop,triggerAction,"click" | "context-menu" | "hover",undefined,false,false
pop-dropdown,method,dismiss,dismiss() => Promise<boolean>
pop-dropdown,method,present,present() => Promise<boolean>
Expand Down
3 changes: 3 additions & 0 deletions packages/core/src/components-config.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,8 @@ export namespace Configuration {
'pop-dropdown'?: {
/**
* Describe where the content is displayed relatively to the trigger element
* - `"start"`: Open on the left in LTR and to the right in RTL.
* - `"end"`: Open on the right in LTR and to the left in RTL.
* - `"left"`: Open on left
* - `"right"`: Open on right
* - `"top"`: Open on top
Expand All @@ -225,6 +227,7 @@ export namespace Configuration {
/**
* Describes how the dropdown has to be alined
* - `"start"`: Align to the left in LTR and to the right in RTL.
* - `"center"`: Align to the left in LTR and to the right in RTL.
* - `"end"`: Align to the right in LTR and to the left in RTL.
* @default "start"
*/
Expand Down
8 changes: 4 additions & 4 deletions packages/core/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,7 @@ export namespace Components {
*/
interface PopDropdown {
/**
* Describes how the dropdown has to be alined - `"start"`: Align to the left in LTR and to the right in RTL. - `"end"`: Align to the right in LTR and to the left in RTL.
* Describes how the dropdown has to be alined - `"start"`: Align to the left in LTR and to the right in RTL. - `"center"`: Align to the left in LTR and to the right in RTL. - `"end"`: Align to the right in LTR and to the left in RTL.
* @config
* @default "start"
*/
Expand Down Expand Up @@ -379,7 +379,7 @@ export namespace Components {
*/
"showBackdrop"?: boolean;
/**
* Describe where the content is displayed relatively to the trigger element - `"left"`: Open on left - `"right"`: Open on right - `"top"`: Open on top - `"bottom"`: Open on bottom
* Describe where the content is displayed relatively to the trigger element - `"start"`: Open on the left in LTR and to the right in RTL. - `"end"`: Open on the right in LTR and to the left in RTL. - `"left"`: Open on left - `"right"`: Open on right - `"top"`: Open on top - `"bottom"`: Open on bottom
* @config
* @default "bottom"
*/
Expand Down Expand Up @@ -2309,7 +2309,7 @@ declare namespace LocalJSX {
*/
interface PopDropdown {
/**
* Describes how the dropdown has to be alined - `"start"`: Align to the left in LTR and to the right in RTL. - `"end"`: Align to the right in LTR and to the left in RTL.
* Describes how the dropdown has to be alined - `"start"`: Align to the left in LTR and to the right in RTL. - `"center"`: Align to the left in LTR and to the right in RTL. - `"end"`: Align to the right in LTR and to the left in RTL.
* @config
* @default "start"
*/
Expand Down Expand Up @@ -2341,7 +2341,7 @@ declare namespace LocalJSX {
*/
"showBackdrop"?: boolean;
/**
* Describe where the content is displayed relatively to the trigger element - `"left"`: Open on left - `"right"`: Open on right - `"top"`: Open on top - `"bottom"`: Open on bottom
* Describe where the content is displayed relatively to the trigger element - `"start"`: Open on the left in LTR and to the right in RTL. - `"end"`: Open on the right in LTR and to the left in RTL. - `"left"`: Open on left - `"right"`: Open on right - `"top"`: Open on top - `"bottom"`: Open on bottom
* @config
* @default "bottom"
*/
Expand Down
35 changes: 28 additions & 7 deletions packages/core/src/components/dropdown/dropdown.scss
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,14 @@
// Dropdown Placement
// ----------------------------------------------------------------

:host(:is([side="bottom"], [side="top"])[align="center"]) .dropdown-content {
inset-inline-end: 50%;
transform: translateX(50%);
}
:host(:is([side="bottom"], [side="top"])[align="center"].dropdown-rtl) .dropdown-content {
transform: translateX(-50%);
}

:host([side="bottom"][align="end"]) .dropdown-content {
inset-inline-end: 0;
}
Expand All @@ -93,26 +101,39 @@
inset-inline-end: 0;
}

:host([side="left"]) .dropdown-content {
:host(:is([side="left"], [side="start"])) .dropdown-content {
top: 0;
bottom: auto;
}
:host([side="start"]) .dropdown-content {
inset-inline-end: 100%;
}
:host([side="left"][align="end"]) .dropdown-content {
top: auto;
bottom: 0;
:host([side="left"]) .dropdown-content {
right: 100%;
}

:host([side="right"]) .dropdown-content {
:host(:is([side="start"], [side="left"], [side="right"], [side="end"])[align="center"]) .dropdown-content {
top: 50%;
transform: translateY(-50%);
}


:host(:is([side="right"], [side="end"])) .dropdown-content {
top: 0;
bottom: auto;
inset-inline-start: 100%;
}
:host([side="right"][align="end"]) .dropdown-content {
:host(:is([side="left"], [side="start"], [side="right"], [side="end"])[align="end"]) .dropdown-content {
top: auto;
bottom: 0;
}

:host([side="right"]) .dropdown-content {
left: 100%;
}
:host([side="end"]) .dropdown-content {
inset-inline-start: 100%;
}

@keyframes present {
from {
scale: 0.95;
Expand Down
10 changes: 9 additions & 1 deletion packages/core/src/components/dropdown/dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
import { Show } from '../Show';
import type { DropdownAlign, DropdownSide } from './dropdown.type';
import { SPACE, ENTER } from 'key-definitions';
import { isRTL } from '#utils/dir';

/**
* Dropdown can open a menu or any other element when the trigger element is clicked.
Expand All @@ -42,6 +43,8 @@ export class Dropdown implements ComponentInterface, OverlayInterface {

/**
* Describe where the content is displayed relatively to the trigger element
* - `"start"`: Open on the left in LTR and to the right in RTL.
* - `"end"`: Open on the right in LTR and to the left in RTL.
* - `"left"`: Open on left
* - `"right"`: Open on right
* - `"top"`: Open on top
Expand All @@ -55,6 +58,7 @@ export class Dropdown implements ComponentInterface, OverlayInterface {
/**
* Describes how the dropdown has to be alined
* - `"start"`: Align to the left in LTR and to the right in RTL.
* - `"center"`: Align to the left in LTR and to the right in RTL.
* - `"end"`: Align to the right in LTR and to the left in RTL.
*
* @config
Expand Down Expand Up @@ -208,7 +212,11 @@ export class Dropdown implements ComponentInterface, OverlayInterface {

render() {
return (
<Host>
<Host
class={{
'dropdown-rtl': isRTL(this),
}}
>
<details
part="dropdown"
class="dropdown"
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/dropdown/dropdown.type.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export type DropdownSide = 'left' | 'right' | 'top' | 'bottom';
export type DropdownAlign = 'start' | 'end';
export type DropdownSide = 'start' | 'left' | 'end' | 'right' | 'top' | 'bottom';
export type DropdownAlign = 'start' | 'center' | 'end';
16 changes: 8 additions & 8 deletions packages/core/src/components/dropdown/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ Dropdown can open a menu or any other element when the trigger element is clicke

## Properties

| Property | Attribute | Description | Type | Default |
| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------- |
| `align` | `align` | Describes how the dropdown has to be alined<br> - `"start"`: Align to the left in LTR and to the right in RTL.<br> - `"end"`: Align to the right in LTR and to the left in RTL. | `"end" \| "start"` | `"start"` |
| `debounce` | `debounce` | Set the amount of time, in milliseconds after the user no longer hover the trigger or dropdown, will dismiss.<br> Only apply on `triggerAction=hover` | `number` | `100` |
| `open` | `open` | Force the dropdown to be shown | `boolean` | `false` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal.<br> This property controls whether or not the backdrop<br> darkens the screen when the modal is presented. | `boolean` | `false` |
| `side` | `side` | Describe where the content is displayed relatively to the trigger element<br> - `"left"`: Open on left<br> - `"right"`: Open on right<br> - `"top"`: Open on top<br> - `"bottom"`: Open on bottom | `"bottom" \| "left" \| "right" \| "top"` | `"bottom"` |
| `triggerAction` | `trigger-action` | Describes what kind of intertion with the trigger (sloted element) that should cause the dropdown to open.<br> - `"click"`: the dropdown will be presented when the trigger is left clicked.<br> - `"hover"`: the dropdown will be presented when a pointer hovers over the trigger.<br> - `"context-menu"`: the dropdown will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing. | `"click" \| "context-menu" \| "hover"` | `"click"` |
| Property | Attribute | Description | Type | Default |
| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ---------- |
| `align` | `align` | Describes how the dropdown has to be alined<br> - `"start"`: Align to the left in LTR and to the right in RTL.<br> - `"center"`: Align to the left in LTR and to the right in RTL.<br> - `"end"`: Align to the right in LTR and to the left in RTL. | `"center" \| "end" \| "start"` | `"start"` |
| `debounce` | `debounce` | Set the amount of time, in milliseconds after the user no longer hover the trigger or dropdown, will dismiss.<br> Only apply on `triggerAction=hover` | `number` | `100` |
| `open` | `open` | Force the dropdown to be shown | `boolean` | `false` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal.<br> This property controls whether or not the backdrop<br> darkens the screen when the modal is presented. | `boolean` | `false` |
| `side` | `side` | Describe where the content is displayed relatively to the trigger element<br> - `"start"`: Open on the left in LTR and to the right in RTL.<br> - `"end"`: Open on the right in LTR and to the left in RTL.<br> - `"left"`: Open on left<br> - `"right"`: Open on right<br> - `"top"`: Open on top<br> - `"bottom"`: Open on bottom | `"bottom" \| "end" \| "left" \| "right" \| "start" \| "top"` | `"bottom"` |
| `triggerAction` | `trigger-action` | Describes what kind of intertion with the trigger (sloted element) that should cause the dropdown to open.<br> - `"click"`: the dropdown will be presented when the trigger is left clicked.<br> - `"hover"`: the dropdown will be presented when a pointer hovers over the trigger.<br> - `"context-menu"`: the dropdown will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing. | `"click" \| "context-menu" \| "hover"` | `"click"` |


## Events
Expand Down
Loading
Loading