import { Story, Canvas, Preview, ArgsTable } from '@storybook/addon-docs';
import image1 from '../../stories/assets/overflow-menu/1.png';
import image2 from '../../stories/assets/overflow-menu/2.png';
import image3 from '../../stories/assets/overflow-menu/3.png';
import image4 from '../../stories/assets/overflow-menu/4.png';
import image5 from '../../stories/assets/overflow-menu/5.png';
import image6 from '../../stories/assets/overflow-menu/6.png';
import image7 from '../../stories/assets/overflow-menu/7.png';
import image8 from '../../stories/assets/overflow-menu/8.png';
import image9 from '../../stories/assets/overflow-menu/tag.png';
# Sobrecarga / Overflow
El componente sobrecarga se utiliza cuando existen opciones adicionales disponibles para el usuario en un espacio limitado.
El texto de cada opción dentro del menú adicional debe ser breve y directo para que los usuarios puedan decidir rápidamente una acción. Aquellas acciones que tengan un impacto alto en la solución global (eliminar elementos, modificar datos…) quedarán separados del resto mediante una línea horizontal y posicionados debajo del grupo de acciones primarias.
### Variaciones
Dependiendo de dónde aparezca el comnponente de sobrecarga dentro de la interfaz de usuario, el símbolo de intercalación o la flecha pueden estar alineados hacia la **izquierda** o hacia la **derecha** para que el menú sobrecarga sea claramente visible.
Asimismo dependiendo de su integración con el resto de elementos tenemos dos tamaños distintos de elemento de sobrecarga, el **normal** por defecto de 40px de alto y el **estrecho** de 32px de alto.
| Tamaño normal | Tamaño estrecho |
| :----------------------------------------------------------: | :----------------------------------------------------------: |
|
|
|
### Anatomía
El componente de sobrecarga, se representa en su estado en reposo mediante un **control de apertura** del desplegable. Este control de apertura se posicionará en la zona del componente que descarga (menú, control…).
La anatomía del componente sobrecarga se representa con las mismas propiedades que el componente desplegable, con la característica principal en este componente de su ancho que es fijo con una medida de 160px.
La **altura** del componente de sobrecarga está determinada por la cantidad de contenido en el menú, aunque recomendamos que se utilicen los tamaños definidos de 32px y 40px.
### Comportamiento
El componente de sobrecarga proporciona una lista emergente de acciones que están disponibles para el usuario cuando hace clic sobre el icono del control de apertura, y si el usuario vuelve a clicar sobre el icono el listado de menú emergente se contraerá.
Los **estados** para el control de apertura del componente de sobrecarga son enabled, hover focus y open.
En el estado open del componente, el desplegable con los item de las opciones del listado emergente pueden tener los estados enabled, hover, focus, disabled, danger y click.
### Código
```
```
### Tokens
**Color**
| Class | Property | Color token |
| :------------------------------------------- | :--------------- | :----------------------------- |
| `.bx--overflow-menu__icon` | fill | $icon-01 |
| `.bx--overflow-menu-options` | background-color | $ui-01 |
| `.bx--overflow-menu-options__btn` | color | $text-02 |
| `.bx--overflow-menu-options__option--danger` | background-color | $support-01 |
| `.bx--overflow-menu-options` | box-shadow | 0 2px 6px 0 rgba(0, 0, 0, 0.3) |
**Tipografía**
| Property | Type token |
| :-------------------------------- | :------------- |
| `.bx--overflow-menu-options__btn` | $body-short-01 |
**Estructura**
| Class | Property | Spacing token |
| :------------------------------------------- | :-------------------------- | :------------ |
| `.bx--overflow-menu__icon` | icon size | – |
| `.bx--overflow-menu-options__btn` | padding-right, padding-left | `$spacing-05` |
| `.bx--overflow-menu-options` | height | – |
| `.bx--overflow-menu-options__option--danger` | border-top | – |