Grab bag #963

clintcs · 2025-07-10T14:33:52Z

🚀 Description

Patch

Input now passes aria-controls, aria-expanded, and aria-haspopup down to its underlying input field.

Tooltip can now be stopped from opening and closing by canceling "mouseover" and "mouseout" events on its target.

The first change is to support Input as Menu's target, which will enable Menu filtering. The second is so Menu can stop Tooltip from opening when the target of a sub-Menu is hovered. Also made a handful of other tweaks.

📋 Checklist

I have followed the Contributing Guidelines.
I have added tests to cover new or updated functionality.
I have added or updated Storybook stories.
I have localized new strings.
I have followed the ARIA Authoring Practices Guide or met with the Accessibility Team.
I have included a changeset.
I have scheduled a design review.
I have reviewed the Storybook and Visual Test Report links below.

🔬 Testing

Input now passes `aria-controls`, `aria-expanded`, and `aria-haspopup` down to its underlying input field

Not much to test. Code review should suffice.

Tooltip can now be stopped from opening and closing by canceling "mouseover" and "mouseout" events on its target

Navigate to Tooltip in Storybook.
Add an event listener to Tooltip's target that cancels "mouseover".
Add an event listener to Tooltip's target that cancels "mouseout".
Hover Tooltip's target.
Verify Tooltip remains closed.
Set Tooltip's open attribute to true.
Hover to and then away from Tooltip's target.
Verify Tooltip remains open.

changeset-bot · 2025-07-10T14:33:56Z

🦋 Changeset detected

Latest commit: 4f71b1f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@crowdstrike/glide-core	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

clintcs · 2025-07-10T14:46:50Z

src/icons/storybook.ts

  'arrow-left': svg`
    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
  `,
+  'three-dots': svg`


This will be used in Menu's story. It's not strictly necessary to add it now. But I wanted to reduce the size of my upcoming Menu PR as much as possible—because it'll be a big one.

clintcs · 2025-07-10T14:47:32Z

src/split-button.secondary-button.styles.ts

  `,
  css`
-    .component {
+    .button {


Not the top-level tag, so I renamed it.

clintcs · 2025-07-10T14:48:21Z

src/tooltip.test.interactions.ts

  ).to.be.true;
 });

-it('remains closed on hover when disabled', async () => {


clintcs · 2025-07-10T14:51:29Z

src/tooltip.ts

        data-test="component"
-        @mouseover=${this.#onComponentMouseover}
-        @mouseout=${this.#onComponentMouseout}
+        @mouseover=${this.#onComponentMouseOver}


Camel-cased these to match the other event handlers in this component.

clintcs · 2025-07-10T14:53:12Z

web-test-runner.config.js

-  // 30 seconds or so when Dropdown is moved out of the repository.
-  testsFinishTimeout: process.env.CI ? 90_000 : 60_000,
+  // won't finish. 2 minutes is the default.
+  testsFinishTimeout: process.env.CI ? 120_000 : 60_000,


Menu's interactions test suite will be mostly boilerplate but will be massive, and it takes some time to run. It's not strictly necessary to add this now. But, again, I wanted to reduce the size of my upcoming Menu PR as much as possible.

clintcs · 2025-07-10T14:55:40Z

src/dropdown.option.ts

-                @type {Element}
-              -->
-            </slot>
+            <div


Not sure how the indentation got out of whack. Linter out to lunch.

clintcs · 2025-07-10T14:57:38Z

src/input.ts

+            aria-haspopup=${ifDefined(this.ariaHasPopup ?? undefined)}
            aria-invalid=${this.#isShowValidationFeedback ||
            this.#isMaxCharacterCountExceeded}
+            autocapitalize=${this.autocapitalize}


Just some sorting.

clintcs · 2025-07-10T15:26:51Z

src/tooltip.test.interactions.ts

+  expect(tooltip.checkVisibility()).to.be.true;
 });

-it('closes on "blur"', async () => {


clintcs · 2025-07-10T15:27:27Z

src/tooltip.test.interactions.ts

+  await hover(target);
+  await aTimeout(0); // Wait for Floating UI and `#onComponentMouseOver()`

