Story for Angular Material Component - Slide Toggle

[jmtt89]

i developing a storybook projects with some Angular Material components that i use on my projects.

i will creating a folder per component inside the stories folder.

my-project
  |  src
  |  .storybook
  |  stories
  |  |  button
  |  |  |  button.stories.ts
  |  |  checkbox
  |  |  |  checkbox.stories.ts
  |  |  slide-toggle
  |  |  |  slide-toggle.stories.ts
  |  |  ...

When i try to create the action trigger for slide-toggle component i fond a problems..

This is my base story (just inputs)

// slide-toggle.stories.ts
import { CommonModule } from '@angular/common';
import { action } from '@storybook/addon-actions';
import { MatSlideToggle, MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Meta, moduleMetadata, Story } from '@storybook/angular';

export default {
  title: 'Angular Material/Slide Toggle',
  component: MatSlideToggle,
  decorators: [
    moduleMetadata({
      declarations: [],
      imports: [CommonModule, BrowserAnimationsModule, MatSlideToggleModule],
    })
  ],
  argTypes: {
    checked: {
      control: {
        type: 'boolean'
      },
      description: 'Whether the slide-toggle element is checked or not'
    },
    disabled: {
      control: {
        type: 'boolean'
      },
      description: 'Whether the component is disabled'
    },
    labelPosition: {
      options: ['before', 'after'],
      control: {
        type: 'select'
      },
      description: 'Whether the label should appear after or before the slide-toggle.',
      defaultValue: 'after'
    }
  }
} as Meta;

export const Basic: Story<MatSlideToggle> = (args: MatSlideToggle) => ({
  props: args,
  template: `<mat-slide-toggle>Slide me!</mat-slide-toggle>`
});

First Try - Using argType

my first try, following the documentation was add a argType change and toggleChange (outputs from Angular Material Component)

// slide-toggle.stories.ts
...
export default {
  ...
  argTypes: {
    ...
    change: { action: 'change' },
    toggleChange: { action: 'toggleChange' }
  }
} as Meta;

export const Basic: Story<MatSlideToggle> = (args: MatSlideToggle) => ({
  props: args,
  template: `<mat-slide-toggle>Slide me!</mat-slide-toggle>`
});
...

That's don't work, don't do anything, i think maybe is because y using a custom template and don't include explicit outputs on it

Second Try - Removing template (not a real solution for me)

// slide-toggle.stories.ts
...
export default {
  ...
  argTypes: {
    ...
    change: { action: 'change' },
    toggleChange: { action: 'toggleChange' }
  }
} as Meta;

export const Basic: Story<MatSlideToggle> = (args: MatSlideToggle) => ({
  props: args
});
...

Now toggleChange is working but change not, and printing on console RangeError: Maximum call stack size exceeded

Third try - Add template again, this time with output and add custom props too

// slide-toggle.stories.ts
...
export const Basic: Story<MatSlideToggle> = (args: MatSlideToggle) => ({
  props: {
    ...args,
    change: action('change'),
    toggleChange: action('toggleChange')
  },
  template: `<mat-slide-toggle color="primary" (change)="change($event)" (toggleChange)="toggleChange($event)">Slide me!</mat-slide-toggle>`
});

Same result before, this is step on right path, because i need a custom template because slide-toggle use the content of the tag for the label, and the only way to add this i fond was using custom template

Four Try - figuring out not document behaviours

Thinking over the structure of the story i figuring out the props not need to be exactly the same of the component outputs, and for how looks like the props, sure it its i can write a full function on it.

// slide-toggle.stories.ts
...
export const Basic: Story<MatSlideToggle> = (args: MatSlideToggle) => ({
  props: {
    ...args,
    onChange: (ev: MatSlideToggleChange) => {
      console.log('onChange', ev)
      return action('change')(ev)
    },
    onToggleChange: (ev: void) => {
      console.log('onToggleChange', ev)
      return action('toggleChange')(ev)
    }
  },
  template: `<mat-slide-toggle color="primary" (change)="onChange($event)" (toggleChange)="onToggleChange($event)">Slide me!</mat-slide-toggle>`
});

The problem is still the same, but with logs i finally understand what cause it.

onToggleChange undefined
toggle.stories.ts:46 onChange MatSlideToggleChange {source: MatSlideToggle, checked: true}

onChange include the source (the component it self) in the event emitted, so when pass the event to actions callback with the component for some reason this call will be break.

The unique solution i found at this time is just send the checked attribute to action callback. if i add the source will break again.

Resulting Working File

// slide-toggle.stories.ts
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSlideToggle, MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { action } from '@storybook/addon-actions';

export default {
  title: 'Design System/Toggle',
  component: MatSlideToggle,
  decorators: [
    moduleMetadata({
      declarations: [],
      imports: [CommonModule, BrowserAnimationsModule, MatSlideToggleModule],
    })
  ],
  argTypes: {
    checked: {
      control: {
        type: 'boolean'
      },
      description: 'Whether the slide-toggle element is checked or not'
    },
    disabled: {
      control: {
        type: 'boolean'
      },
      description: 'Whether the component is disabled'
    },
    labelPosition: {
      options: ['before', 'after'],
      control: {
        type: 'select'
      },
      description: 'Whether the label should appear after or before the slide-toggle.',
      defaultValue: 'after'
    },
    change: {
      action: 'change'
    },
    toggleChange: {
      action: 'toggleChange'
    }
  }
} as Meta;

export const Basic: Story<MatSlideToggle> = (args: MatSlideToggle) => ({
  props: {
    ...args,
    onChange: (ev: MatSlideToggleChange) => {
      // console.log('onChange', ev)
      return action('change')({checked: ev.checked})
    },
    onToggleChange: (ev: void) => {
      // console.log('onToggleChange', ev)
      return action('toggleChange')(ev)
    }
  },
  template: `<mat-slide-toggle color="primary" (change)="onChange($event)" (toggleChange)="onToggleChange($event)">Slide me!</mat-slide-toggle>`
});