fix(modal): inputs are shrunk

ovh · Jan 17, 2024 · 1fd9016 · 1fd9016
1 parent 774eda5
commit 1fd9016
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 56 deletions.
diff --git a/packages/components/src/modal/package.json b/packages/components/src/modal/package.json
@@ -17,7 +17,7 @@
     "doc": "typedoc --json ./docs-api/typedoc.json --pretty && node ../../../../scripts/generate-typedoc-md.js",
     "doc:api": "typedoc",
     "lint:scss": "stylelint 'src/components/**/*.scss'",
-    "FIXME_lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
     "start": "stencil build --dev --watch --serve",
     "test:e2e": "stencil test --e2e --config stencil.config.ts",
     "test:e2e:ci": "stencil test --config stencil.config.ts --e2e --ci",

diff --git a/packages/components/src/modal/src/components/osds-modal/interfaces/attributes.ts b/packages/components/src/modal/src/components/osds-modal/interfaces/attributes.ts
@@ -11,6 +11,6 @@ interface OdsModalAttribute {
   masked?: boolean;
 }
 
-export {
+export type {
   OdsModalAttribute,
 };
diff --git a/packages/components/src/modal/src/components/osds-modal/osds-modal.e2e.screenshot.ts b/packages/components/src/modal/src/components/osds-modal/osds-modal.e2e.screenshot.ts
@@ -1,18 +1,15 @@
 import type { OdsModalAttribute } from './interfaces/attributes';
 import type { E2EPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
 import { ODS_THEME_COLOR_INTENT, ODS_THEME_COLOR_INTENTS } from '@ovhcloud/ods-common-theming';
 import { newE2EPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
-
 describe('e2e:osds-modal', () => {
   const baseAttribute = { color: ODS_THEME_COLOR_INTENT.info, dismissible: true, headline: '', masked: false };
   let page: E2EPage;
 
-  async function setup({ attributes = {}, html = '' }: { attributes?: Partial<OdsModalAttribute>, html?: string } = {}) {
+  async function setup({ attributes = {}, html = '' }: { attributes?: Partial<OdsModalAttribute>, html?: string } = {}): Promise<void> {
     const stringAttributes = odsComponentAttributes2StringAttributes<OdsModalAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     page = await newE2EPage();
@@ -32,8 +29,33 @@ describe('e2e:osds-modal', () => {
   const screenshotConfigurations = [
     { description: 'empty', html: '' },
     { description: 'text', html: `<osds-text color="text">
-      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.
-      </osds-text>` },
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
+    </osds-text>` },
+    { description: 'a lot of content', html: `<div style="display: flex; flex-direction: column; gap: 10px;">
+      <osds-text color="text">
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
+      </osds-text>
+      <osds-select class="w-20" id="select7">
+        <span slot="placeholder"><i>Select</i> something</span>
+        <osds-select-group>Group title</osds-select-group>
+        <osds-select-option value="1">This is the <strong>Value 1</strong></osds-select-option>
+        <osds-select-option value="2">A value way toooooooooooooooooooo long for a select</osds-select-option>
+        <osds-select-option value="3">Value 3</osds-select-option>
+      </osds-select>
+      <osds-input inline type="text" value="Need a Host?" clearable></osds-input>
+      <osds-text color="text">
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
+      </osds-text>
+      <osds-input inline type="text" value="Need a Host?" clearable></osds-input>
+      <osds-text color="text">
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
+      </osds-text>
+      <osds-input inline type="text" value="Need a Host?" clearable></osds-input>
+      <osds-text color="text">
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
+      </osds-text>
+      <osds-input inline type="text" value="Need a Host?" clearable></osds-input>
+    </div>` },
   ];
 
   const actionsConfigurations = [
@@ -57,16 +79,16 @@ describe('e2e:osds-modal', () => {
 
                 it(`${color}, ${screenshotConfiguration.description}, ${actionsConfiguration.description}${headline.length > 0 ? ', headline' : ', no headline'}${dismissible ? ', dismissible' : ', not dismissible'}${masked ? ', masked' : ', not masked'}.`, async() => {
                   const html = `${actionsConfiguration.html}${screenshotConfiguration.html}`;
-                  await setup({ attributes: { dismissible, headline, masked, color }, html });
+                  await setup({ attributes: { color, dismissible, headline, masked }, html });
 
                   await page.waitForChanges();
 
                   await page.evaluate(() => {
                     const element = document.querySelector('osds-modal') as HTMLElement;
-                    return { width: element.clientWidth, height: element.clientHeight };
+                    return { height: element.clientHeight , width: element.clientWidth };
                   });
 
-                  await page.setViewport({ width: 800, height: 600 });
+                  await page.setViewport({ height: 600, width: 800 });
 
                   const results = await page.compareScreenshot('modal', { fullPage: false, omitBackground: true });
                   expect(results).toMatchScreenshot({ allowableMismatchedRatio: 0 });

diff --git a/packages/components/src/modal/src/components/osds-modal/osds-modal.e2e.ts b/packages/components/src/modal/src/components/osds-modal/osds-modal.e2e.ts
@@ -1,19 +1,16 @@
 import type { OdsModalAttribute } from './interfaces/attributes';
 import type { E2EElement, E2EPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { newE2EPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
-
 describe('e2e:osds-modal', () => {
   const baseAttribute = { color: ODS_THEME_COLOR_INTENT.info, dismissible: false, headline: '', masked: false };
   let page: E2EPage;
   let el: E2EElement;
 
-  async function setup({ attributes }: { attributes: Partial<OdsModalAttribute> }) {
+  async function setup({ attributes }: { attributes: Partial<OdsModalAttribute> }): Promise<void> {
     const stringAttributes = odsComponentAttributes2StringAttributes<OdsModalAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     page = await newE2EPage();
@@ -172,7 +169,7 @@ describe('e2e:osds-modal', () => {
   });
 
   describe('Event', () => {
-    it('should receive event odsModalOpen', async () => {
+    it('should receive event odsModalOpen', async() => {
       await setup({ attributes: { dismissible: true, masked: true } });
 
       const odsModalOpen = await el.spyOnEvent('odsModalOpen');
@@ -182,7 +179,7 @@ describe('e2e:osds-modal', () => {
       expect(odsModalOpen).toHaveReceivedEventTimes(1);
     });
 
-    it('should receive event odsModalOpen', async () => {
+    it('should receive event odsModalOpen', async() => {
       await setup({ attributes: { dismissible: true, masked: false } });
 
       const odsModalClose = await el.spyOnEvent('odsModalClose');
@@ -215,8 +212,11 @@ describe('e2e:osds-modal', () => {
       await el.callMethod('open');
       await page.waitForChanges();
       outsideButton = await page.find('#outsideButton');
+      expect(outsideButton).not.toBeNull();
       insideModalButton1 = await page.find('#insideModalButton1');
+      expect(insideModalButton1).not.toBeNull();
       insideModalButton2 = await page.find('#insideModalButton2');
+      expect(insideModalButton2).not.toBeNull();
     });
 
     it('should move focus to first button inside modal on first tab press', async() => {

diff --git a/packages/components/src/modal/src/components/osds-modal/osds-modal.scss b/packages/components/src/modal/src/components/osds-modal/osds-modal.scss
@@ -50,13 +50,13 @@
     }
 
     .content {
-      max-height: 30vh;
+      max-height: 50vh;
       overflow-y: auto;
 
-      .slot {
-        display: flex;
-        flex-direction: column;
-      }
+      // .slot {
+      //   max-height: 30vh;
+      //   overflow-y: scroll;
+      // }
 
       .actions {
         display: flex;

diff --git a/packages/components/src/modal/src/components/osds-modal/osds-modal.spec.ts b/packages/components/src/modal/src/components/osds-modal/osds-modal.spec.ts
@@ -1,10 +1,8 @@
 import type { OdsModalAttribute } from './interfaces/attributes';
 import type { SpecPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str, odsUnitTestAttribute } from '@ovhcloud/ods-common-testing';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { newSpecPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 import { OsdsModal } from './osds-modal';
 
@@ -18,7 +16,7 @@ describe('spec:osds-modal', () => {
     jest.clearAllMocks();
   });
 
-  async function setup({ attributes = {} }: { attributes?: Partial<OdsModalAttribute> } = {}) {
+  async function setup({ attributes = {} }: { attributes?: Partial<OdsModalAttribute> } = {}): Promise<void> {
     const stringAttributes = odsComponentAttributes2StringAttributes<OdsModalAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     page = await newSpecPage({
@@ -38,52 +36,52 @@ describe('spec:osds-modal', () => {
 
   describe('attributes', () => {
     const config = {
-      instance: () => instance,
-      page: () => page,
-      root: () => page.root,
-      wait: () => page.waitForChanges(),
+      instance: (): OsdsModal => instance,
+      page: (): SpecPage => page,
+      root: (): HTMLElement | undefined => page.root,
+      wait: (): Promise<void> => page.waitForChanges(),
     };
 
     describe('color', () => {
       odsUnitTestAttribute<OdsModalAttribute, 'color'>({
-        name: 'color',
         defaultValue: DEFAULT_ATTRIBUTE.color,
+        name: 'color',
         newValue: ODS_THEME_COLOR_INTENT.primary,
-        value: ODS_THEME_COLOR_INTENT.default,
         setup: (value) => setup({ attributes: { ['color']: value } }),
+        value: ODS_THEME_COLOR_INTENT.default,
         ...config,
       });
     });
 
     describe('dismissible', () => {
       odsUnitTestAttribute<OdsModalAttribute, 'dismissible'>({
-        name: 'dismissible',
         defaultValue: DEFAULT_ATTRIBUTE.dismissible,
+        name: 'dismissible',
         newValue: false,
-        value: true,
         setup: (value) => setup({ attributes: { ['dismissible']: value } }),
+        value: true,
         ...config,
       });
     });
 
     describe('headline', () => {
       odsUnitTestAttribute<OdsModalAttribute, 'headline'>({
-        name: 'headline',
         defaultValue: DEFAULT_ATTRIBUTE.headline,
+        name: 'headline',
         newValue: 'OVH',
-        value: 'On Vous Héberge ?',
         setup: (value) => setup({ attributes: { ['headline']: value } }),
+        value: 'On Vous Héberge ?',
         ...config,
       });
     });
 
     describe('masked', () => {
       odsUnitTestAttribute<OdsModalAttribute, 'masked'>({
-        name: 'masked',
         defaultValue: DEFAULT_ATTRIBUTE.masked,
+        name: 'masked',
         newValue: false,
-        value: true,
         setup: (value) => setup({ attributes: { ['masked']: value } }),
+        value: true,
         ...config,
       });
     });

diff --git a/packages/components/src/modal/src/components/osds-modal/osds-modal.tsx b/packages/components/src/modal/src/components/osds-modal/osds-modal.tsx
@@ -3,11 +3,11 @@ import type { OdsModalEvent } from './interfaces/events';
 import type { OdsModalMethod } from './interfaces/methods';
 import type { EventEmitter } from '@stencil/core';
 import { ODS_THEME_COLOR_INTENT, ODS_THEME_TYPOGRAPHY_SIZE } from '@ovhcloud/ods-common-theming';
+import { Component, Element, Event, Host, Listen, Method, Prop, Watch, h } from '@stencil/core';
+import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 import { ODS_BUTTON_VARIANT } from '../../../../button/src';
 import { ODS_ICON_NAME, ODS_ICON_SIZE } from '../../../../icon/src';
 import { ODS_TEXT_LEVEL } from '../../../../text/src';
-import { Component, Element, Event, Host, Listen, Method, Prop, Watch, h } from '@stencil/core';
-import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
 /**
  * @slot (unnamed) - Modal content

diff --git a/packages/components/src/modal/src/components/osds-modal/styles/osds-modal.size.scss b/packages/components/src/modal/src/components/osds-modal/styles/osds-modal.size.scss
@@ -37,10 +37,6 @@
                     margin-bottom: var(--ods-size-04);
                 }
 
-                .slot {
-                    max-height: 30vh;
-                }
-
                 .actions {
                     gap: var(--ods-size-04);
                     margin-top: var(--ods-size-07);

diff --git a/packages/components/src/modal/src/globals.ts b/packages/components/src/modal/src/globals.ts
@@ -8,4 +8,5 @@
 import '../../button/src';
 import '../../icon/src';
 import '../../select/src';
+import '../../input/src';
 import '../../text/src';
diff --git a/packages/components/src/modal/src/index.html b/packages/components/src/modal/src/index.html
@@ -21,7 +21,7 @@
   <div>
     <osds-button id="modal-trigger-1" inline slot="actions" color="info">Modal 1</osds-button>
     <osds-button id="modal-trigger-2" inline slot="actions" color="success">Modal 2</osds-button>
-    <osds-button id="modal-trigger-3" inline slot="actions" color="error">Modal 3</osds-button>
+    <osds-button id="modal-trigger-3" inline slot="actions" color="warning">Modal 3</osds-button>
 
   </div>
   <script>
@@ -65,23 +65,38 @@
   </osds-modal>
   <osds-modal
     id="modal-3"
-    color="success"
+    color="warning"
     headline="On Vous Héberge ?"
     dismissible="true"
     masked="true"
   >
-    <osds-text color="text">
-      OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
-    </osds-text>
-    <osds-select class="w-20" id="select7">
-      <span slot="placeholder"><i>Select</i> Country</span>
-      <osds-select-group>Group title</osds-select-group>
-      <osds-select-option value="1">hezh <strong>Value 1</strong></osds-select-option>
-      <osds-select-option value="2">A value 2 way toooooooooooooooooooo long for a select but</osds-select-option>
-      <osds-select-option value="3">Value 3</osds-select-option>
-    </osds-select>
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <osds-text color="text">
+        OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
+      </osds-text>
+      <osds-select class="w-20" id="select7">
+        <span slot="placeholder"><i>Select</i> something</span>
+        <osds-select-group>Group title</osds-select-group>
+        <osds-select-option value="1">This is the <strong>Value 1</strong></osds-select-option>
+        <osds-select-option value="2">A value way toooooooooooooooooooo long for a select</osds-select-option>
+        <osds-select-option value="3">Value 3</osds-select-option>
+      </osds-select>
+      <osds-input inline type="text" value="On Vous Héberge ?" clearable></osds-input>
+      <osds-text color="text">
+        OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
+      </osds-text>
+      <osds-input inline type="text" value="On Vous Héberge ?" clearable></osds-input>
+      <osds-text color="text">
+        OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
+      </osds-text>
+      <osds-input inline type="text" value="On Vous Héberge ?" clearable></osds-input>
+      <osds-text color="text">
+        OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
+      </osds-text>
+      <osds-input inline type="text" value="On Vous Héberge ?" clearable></osds-input>
+    </div>
     <osds-button slot="actions" color="default" href="https://www.ovh.com/fr/" target="_blank">En savoir plus</osds-button>
-    <osds-button slot="actions" color="success" href="https://www.ovh.com/fr/" target="_blank">On m'héberge</osds-button>
+    <osds-button slot="actions" color="warning" href="https://www.ovh.com/fr/" target="_blank">On m'héberge</osds-button>
   </osds-modal>
 </body>