-it('closes on Escape', async () => {


Moved this test below next to "closes when hovered away from".

ynotdraw · 2025-07-10T19:18:34Z

.changeset/proud-worms-design.md

+'@crowdstrike/glide-core': patch
+---
+
+- Input now passes `aria-controls`, `aria-expanded`, and `aria-haspopup` down to its underlying input field.


Super nit, but the downside to starting out with a bullet point is the release note doubles up on the -.

So this will show up as #123 <commit> Thanks @clintcs! - - Input now passes aria-controls, aria-expanded, and aria-haspopup down to its underlying input field.

I've been starting out the release note with a single sentence to hopefully break it up, but no strong opinions from me 🤷

Aye. I think this has come up a couple times now. I don't like how bullet points get formatted. But I'm also reluctant to add an otherwise unnecessary sentence before the changes, and doing so is hard to enforce. So I'm not sure what the best solution is.

What about this as a format?

## Input - Now passes `aria-controls`, `aria-expanded`, and `aria-haspopup` down to its underlying input field. ## Tooltip - Can now be stopped from opening and closing by canceling "mouseover" and "mouseout" events on its target.

I think we may run into the same issue without a starter sentence. If you take a look at https://github.com/CrowdStrike/glide-core/pull/932/files#diff-578302523fd9647f4ff6769a88c274dcf582deac425b2e9a3127f2215b0d8efc, for example, it gets rendered as:

I was thinking - what if each component has a separate changeset? So for above, you'd have two changesets, one for Input, one for Tooltip. That works if there's only one change for that component. But as soon as you get back to a bulleted list of items, you run into the same issue without a beginning sentence.

We do have @crowdstrike/glide-core/styles/variables.css has been updated with the latest from Figma: for Figma updates. 🤷

I think the best course of action is probably for us to continue with the status quote, accept the weird formatting, and file an issue with Changesets.

src/input.ts

clintcs force-pushed the grab-bag branch from a14472e to e016c73 Compare July 10, 2025 14:41

clintcs commented Jul 10, 2025

View reviewed changes

clintcs force-pushed the grab-bag branch from e016c73 to 6569865 Compare July 10, 2025 14:54

clintcs commented Jul 10, 2025

View reviewed changes

clintcs force-pushed the grab-bag branch 6 times, most recently from f5b0015 to 75ff811 Compare July 10, 2025 15:26

clintcs commented Jul 10, 2025

View reviewed changes

clintcs force-pushed the grab-bag branch 2 times, most recently from b93de39 to f6e2314 Compare July 10, 2025 15:31

Grab bag

7b6b9dd

clintcs force-pushed the grab-bag branch from f6e2314 to 7b6b9dd Compare July 10, 2025 15:32

clintcs marked this pull request as ready for review July 10, 2025 15:55

clintcs requested review from danwenzel and ynotdraw as code owners July 10, 2025 15:55

ynotdraw approved these changes Jul 10, 2025

View reviewed changes

danwenzel approved these changes Jul 10, 2025

View reviewed changes

clintcs commented Jul 10, 2025

View reviewed changes

src/input.ts Outdated Show resolved Hide resolved

Apply suggestion from @clintcs

4f71b1f

clintcs added this pull request to the merge queue Jul 11, 2025

Merged via the queue into main with commit 0a95a6f Jul 11, 2025
29 checks passed

clintcs deleted the grab-bag branch July 11, 2025 15:23

github-actions bot mentioned this pull request Jul 11, 2025

Release Preview #960

Merged

ynotdraw mentioned this pull request Jul 11, 2025

Small Input tweaks after running pnpm start #966

Merged

clintcs mentioned this pull request Jul 25, 2025

Support preventing Popover from opening #1005

Merged

Grab bag #963

Grab bag #963

Uh oh!

Conversation

clintcs commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Description

Patch

📋 Checklist

🔬 Testing

Input now passes aria-controls, aria-expanded, and aria-haspopup down to its underlying input field

Tooltip can now be stopped from opening and closing by canceling "mouseover" and "mouseout" events on its target

Uh oh!

changeset-bot bot commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Choose a reason for hiding this comment

Uh oh!

clintcs Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

clintcs Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

clintcs Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

clintcs Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

clintcs commented Jul 10, 2025 •

edited

Loading

Input now passes `aria-controls`, `aria-expanded`, and `aria-haspopup` down to its underlying input field

changeset-bot bot commented Jul 10, 2025 •

edited

Loading

clintcs Jul 10, 2025 •

edited

Loading

clintcs Jul 10, 2025 •

edited

Loading

clintcs Jul 10, 2025 •

edited

Loading

clintcs Jul 10, 2025 •

edited

Loading