Modal - Firefly Components

Las ventanas modales centran la atención de los usuarios para pedirles alguna interacción concreta. Pueden exigir a los usuarios que tomen una decisión o advertirles cuando un error puede tener consecuencias muy importantes.

Este es un modal de ejemplo

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, neque tempora repellat eligendi molestias eveniet nostrum consequatur nam autem.

Nombre:

Apellido:

Utilización

import { Modal } from "firefly-components/modal";
                    
<Modal>
    Contenido del modal aquí...
</Modal>

Props

`visible`	Recibe un valor booleano que hace visible al modal cuando su valor es `true`.
`hide`	Recibe una funcion que hara que se oculte el modal. Esta función es necesaria para que el botón para cerrar el modal funcione.
`width`	Permite ajustar el ancho del modal lo que hace posible crearlo en diferentes dimesiones segun las necesitades.
`height`	Permite ajustar la altura del modal lo que hace posible crearlo en diferentes dimesiones segun las necesitades.

Ejemplos

Creando un modal básico

En primer lugar creamos una variable con useState para controlar la visibilidad del modal.

const [modalVisible, setModalVisible] = useState(false);

A continuación llamamos al componente modal y le pasamos las props necesarias para su funcionamiento.

<Modal
    visible={modalVisible}
    hide={() => setModalVisible(false)}
    width="37%"
    height="fit-content"
>
    // Agregamos contenido al modal

    <Column width="100%" gap="1.7rem">
        <h3>Este es un modal de ejemplo</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Fuga, neque tempora repellat eligendi
            molestias eveniet nostrum consequatur nam autem.
        </p>
        <TextInput
            label="Nombre:"
            placeholder="Ingresa tu nombre"
        />
        <TextInput
            label="Apellido:"
            placeholder="Ingresa tu apellido"
        />
        <Row
            width="100%"
            gap="0.5rem"
            justifyContent="flex-end"
        >
            <TextButton
                content="Cancelar"
                handleClick={() => setModalVisible(false)}
            />
            <PrimaryButton
                content="Enviar"
                handleClick={() => setModalVisible(false)}
            />
        </Row>
    </Column>
</Modal>

Finalmente, agregamos un botón, que al hacer clic en el, muestre el modal.

<PrimaryButton
    content="Open modal"
    handleClick={() => setModalVisible(true)}
/>

Resultado: