Merge branch 'main' into fix-ix-select-dropdown-width

packages/documentation/docs/controls/forms/_forms-field_code.mdx

@@ -30,7 +30,7 @@ To display a helper or feedback text below your component please refer to [valid
 
 ### Counter
 
-To display a counter on inputs or textareas, use the attribute `maxLength`.
+To display a counter on inputs or textareas, use the attribute `maxLength`. If you prefer not to display a counter, programmatically apply a custom validation.
 
 ```html
 <ix-input max-length="128"></ix-input>

packages/storybook-docs/package.json

@@ -17,6 +17,7 @@
     "@chromatic-com/storybook": "^3.2.2",
     "@siemens/ix": "workspace:*",
     "@siemens/ix-icons": "^2.2.0",
+    "@stencil/core": "~4.17.0",
     "@storybook/addon-a11y": "^8.4.2",
     "@storybook/addon-actions": "^8.4.2",
     "@storybook/addon-designs": "^8.0.4",

packages/storybook-docs/src/stories/input-number.stories.ts

@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { Components } from '@siemens/ix/components';
+import type { ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import { genericRender, makeArgTypes } from './utils/generic-render';
+
+type Element = Components.IxNumberInput;
+
+const meta = {
+  title: 'Example/Input',
+  tags: [],
+  render: (args) => genericRender('ix-number-input', args),
+  argTypes: makeArgTypes<Partial<ArgTypes<Element>>>('ix-number-input', {}),
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/r2nqdNNXXZtPmWuVjIlM1Q/iX-Components---Brand-Dark?node-id=225-5535&m=dev',
+    },
+  },
+} satisfies Meta<Element>;
+
+export default meta;
+type Story = StoryObj<Element>;
+
+export const Number: Story = {
+  args: {
+    value: 1337,
+    showStepperButtons: true,
+  },
+};

packages/storybook-docs/src/stories/utils/generic-render.ts

@@ -9,7 +9,7 @@
 import { icons } from '@siemens/ix-icons/dist/sample.json';
 import jsonFile from '@siemens/ix/component-doc.json';
 import { ArgTypes } from '@storybook/web-components';
-
+import type { JsonDocsProp } from '@stencil/core/internal';
 export function genericRender(selector: string, args: any) {
   const rootInner = document.createElement('div');
   rootInner.id = 'root-inner';
@@ -21,7 +21,8 @@ export function genericRender(selector: string, args: any) {
   }
 
   Object.keys(args).forEach((key) => {
-    element.setAttribute(key, args[key]);
+    const prop = getProp(selector, key);
+    element.setAttribute((prop as any).attr ?? prop.name, args[key]);
   });
 
   rootInner.appendChild(element);
@@ -45,6 +46,17 @@ function getComponent(selector: string) {
   return component;
 }
 
+function getProp(selector: string, propName: string) {
+  const component = getComponent(selector);
+  const prop = component.props.find((p) => p.name === propName);
+
+  if (!prop) {
+    throw new Error(`Prop ${propName} not found in component ${selector}`);
+  }
+
+  return prop;
+}
+
 export function makeArgTypes<T = unknown>(
   selector: string,
   overwriteArgTypes: T = {} as T,
@@ -63,10 +75,6 @@ export function makeArgTypes<T = unknown>(
       .forEach((prop) => {
         let attributeName = prop.name;
 
-        if ('attr' in prop && prop.attr) {
-          attributeName = prop.attr;
-        }
-
         if (
           prop.values.length > 1 &&
           prop.values.every((value) => value.type === 'string')
@@ -92,15 +100,15 @@ export function makeArgTypes<T = unknown>(
         }
 
         argTypes[attributeName] = {
-          control: switchTypes(prop.type),
+          control: switchTypes(prop as JsonDocsProp),
         };
       });
   }
   return { ...argTypes, ...overwriteArgTypes };
 }
 
-function switchTypes(type: string): any {
-  switch (type) {
+function switchTypes(prop: JsonDocsProp): any {
+  switch (prop.complexType?.original) {
     case 'string':
       return { type: 'text' };
     case 'boolean':