Skip to content

fix(segmented button): Scale Segmented Button doesn't respect controlled selected state (#2166) #2384

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
amir-ba merged 7 commits into from
Mar 5, 2025
+49 −56
Merged

fix(segmented button): Scale Segmented Button doesn't respect controlled selected state (#2166) #2384

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
70f030a
fix(segmented button): added event handler to change selected index o…
glebbo-dev Feb 5, 2025
52728a9
fix(segmented-button): refactored event handler and adjusted code by …
glebbo-dev Feb 17, 2025
c4cfb01
fix(segmented-button): adjusted code from comments and fixed snap
glebbo-dev Feb 24, 2025
e251d69
fix(segmented-button): set selected index to -2
glebbo-dev Feb 24, 2025
2959699
fix(segmented-button): set selected index to 0 as first segment shoul…
glebbo-dev Feb 24, 2025
3e4c780
fix(segmented-button): removed unnecessary getSelectedIndex
glebbo-dev Feb 24, 2025
b596cd8
fix(segmented-button): adjusted segmented button to scale attributes …
glebbo-dev Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/components/src/components/segment/segment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
Event,
EventEmitter,
Method,
Watch,
} from '@stencil/core';
import classNames from 'classnames';
import { emitEvent } from '../../utils/utils';
Expand Down Expand Up @@ -72,6 +73,8 @@ export class Segment {
id: string;
selected: boolean;
}>;
/** Emitted when selection has been changed. */
@Event({ eventName: 'scaleSelectionChanged' }) scaleSelectionChanged!: EventEmitter;
/** @deprecated in v3 in favor of kebab-case event names */
@Event({ eventName: 'scaleClick' }) scaleClickLegacy!: EventEmitter<{
id: string;
Expand All @@ -80,6 +83,11 @@ export class Segment {

private focusableElement: HTMLElement;

@Watch('selected')
selectionChanged() {
emitEvent(this, 'scaleSelectionChanged');
}

@Method()
async setFocus() {
this.focusableElement.focus();
Expand Down
9 changes: 9 additions & 0 deletions packages/components/src/components/segmented-button/segmented-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,15 @@ export class SegmentedButton {
this.setState(tempState);
}

@Listen('scaleSelectionChanged')
selectionChangedHandler() {
this.selectedIndex = this.getSelectedIndex();
if (typeof(this.selectedIndex) !== 'number') { return }
this.getAllSegments().forEach((segment) => {
segment.setAttribute('selected-index', this.selectedIndex.toString());
})
}

@Watch('disabled')
@Watch('size')
@Watch('selectedIndex')
Expand Down
Loading