import { ArgTypes, Meta, Canvas } from '@storybook/addon-docs/blocks';
import * as ComboButtonStories from './ComboButton.stories.js'
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Meta isTemplate />

# ComboButton

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ComboButton)

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## Table of Contents

- [Overview](#overview)
- [With Icons](#with-icons)
- [With Danger](#with-danger)
- [Menu Alignment (experimental)](#menu-alignment-experimental)
- [Experimental Auto Align](#experimental-auto-align)
- [Component API](#component-api)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## Overview

A `ComboButton` can be used to offer additional, secondary actions in a
disclosed list next to the primary action. These additional actions must be
`MenuItem`s passed as `children`. The primary action's label is passed as
`props.label`.

```jsx
<ComboButton label="Primary action">
  <MenuItem label="Second action" />
  <MenuItem label="Third action" />
  <MenuItem label="Fourth action" />
</ComboButton>
```

<Canvas
  of={ComboButtonStories.Default}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ComboButtonStories.Default),
    },
  ]}
/>

## With Icons

<Canvas
  of={ComboButtonStories.WithIcons}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ComboButtonStories.WithIcons),
    },
  ]}
/>

## With Danger

<Canvas
  of={ComboButtonStories.WithDanger}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ComboButtonStories.WithDanger),
    },
  ]}
/>

## Menu Alignment (experimental)

The `menuAlignment` prop enables you to define the placement of the Menu in
relation to the `ComboButton`. For instance, setting `menuAlignment="top"` on
the `ComboButton` will render the Menu above the button.

If it seems your specified `menuAlignment` isn't working, it's because we
prioritize ensuring the Menu remains visible. We calculate the optimal position
to display the Menu in case the provided `menuAlignment` obscures it.

We encourage you to play around in the Storybook Default stories to better
understand the `menuAlignment` prop.

<Canvas
  of={ComboButtonStories.WithMenuAlignment}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ComboButtonStories.WithMenuAlignment),
    },
  ]}
/>

## Experimental Auto Align
<Canvas
  of={ComboButtonStories.ExperimentalAutoAlign}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(ComboButtonStories.ExperimentalAutoAlign),
    },
  ]}
/>

## Component API

<ArgTypes />

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/ComboButton/ComboButton.mdx).
