Commit Graph
28 Commits
Author SHA1 Message Date
Gazook89 88720aadce add initial-value 2026-08-15 12:02:58 -05:00
Gazook89 5d67d48436 Add custom properties to dropdown.less
Adds registered custom properties to the dropdown menus, which can be set in another stylesheet at any level (either on the direct element or on an ancestor) or use the default values given.
2026-07-09 14:13:22 -05:00
Gazook89 c5db25f076 set a relative color on menu triggers when open 2026-07-08 23:36:08 -05:00
Gazook89 6f1ad35492 add aria labels to items 2026-07-08 23:35:45 -05:00
Gazook89 5c4d498a99 add contain: content
tiny change for tiny performance
2026-07-08 22:26:37 -05:00
Gazook89 2e3f69b478 Remove unnecessary styling on .menu-wrapper
The styling in the dropdown.less file targeting `.menu-wrapper` was not doing anything.  Double checked on old firefox, too, in case it was needed for oddbird polyfill.
2026-07-08 22:09:25 -05:00
Gazook89 8e720d1c60 Set html structure to ul/li. Set roles.
The snippets are a `menubar` in terms of role, and is a list of items (`menitem`, `li`).

Note for myself:  submenus are `menu` roles that immediately follow their triggering `menuitem` and are direct children of the parent `menu`, per WCAG.  This is done in this commit.
2026-07-08 22:06:00 -05:00
Gazook89 b791bcefdb revert the work done in earlier commit with anchor properties
revert commit 1fe19578c2 which changed `anchor()` values to `position-area`.

I'm not sure what compelled me to do that change initially, except the easier to understand syntax.  Hopefully it wasn't important.

But oddbird polyfill expects `anchor()` values, which it converts to pixel values for positioning.
2026-07-02 22:53:33 -05:00
Gazook89 1fe19578c2 change anchor method
This updates the position try results by using a different method of setting the area of the anchored element.  Rather than using the inset properties with `anchor()`, it uses `position-area`.
2026-06-10 16:28:34 -05:00
Gazook89 a3469a172a Move tests to tests/components directory 2026-05-29 15:58:00 -05:00
Gazook89 cf8f809eec Cleanup some loose ends. 2026-05-29 15:57:41 -05:00
Gazook89 fa07af2d82 Add tests for the Dropdown structure and behavior
Largely this is written by an LLM after I provided the targets, and I've looked through the tests themselves to confirm they are accurate.  There may be improvements in how to actually *set up* the tests, though, as I am less familiar with those.

This has two test suites:  the first for html structure, the second for behavior.  Each of them calls another script that provides helper functions for setting things up and taking them down.  This keeps the test suites themselves fairly lean.
2026-05-29 11:08:05 -05:00
Gazook89 f716c390b9 Add some defaults to dropdown 2026-05-29 10:54:58 -05:00
Gazook89 13196941eb popovertarget is typically not camelcase in html 2026-05-28 11:43:33 -05:00
Gazook89 3110d2cc69 Add icons to menu triggers
This fixes the odd alignments of menu-wrapper names by ensuring that both menuitems and menu-wrappers (actually their child triggers) both have space for icons.
2026-05-28 11:43:05 -05:00
Gazook89 2e4439c9f4 Remove ID collisions on repeated menu names
Add React `useId()` method, safely stripped of invalid characters for use in CSS/HTML, to make each trigger/menu unique to avoid collisions.
2026-05-28 11:41:27 -05:00
Gazook89 612614fa12 menu items dismiss menu on click by default
Unless a menu item has the `no-dismiss` attribute (set to either `''` or `'true'`), clicking a menu item will dismiss the menu.  Clicking a submenu trigger will not dismiss the menu.

The `no-dismiss` attribute must take a string, either empty or `'true'` because react doesn't allow boolean custom attributes.
2026-05-27 22:21:28 -05:00
Gazook89 d368e53b30 add some comments 2026-04-26 10:44:52 -05:00
Gazook89 5b11827c56 fix disabled attribute 2026-04-25 23:33:04 -05:00
Gazook89andCopilot d686c78fdf fix oddbird polyfill so custom properties are used correctly
Co-authored-by: Copilot <copilot@github.com>
2026-04-25 22:16:25 -05:00
Gazook89 359d87440b add oddbird polyfill - not quite working
Not quite working yet.  polyfill is loaded, but positioned elements are spanning whole viewport.  Parking this for now.
2026-04-24 22:06:52 -05:00
Gazook89 87ed5d107d add jsdoc documentation. 2026-04-24 20:32:05 -05:00
Gazook89 c0c4db95a4 remove id attribute from component 2026-04-24 10:19:16 -05:00
Gazook89 904b14af19 icons in triggers and menus are aligned. 2026-04-23 22:52:39 -05:00
Gazook89 992b72ee6f empty menus styled as disabled 2026-04-23 22:17:52 -05:00
Gazook89andCopilot 8bebbdac5d restore styling to work with new structure.
Co-authored-by: Copilot <copilot@github.com>
2026-04-23 22:10:51 -05:00
Gazook89 4f953da0fe caret menu indicators work, point correct direction 2026-04-23 10:54:27 -05:00
Gazook89andCopilot 2232d5265f Add basic nesting dropdown component
Co-authored-by: Copilot <copilot@github.com>
2026-04-23 10:21:52 -05:00