Create infotip component by jpzwarte · Pull Request #3197 · sl-design-system/components

jpzwarte · 2026-04-08T11:09:37Z

Summary

Adds the new sl-infotip component — an info icon button that triggers a popover showing contextual content. It is designed to be placed in the infotip slot of <sl-label> inside a <sl-form-field>.

Closes #2111

Changes

`@sl-design-system/infotip` (new package)

sl-infotip renders a ghost icon button (default: circle-info) that toggles an sl-popover on click or keyboard activation
Default slot accepts plain text or rich HTML content; custom icon via icon slot
Uses slotAssignment: 'manual' and a MutationObserver to keep a light DOM <div> content copy in sync with the original slotted content
The content copy gets a unique sl-infotip-content-<n> id exposed via the contentId property — this is what other components use for aria-describedby

`@sl-design-system/form`

<sl-label> gains an infotip slot so sl-infotip can be placed alongside the label text
<sl-form-field> detects an sl-infotip in the label slot and adds its contentId to aria-describedby on the associated form control's native input, ensuring screen readers announce the infotip content when the input receives focus

Other

Storybook stories: Basic, CustomIcon, RichContent, InContext
Vitest unit tests covering defaults, toggle behavior, custom icon, and the aria-describedby accessibility wiring
Documentation pages (overview, usage, accessibility, code, specs) added to the website
Changeset added for both infotip and form

Usage

<sl-form-field>
  <sl-label>
    Username
    <sl-infotip slot="infotip">This field requires a unique identifier used for account login.</sl-infotip>
  </sl-label>
  <sl-text-field placeholder="Username"></sl-text-field>
</sl-form-field>

New @sl-design-system/infotip package providing a lightweight informational tooltip-style component for displaying contextual help text. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

changeset-bot · 2026-04-08T11:09:41Z

🦋 Changeset detected

Latest commit: 473855c

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

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

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package "@sl-design-system/grid" depends on the ignored package "@sl-design-system/example-data", but "@sl-design-system/grid" is not being ignored. Please add "@sl-design-system/grid" to the `ignore` option.

github-actions · 2026-04-08T11:12:06Z

🕸 Website preview

You can view a preview here (commit 473855c2e7fb580f2d4034127211095780be6434).

github-actions · 2026-04-08T11:14:14Z

🕸 Storybook preview

You can view a preview here (commit 473855c2e7fb580f2d4034127211095780be6434).

Copilot

Pull request overview

This PR adds a new @sl-design-system/infotip web component package to the components monorepo and wires it into the TypeScript project references/build, along with the expected workspace dependency/lockfile updates.

Changes:

Introduce new sl-infotip component (Lit + scoped elements) with Storybook stories, styles, and Vitest specs.
Register the new component package in tsconfig.all.json and add its per-package tsconfig.json.
Update yarn.lock to include the new workspace package and various dependency resolution updates.

Reviewed changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`yarn.lock`	Adds the new `@sl-design-system/infotip` workspace entry and updates multiple dependency resolutions.
`tsconfig.all.json`	Adds the `packages/components/infotip` TS project reference.
`packages/components/infotip/tsconfig.json`	New TS composite project config for the infotip package.
`packages/components/infotip/package.json`	New package manifest for publishing and dependency declarations.
`packages/components/infotip/index.ts`	Barrel export for the component implementation.
`packages/components/infotip/register.ts`	Defines the `sl-infotip` custom element.
`packages/components/infotip/src/infotip.ts`	Implements the infotip trigger + popover behavior and public API.
`packages/components/infotip/src/infotip.scss`	Minimal host layout styling.
`packages/components/infotip/src/infotip.stories.ts`	Storybook stories demonstrating usage.
`packages/components/infotip/src/infotip.spec.ts`	Vitest specs for defaults, toggle behavior, slot content, and icon prop passing.

packages/components/infotip/src/infotip.ts

packages/components/infotip/src/infotip.stories.ts

tsconfig.all.json

Copilot

Pull request overview

Copilot reviewed 11 out of 12 changed files in this pull request and generated 2 comments.

packages/components/infotip/package.json

packages/components/form/src/label.scss

Copilot

Pull request overview

Copilot reviewed 26 out of 27 changed files in this pull request and generated 5 comments.

packages/components/form/src/label.scss

packages/components/form/src/form-field.ts

packages/components/infotip/src/infotip.ts

packages/components/infotip/src/infotip.spec.ts

Copilot

Pull request overview

Copilot reviewed 28 out of 29 changed files in this pull request and generated 1 comment.

packages/components/form/src/form-field.ts

Copilot

Pull request overview

Copilot reviewed 34 out of 35 changed files in this pull request and generated 3 comments.

packages/components/form/src/form-field.ts

packages/components/infotip/src/infotip.ts

Copilot

Pull request overview

Copilot reviewed 38 out of 39 changed files in this pull request and generated 1 comment.

packages/components/infotip/src/infotip.spec.ts

Copilot

Pull request overview

Copilot reviewed 40 out of 41 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

packages/components/form/src/label.scss:16

color: var(--sl-color-foreground-bold) was moved from :host to ::slotted([slot='label']). As a result, the .optional / .required indicator text no longer inherits the bold foreground color and will render with the parent’s default text color.

If the intent is for the optional/required indicator to visually match the label, explicitly set its color (or keep the host color and override only the infotip slot styling).

:host {
  align-items: center;
  display: inline-flex;
  gap: var(--sl-size-050);
}

::slotted([slot='label']) {
  color: var(--sl-color-foreground-bold);
  font-weight: var(--sl-text-new-typeset-fontWeight-semiBold);
}

.optional,
.required {
  font-weight: var(--sl-text-new-typeset-fontWeight-regular);
  margin-inline-start: var(--sl-size-050);
}

packages/components/infotip/package.json

michal-sanoma · 2026-04-13T11:50:05Z

packages/components/form/src/form-field.ts

+      this.#infotip = infotip;
+
+      if (this.control && infotip.contentId) {
+        const describedby = this.control.formControlElement.getAttribute('aria-describedby'),


issue: I think there is a stale aria-describedby issue in the sl-form-field integration

#onLabelSlotchange() only appends the infotip contentId to the control, but it never removes the previous ID again. It also only reacts to slotchange on the label slot, so removing or replacing <sl-infotip> inside the same <sl-label> does not trigger any cleanup

That means the input can keep an old aria-describedby value that points to a node that no longer exists, because sl-infotip removes its copied content on disconnect

jpzwarte and others added 2 commits April 8, 2026 12:54

Add infotip component (#2111)

b284626

New @sl-design-system/infotip package providing a lightweight informational tooltip-style component for displaying contextual help text. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

🏔

0eb970c

Copilot AI review requested due to automatic review settings April 8, 2026 11:09

Copilot started reviewing on behalf of jpzwarte April 8, 2026 11:10 View session

Merge branch 'main' into feature/2111-infotip-component

5869dd5

Copilot AI reviewed Apr 8, 2026

View reviewed changes

packages/components/infotip/src/infotip.ts Outdated Show resolved Hide resolved

packages/components/infotip/src/infotip.ts Outdated Show resolved Hide resolved

packages/components/infotip/src/infotip.stories.ts Show resolved Hide resolved

tsconfig.all.json Show resolved Hide resolved

jpzwarte added 2 commits April 8, 2026 13:19

🐌

86b18dd

🍰

b8be75f

Copilot AI review requested due to automatic review settings April 8, 2026 11:54

Copilot started reviewing on behalf of jpzwarte April 8, 2026 11:55 View session

Copilot AI reviewed Apr 8, 2026

View reviewed changes

packages/components/infotip/package.json Outdated Show resolved Hide resolved

packages/components/form/src/label.scss Show resolved Hide resolved

jpzwarte added 2 commits April 9, 2026 14:02

🐓

3799845

⚡️

9d0bf88

Copilot AI review requested due to automatic review settings April 9, 2026 12:04

Copilot started reviewing on behalf of jpzwarte April 9, 2026 12:05 View session

Copilot AI reviewed Apr 9, 2026

View reviewed changes

jpzwarte added 2 commits April 9, 2026 17:05

🚅

568ac56

Merge branch 'main' into feature/2111-infotip-component

e33dff7

Copilot AI review requested due to automatic review settings April 9, 2026 15:06

Copilot started reviewing on behalf of jpzwarte April 9, 2026 15:07 View session

Copilot AI reviewed Apr 9, 2026

View reviewed changes

packages/components/form/src/form-field.ts Show resolved Hide resolved

jpzwarte added 2 commits April 10, 2026 08:58

🚞

e78ea5a

🔭

b225865

Copilot AI review requested due to automatic review settings April 10, 2026 07:00

Copilot started reviewing on behalf of jpzwarte April 10, 2026 07:00 View session

Copilot AI reviewed Apr 10, 2026

View reviewed changes

packages/components/form/src/form-field.ts Show resolved Hide resolved

packages/components/infotip/src/infotip.ts Show resolved Hide resolved

packages/components/infotip/src/infotip.ts Show resolved Hide resolved

🚕

695d593

jpzwarte marked this pull request as ready for review April 10, 2026 07:22

jpzwarte requested review from Diaan, a11ymiko, anna-lach and michal-sanoma as code owners April 10, 2026 07:22

Copilot AI review requested due to automatic review settings April 10, 2026 07:22

Copilot started reviewing on behalf of jpzwarte April 10, 2026 07:22 View session

👒

842d9b6

Copilot AI reviewed Apr 10, 2026

View reviewed changes

packages/components/infotip/src/infotip.spec.ts Show resolved Hide resolved

jpzwarte added 2 commits April 10, 2026 09:28

😊

0a5576f

Merge branch 'main' into feature/2111-infotip-component

a974394

Copilot AI review requested due to automatic review settings April 13, 2026 09:46

Copilot started reviewing on behalf of jpzwarte April 13, 2026 09:47 View session

Copilot AI reviewed Apr 13, 2026

View reviewed changes

packages/components/infotip/package.json Outdated Show resolved Hide resolved

🏆

473855c

michal-sanoma reviewed Apr 13, 2026

View reviewed changes

Conversation

jpzwarte commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

@sl-design-system/infotip (new package)

@sl-design-system/form

Other

Usage

Uh oh!

changeset-bot bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕸 Website preview

Uh oh!

github-actions bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕸 Storybook preview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

michal-sanoma Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jpzwarte commented Apr 8, 2026 •

edited

Loading

`@sl-design-system/infotip` (new package)

`@sl-design-system/form`

changeset-bot bot commented Apr 8, 2026 •

edited

Loading

github-actions bot commented Apr 8, 2026 •

edited

Loading

github-actions bot commented Apr 8, 2026 •

edited

Loading