import { Canvas, Controls, Meta } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as InputEditModalStories from './InputEditModal.stories'

<Meta of={InputEditModalStories} />

# InputEditModal

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Modal/InputEditModal"
  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A39910&t=P1w10jr2cpPuaayw-1"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal#Input-Edit-Modal"

/>

<KAIOInstallation exportNames="InputEditModal" />

## Overview

Input-Edit Modals allow people to change data or settings without leaving the page.
They support the ability to edit up to 3 fields. Any more becomes crowded and a new page is preferred.

<Canvas of={InputEditModalStories.Playground} />
<Controls of={InputEditModalStories.Playground} />

### Unpadded

<Canvas of={InputEditModalStories.Unpadded} />

## onAfterEnter and shifting focus

It is an important accessibility consideration that any time we shift focus on the page, no important content is skipped that may provide context to assistive technologies. This is why the default behaviour for our modals is to shift focus to the accessible title.

There are instances, such as single input modals, where shifting focus may not impact the users context. In these instances, we can leverage the `onAfterEnter` callback to shift focus to an input.

<Canvas of={InputEditModalStories.OnAfterEnter} sourceState="shown" />

As both the button and input label have clear intent and the focus does not skip past crucial content, this should provide enough context for an end user.