I have this very basic component and in storybook when I change the value through the controls it should update, however nothing happens. The text stays the same on the canvas, but it should show one of off, polite, assertive. The only thing it shows is the default value and doesn't change when I select something different.
@Component({
standalone: true,
imports: [CommonModule],
template: `{{ live }}`,
})
class BusyComponent {
@Input() live: 'off' | 'polite' | 'assertive' = 'polite';
}
export default {
title: 'Accessibility',
component: BusyComponent,
decorators: [moduleMetadata({ imports: [BusyComponent] })]
} as Meta;
const Template: Story<BusyComponent> = (props) => ({ props });
export const busy = Template.bind({});
busy.args = {
live: 'polite',
};
busy.argTypes = {
live: {
defaultValue: 'polite',
control: {
type: 'inline-radio',
options: ['off', 'polite', 'assertive'],
},
},
};
As seen in the image below, I have assertive selected in the controls, but it shows as polite on the canvas.
