feat(core/flip-tile): add support for custom sizing

packages/angular/src/components.ts

@@ -649,14 +649,14 @@ export declare interface IxFilterChip extends Components.IxFilterChip {
 
 
 @ProxyCmp({
-  inputs: ['footer', 'state']
+  inputs: ['footer', 'height', 'state', 'width']
 })
 @Component({
   selector: 'ix-flip-tile',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['footer', 'state'],
+  inputs: ['footer', 'height', 'state', 'width'],
 })
 export class IxFlipTile {
   protected el: HTMLElement;

packages/core/component-doc.json

@@ -3309,7 +3309,13 @@
           "attr": "footer",
           "reflectToAttr": false,
           "docs": "Tmp property name",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "Will be removed in 2.0.0. Setting this property has no effect"
+            }
+          ],
+          "deprecation": "Will be removed in 2.0.0. Setting this property has no effect",
           "values": [
             {
               "type": "string"
@@ -3318,6 +3324,32 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "height",
+          "type": "\"auto\" | number",
+          "mutable": false,
+          "attr": "height",
+          "reflectToAttr": false,
+          "docs": "Height interpreted as REM",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "1.5.0"
+            }
+          ],
+          "default": "15.125",
+          "values": [
+            {
+              "value": "auto",
+              "type": "string"
+            },
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "state",
           "type": "FlipTileState.Alarm | FlipTileState.Info | FlipTileState.None | FlipTileState.Primary | FlipTileState.Warning",
@@ -3345,6 +3377,32 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "width",
+          "type": "\"auto\" | number",
+          "mutable": false,
+          "attr": "width",
+          "reflectToAttr": false,
+          "docs": "Width interpreted as REM",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "1.5.0"
+            }
+          ],
+          "default": "16",
+          "values": [
+            {
+              "value": "auto",
+              "type": "string"
+            },
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [],

packages/core/src/components.d.ts

@@ -637,12 +637,23 @@ export namespace Components {
     interface IxFlipTile {
         /**
           * Tmp property name
+          * @deprecated Will be removed in 2.0.0. Setting this property has no effect
          */
         "footer": string;
+        /**
+          * Height interpreted as REM
+          * @since 1.5.0
+         */
+        "height": number | 'auto';
         /**
           * Variation of the Flip
          */
         "state": FlipTileState;
+        /**
+          * Width interpreted as REM
+          * @since 1.5.0
+         */
+        "width": number | 'auto';
     }
     interface IxFlipTileContent {
     }
@@ -3012,12 +3023,23 @@ declare namespace LocalJSX {
     interface IxFlipTile {
         /**
           * Tmp property name
+          * @deprecated Will be removed in 2.0.0. Setting this property has no effect
          */
         "footer"?: string;
+        /**
+          * Height interpreted as REM
+          * @since 1.5.0
+         */
+        "height"?: number | 'auto';
         /**
           * Variation of the Flip
          */
         "state"?: FlipTileState;
+        /**
+          * Width interpreted as REM
+          * @since 1.5.0
+         */
+        "width"?: number | 'auto';
     }
     interface IxFlipTileContent {
     }

packages/core/src/components/flip-tile/flip-tile.scss

@@ -29,10 +29,6 @@
 :host {
   display: flex;
   flex-direction: column;
-  width: 16rem;
-  min-width: 16rem;
-  max-width: 16rem;
-  height: 15.125rem;
   perspective: 1000px;
 
   .flip-tile-header {

packages/core/src/components/flip-tile/flip-tile.tsx

@@ -33,9 +33,22 @@ export class FlipTile {
 
   /**
    * Tmp property name
+   * @deprecated Will be removed in 2.0.0. Setting this property has no effect
    */
   @Prop() footer: string;
 
+  /**
+   * Height interpreted as REM
+   * @since 1.5.0
+   */
+  @Prop() height: number | 'auto' = 15.125;
+
+  /**
+   * Width interpreted as REM
+   * @since 1.5.0
+   */
+  @Prop() width: number | 'auto' = 16;
+
   componentDidLoad() {
     this.contentItems = this.contentContainerElement.querySelectorAll(
       'ix-flip-tile-content'
@@ -78,7 +91,16 @@ export class FlipTile {
 
   render() {
     return (
-      <Host>
+      <Host
+        style={{
+          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
+          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
+          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
+          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
+          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
+          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
+        }}
+      >
         <div
           class={{
             'flip-tile-container': true,

packages/core/src/tests/flip-tile/custom-sizes/index.html

@@ -0,0 +1,55 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <div
+      style="
+        display: 'flex';
+        justify-content: 'center';
+        position: 'relative';
+        margin-top: '2rem';
+      "
+    >
+      <ix-flip-tile width="14" height="12">
+        <div slot="header">Flip header</div>
+        <div slot="footer">
+          <div>Predicted maintenance date</div>
+          <div class="d-flex align-items-center">
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
+          </div>
+        </div>
+      </ix-flip-tile>
+      <ix-flip-tile width="24" height="20" state="Primary">
+        <div slot="header">Flip header</div>
+        <div slot="footer">
+          <div>Predicted maintenance date</div>
+          <div class="d-flex align-items-center">
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
+          </div>
+        </div>
+      </ix-flip-tile>
+      <ix-flip-tile width="auto" height="auto" state="Info">
+        <div slot="header">Flip header</div>
+        <div slot="footer">
+          <div>Predicted maintenance date</div>
+          <div class="d-flex align-items-center">
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
+          </div>
+        </div>
+      </ix-flip-tile>
+    </div>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>

packages/core/src/tests/flip-tile/flip-tile.e2e.ts

@@ -15,4 +15,9 @@ regressionTest.describe('flip-tile', () => {
     await page.goto('flip-tile/basic');
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
+
+  regressionTest('custom sizes', async ({ page }) => {
+    await page.goto('flip-tile/custom-sizes');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });

packages/vue/src/components.ts

@@ -238,7 +238,9 @@ export const IxFilterChip = /*@__PURE__*/ defineContainer<JSX.IxFilterChip>('ix-
 
 export const IxFlipTile = /*@__PURE__*/ defineContainer<JSX.IxFlipTile>('ix-flip-tile', undefined, [
   'state',
-  'footer'
+  'footer',
+  'height',
+  'width'
 ]);