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

refactor: integrate datepicker with the internal dropdown #69

Merged
merged 10 commits into from
Dec 10, 2024
Merged

refactor: integrate datepicker with the internal dropdown #69

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5bd3dcf
refactor: integrate datepicker with the internal dropdown
sun-mota Nov 29, 2024
8177ec5
refactor: integrate dropdown for fullscreen mode
sun-mota Dec 6, 2024
22f23c3
perf: revert variable rendering logic for calendar
sun-mota Dec 9, 2024
d6077b6
fix: update dropdown's z-index and update select's height #98
sun-mota Dec 9, 2024
b6931bb
docs: remove some functions as those supposed to be private in docs
sun-mota Dec 10, 2024
dcb891d
refactor: remove toggleVisibility function and replace with visible v…
sun-mota Dec 10, 2024
22ad119
fix: specify select's height and remove hack for the bib's `z-index` #99
sun-mota Dec 10, 2024
21cf7e3
refactor: update design-token for bib's z-index
sun-mota Dec 10, 2024
911b1db
fix(docs): fix typo in Dialog example md
sun-mota Dec 10, 2024
b77abbc
docs: adding EOF extra lines
sun-mota Dec 10, 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
21 changes: 21 additions & 0 deletions components/combobox/apiExamples/inDialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@

<div>
<auro-button id="combobox-dialog-opener">Combobox in Dialog</auro-button>

<auro-dialog id="combobox-dialog">
<span slot="header">Combobox in Dialog</span>
<div slot="content">
<auro-combobox id="focusExample">
<span slot="label">Name</span>
<auro-menu>
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
<auro-menuoption static nomatch>No matching option</auro-menuoption>
</auro-menu>
</auro-combobox>
</div>
</auro-dialog>
</div>
6 changes: 6 additions & 0 deletions components/combobox/apiExamples/inDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export function inDialogExample() {
document.querySelector("#combobox-dialog-opener").addEventListener("click", () => {
const dialog = document.querySelector("#combobox-dialog");
dialog.open = true;
});
};
1 change: 1 addition & 0 deletions components/combobox/demo/api.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
<!-- If additional elements are needed for the demo, add them here. -->
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/dist/auro-dialog__bundled.js" type="module"></script>

<script type="module" data-demo-script="true">
import { initExamples } from "./api.min.js"
Expand Down
2 changes: 2 additions & 0 deletions components/combobox/demo/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { dynamicMenuExample } from '../apiExamples/dynamicMenu';
import { valueExample } from '../apiExamples/value';
import { focusExample } from '../apiExamples/focus';
import { inDialogExample } from '../apiExamples/inDialog.js';


import { AuroCombobox } from '../src/auro-combobox.js';
Expand All @@ -18,6 +19,7 @@ export function initExamples(initCount) {
dynamicMenuExample();
valueExample();
focusExample();
inDialogExample();
} catch (err) {
if (initCount <= 20) {
// setTimeout handles issue where content is sometimes loaded after the functions get called
Expand Down
69 changes: 69 additions & 0 deletions components/combobox/demo/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -672,3 +672,72 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### in Dialog

The component can be in a dialog

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inDialog.html) -->
<!-- The below content is automatically added from ./../apiExamples/inDialog.html -->
<div>
<auro-button id="combobox-dialog-opener">Combobox in Dialog</auro-button>
<auro-dialog id="combobox-dialog">
<span slot="header">Combobox in Dialog</span>
<div slot="content">
<auro-combobox id="focusExample">
<span slot="label">Name</span>
<auro-menu>
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
<auro-menuoption static nomatch>No matching option</auro-menuoption>
</auro-menu>
</auro-combobox>
</div>
</auro-dialog>
</div>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inDialog.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/inDialog.html -->

```html
<div>
<auro-button id="combobox-dialog-opener">Combobox in Dialog</auro-button>
<auro-dialog id="combobox-dialog">
<span slot="header">Combobox in Dialog</span>
<div slot="content">
<auro-combobox id="focusExample">
<span slot="label">Name</span>
<auro-menu>
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
<auro-menuoption static nomatch>No matching option</auro-menuoption>
</auro-menu>
</auro-combobox>
</div>
</auro-dialog>
</div>
```
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inDialog.js) -->
<!-- The below code snippet is automatically added from ./../apiExamples/inDialog.js -->

```js
export function inDialogExample() {
document.querySelector("#combobox-dialog-opener").addEventListener("click", () => {
const dialog = document.querySelector("#combobox-dialog");
dialog.open = true;
});
};
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
Loading
Loading