Merge pull request #1141 from Infineon/1123-modal-implement-width-var…

…iant-based-on-screen-resolution Modal: implemented width property
Infineon · Apr 25, 2024 · 21b081c · 21b081c
2 parents 6d7f5f6 + 949e948
commit 21b081c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 24 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
@@ -15,7 +15,7 @@ function Modal() {
 
   return (
     <div>
-      <IfxModal ref={modalRef} caption="Modal Title" variant="default" closeOnOverlayClick="true"  showCloseButton='false'>
+      <IfxModal ref={modalRef} caption="Modal Title" variant="default" size='s' loseOnOverlayClick="true"  showCloseButton='false'>
         <div slot="content">
           <span>Hello. Welcome. What a pleasure it is to have you.</span>
         </div>

diff --git a/packages/components/src/components/modal/modal.scss b/packages/components/src/components/modal/modal.scss
@@ -56,6 +56,29 @@
   .modal-content-container {
     width: 540px;
     min-height: 132px;
+
+    &.m,
+    &.l,
+    &.s {
+      width: 90%;
+    }
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .modal-content-container {
+
+    &.s {
+      width: 47vw;
+    }
+
+    &.m {
+      width: 63vw;
+    }
+
+    &.l {
+      width: 80%;
+    }
   }
 }
 
@@ -131,27 +154,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
@@ -40,6 +40,11 @@ export default {
       control: { type: 'select' },
       description: 'When specified together with alertIcon then an border to the right is shown',
     },
+    size: {
+      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' },
@@ -69,7 +74,7 @@ export default {
   },
 };
 
-const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, alertIcon }) => {
+const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size, alertIcon }) => {
   const modal = document.createElement('ifx-modal');
   modal.setAttribute('caption', caption);
   modal.setAttribute('variant', variant);
@@ -79,6 +84,7 @@ const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, aler
   }
   modal.setAttribute('close-on-overlay-click', closeOnOverlayClick);
   modal.setAttribute('show-close-button', showCloseButton);
+  modal.setAttribute('size', size)
 
   modal.addEventListener('ifxModalOpen', action('ifxModalOpen'));
   modal.addEventListener('ifxModalClose', action('ifxModalClose'));
@@ -133,6 +139,7 @@ Default.args = {
   caption: 'Modal Title',
   showCloseButton: true,
   closeOnOverlayClick: false,
+  size: 's',
   variant: 'default',
 };
 
@@ -141,5 +148,6 @@ Alert.args = {
   caption: 'Alert-Brand Modal Title',
   closeOnOverlayClick: true,
   alertIcon: 'arrowdoen24',
+  size: 's',
   variant: 'alert-brand',
 };
diff --git 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() size: 's' | 'm' | 'l' = 's';
 
   @Prop() alertIcon: string = '';
   @Prop() okButtonLabel: string = 'OK';
@@ -181,7 +183,7 @@ export class IfxModal {
             tabindex="0"
           ></div>
           <div
-            class={`modal-content-container`}
+            class={`modal-content-container ${this.size}`}
             role="dialog"
             aria-modal="true"
             aria-label={this.caption}>

diff --git a/packages/components/src/components/modal/readme.md b/packages/components/src/components/modal/readme.md
@@ -16,6 +16,7 @@
 | `okButtonLabel`       | `ok-button-label`        |             | `string`                                       | `'OK'`          |
 | `opened`              | `opened`                 |             | `boolean`                                      | `false`         |
 | `showCloseButton`     | `show-close-button`      |             | `boolean`                                      | `true`          |
+| `size`                | `size`                   |             | `"l" \| "m" \| "s"`                            | `'s'`           |
 | `variant`             | `variant`                |             | `"alert-brand" \| "alert-danger" \| "default"` | `'default'`     |