From 28ecae74fb8585d62b7e4d3ef27bf0a6dbafe574 Mon Sep 17 00:00:00 2001 From: Akash Yeole Date: Wed, 3 Apr 2024 15:27:14 +0530 Subject: [PATCH 1/6] implement width property for modal --- .../src/components/Modal/Modal.js | 2 +- .../src/components/modal/modal.scss | 39 +++++++++---------- .../src/components/modal/modal.stories.ts | 9 +++++ .../components/src/components/modal/modal.tsx | 4 +- .../components/src/components/modal/readme.md | 1 + 5 files changed, 32 insertions(+), 23 deletions(-) diff --git a/examples/wrapper-components/react-javascript/src/components/Modal/Modal.js b/examples/wrapper-components/react-javascript/src/components/Modal/Modal.js index 0956da994e..ee6a304ce1 100644 --- a/examples/wrapper-components/react-javascript/src/components/Modal/Modal.js +++ b/examples/wrapper-components/react-javascript/src/components/Modal/Modal.js @@ -15,7 +15,7 @@ function Modal() { return (
- +
Hello. Welcome. What a pleasure it is to have you.
diff --git a/packages/components/src/components/modal/modal.scss b/packages/components/src/components/modal/modal.scss index cfaf647f07..97c47ef743 100644 --- a/packages/components/src/components/modal/modal.scss +++ b/packages/components/src/components/modal/modal.scss @@ -59,6 +59,23 @@ } } +@media screen and (min-width: 1024px) { + .modal-content-container { + + &.s { + width: 47vw; + } + + &.m { + width: 63vw; + } + + &.l { + width: 90%; + } + } +} + .modal-content { display: flex; flex-direction: column; @@ -131,27 +148,7 @@ box-sizing: border-box; flex: 1; overflow-y: auto; - - // & slot[name=content] { - // display: -webkit-box; - // -webkit-line-clamp: 1; - // -webkit-box-orient: vertical; - // overflow: hidden; - // text-overflow: ellipsis; - // } -} - -// .modal-footer{ -// display: flex; -// justify-content: flex-end; -// gap: 1em; -// box-sizing: border-box; -// margin-left: auto; -// gap: 24px; -// padding-top: 16px; -// padding-bottom: 32px; -// padding-right: 24px; -// } +} .modal-footer.buttons-present ::slotted(*){ display: flex; diff --git a/packages/components/src/components/modal/modal.stories.ts b/packages/components/src/components/modal/modal.stories.ts index fb58c2e776..94b06393c5 100644 --- a/packages/components/src/components/modal/modal.stories.ts +++ b/packages/components/src/components/modal/modal.stories.ts @@ -40,6 +40,11 @@ export default { control: { type: 'select' }, description: 'When specified together with alertIcon then an border to the right is shown', }, + width: { + options: ['s', 'm', 'l'], + control: { type: 'radio'}, + description: 'Usable only when screen width is more than 1024px' + }, variant: { options: ['default', 'alert-brand', 'alert-danger'], control: { type: 'radio' }, @@ -72,6 +77,7 @@ const Template = ({ showCloseButton, closeOnOverlayClick, variant, + width, alertIcon }) => { const modal = document.createElement('ifx-modal'); @@ -83,6 +89,7 @@ const Template = ({ } modal.setAttribute('close-on-overlay-click', closeOnOverlayClick); modal.setAttribute('show-close-button', showCloseButton); + modal.setAttribute('width', width) modal.addEventListener('ifxModalOpen', action('ifxModalOpen')); modal.addEventListener('ifxModalClose', action('ifxModalClose')); @@ -137,6 +144,7 @@ Default.args = { caption: 'Modal Title', showCloseButton: true, closeOnOverlayClick: false, + width: 's', variant: 'default', }; @@ -145,5 +153,6 @@ Alert.args = { caption: 'Alert-Brand Modal Title', closeOnOverlayClick: true, alertIcon: 'arrowdoen24', + width: 's', variant: 'alert-brand', }; diff --git a/packages/components/src/components/modal/modal.tsx b/packages/components/src/components/modal/modal.tsx index 1100781e44..de2ede70f0 100644 --- a/packages/components/src/components/modal/modal.tsx +++ b/packages/components/src/components/modal/modal.tsx @@ -23,6 +23,8 @@ export class IfxModal { @Event() ifxModalClose: EventEmitter; @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default'; + + @Prop() width: 's' | 'm' | 'l' = 's'; @Prop() alertIcon: string = ''; @Prop() okButtonLabel: string = 'OK'; @@ -181,7 +183,7 @@ export class IfxModal { tabindex="0" >