Skip to content

Commit 0d92145

Browse files
bennypowersNikki Massaro Kauffmannikkimkzeroedin
authored
feat: listbox elements (#2570)
* feat(dropdown): matched styling and demos to upstream * feat(dropdown): cleaned up docs * feat(dropdown): updated divider css * fix(dropdown): fixed aria-haspopus * feat(select): implements suggested update to SVG size Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com> * feat(dropdown): prop updated to match upstream api * Merge branch 'issue-2049' of github.com:patternfly/patternfly-elements into menu-dropdown-listbox * feat(chip): increased target size for a11y * feat(dropdown): increased target size for a11y * feat(select): increased target size for a11y * fix(select): fixed PfIcon import Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com> * fix(select): updated imports Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com> * fix(select): organized imports Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com> * fix(select): refactor of options list * docs(dropdown): updated separator in docs * feat(core): init toggle-controller * feat(dropdown): updated dropdown to use toggle controller * feat(select): updated dropdown to use toggle controller * feat(select): updated dropdown to use toggle controller * fix(chip): fixed issue with focusing on a chip that is removed * fix(core): fixed focus on toggle copntroller close * fix(dropdown): fixed focus issues with dropdown and tests * docs(dropdown): updated docs * docs(select): updated docs * docs(chip): updated docs * fix(core): Updated toggle-controller Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com> * fix(dropdown): Sorted the #private properties below the decorated Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com> * docs(core): Updated comment on toggle-controller Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com> * docs(core): Updated comment typo in toggle-controller Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com> * fix(select): implemented aria-disabled for a11y * fix(select): implemented aria-disabled for a11y * fix(select): implemented aria-disabled for a11y * fix(select): implemented aria-disabled for a11y * fix(dropdown): implemented aria-disabled for a11y * fix(core): rti updateItems to keep focus on activeItem or next item * fix(chip): fixed chip group keyboard nav and long chip vertical alignment * fix(dropdown): updated a11y keyboard navigation * feat(core): controller formatting * fix(chip): formatting * fix(dropdown): formatting * fix(select): formatting * feat(core): moved nav by first char form listbox controller to roving tabindex controller * Updated changeset rh-listbox-elements.md * Delete outdated .changeset/pf-dropdown.md * docs(dropdown): removed unused value property * fix(dropdown): updated test based on correct a11y * test(dropdown): fixed test * fix(core): fixes issue where tabindex is not updated when rti items are updated * fix(chip): removes chips without buttons from rti updates * fix(core): fixed issue with listbox controller preventing selection * fix(select): fixed issue with setting aria-disabled * docs(chip): added screenshot * docs(dropdown): updated screenshot * docs(select): updated screenshot * feat(core): updated toggle controler event handlers * fix(core): updating rti items should not set focus unless host already has focus * docs(chip): fixed typo in comment * test(chip): moved a11y test on its own * fix(select): chip group should not be removable * test(select): removed unneccesary waits * test(select): fixed tests * fix(select): fixes input toggling * fix(select): fixed typeahead toggle * refactor(core): rename internal type * feat(chip): updated changeset * feat(dropdown): updated changeset * feat(select): updated changeset and fixed API based on feedback * feat(core): updated changeset * fix(select): refactor aria-disabled * fix(select): refactored based on review, updated disabled and multiselectable * fix(core): moved order of event key handling in listbox-controller * Merge branch 'main' of github.com:patternfly/patternfly-elements into menu-dropdown-listbox * fix(core): refactored listbox-controller based on feedback * fix(core): updated listbox controller based on feedback * fix(core): updated toggle-controler based on feedback * fix(chip): updated chip, chip group and docs based * fix(chip): updated has-category * docs(chip): updated docs references to accessible instead of ARIA * fix(chip): removed overflow-hidden attribute from chip * fix(chip): updated chip events * fix(select): cleaned up properties and styles * fix(core): updated toggle controller to accept current id or generate one * fix(select): updated based on feedback * fix(core): toggle-controller updated random id assignmenrt * fix(select): updating select based on feedback * fix(select): fixes filtering * fix(select): updated API based on feedback * fix(select): removed unnecessary connected callback * fix(core): Updated .changeset/roving-tabindex-controller.md Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(chip): refactor of hiding overflow chips Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(chip): focus delegation * fix(dropdown): focus delegation * fix(core): made internals, rti, listbox and toggle controllers singletons * docs(chip): updated changeset * docs(dropdown): updated changeset * docs(select): updated changeset * docs(chip): made demo imports inline and split chip-group demos * docs(chip): removed wrapping div fromd emos * fix(chip): renamed closeLabel to accessibleCloseLabel * fix(popover): deprecating close-label and implementing accessible-close-label * fix(chip): made button private and fixed demos * fix(chip): removed composed from chip events * fix(chip): updated readonly property and cleaned up slot * fix(chip): updated tests * test(chip): updated chip-group test * test(chip): updated chip-group test Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * test(chip): updating chip tests * test(chip): updated tests * fix(dropdown): updated dropdown based on feedback * fix(dropdown): updated dropdown based on feedback * docs(dropdown): updated readme * fix(dropdown): refactoring to make us of intenrals if available * fix(select): working on using internals if available * fix(core): working on internals controller as a singleton * fix(core): updated because there can be more than one toggle controller * test(dropdown): updating tests * fix(core): ensure there is a role set on toggle * fix(dropdown): attempting to use internals when possible * test(dropdown): updated based on feeddback * fix(core): updated toggle controller to remove forcing a role * fix(dropdown): added missed import * test(dropdown): fixed tests * docs(select): split demos and inline scripts * fix(select): refactoring create option and updating checkbox attribute * docs(select): updated demos * fix(select): refactored create option * fix(select): updated disabled styling * Merge branch 'main' of github.com:patternfly/patternfly-elements into menu-dropdown-listbox * fix(select): resolved arrowDown toggling * fix(select): remove pf-select-list and pf-select-option to pf-listbox and pf-option * docs(chip): fixed typos * docs(dropdown): fixed typos * docs(dropdown): fixed typos * docs(core): fixed typos in listbox controller * docs(chip): fixed typos * docs(dropdown): wai-aria disabled complex components snippet * docs(select): wai-aria disabled complex components snippet * docs(select): updating formatting * feat(select): renaming option, listbox, and option group * fix(select): updated pf-listbox and controller * fix(core): removed unnecessary || undefined from tri's nextMatchingItem * test(chip): remove shadowRoot query in favor of a11y snapshot * fix(chip): fixed keyboard navigation * fix(chip): fixed focus issue when removing a chip * fix(chip): fixed keyboard navigation and updated tests * fix(popover): added changeset * test(chip): fixed describe messages * test(dropdown): fixed describe messages * test(chip): cleaned up chip descriptions * test(dropdown): cleaned up descriptions * test(select): cleaned up descriptions * docs(chip): updated demos * docs(dropdown): updated demos and docs * docs(select): updated demos * fix(chip): removed aria-labelled by on overflow chip * test(select): fixes tests * fix(chip): updated based on feedback and added more documentaiton * fix(core): updated toggle-controller based on feedback * fix(select): updated based on feedback * docs(chip): updated JSDoc for events * docs(select): updated JSDoc for events * docs: changeset * style: white space and import order * style(select): whitespace, template * fix(dropdown): formatting, event * fix(core): rti types * chore: build order * fix(core): internalscontroller aria mixin props * fix(core): make controllers framework-friendly * style(dropdown): whitespace * docs(chip): demos * fix(chip): events * refactor(chip): type names * fix(chip): updated overflow and label properties based on feedback * fix(chip): updated chip group * fix(core): removed this.host.expanded from toggle controller * fix(dropdown): removed unncessary `expanded` property * fix(dropdown): removed unncessary `expanded` property * chore: dev script * refactor(core): internals controller decorators * refactor(core): listbox controller filter decorator * fix(core): toggle controller widen type of host * refactor(chip): remove superfluous super call * chore: test:watch script * fix(core): initializers for listbox controller decorator * fix(core)!: private constructors for controllers * fix(chip): fix some chip styles Still lots of work to do here to align this with pfv4 * fix(chip): test and labels * test(chip): suite names * fix(chip): overflow text semantics * docs(core): inline docs * fix(core): aria element idl attrs * fix(dropdown): docs, fixes, demos * chore: dev script * fix(popover): deprecate attr with deco * fix(select): docs, refactors, fixes * chore: sync package lock * fix: revert dev command changes * fix(chip): now more overflow-chip styles not needed * fix: replace activedescendant with tabindex controller * refactor: rename internalscontroller static constructor * fix: lint and type errors * chore: update deps * fix: avoid ts meltdown * fix(core): types for Logger * fix: types for css files * fix: typescript stuff * chore: make lit/react a devDep * chore: wrangle package lock * test(select): normalize some tests * feat(chip): reverted from pf-button to button and updated styles * fix(chip): correcting non pfv4 tokens * fix(dropdown): correcting non pfv4 tokens * fix(select): correcting non pfv4 tokens * fix(select): correcting non pfv4 tokens * fix(select): use non dark version of token instead * fix(select): correct typo * refactor: remove ListboxControllerItem interface * test(select): fix more tests * fix(chip): updated target size to WCAG AA 24px * fix(select): fixed listbox selection * docs: changeset * Revert "fix(chip): updated target size to WCAG AA 24px" Unfortunately, we must ship styles that replicate pfv4. This should instead be reported as a bug on patternfly This reverts commit 26f6d32. * test(chip): fix most chip-group tests * fix(chip): overflow chip * fix(dropdown): template typo, tests * test(popover): fix units * test(select): update units * test(chip): update unit @nikkimk please validate and fix if necessary * fix(core): toggle controller imposes fewer opinions * style: remove comments * fix: pf tokens --------- Co-authored-by: Nikki Massaro Kauffman <nmassaro@redhat.com> Co-authored-by: Nikki Massaro Kauffman <5090492+nikkimk@users.noreply.github.com> Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com>
1 parent 16d0dd7 commit 0d92145

File tree

1,841 files changed

+10985
-2855
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

1,841 files changed

+10985
-2855
lines changed

.changeset/lazy-hounds-agree.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
"@patternfly/pfe-core": major
3+
---
4+
`InternalsController`: made the constructor private. Use `InternalsController.of`
5+
6+
BEFORE:
7+
```js
8+
class PfJazzHands extends LitElement {
9+
#internals = new InternalsController(this);
10+
}
11+
```
12+
13+
AFTER:
14+
```js
15+
class PfJazzHands extends LitElement {
16+
#internals = InternalsController.of(this);
17+
}
18+
```

.changeset/pf-chip.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
"@patternfly/elements": minor
3+
---
4+
5+
✨ Added `<pf-chip>`
6+
7+
A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.
8+
9+
```html
10+
<pf-chip-group>
11+
<pf-chip>Chip 1</pf-chip>
12+
<pf-chip>Chip 2</pf-chip>
13+
<pf-chip>Chip 3</pf-chip>
14+
<pf-chip>Chip 4</pf-chip>
15+
</pf-chip-group>
16+
```

.changeset/pf-dropdown.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
"@patternfly/elements": minor
3+
---
4+
5+
✨ Added `<pf-dropdown>`
6+
7+
A **dropdown** presents a menu of actions or links in a constrained space that will trigger a process or navigate to a new location.
8+
9+
```html
10+
<pf-dropdown>
11+
<pf-dropdown-item>item4</pf-dropdown-item>
12+
<div role="separator"></div>
13+
<pf-dropdown-group label="Group 1">
14+
<pf-dropdown-item>item1</pf-dropdown-item>
15+
<pf-dropdown-item>item2</pf-dropdown-item>
16+
<div role="separator"></div>
17+
<pf-dropdown-item>item3</pf-dropdown-item>
18+
</pf-dropdown-group>
19+
<pf-dropdown-group label="Group 2">
20+
<pf-dropdown-item>item1</pf-dropdown-item>
21+
<pf-dropdown-item>item2</pf-dropdown-item>
22+
</pf-dropdown-group>
23+
</pf-dropdown>
24+
```

.changeset/pf-select.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
"@patternfly/elements": minor
3+
---
4+
5+
✨ Added `<pf-select>`
6+
7+
A select list enables users to select one or more items from a list.
8+
9+
```html
10+
<pf-select>
11+
<pf-option>Blue</pf-option>
12+
<pf-option>Green</pf-option>
13+
<pf-option>Magenta</pf-option>
14+
<pf-option>Orange</pf-option>
15+
<pf-option>Purple</pf-option>
16+
<pf-option>Pink</pf-option>
17+
<pf-option>Red</pf-option>
18+
<pf-option>Yellow</pf-option>
19+
</pf-select>
20+
```

.changeset/polite-ducks-beg.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
"@patternfly/elements": patch
3+
---
4+
5+
`<pf-popover>`: deprecate `closeButtonLabel` property / `close-label` attribute in favor of `accessibleCloseLabel` property / `accessible-close-label` attribute
6+
7+
Before:
8+
```html
9+
<pf-popover close-label="סגירה">...</pf-popover>
10+
```
11+
12+
After:
13+
```html
14+
<pf-popover accessible-close-label="סגירה">...</pf-popover>
15+
```
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@patternfly/pfe-core": minor
3+
---
4+
5+
`RovingTabindexController`: keyboard navigation includes first-character navigation.

core/pfe-core/controllers/floating-dom-controller.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Placement } from '@floating-ui/dom';
2-
import type { ReactiveController, ReactiveElement } from 'lit';
2+
import type { ReactiveController, ReactiveControllerHost } from 'lit';
33
import type { StyleInfo } from 'lit/directives/style-map.js';
44
import type { OffsetOptions as Offset } from '@floating-ui/core';
55

@@ -46,7 +46,7 @@ export class FloatingDOMController implements ReactiveController {
4646
#alignment?: Alignment;
4747
#styles?: StyleInfo;
4848
#placement?: Placement;
49-
#options: Required<FloatingDOMControllerOptions>;
49+
#options: FloatingDOMControllerOptions;
5050

5151
get #invoker() {
5252
const { invoker } = this.#options;
@@ -95,13 +95,15 @@ export class FloatingDOMController implements ReactiveController {
9595
}
9696

9797
constructor(
98-
private host: ReactiveElement,
98+
private host: ReactiveControllerHost,
9999
options: FloatingDOMControllerOptions
100100
) {
101101
host.addController(this);
102-
this.#options = options as Required<FloatingDOMControllerOptions>;
103-
this.#options.invoker ??= host;
104-
this.#options.shift ??= true;
102+
this.#options = {
103+
invoker: (host instanceof HTMLElement ? () => host : () => undefined),
104+
shift: true,
105+
...options,
106+
};
105107
}
106108

107109
hostDisconnected() {

0 commit comments

Comments
 (0)