Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
VTEX Modal ![https://img.shields.io/badge/-Deprecated-red](https://img.shields.io/badge/-Deprecated-red)
Official extension
Version: 0.2.2
Latest version: 0.2.2

:warning: The modal block has been deprecated in favor of the Modal Layout app. Although support for this block is still granted, we strongly recommend you to update your store theme with the Modal Layout's blocks in order to keep up with the component's evolution.

Description

The VTEX Modal is the block to use when you want to display another block in a VTEX app.

It renders a button and when you click it, it opens the modal with its children component rendered.

:loudspeaker: Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request

Table of Contents

Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

To use this app or override the default CSS you need import it in your dependencies on manifest.json file.


_10
"dependencies": {
_10
"vtex.modal": "0.x"
_10
}

Then, use the modal block in your blocks.json like:


_10
"modal": {
_10
"children": ["rich-text"],
_10
"props": {
_10
"centered": true,
_10
"blockClass": "home-modal",
_10
"buttonClass": "t-heading-5",
_10
"showCloseIcon": false
_10
}
_10
}

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within modal and describes if they are required or optional.


_10
{
_10
"modal": {
_10
"allowed": "*",
_10
"component": "index",
_10
"composition": "children"
_10
}
_10
}

For now this block does not have any required or optional blocks. It allows you to render any block as its children.

Configuration

Through the Storefront, you can change the modal's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop nameTypeDescription
centeredBooleanSet to true if component should be centered on screen. Default: false
closeOnEscBooleanSet to true if modal should close when esc key is pressed. Default: true
closeOnOverlayClickBooleanSet to true if modal should close when pressing on outside area. Default: true
showCloseIconBooleanSet to true if modal should display close icon. Default: true
buttonLabelStringSet the label displayed on button to open modal Default: ""
buttonClassStringPass extra tachyon classes to button container. Default: null
blockClassStringUnique class name to be appended to block classes. Default: null

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  1. Add the styles builder to your manifest.json:

_10
"builders": {
_10
"styles": "1.x"
_10
}

  1. Create a file called vtex.rich-text.css inside the styles/css folder. Add your custom styles:

_10
.container {
_10
margin-top: 10px;
_10
}

CSS Namespaces

Below, we describe the namespaces that are defined in the modal.

Token nameComponentDescription
containerindexThe container that encloses the whole <Modal> component
childrenContainerindexIt represents the view that encloses the children rendered inside the container
buttonindexIt is inserted in the view that encloses the button used to open the modal

Troubleshooting

You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.

Tests

To execute our tests go to react/ folder and run yarn test

Travis CI

{"base64":"  ","img":{"width":98,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":730,"url":"https://api.travis-ci.com/vtex-apps/modal.svg?branch=master"}}
{"base64":"  ","img":{"width":124,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":739,"url":"https://s3.amazonaws.com/assets.coveralls.io/badges/coveralls_unknown.svg"}}

See also
VTEX App Store
VTEX IO Apps