Open
Conversation
🦋 Changeset detectedLatest commit: 53e79b3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
✅ Deploy Preview for scouterna-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new scout-segmented-control Stencil component to the design system, along with Storybook docs/examples, and introduces a global “no-transition” helper to prevent initial indicator animations.
Changes:
- Introduces
scout-segmented-control(Stencil TSX + CSS) and its generated README. - Adds Storybook stories and MDX documentation for the new component.
- Adds a global
.no-transitionhost utility and a small strictness tweak inscout-tabs.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui-webc/src/global/global.css | Adds a :host(.no-transition) rule to disable transitions (used to avoid initial indicator animations). |
| packages/ui-webc/src/components/tabs/tabs.tsx | Adjusts decorators/definite assignment for stricter TS initialization. |
| packages/ui-webc/src/components/segmented-control/segmented-control.tsx | New segmented control component logic (selection + indicator sizing). |
| packages/ui-webc/src/components/segmented-control/segmented-control.css | New segmented control styling (layout, indicator, selected state). |
| packages/ui-webc/src/components/segmented-control/readme.md | Generated docs for the new component. |
| packages/storybook/src/stories/segmented-control.stories.tsx | Storybook interaction story for segmented control (controlled via args). |
| packages/storybook/src/stories/segmented-control.mdx | Storybook docs page and usage example for controlled state. |
| .vscode/settings.json | Workspace editor settings update (Biome formatter + disable ESLint fix-all on save). |
Comment on lines
+65
to
+74
| render() { | ||
| const sizeClass = this.size === "small" ? "small" : ""; | ||
| const noTransitionClass = this.enableAnimations ? "" : "no-transition"; | ||
|
|
||
| return ( | ||
| <Host class={`${sizeClass} ${noTransitionClass}`}> | ||
| <slot /> | ||
| {this.getIndicator()} | ||
| </Host> | ||
| ); |
Comment on lines
+28
to
+29
| // <div style={{ display: "flex", width: "20rem", height: "3.5rem" }}> | ||
| // </div> |
Comment on lines
+77
to
+86
| componentDidLoad() { | ||
| this.updateChildrenAttributes(); | ||
| this.calculateIndicatorSizes(); | ||
|
|
||
| // This is a hack and it won't work on slow devices, but in most cases it | ||
| // prevents the indicator from animating prematurely. | ||
| setTimeout(() => { | ||
| this.enableAnimations = true; | ||
| }, 50); | ||
| } |
Comment on lines
+136
to
+137
|
|
||
| console.log("Calculated widths:", this.widths); |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
daBack
approved these changes
Mar 15, 2026
Contributor
|
Looks good, works good :D |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
It's exactly what it looks like 😄 Decided not to implement it as a form component to keep it simple.
Inspired by this component: https://www.radix-ui.com/themes/docs/components/segmented-control