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

add a feature for dropdown to stretch out to fullscreen on mobile #65

Merged
merged 16 commits into from
Dec 4, 2024
Merged

add a feature for dropdown to stretch out to fullscreen on mobile #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
2882ce1
feat: open bib fullscreen on mobile view #55
sun-mota Nov 22, 2024
31543fd
feat: add `noFullscreenOnMobile` attribute
sun-mota Nov 25, 2024
77abbb7
feat: add `bibSizer` to help sizing `bibContainer` with css style
sun-mota Nov 25, 2024
9b0c2b6
feat: add `mobileFullscreenBreakpoint` instead of `noFullscreenOnMobile`
sun-mota Nov 27, 2024
a01e883
ci: add a script to extract breakpoint value in js
sun-mota Nov 27, 2024
fd3228c
perf: simplify logic of resetting bib's size on fullscreen mode
sun-mota Nov 27, 2024
8aa86a8
refactor: rename `bibSizer` for part to `bib` for easier understandin…
sun-mota Nov 27, 2024
dc9532e
docs: update fullscreen mode desciption on docs
sun-mota Dec 2, 2024
fb1a4bb
refactor: full breakpoint's value from the loaded style in `documentE…
sun-mota Dec 2, 2024
1f95984
refactor: extract positioning strategy logic into a separate method t…
sun-mota Dec 2, 2024
70deb79
refactor: move validation of breakpoint into bib
sun-mota Dec 2, 2024
da99d01
refactor: rename `bib` part to `size` part
sun-mota Dec 2, 2024
5fc375a
perf: move `.container` our of `:host`
sun-mota Dec 2, 2024
2e7afed
refactor: fix for better readability
sun-mota Dec 3, 2024
4f3807b
refactor: add some refactoring related to JSDoc
sun-mota Dec 3, 2024
faa6005
fix: add back `document.body.append` for the floating bib
sun-mota Dec 3, 2024
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
208 changes: 168 additions & 40 deletions components/combobox/demo/api.min.js
View file
Open in desktop

Large diffs are not rendered by default.

208 changes: 168 additions & 40 deletions components/combobox/demo/index.min.js
View file
Open in desktop

Large diffs are not rendered by default.

228 changes: 178 additions & 50 deletions components/datepicker/demo/api.min.js
View file
Open in desktop

Large diffs are not rendered by default.

228 changes: 178 additions & 50 deletions components/datepicker/demo/index.min.js
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 7 additions & 1 deletion components/dropdown/apiExamples/customDimensions100.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
<style>
#customDropdown100::part(size) {
width: 100px;
max-height: 200px;
}
</style>
<div style="width: 100px;" aria-label="custom label">
<auro-dropdown inset bordered rounded chevron>
<div style="width: 100px; max-height: 200px; overflow: scroll;">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
Expand Down
10 changes: 8 additions & 2 deletions components/dropdown/apiExamples/customDimensions300.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
<style>
#customDropdown300::part(size) {
width: 300px;
max-height: 200px;
}
</style>
<div style="width: 300px;" aria-label="custom label">
<auro-dropdown inset bordered rounded chevron>
<div style="width: 300px; max-height: 200px; overflow: scroll;">
<auro-dropdown id="customDropdown300" inset bordered rounded chevron mobileFullscreenBreakpoint="sm">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
Expand Down
151 changes: 92 additions & 59 deletions components/dropdown/demo/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -632,6 +632,74 @@ In cases where it is desired behavior for `auro-dropdown` to only show, not togg
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### mobileFullscreenBreakpoint

On mobile view, adding the `mobileFullscreenBreakpoint="{breakpoint-token}"` will switch the dropdown to fullscreen mode.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customDimensions300.html) -->
<!-- The below content is automatically added from ./../../apiExamples/customDimensions300.html -->

<style>
#customDropdown300::part(size) {
width: 300px;
max-height: 200px;
}
</style>
<div style="width: 300px;" aria-label="custom label">
<auro-dropdown id="customDropdown300" inset bordered rounded chevron mobileFullscreenBreakpoint="sm">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div slot="trigger">
Trigger
</div>
</auro-dropdown>
</div>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customDimensions300.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/customDimensions300.html -->

```html
<style>
#customDropdown300::part(size) {
width: 300px;
max-height: 200px;
}
</style>
<div style="width: 300px;" aria-label="custom label">
<auro-dropdown id="customDropdown300" inset bordered rounded chevron mobileFullscreenBreakpoint="sm">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div slot="trigger">
Trigger
</div>
</auro-dropdown>
</div>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

### Slot Examples

#### trigger & default
Expand Down Expand Up @@ -876,19 +944,29 @@ This example demonstrations collapsing the dropdown by clicking a button within

#### Width and Sizing Behavior

##### Width
`auro-dropdown` will consume all available width of the parent container. `auro-dropdown` can be made narrower by wrapping it in a container of the desired width.
- **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `size` part.

- **Styling Options:** Only the following styles can be applied to the `size` part:
- `width`
- `height`
- `maxWidth`
- `maxHeight`

##### Dropdown Content Sizing
If the dropdown's content size should not exceed a certain height, you can control it using CSS. Add a `max-height` property and set `overflow: scroll` to enable scrollability for content that exceeds the specified height.
- **Scroll Behavior:** When the content exceeds the specified size, the browser will provide a scroll for the overflow.


<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customDimensions100.html) -->
<!-- The below content is automatically added from ./../../apiExamples/customDimensions100.html -->
<style>
#customDropdown100::part(size) {
width: 100px;
max-height: 200px;
}
</style>
<div style="width: 100px;" aria-label="custom label">
<auro-dropdown inset bordered rounded chevron>
<div style="width: 100px; max-height: 200px; overflow: scroll;">
<auro-dropdown id="customDropdown100" inset bordered rounded chevron>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
Expand All @@ -912,60 +990,15 @@ If the dropdown's content size should not exceed a certain height, you can contr
<!-- The below code snippet is automatically added from ./../../apiExamples/customDimensions100.html -->

```html
<style>
#customDropdown100::part(size) {
width: 100px;
max-height: 200px;
}
</style>
<div style="width: 100px;" aria-label="custom label">
<auro-dropdown inset bordered rounded chevron>
<div style="width: 100px; max-height: 200px; overflow: scroll;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div slot="trigger">
Trigger
</div>
</auro-dropdown>
</div>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customDimensions300.html) -->
<!-- The below content is automatically added from ./../../apiExamples/customDimensions300.html -->
<div style="width: 300px;" aria-label="custom label">
<auro-dropdown inset bordered rounded chevron>
<div style="width: 300px; max-height: 200px; overflow: scroll;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div slot="trigger">
Trigger
</div>
</auro-dropdown>
</div>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customDimensions300.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/customDimensions300.html -->

```html
<div style="width: 300px;" aria-label="custom label">
<auro-dropdown inset bordered rounded chevron>
<div style="width: 300px; max-height: 200px; overflow: scroll;">
<auro-dropdown id="customDropdown100" inset bordered rounded chevron>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
Expand Down
Loading
Loading