feat(message): add command to e2e:ci & alignment fix

Signed-off-by: Stagnol <[email protected]>
ovh · Jul 29, 2024 · 21d5f5f · 21d5f5f
1 parent 9148991
commit 21d5f5f
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 16 deletions.
diff --git a/packages/ods/src/components/message/package.json b/packages/ods/src/components/message/package.json
@@ -12,7 +12,7 @@
     "lint:ts": "eslint '{src,tests}/**/*.{js,ts,tsx}'",
     "start": "stencil build --dev --watch --serve",
     "test:e2e": "stencil test --e2e --config stencil.config.ts",
-    "test:e2e:ci": "tsc --noEmit && stencil test --e2e --ci --config stencil.config.ts",
+    "test:e2e:ci": "tsc --noEmit && stencil test --e2e --ci --runInBand --config stencil.config.ts",
     "test:spec": "stencil test --spec --config stencil.config.ts --coverage",
     "test:spec:ci": "tsc --noEmit && stencil test --config stencil.config.ts  --spec --ci --coverage"
   }

diff --git a/packages/ods/src/components/message/src/components/ods-message/ods-message.scss b/packages/ods/src/components/message/src/components/ods-message/ods-message.scss
@@ -3,9 +3,9 @@
 
 $colors: ('critical', 'danger', 'information', 'success', 'warning');
 
-:host(.ods-message) {
-  display: inline-flex;
-  flex-flow: row;
+slot:not([name]) {
+  display: flex;
+  align-self: center;
 }
 
 .ods-message {
@@ -26,7 +26,7 @@ $colors: ('critical', 'danger', 'information', 'success', 'warning');
     }
 
     &__close {
-      display: flex;
+      display: inline-flex;
       align-items: center;
       justify-content: center;
       margin-left: 0.5rem;

diff --git a/packages/ods/src/components/message/src/globals.ts b/packages/ods/src/components/message/src/globals.ts
@@ -6,3 +6,4 @@
  *   import '../../text/src';
  */
 import '../../icon/src';
+import '../../tooltip/src';
diff --git a/packages/ods/src/components/message/src/index.html b/packages/ods/src/components/message/src/index.html
@@ -20,7 +20,6 @@
   <p>Default</p>
   <ods-message>Default Message</ods-message>
 
-
   <p>Variant</p>
   <ods-message variant="default">Default variant message</ods-message>
   <ods-message variant="light">Light variant message</ods-message>
@@ -44,5 +43,26 @@
 
   <p>Interactive element in slot</p>
   <ods-message><button>Click me</button></ods-message>
+
+  <p>Tooltip in slot</p>
+  <ods-message>
+    <button id="tooltip-trigger">
+      Hover me
+    </button>
+
+    <ods-tooltip trigger-id="tooltip-trigger">
+      Tooltip content
+    </ods-tooltip>
+  </ods-message>
+
+  <p>Select in slot</p>
+  <ods-message>
+    <select name="pets" id="pet-select">
+      <option value="">--Please choose an option--</option>
+      <option value="dog">Dog</option>
+      <option value="cat">Cat</option>
+      <option value="hamster">Hamster</option>
+    </select>
+  </ods-message>
 </body>
 </html>
diff --git a/packages/ods/src/style/_message.scss b/packages/ods/src/style/_message.scss
@@ -1,14 +1,6 @@
 @mixin ods-message() {
-  box-sizing: border-box;
-  display: flex;
-  position: relative;
-  align-items: center;
-  opacity: 1;
-  margin: 0;
-  border: none;
-  box-shadow: none;
-  width: 200%;
-  overflow: hidden;
+  display: inline-flex;
+  align-items: flex-start;
 }
 
 @mixin ods-message-variant-default($color) {