Change 'full' size value from EXPERIMENTAL_Modal to 'fit-horizontally…

…' instead
vtex · Apr 26, 2021 · 8404085 · 8404085
1 parent 006aa90
commit 8404085
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
-- **EXPERIMENTAL_Modal** `full` and `auto` sizes.
+- **EXPERIMENTAL_Modal** `fit-horizontally` and `auto` sizes.
 
 ## [9.138.3] - 2021-04-20
 

diff --git a/react/components/EXPERIMENTAL_Modal/README.md b/react/components/EXPERIMENTAL_Modal/README.md
@@ -34,7 +34,7 @@ The anatomy consists of an overlay to block user interaction below the Modal and
 | responsiveFullScreen    | `boolean` | 🚫       | false               | If true the modal will expand to fullscreen in small view ports                                                                                             |
 | showTopBar              | `boolean` | 🚫       | true                | If true, show top bar with title                                                                                                                            |
 | onCloseTransitionFinish | `func`    | 🚫       |                     | Event fired when the closing transition is finished                                                                                                         |
-| size                    | `enum`    | 🚫       | medium              | Modal Size. One of: "small", "medium", "large", "full" and "auto"                                                                                           |
+| size                    | `enum`    | 🚫       | medium              | Modal Size. One of: "small", "medium", "large", "fit-horizontally" and "auto"                                                                                           |
 | aria-label              | `string`  | 🚫       |                     | Acessible Modal name. If this name is visible on the screen, prefer to use aria-labelledby                                                                  |
 | aria-labelledby         | `string`  | 🚫       | `vtex-modal__title` | ID of the element that provides the Modal an accessible name. If aria-label and aria-albelledby is not defined, the default here will be the title element. |
 | aria-describedby        | `string`  | 🚫       |                     | ID of the element that provides the Modal an accessible description                                                                                         |
@@ -430,7 +430,7 @@ const ModalExample = () => {
 ;<ModalExample />
 ```
 
-##### Full
+##### Fit Horizontally
 
 ```js
 const Button = require('../Button').default
@@ -447,7 +447,7 @@ const ModalExample = () => {
       <Modal
         isOpen={isOpen}
         onClose={onClose}
-        size="full"
+        size="fit-horizontally"
         title="Import products by CSV"
         aria-describedby="modal-description"
         bottomBar={

diff --git a/react/components/EXPERIMENTAL_Modal/index.tsx b/react/components/EXPERIMENTAL_Modal/index.tsx
@@ -23,7 +23,7 @@ export interface Props
   showBottomBarBorder?: boolean
   onCloseTransitionFinish?: () => unknown
   centered?: boolean
-  size?: 'small' | 'medium' | 'large' | 'full' | 'auto'
+  size?: 'small' | 'medium' | 'large' | 'fit-horizontally' | 'auto'
   responsiveFullScreen?: boolean
 }
 

diff --git a/react/components/EXPERIMENTAL_Modal/modal.stories.tsx b/react/components/EXPERIMENTAL_Modal/modal.stories.tsx
@@ -7,7 +7,7 @@ import useDisclosure from '../../utilities/useDisclosure'
 import Button from '../Button'
 import Input from '../Input'
 
-const sizes = ['small', 'medium', 'large', 'full', 'auto']
+const sizes = ['small', 'medium', 'large', 'fit-horizontally', 'auto']
 
 export default {
   title: 'Components/Modal V2',