diff --git a/.vscode/extensions.json b/.vscode/extensions.json index f8f53ebadf..80f61be53f 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2022 Siemens AG + * SPDX-FileCopyrightText: 2024 Siemens AG * * SPDX-License-Identifier: MIT * diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index b7407966ab..885e2418c2 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -2,6 +2,9 @@ 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. --> # Code of Conduct diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 81de06dde9..f60f056e36 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,6 +2,9 @@ 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. --> diff --git a/MAINTAINERS.md b/MAINTAINERS.md index 030e4138dd..8b245c52a5 100644 --- a/MAINTAINERS.md +++ b/MAINTAINERS.md @@ -2,6 +2,9 @@ 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. --> Lukas Maurer diff --git a/RELEASE-READINESS.md b/RELEASE-READINESS.md index c27bf0506d..9feb0e8b5a 100644 --- a/RELEASE-READINESS.md +++ b/RELEASE-READINESS.md @@ -2,6 +2,9 @@ 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. --> All features/fixes satisfy their respective DoD diff --git a/SECURITY.md b/SECURITY.md index 1e8db740f6..d93e1f47f5 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -2,6 +2,9 @@ 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. --> # Reporting Security Issues diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts index 4960b82fba..cf532e1cb5 100644 --- a/packages/angular-test-app/src/app/app-routing.module.ts +++ b/packages/angular-test-app/src/app/app-routing.module.ts @@ -121,6 +121,7 @@ import Toast from 'src/preview-examples/toast'; import ToastCustom from 'src/preview-examples/toast-custom'; import ToastPosition from 'src/preview-examples/toast-position'; import Toggle from 'src/preview-examples/toggle'; +import ToggleButtonPrimary from 'src/preview-examples/toggle-button-primary'; import ToggleButtonPrimaryGhost from 'src/preview-examples/toggle-button-primary-ghost'; import ToggleButtonPrimaryOutline from 'src/preview-examples/toggle-button-primary-outline'; import ToggleButtonSecondary from 'src/preview-examples/toggle-button-secondary'; @@ -371,6 +372,7 @@ const routes: Routes = [ { path: 'theme-switcher', component: ThemeService }, { path: 'tile', component: Tile }, { path: 'timepicker', component: Timepicker }, + { path: 'toggle-button-primary', component: ToggleButtonPrimary }, { path: 'toggle-button-secondary', component: ToggleButtonSecondary }, { path: 'toggle-button-secondary-ghost', diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts index b27de3689d..a6099b1f0b 100644 --- a/packages/angular-test-app/src/app/app.module.ts +++ b/packages/angular-test-app/src/app/app.module.ts @@ -130,6 +130,7 @@ import Toast from 'src/preview-examples/toast'; import ToastCustom from 'src/preview-examples/toast-custom'; import ToastPosition from 'src/preview-examples/toast-position'; import Toggle from 'src/preview-examples/toggle'; +import ToggleButtonPrimary from 'src/preview-examples/toggle-button-primary'; import ToggleButtonPrimaryGhost from 'src/preview-examples/toggle-button-primary-ghost'; import ToggleButtonPrimaryOutline from 'src/preview-examples/toggle-button-primary-outline'; import ToggleButtonSecondary from 'src/preview-examples/toggle-button-secondary'; @@ -241,6 +242,7 @@ import Echarts from 'src/preview-examples/echarts'; ThemeSwitcherExample, Tile, Timepicker, + ToggleButtonPrimary, ToggleButtonPrimaryGhost, ToggleButtonPrimaryOutline, ToggleButtonSecondary, diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-primary.ts b/packages/angular-test-app/src/preview-examples/toggle-button-primary.ts new file mode 100644 index 0000000000..f5f9cc9931 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary.ts @@ -0,0 +1,26 @@ +/* + * 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 { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + template: ` + Normal + Pressed + Disabled + Loading + `, + styles: [ + ` + @import 'example-styles/dist/toggle-buttons.css'; + `, + ], +}) +export default class Buttons {} diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 358e001a74..258cad14fd 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -368,7 +368,7 @@ import type { FilterState as IIxCategoryFilterFilterState } from '@siemens/ix'; export declare interface IxCategoryFilter extends Components.IxCategoryFilter { /** - * Event dispatched whenever the a category gets selected in the dropdown + * Event dispatched whenever a category gets selected in the dropdown */ categoryChanged: EventEmitter>; /** diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 557dcd80cc..8147aa03b4 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -2079,7 +2079,7 @@ }, "mutable": false, "reflectToAttr": false, - "docs": "Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.\nEach ID maps to an object with a label and an array of options to select from.", + "docs": "Configuration object hash used to populate the dropdown menu for type-ahead and quick selection functionality.\nEach ID maps to an object with a label and an array of options to select from.", "docsTags": [], "values": [ { @@ -2299,7 +2299,7 @@ "mutable": false, "attr": "repeat-categories", "reflectToAttr": false, - "docs": "If set to true allows that a single category can be set more than once.\nAn already set category will not appear in the category dropdown if set to false.\n\nDefaults to true", + "docs": "If set to true, allows that a single category can be set more than once.\nAn already set category will not appear in the category dropdown if set to false.\n\nDefaults to true", "docsTags": [], "default": "true", "values": [ @@ -2355,7 +2355,7 @@ }, "mutable": false, "reflectToAttr": false, - "docs": "A list of strings that will be supplied as typeahead suggestions not tied to any categories.", + "docs": "A list of strings that will be supplied as type-ahead suggestions not tied to any categories.", "docsTags": [], "values": [ { @@ -2379,7 +2379,7 @@ }, "cancelable": true, "composed": true, - "docs": "Event dispatched whenever the a category gets selected in the dropdown", + "docs": "Event dispatched whenever a category gets selected in the dropdown", "docsTags": [] }, { diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index fbac42601d..485d8fbb64 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -359,7 +359,7 @@ export namespace Components { } interface IxCategoryFilter { /** - * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality. Each ID maps to an object with a label and an array of options to select from. + * Configuration object hash used to populate the dropdown menu for type-ahead and quick selection functionality. Each ID maps to an object with a label and an array of options to select from. */ "categories": { [id: string]: { @@ -406,7 +406,7 @@ export namespace Components { */ "readonly": boolean; /** - * If set to true allows that a single category can be set more than once. An already set category will not appear in the category dropdown if set to false. Defaults to true + * If set to true, allows that a single category can be set more than once. An already set category will not appear in the category dropdown if set to false. Defaults to true */ "repeatCategories": boolean; /** @@ -415,7 +415,7 @@ export namespace Components { */ "staticOperator"?: LogicalFilterOperator; /** - * A list of strings that will be supplied as typeahead suggestions not tied to any categories. + * A list of strings that will be supplied as type-ahead suggestions not tied to any categories. */ "suggestions": string[]; "tmpDisableScrollIntoView": boolean; @@ -4411,7 +4411,7 @@ declare namespace LocalJSX { } interface IxCategoryFilter { /** - * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality. Each ID maps to an object with a label and an array of options to select from. + * Configuration object hash used to populate the dropdown menu for type-ahead and quick selection functionality. Each ID maps to an object with a label and an array of options to select from. */ "categories"?: { [id: string]: { @@ -4450,7 +4450,7 @@ declare namespace LocalJSX { [id: string]: string; }; /** - * Event dispatched whenever the a category gets selected in the dropdown + * Event dispatched whenever a category gets selected in the dropdown */ "onCategoryChanged"?: (event: IxCategoryFilterCustomEvent) => void; /** @@ -4470,7 +4470,7 @@ declare namespace LocalJSX { */ "readonly"?: boolean; /** - * If set to true allows that a single category can be set more than once. An already set category will not appear in the category dropdown if set to false. Defaults to true + * If set to true, allows that a single category can be set more than once. An already set category will not appear in the category dropdown if set to false. Defaults to true */ "repeatCategories"?: boolean; /** @@ -4479,7 +4479,7 @@ declare namespace LocalJSX { */ "staticOperator"?: LogicalFilterOperator; /** - * A list of strings that will be supplied as typeahead suggestions not tied to any categories. + * A list of strings that will be supplied as type-ahead suggestions not tied to any categories. */ "suggestions"?: string[]; "tmpDisableScrollIntoView"?: boolean; diff --git a/packages/core/src/components/category-filter/category-filter.tsx b/packages/core/src/components/category-filter/category-filter.tsx index 6ead39ac3a..bc98eb1ec5 100644 --- a/packages/core/src/components/category-filter/category-filter.tsx +++ b/packages/core/src/components/category-filter/category-filter.tsx @@ -69,7 +69,7 @@ export class CategoryFilter { @Prop() placeholder: string; /** - * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality. + * Configuration object hash used to populate the dropdown menu for type-ahead and quick selection functionality. * Each ID maps to an object with a label and an array of options to select from. */ @Prop() categories: { @@ -91,7 +91,7 @@ export class CategoryFilter { } = {}; /** - * A list of strings that will be supplied as typeahead suggestions not tied to any categories. + * A list of strings that will be supplied as type-ahead suggestions not tied to any categories. */ @Prop() suggestions: string[]; @@ -116,7 +116,7 @@ export class CategoryFilter { @Prop() staticOperator?: LogicalFilterOperator; /** - * If set to true allows that a single category can be set more than once. + * If set to true, allows that a single category can be set more than once. * An already set category will not appear in the category dropdown if set to false. * * Defaults to true @@ -139,7 +139,7 @@ export class CategoryFilter { @Prop() i18nPlainText = 'Filter by text'; /** - * Event dispatched whenever the a category gets selected in the dropdown + * Event dispatched whenever a category gets selected in the dropdown */ @Event() categoryChanged: EventEmitter; diff --git a/packages/documentation/docs/controls/_avatar_code.md b/packages/documentation/docs/controls/_avatar_code.md index 00a23d0fc8..c9cf992cf3 100644 --- a/packages/documentation/docs/controls/_avatar_code.md +++ b/packages/documentation/docs/controls/_avatar_code.md @@ -1,41 +1,48 @@ -import Playground from '@site/src/components/PlaygroundV2'; import Props from './../auto-generated/ix-avatar/props.md'; import Events from './../auto-generated/ix-avatar/events.md'; -import Tags from './../auto-generated/ix-avatar/tags.md'; -# Avatar +import Playground from '@site/src/components/PlaygroundV2'; - +## Examples -## Default +### Basic + name="avatar" + examplesByName> -## Initials +### Initials + name="avatar-initials" + examplesByName> -## Image +### Image + name="avatar-image" + examplesByName> -## Header +### Header -You can also add the avatar to the header which will turn it into a clickable button. +You can also add the avatar to the header, which will turn it into a clickable button. - + + -## Properties +## API -### Props +### Properties + +### Events + + diff --git a/packages/documentation/docs/controls/_blind_code.md b/packages/documentation/docs/controls/_blind_code.md index 65b6b2d9cd..b948ceccf2 100644 --- a/packages/documentation/docs/controls/_blind_code.md +++ b/packages/documentation/docs/controls/_blind_code.md @@ -1,16 +1,17 @@ import { ApiTableSinceTag } from '@site/src/components/ApiTableTag'; -import TabItem from '@theme/TabItem'; import Preview from '@site/src/components/Preview'; import Props from './../auto-generated/ix-blind/props.md'; import Events from './../auto-generated/ix-blind/events.md'; import Playground from '@site/src/components/PlaygroundV2' +## Examples + + name="blind" + height="16rem" + examplesByName> ### Header actions @@ -18,25 +19,27 @@ examplesByName> + name="blind-header-actions" + height="16rem" + examplesByName> +### Variants + + name="blind-variants" + height="55rem" + examplesByName> -### Properties +## API -#### Props +### Properties -#### Events +### Events diff --git a/packages/documentation/docs/controls/_breadcrumb_code.md b/packages/documentation/docs/controls/_breadcrumb_code.md index 3ba177bc34..8c18339662 100644 --- a/packages/documentation/docs/controls/_breadcrumb_code.md +++ b/packages/documentation/docs/controls/_breadcrumb_code.md @@ -2,36 +2,39 @@ import Props from './../auto-generated/ix-breadcrumb/props.md'; import Events from './../auto-generated/ix-breadcrumb/events.md'; import ItemProps from './../auto-generated/ix-breadcrumb-item/props.md'; +import ItemEvents from './../auto-generated/ix-breadcrumb-item/events.md'; import Playground from '@site/src/components/PlaygroundV2' +## Examples + + name="breadcrumb" + height="8rem" + examplesByName> ### Truncate + name="breadcrumb-truncate" + height="10rem" + hideInitalCodePreview + examplesByName> ### Lazy loaded next items + name="breadcrumb-next-items" + height="8rem" + hideInitalCodePreview + examplesByName> -## Properties (ix-breadcrumb) +## API (ix-breadcrumb) -### Props +### Properties @@ -39,8 +42,12 @@ examplesByName> -## Properties (ix-breadcrumb-item) +## API (ix-breadcrumb-item) -### Props +### Properties + +#### Events + + diff --git a/packages/documentation/docs/controls/_card-list_code.md b/packages/documentation/docs/controls/_card-list_code.md index 853b56f16e..f62da73caf 100644 --- a/packages/documentation/docs/controls/_card-list_code.md +++ b/packages/documentation/docs/controls/_card-list_code.md @@ -1,23 +1,23 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import CardListTags from './../auto-generated/ix-card-list/tags.md'; -import CardListProps from './../auto-generated/ix-card-list/props.md'; -import CardListEvents from './../auto-generated/ix-card-list/events.md'; +import Props from './../auto-generated/ix-card-list/props.md'; +import Events from './../auto-generated/ix-card-list/events.md'; -## Card List (ix-card-list) +import Playground from '@site/src/components/PlaygroundV2'; - +## Examples + height="55rem" + name="card-list" + examplesByName> +## API + ### Properties - + ### Events - + diff --git a/packages/documentation/docs/controls/_card_code.md b/packages/documentation/docs/controls/_card_code.md index 58171e25d1..fa1f9f93da 100644 --- a/packages/documentation/docs/controls/_card_code.md +++ b/packages/documentation/docs/controls/_card_code.md @@ -12,58 +12,62 @@ import CardTags from './../auto-generated/ix-card/tags.md'; import CardProps from './../auto-generated/ix-card/props.md'; import CardEvents from './../auto-generated/ix-card/events.md'; +## Examples + -## Action Card (ix-action-card) + + +### Action Card + height="13rem" + name="action-card" + examplesByName> -### Properties - - - -### Events - - - -## Push Card (ix-push-card) +## Push Card + height="20rem" + name="push-card" + examplesByName> +## API (ix-card) + ### Properties - + ### Events - + -## Card (ix-card) +## API (ix-action-card) - +### Properties - - + + +### Events + + + +## API (ix-push-card) ### Properties - + ### Events - + + diff --git a/packages/documentation/docs/controls/_category-filter_code.md b/packages/documentation/docs/controls/_category-filter_code.md index 228cdab9ad..baff062b03 100644 --- a/packages/documentation/docs/controls/_category-filter_code.md +++ b/packages/documentation/docs/controls/_category-filter_code.md @@ -1,30 +1,33 @@ import TabItem from '@theme/TabItem'; import Preview from '@site/src/components/Preview'; + import Props from './../auto-generated/ix-category-filter/props.md'; import Events from './../auto-generated/ix-category-filter/events.md'; import Playground from '@site/src/components/PlaygroundV2'; -# Category filter +## Examples -## Usage +### Basic + name="category-filter" + height="12rem" + examplesByName> + -### without categories +### Without categories + name="category-filter-suggestions" + hideInitalCodePreview + height="12rem" + examplesByName> + -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/_chip_code.md b/packages/documentation/docs/controls/_chip_code.md index c579e83144..b1ad4aae53 100644 --- a/packages/documentation/docs/controls/_chip_code.md +++ b/packages/documentation/docs/controls/_chip_code.md @@ -1,17 +1,21 @@ -import Playground from '@site/src/components/PlaygroundV2'; import Props from './../auto-generated/ix-chip/props.md'; import Events from './../auto-generated/ix-chip/events.md'; -## Usage +import Playground from '@site/src/components/PlaygroundV2'; + +## Examples + +### Basic + name="chip" + height="25rem" + examplesByName> -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/_content-header_code.md b/packages/documentation/docs/controls/_content-header_code.md index c10429a9d8..3f469edb7c 100644 --- a/packages/documentation/docs/controls/_content-header_code.md +++ b/packages/documentation/docs/controls/_content-header_code.md @@ -1,27 +1,27 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-content-header/props.md'; import Events from './../auto-generated/ix-content-header/events.md'; -# Content header +import Playground from '@site/src/components/PlaygroundV2'; + +## Examples -## Usage +### Basic + name="content-header" + examplesByName> ### No back button + name="content-header-no-back" + examplesByName> -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/_divider.md b/packages/documentation/docs/controls/_divider.md index fecf590542..0889816b9a 100644 --- a/packages/documentation/docs/controls/_divider.md +++ b/packages/documentation/docs/controls/_divider.md @@ -1,15 +1,17 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-divider/props.md'; import Events from './../auto-generated/ix-divider/events.md'; import Tags from './../auto-generated/ix-divider/tags.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Divider -## Usage +## Examples + name="divider" + height="16rem" + examplesByName> + diff --git a/packages/documentation/docs/controls/_dropdown_code.md b/packages/documentation/docs/controls/_dropdown_code.md index e3cfb32bea..662158b4cc 100644 --- a/packages/documentation/docs/controls/_dropdown_code.md +++ b/packages/documentation/docs/controls/_dropdown_code.md @@ -1,43 +1,52 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-dropdown/props.md'; import Events from './../auto-generated/ix-dropdown/events.md'; -import TagsQuickActions from './../auto-generated/ix-dropdown-quick-actions/tags.md'; import ItemProps from './../auto-generated/ix-dropdown-item/props.md'; import ItemEvents from './../auto-generated/ix-dropdown-item/events.md'; +import TagsQuickActions from './../auto-generated/ix-dropdown-quick-actions/tags.md'; + +import Playground from '@site/src/components/PlaygroundV2'; + # Dropdown -## Usage +## Examples +name="dropdown" +height="28rem" +examplesByName> + ### Dropdown with icon +name="dropdown-icon" +height="18rem" +examplesByName> + ### Dropdown with quick actions menu +name="dropdown-quick-actions" +height="22rem" +examplesByName> + ### Dropdown with submenu +name="dropdown-submenu" +height="22rem" +examplesByName> + -## Properties (ix-dropdown) +## API (ix-dropdown) -### Props +### Properties @@ -45,8 +54,12 @@ examplesByName> -## Properties (ix-dropdown-item) +## API (ix-dropdown-item) -### Props +### Properties + +### Events + + diff --git a/packages/documentation/docs/controls/_layout-grid_code.md b/packages/documentation/docs/controls/_layout-grid_code.md index bbe59d7f81..fdda44e213 100644 --- a/packages/documentation/docs/controls/_layout-grid_code.md +++ b/packages/documentation/docs/controls/_layout-grid_code.md @@ -1,19 +1,21 @@ -import Playground from '@site/src/components/PlaygroundV2'; import Props from './../auto-generated/ix-layout-grid/props.md'; import Events from './../auto-generated/ix-layout-grid/events.md'; - import ColProps from './../auto-generated/ix-col/props.md'; import ColEvents from './../auto-generated/ix-col/events.md'; +import Playground from '@site/src/components/PlaygroundV2' + +# Message bar -## Usage +## Examples + +### Basic + examplesByName> ### Size @@ -32,9 +34,9 @@ import ColEvents from './../auto-generated/ix-col/events.md'; examplesByName> -## Properties (ix-layout-grid) +## API (ix-layout-grid) -### Props +### Properties @@ -42,9 +44,9 @@ import ColEvents from './../auto-generated/ix-col/events.md'; -## Properties (ix-col) +## API (ix-col) -### Props +### Properties diff --git a/packages/documentation/docs/controls/_panes_styleguide.md b/packages/documentation/docs/controls/_pane_styleguide.md similarity index 100% rename from packages/documentation/docs/controls/_panes_styleguide.md rename to packages/documentation/docs/controls/_pane_styleguide.md diff --git a/packages/documentation/docs/controls/_panes_code.md b/packages/documentation/docs/controls/_panes_code.md index 71c3e9f563..b203acc5e6 100644 --- a/packages/documentation/docs/controls/_panes_code.md +++ b/packages/documentation/docs/controls/_panes_code.md @@ -1,41 +1,49 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import PaneProps from './../auto-generated/ix-pane/props.md'; import PaneEvents from './../auto-generated/ix-pane/events.md'; import PaneLayoutProps from './../auto-generated/ix-pane-layout/props.md'; import PaneLayoutEvents from './../auto-generated/ix-pane-layout/events.md'; import Tags from './../auto-generated/ix-pane/tags.md'; -## Pane +import Playground from '@site/src/components/PlaygroundV2'; + +## Example + +### Basic + name="pane" + height="24rem" + noMargin + examplesByName> -## Pane Layout +### Pane Layout + + + name="pane-layout" + height="24rem" + noMargin + examplesByName> -## Properties +## API (ix-pane) -### Pane +### Properties -### Pane Layout +### Events - + -## Events +## API (ix-pane-layout) -### Pane +### Properties - + -### Pane Layout +### Events diff --git a/packages/documentation/docs/controls/_pill_code.md b/packages/documentation/docs/controls/_pill_code.md index 3b8eba46c2..2ac7e17984 100644 --- a/packages/documentation/docs/controls/_pill_code.md +++ b/packages/documentation/docs/controls/_pill_code.md @@ -1,20 +1,28 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-pill/props.md'; import Events from './../auto-generated/ix-pill/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + +## Examples + +### Basic + + name="pill" + examplesByName> -## Variants +### Variants + + name="pill-variants" + height="24rem" + examplesByName> -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/_toast/angular/toast-config.md b/packages/documentation/docs/controls/_toast/angular/toast-config.md index 6f05133ad4..59aad44ed1 100644 --- a/packages/documentation/docs/controls/_toast/angular/toast-config.md +++ b/packages/documentation/docs/controls/_toast/angular/toast-config.md @@ -1,9 +1,9 @@ -| Name | Description | Type | Default | -| -------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- | -| autoClose |
Autoclose behavior
| `boolean` | `true` | -| autoCloseDelay |
Autoclose title after delay
| `number` | `5000` | -| icon |
Icon of toast
| `string` | `undefined` | -| iconColor |
Icon color of toast
| `string` | `undefined` | -| message |
Toast message
| `"string" ｜ "TempateRef"` | `undefined` | -| title |
Toast title
| `string` | `undefined` | -| type |
Toast type
| `"error" ｜ "info" ｜ "success" ｜ "warning"` | `'info'` | +| Name | Description | Type | Default | +|----------------|-----------------------------------------------------------------------------------------------------------------------|--------------------------------------------|-------------| +| autoClose |
Autoclose behavior
| `boolean` | `true` | +| autoCloseDelay |
Autoclose title after delay
| `number` | `5000` | +| icon |
Icon of toast
| `string` | `undefined` | +| iconColor |
Icon color of toast
| `string` | `undefined` | +| message |
Toast message
| `string ｜ TempateRef` | `undefined` | +| title |
Toast title
| `string` | `undefined` | +| type |
Toast type
| `"error" ｜ "info" ｜ "success" ｜ "warning"` | `"info"` | diff --git a/packages/documentation/docs/controls/_toast/javascript/toast-config.md b/packages/documentation/docs/controls/_toast/javascript/toast-config.md index 93c8101055..240a0be7b2 100644 --- a/packages/documentation/docs/controls/_toast/javascript/toast-config.md +++ b/packages/documentation/docs/controls/_toast/javascript/toast-config.md @@ -1,9 +1,9 @@ -| Name | Description | Type | Default | -| -------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- | -| autoClose |
Autoclose behavior
| `boolean` | `true` | -| autoCloseDelay |
Autoclose title after delay
| `number` | `5000` | -| icon |
Icon of toast
| `string` | `undefined` | -| iconColor |
Icon color of toast
| `string` | `undefined` | -| message |
Toast message
| `"string" ｜ "HTMLElement"` | `undefined` | -| title |
Toast title
| `string` | `undefined` | -| type |
Toast type
| `"error" ｜ "info" ｜ "success" ｜ "warning"` | `'info'` | +| Name | Description | Type | Default | +|----------------|-----------------------------------------------------------------------------------------------------------------------|--------------------------------------------|-------------| +| autoClose |
Autoclose behavior
| `boolean` | `true` | +| autoCloseDelay |
Autoclose title after delay
| `number` | `5000` | +| icon |
Icon of toast
| `string` | `undefined` | +| iconColor |
Icon color of toast
| `string` | `undefined` | +| message |
Toast message
| `string ｜ HTMLElement` | `undefined` | +| title |
Toast title
| `string` | `undefined` | +| type |
Toast type
| `"error" ｜ "info" ｜ "success" ｜ "warning"` | `"info"` | diff --git a/packages/documentation/docs/controls/_toast/react/toast-config.md b/packages/documentation/docs/controls/_toast/react/toast-config.md index 309948fc20..1a5f7087a1 100644 --- a/packages/documentation/docs/controls/_toast/react/toast-config.md +++ b/packages/documentation/docs/controls/_toast/react/toast-config.md @@ -1,9 +1,8 @@ -| Name | Description | Type | Default | -| -------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- | -| autoClose |
Autoclose behavior
| `boolean` | `true` | -| autoCloseDelay |
Autoclose title after delay
| `number` | `5000` | -| icon |
Icon of toast
| `string` | `undefined` | -| iconColor |
Icon color of toast
| `string` | `undefined` | -| message |
Toast message
| `"string" ｜ "React.ReactNode"` | `undefined` | -| title |
Toast title
| `string` | `undefined` | -| type |
Toast type
| `"error" ｜ "info" ｜ "success" ｜ "warning"` | `'info'` | +| Name | Description | Type | Default | +|----------------|-----------------------------------------------------------------------------------------------------------------------|--------------------------------------------|-------------| +| autoClose |
Autoclose behavior
| `boolean` | `true` | +| autoCloseDelay |
Autoclose title after delay
| `number` | `5000` | +| icon |
Icon of toast
| `string` | `undefined` | +| iconColor |
Icon color of toast
| `string` | `undefined` | +| message |
Toast message
| `string ｜ React.ReactNode` | `undefined` || title |
Toast title
| `string` | `undefined` | +| type |
Toast type
| `"error" ｜ "info" ｜ "success" ｜ "warning"` | `"info"` | diff --git a/packages/documentation/docs/controls/_toast/vue/toast-config.md b/packages/documentation/docs/controls/_toast/vue/toast-config.md new file mode 100644 index 0000000000..240a0be7b2 --- /dev/null +++ b/packages/documentation/docs/controls/_toast/vue/toast-config.md @@ -0,0 +1,9 @@ +| Name | Description | Type | Default | +|----------------|-----------------------------------------------------------------------------------------------------------------------|--------------------------------------------|-------------| +| autoClose |
Autoclose behavior
| `boolean` | `true` | +| autoCloseDelay |
Autoclose title after delay
| `number` | `5000` | +| icon |
Icon of toast
| `string` | `undefined` | +| iconColor |
Icon color of toast
| `string` | `undefined` | +| message |
Toast message
| `string ｜ HTMLElement` | `undefined` | +| title |
Toast title
| `string` | `undefined` | +| type |
Toast type
| `"error" ｜ "info" ｜ "success" ｜ "warning"` | `"info"` | diff --git a/packages/documentation/docs/controls/application-frame/_about-and-legal_code.md b/packages/documentation/docs/controls/application-frame/_about-and-legal_code.md index ad29314d7b..218ea705be 100644 --- a/packages/documentation/docs/controls/application-frame/_about-and-legal_code.md +++ b/packages/documentation/docs/controls/application-frame/_about-and-legal_code.md @@ -1,31 +1,43 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../../auto-generated/ix-menu-about/props.md'; import Events from './../../auto-generated/ix-menu-about/events.md'; + import PropsItem from './../../auto-generated/ix-menu-about-item/props.md'; +import EventsItem from './../../auto-generated/ix-menu-about-item/events.md'; + +import Playground from '@site/src/components/PlaygroundV2'; + +## Examples -## Usage +### Basic + name="about-and-legal" + height="30rem" + width="100%" + noMargin + examplesByName> -## Change language of legal links +### Change language of legal links Supported language codes are `'global/en' | 'global/es' | 'de/de' | 'cn/zh'` -## Properties (ix-menu-about) +## API (ix-menu-about) -#### Props +### Properties -#### Events +### Events -## Properties (ix-menu-about-item) +## API (ix-menu-about-item) -#### Props +### Properties + +### Events + + diff --git a/packages/documentation/docs/controls/application-frame/_application-header_code.md b/packages/documentation/docs/controls/application-frame/_application-header_code.md index 8a7836d28a..e1dec37d1f 100644 --- a/packages/documentation/docs/controls/application-frame/_application-header_code.md +++ b/packages/documentation/docs/controls/application-frame/_application-header_code.md @@ -1,21 +1,37 @@ import Slots from './../../auto-generated/ix-application-header/slots.md'; import Props from './../../auto-generated/ix-application-header/props.md'; +import Events from './../../auto-generated/ix-application-header/events.md'; + import Playground from '@site/src/components/PlaygroundV2'; The application-header can host custom content which will be displayed on the far right side of the header. -## Usage +## Examples + +## Basic - + + ### Avatar -Enhance the interactivity of your application-header by placing the avatar component as part of the content. This not only makes the avatar clickable but also enables the addition of dropdown-item's directly within the avatar component. +Enhance the interactivity of your application-header by placing the avatar component as part of the content. This not only makes the avatar clickable, but also enables the addition of dropdown-item's directly within the avatar component. + +## API + +### Properties -## Slots + + +### Slots -## API +### Events + + - diff --git a/packages/documentation/docs/controls/application-frame/_application-menu_code.md b/packages/documentation/docs/controls/application-frame/_application-menu_code.md index 81ec75f64d..9b68437167 100644 --- a/packages/documentation/docs/controls/application-frame/_application-menu_code.md +++ b/packages/documentation/docs/controls/application-frame/_application-menu_code.md @@ -1,61 +1,76 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../../auto-generated/ix-menu-settings/props.md'; import MenuProps from './../../auto-generated/ix-menu/props.md'; import MenuEvents from './../../auto-generated/ix-menu/events.md'; + import ItemProps from './../../auto-generated/ix-menu-item/props.md'; import ItemEvents from './../../auto-generated/ix-menu-item/events.md'; import CategoryProps from './../../auto-generated/ix-menu-category/props.md'; import CategoryTags from './../../auto-generated/ix-menu-category/tags.md'; +import CategoryEvents from './../../auto-generated/ix-menu-category/events.md'; import AvatarProps from './../../auto-generated/ix-menu-avatar/props.md'; import AvatarEvents from './../../auto-generated/ix-menu-avatar/events.md'; + import AvatarItemProps from './../../auto-generated/ix-menu-avatar-item/props.md'; import AvatarItemEvents from './../../auto-generated/ix-menu-avatar-item/events.md'; import AvatarTags from './../../auto-generated/ix-menu-avatar/tags.md'; -# Navigation menu +import Playground from '@site/src/components/PlaygroundV2'; -## Usage +## Examples + +### Basic + name="vertical-tabs" + height="30rem" + noMargin + hideInitalCodePreview + examplesByName> + -## 2nd navigation level +### 2nd navigation level - + + -## Avatar +### Avatar + name="vertical-tabs-with-avatar" + height="30rem" + noMargin + hideInitalCodePreview + examplesByName> + -## Bottom tabs +### Bottom tabs
- Caution: Since the old implementation using the bottom property on menu items had some problems and will not work anymore please use slot="bottom" instead. + Caution: Since the old implementation using the bottom property on menu items had some problems and will not work anymore, please use slot="bottom" instead.
+ name="menu-with-bottom-tabs" + height="30rem" + noMargin + hideInitalCodePreview + examplesByName> + -## Properties (ix-menu) +## API (ix-menu) -### Props +### Properties @@ -63,21 +78,29 @@ examplesByName> -## Properties (ix-menu-item) +## API (ix-menu-item) ### Props -## Properties (ix-menu-category) +### Events -### Props + + +## API (ix-menu-category) + +### Properties -## Properties (ix-menu-avatar) +### Events + + -### Props +## API (ix-menu-avatar) + +### Properties @@ -85,9 +108,9 @@ examplesByName> -## Properties (ix-menu-avatar-item) +## API (ix-menu-avatar-item) -### Props +### Properties diff --git a/packages/documentation/docs/controls/application-frame/_application_code.md b/packages/documentation/docs/controls/application-frame/_application_code.md index 83727d060f..1c14d935df 100644 --- a/packages/documentation/docs/controls/application-frame/_application_code.md +++ b/packages/documentation/docs/controls/application-frame/_application_code.md @@ -1,5 +1,6 @@ import Props from './../../auto-generated/ix-application/props.md'; import Events from './../../auto-generated/ix-application/events.md'; + import Playground from '@site/src/components/PlaygroundV2'; The application component acts as a centralized hub for configuring aspects of your web-application, such as screen breakpoints, theming and app switch configuration. By consolidating these configuration points, it simplifies the management of application-wide settings and ensures a consistent user interface across different scenarios. @@ -8,15 +9,27 @@ The component itself is designed with modularity in mind. It can be seamlessly i It's important to note that the application component focuses solely on layouting and does not dictate visual design. -## Example +## Examples + +### Basic -The code snippet below shows an example of a combination of different components like `ix-application-header` or `ix-content`. +The code snippet below shows an example of a combination of different components, like `ix-application-header` or `ix-content`. - + + ### Breakpoints - + + ### Application switch @@ -34,7 +47,12 @@ The navigation to another application is implemented via `window.open` (https:// } ``` - + + ## API diff --git a/packages/documentation/docs/controls/application-frame/_basic-navigation_code.md b/packages/documentation/docs/controls/application-frame/_basic-navigation_code.md index c047def79d..a7d499c526 100644 --- a/packages/documentation/docs/controls/application-frame/_basic-navigation_code.md +++ b/packages/documentation/docs/controls/application-frame/_basic-navigation_code.md @@ -1,20 +1,35 @@ -import Playground from '@site/src/components/PlaygroundV2'; import Props from './../../auto-generated/ix-basic-navigation/props.md'; +import Events from './../../auto-generated/ix-basic-navigation/events.md'; + +import Playground from '@site/src/components/PlaygroundV2'; -## Usage +## Examples - +### Basic + + + ### Without header + name="basic-navigation-without-header" + height="30rem" + noMargin + hideInitalCodePreview + examplesByName> + -### ix-basic-navigation +## API -#### Props +### Properties + +### Events + + diff --git a/packages/documentation/docs/controls/application-frame/_basic-navigation_styleguide.md b/packages/documentation/docs/controls/application-frame/_basic-navigation_styleguide.md index 62d15abed7..1b7dbf6df0 100644 --- a/packages/documentation/docs/controls/application-frame/_basic-navigation_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_basic-navigation_styleguide.md @@ -47,6 +47,11 @@ Basic navigation automatically adapts, by default, to the three breakpoints lg ( - The navigation menu disappears and the icon moves into the application header - Clicking the icon displays the navigation menu as an overlay -### Example - - +### Examples + + + diff --git a/packages/documentation/docs/controls/application-frame/_content_code.md b/packages/documentation/docs/controls/application-frame/_content_code.md index f5000e6a3f..814eb9577b 100644 --- a/packages/documentation/docs/controls/application-frame/_content_code.md +++ b/packages/documentation/docs/controls/application-frame/_content_code.md @@ -1,19 +1,34 @@ import Tags from './../../auto-generated/ix-content/tags.md'; import Slots from './../../auto-generated/ix-content/slots.md'; import Props from './../../auto-generated/ix-content/props.md'; +import Events from './../../auto-generated/ix-content/events.md'; + import Playground from '@site/src/components/PlaygroundV2'; -# Content +## Examples + +The `ix-content` is usually used as layouting component on a single page. - +### Basic -## Usage + + -The `ix-content` is usually used as layouting component on a single page. +## API + +### Properties + + + +### Events - + -## Slots +### Slots diff --git a/packages/documentation/docs/controls/application-frame/_map-navigation_code.md b/packages/documentation/docs/controls/application-frame/_map-navigation_code.md index c52d331d98..3a683d8e78 100644 --- a/packages/documentation/docs/controls/application-frame/_map-navigation_code.md +++ b/packages/documentation/docs/controls/application-frame/_map-navigation_code.md @@ -1,30 +1,48 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../../auto-generated/ix-map-navigation/props.md'; import Events from './../../auto-generated/ix-map-navigation/events.md'; import PropsOverlay from './../../auto-generated/ix-map-navigation-overlay/props.md'; import EventsOverlay from './../../auto-generated/ix-map-navigation-overlay/events.md'; -## Usage +import Playground from '@site/src/components/PlaygroundV2'; + +## Examples + +### Basic + name="map-navigation" + height="35rem" + oMargin + hideInitalCodePreview + examplesByName> + -## Custom overlay +### Custom overlay + name="map-navigation-overlay" + height="35rem" + noMargin + hideInitalCodePreview + examplesByName> + -## Properties (ix-map-navigation) +## API (ix-map-navigation) -#### Props +### Properties -#### Events +### Events + +## API (ix-map-navigation-overlay) + +### Properties + + + +### Events + + diff --git a/packages/documentation/docs/controls/application-frame/_popover-news_code.md b/packages/documentation/docs/controls/application-frame/_popover-news_code.md index 7ffa89a7d3..f6954fa230 100644 --- a/packages/documentation/docs/controls/application-frame/_popover-news_code.md +++ b/packages/documentation/docs/controls/application-frame/_popover-news_code.md @@ -3,15 +3,20 @@ import Playground from '@site/src/components/PlaygroundV2'; import Props from './../../auto-generated/ix-menu-about-news/props.md'; import Events from './../../auto-generated/ix-menu-about-news/events.md'; -## Usage +## Examples + +### Basic + name="popover-news" + height="30rem" + noMargin + examplesByName> -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/application-frame/_settings_code.md b/packages/documentation/docs/controls/application-frame/_settings_code.md index 8456bc4995..707d54765b 100644 --- a/packages/documentation/docs/controls/application-frame/_settings_code.md +++ b/packages/documentation/docs/controls/application-frame/_settings_code.md @@ -3,16 +3,22 @@ import Playground from '@site/src/components/PlaygroundV2'; import Props from './../../auto-generated/ix-menu-settings/props.md'; import Events from './../../auto-generated/ix-menu-settings/events.md'; import ItemProps from './../../auto-generated/ix-menu-settings-item/props.md'; +import ItemEvents from './../../auto-generated/ix-menu-settings-item/events.md'; -## Usage +## Examples + +### Basic + name="settings" + height="30rem" + noMargin + examplesByName> -## Properties (ix-menu-settings) +## API (ix-menu-settings) -### Props +### Properties @@ -20,8 +26,12 @@ name="settings" height="30rem" noMargin examplesByName> -## Properties (ix-menu-settings-item) +## API (ix-menu-settings-item) -### Props +### Properties + +### Events + + diff --git a/packages/documentation/docs/controls/application-frame/application.md b/packages/documentation/docs/controls/application-frame/application.md index 39156a69b6..96ad6806cf 100644 --- a/packages/documentation/docs/controls/application-frame/application.md +++ b/packages/documentation/docs/controls/application-frame/application.md @@ -13,4 +13,7 @@ import Tags from './../../auto-generated/ix-application/tags.md'; +
+
+ diff --git a/packages/documentation/docs/controls/application-frame/content.md b/packages/documentation/docs/controls/application-frame/content.md index 75c85ea148..ee1776b30f 100644 --- a/packages/documentation/docs/controls/application-frame/content.md +++ b/packages/documentation/docs/controls/application-frame/content.md @@ -13,5 +13,8 @@ import Tags from './../../auto-generated/ix-content/tags.md'; +
+
+ diff --git a/packages/documentation/docs/controls/avatar.md b/packages/documentation/docs/controls/avatar.md index 29818c8543..b6ce3ba8cf 100644 --- a/packages/documentation/docs/controls/avatar.md +++ b/packages/documentation/docs/controls/avatar.md @@ -3,6 +3,13 @@ import DocsTabs from '@site/src/components/DocsTabs'; import DocsUx from './\_avatar_styleguide.md' import DocsCode from './\_avatar_code.md' +import Tags from './../auto-generated/ix-avatar/tags.md'; + # Avatar + + +
+
+ diff --git a/packages/documentation/docs/controls/buttons/_button_code.md b/packages/documentation/docs/controls/buttons/_button_code.md index 01af7d267e..735e9195e2 100644 --- a/packages/documentation/docs/controls/buttons/_button_code.md +++ b/packages/documentation/docs/controls/buttons/_button_code.md @@ -1,14 +1,17 @@ -import Playground from '@site/src/components/PlaygroundV2'; -import Props from './../../auto-generated/ix-button/props.md'; import { ApiTableSinceTag } from '@site/src/components/ApiTableTag'; -## Usage +import Props from './../../auto-generated/ix-button/props.md'; +import Events from './../../auto-generated/ix-button/events.md'; + +import Playground from '@site/src/components/PlaygroundV2'; + +## Examples ### Primary + name="buttons" + examplesByName> ### Primary Outline @@ -20,9 +23,10 @@ Will be used as **Secondary** in UX context ::: + name="button-secondary" + hideInitalCodePreview + examplesByName> + ### Primary Ghost @@ -33,9 +37,10 @@ Will be used as **Ghost** in UX context ::: + name="button-ghost" + hideInitalCodePreview + examplesByName> + ### Secondary @@ -46,9 +51,10 @@ Will be used as **Grey button** in UX context ::: + name="button-grey" + hideInitalCodePreview + examplesByName> + ### Secondary Outline @@ -59,9 +65,10 @@ Will be used as **Grey secondary** in UX context ::: + name="button-grey-secondary" + hideInitalCodePreview + examplesByName> + ### Secondary Ghost @@ -72,58 +79,71 @@ Will be used as **Grey ghost** in UX context ::: + name="button-grey-ghost" + hideInitalCodePreview + examplesByName> + ### Danger + name="button-danger" + hideInitalCodePreview + examplesByName> + ### Danger Outline + name="button-danger-outline" + hideInitalCodePreview + examplesByName> + ### Danger Ghost + name="button-danger-ghost" + hideInitalCodePreview + examplesByName> + ### Button group + name="button-group" + hideInitalCodePreview + examplesByName> + ### Button with text and icon + name="button-text-icon" + hideInitalCodePreview + examplesByName> + ### Loading button + name="button-loading" + hideInitalCodePreview + examplesByName> + + +## API -## Properties (ix-button) +### Properties + +### Events + + diff --git a/packages/documentation/docs/controls/buttons/_dropdown-button_code.md b/packages/documentation/docs/controls/buttons/_dropdown-button_code.md index d7f0352df0..597180d8e8 100644 --- a/packages/documentation/docs/controls/buttons/_dropdown-button_code.md +++ b/packages/documentation/docs/controls/buttons/_dropdown-button_code.md @@ -1,29 +1,32 @@ -import Playground from '@site/src/components/PlaygroundV2'; -import TabItem from '@theme/TabItem'; -import Preview from '@site/src/components/Preview'; - -import Overview from './../../auto-generated/ix-dropdown-button/overview.md'; -import Tags from './../../auto-generated/ix-dropdown-button/tags.md'; import Props from './../../auto-generated/ix-dropdown-button/props.md'; +import Events from './../../auto-generated/ix-dropdown-button/events.md'; - +import Playground from '@site/src/components/PlaygroundV2'; - +## Examples -## Usage +### Basic + name="dropdown-button" + height="16rem" + examplesByName> + ### Icon + name="dropdown-button-icon" + eight="16rem" + examplesByName> + -## Properties (ix-dropdown-button) +## API -### Props +### Properties + +### Events + + diff --git a/packages/documentation/docs/controls/buttons/_icon-button_code.md b/packages/documentation/docs/controls/buttons/_icon-button_code.md index 9fb108d36c..69f49a5d84 100644 --- a/packages/documentation/docs/controls/buttons/_icon-button_code.md +++ b/packages/documentation/docs/controls/buttons/_icon-button_code.md @@ -1,21 +1,24 @@ -import Tags from './../../auto-generated/ix-link-button/tags.md'; import Playground from '@site/src/components/PlaygroundV2'; -import PropsIcon from './../../auto-generated/ix-icon-button/props.md'; +import Props from './../../auto-generated/ix-icon-button/props.md'; +import Events from './../../auto-generated/ix-icon-button/events.md'; -### Icon button +## Examples - - -## Usage +### Basic + name="button-with-icon" + hideInitalCodePreview + examplesByName> + + +## API (ix-icon-button) + +### Properties -## Properties (ix-icon-button) + -### Props +### Events - + diff --git a/packages/documentation/docs/controls/buttons/_link-button_code.md b/packages/documentation/docs/controls/buttons/_link-button_code.md index 43d30caa4e..f3083a3177 100644 --- a/packages/documentation/docs/controls/buttons/_link-button_code.md +++ b/packages/documentation/docs/controls/buttons/_link-button_code.md @@ -1,26 +1,29 @@ import Tags from './../../auto-generated/ix-link-button/tags.md'; - -import Playground from '@site/src/components/PlaygroundV2'; import Props from './../../auto-generated/ix-link-button/props.md'; +import Events from './../../auto-generated/ix-link-button/events.md'; - +import Playground from '@site/src/components/PlaygroundV2'; -## Usage +## Examples + name="link-button" + examplesByName> -## Disabled +### Disabled + name="link-button-disabled" + examplesByName> -## Properties +## API -### Props +### Properties + +### Events + + diff --git a/packages/documentation/docs/controls/buttons/_split-button_code.md b/packages/documentation/docs/controls/buttons/_split-button_code.md index d049e87a08..47191c0958 100644 --- a/packages/documentation/docs/controls/buttons/_split-button_code.md +++ b/packages/documentation/docs/controls/buttons/_split-button_code.md @@ -1,28 +1,44 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../../auto-generated/ix-split-button/props.md'; import Events from './../../auto-generated/ix-split-button/events.md'; import ItemProps from './../../auto-generated/ix-split-button-item/props.md'; import ItemEvents from './../../auto-generated/ix-split-button-item/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + +## Examples + + name="split-button" + height="16rem" + examplesByName> + ### With icon only + name="split-button-icons" + height="16rem" + hideInitalCodePreview + examplesByName> + -## Properties +## API (ix-split-button) -### Props +### Properties ### Events + +## API (ix-split-button-item) + +### Properties + + + +### Events + + diff --git a/packages/documentation/docs/controls/buttons/_toggle-button_code.md b/packages/documentation/docs/controls/buttons/_toggle-button_code.md index 4bec755cd1..e1a83f23d3 100644 --- a/packages/documentation/docs/controls/buttons/_toggle-button_code.md +++ b/packages/documentation/docs/controls/buttons/_toggle-button_code.md @@ -1,103 +1,110 @@ import { ApiTableSinceTag } from '@site/src/components/ApiTableTag'; -import Playground from '@site/src/components/PlaygroundV2'; - -import Tags from './../../auto-generated/ix-toggle-button/tags.md'; - -import EventsToggleButton from './../../auto-generated/ix-toggle-button/events.md'; import EventsIconToggleButton from './../../auto-generated/ix-icon-toggle-button/events.md'; +import PropsIconToggleButton from './../../auto-generated/ix-icon-toggle-button/props.md'; +import TagsIconToggleButton from './../../auto-generated/ix-icon-toggle-button/tags.md'; +import EventsToggleButton from './../../auto-generated/ix-toggle-button/events.md'; import PropsToggleButton from './../../auto-generated/ix-toggle-button/props.md'; +import TagsToggleButton from './../../auto-generated/ix-toggle-button/tags.md'; -import PropsIconToggleButton from './../../auto-generated/ix-icon-toggle-button/props.md'; - +import Playground from '@site/src/components/PlaygroundV2'; - +## Examples -## Toggle button secondary outline +### Toggle button primary + name="toggle-button-primary" + examplesByName> -## Toggle button secondary ghost +### Toggle button primary outline + name="toggle-button-primary-outline" + examplesByName> -## Toggle button secondary +### Toggle button primary ghost + name="toggle-button-primary-ghost" + examplesByName> -## Toggle button primary outline +### Toggle button secondary + name="toggle-button-secondary" + examplesByName> -## Toggle button primary ghost +### Toggle button secondary outline + name="toggle-button-secondary-outline" + examplesByName> - +### Toggle button secondary ghost -## Icon Toggle button secondary outline + + + +### Icon Toggle button secondary outline + name="icon-toggle-button-secondary-outline" + examplesByName> -## Icon Toggle button secondary ghost +### Icon Toggle button secondary ghost + name="icon-toggle-button-secondary-ghost" + examplesByName> -## Icon Toggle Button secondary +### Icon Toggle Button secondary + name="icon-toggle-button-secondary" + examplesByName> -## Icon Toggle button primary outline +### Icon Toggle button primary outline + name="icon-toggle-button-primary-outline" + examplesByName> -## Icon Toggle Button primary ghost +### Icon Toggle Button primary ghost + name="icon-toggle-button-primary-ghost" + examplesByName> -## Properties (ix-toggle-button) +## API (ix-toggle-button) + +### Properties -## Events (ix-toggle-button) +### Events -## Properties (ix-icon-toggle-button) +## API (ix-icon-toggle-button) + +### Properties -## Events (ix-icon-toggle-button) +### Events diff --git a/packages/documentation/docs/controls/buttons/button.md b/packages/documentation/docs/controls/buttons/button.md index a47fc10be2..6d07d19aa7 100644 --- a/packages/documentation/docs/controls/buttons/button.md +++ b/packages/documentation/docs/controls/buttons/button.md @@ -1,5 +1,5 @@ --- -title: Button +sidebar_position: 0 --- import DocsTabs from '@site/src/components/DocsTabs'; diff --git a/packages/documentation/docs/controls/buttons/dropdown-button.md b/packages/documentation/docs/controls/buttons/dropdown-button.md index c96ab23af1..826d7aff03 100644 --- a/packages/documentation/docs/controls/buttons/dropdown-button.md +++ b/packages/documentation/docs/controls/buttons/dropdown-button.md @@ -1,5 +1,5 @@ --- -title: Dropdown Button +sidebar_position: 1 --- import DocsTabs from '@site/src/components/DocsTabs'; @@ -7,6 +7,13 @@ import DocsTabs from '@site/src/components/DocsTabs'; import DocsUx from './\_dropdown-button_styleguide.md'; import DocsCode from './\_dropdown-button_code.md'; +import Tags from './../../auto-generated/ix-dropdown-button/tags.md' + # Dropdown button + + +
+
+ diff --git a/packages/documentation/docs/controls/buttons/icon-button.md b/packages/documentation/docs/controls/buttons/icon-button.md index 12b06db01b..00d54d7f90 100644 --- a/packages/documentation/docs/controls/buttons/icon-button.md +++ b/packages/documentation/docs/controls/buttons/icon-button.md @@ -1,5 +1,5 @@ --- -title: Icon button +sidebar_position: 2 --- import DocsTabs from '@site/src/components/DocsTabs'; @@ -7,6 +7,13 @@ import DocsTabs from '@site/src/components/DocsTabs'; import DocsUx from './\_icon-button_styleguide.md'; import DocsCode from './\_icon-button_code.md'; +import Tags from './../../auto-generated/ix-icon-button/tags.md'; + # Icon button + + +
+
+ diff --git a/packages/documentation/docs/controls/buttons/link-button.md b/packages/documentation/docs/controls/buttons/link-button.md index 5cf128b392..a60a141d37 100644 --- a/packages/documentation/docs/controls/buttons/link-button.md +++ b/packages/documentation/docs/controls/buttons/link-button.md @@ -1,5 +1,5 @@ --- -title: Link button +sidebar_position: 3 --- import DocsTabs from '@site/src/components/DocsTabs'; @@ -7,6 +7,13 @@ import DocsTabs from '@site/src/components/DocsTabs'; import DocsUx from './\_link-button_styleguide.md'; import DocsCode from './\_link-button_code.md'; +import Tags from './../../auto-generated/ix-link-button/tags.md'; + # Link button + + +
+
+ diff --git a/packages/documentation/docs/controls/buttons/split-button.md b/packages/documentation/docs/controls/buttons/split-button.md index b8398b5297..2d88bf2251 100644 --- a/packages/documentation/docs/controls/buttons/split-button.md +++ b/packages/documentation/docs/controls/buttons/split-button.md @@ -1,5 +1,5 @@ --- -title: Split button +sidebar_position: 4 --- import DocsTabs from '@site/src/components/DocsTabs'; diff --git a/packages/documentation/docs/controls/buttons/toggle-buttons.md b/packages/documentation/docs/controls/buttons/toggle-buttons.md index 2e95edb4ee..8f54dccbfc 100644 --- a/packages/documentation/docs/controls/buttons/toggle-buttons.md +++ b/packages/documentation/docs/controls/buttons/toggle-buttons.md @@ -1,5 +1,5 @@ --- -title: Toggle button +sidebar_position: 5 --- import DocsTabs from '@site/src/components/DocsTabs'; @@ -7,6 +7,12 @@ import DocsTabs from '@site/src/components/DocsTabs'; import DocsUx from './\_toggle-button_styleguide.md'; import DocsCode from './\_toggle-button_code.md'; -# Toggle button +import Tags from './../../auto-generated/ix-toggle-button/tags.md'; + +# Toggle buttons + + +
+
diff --git a/packages/documentation/docs/controls/card-list.md b/packages/documentation/docs/controls/card-list.md index c3fade9aa7..768df73124 100644 --- a/packages/documentation/docs/controls/card-list.md +++ b/packages/documentation/docs/controls/card-list.md @@ -7,6 +7,13 @@ import DocsTabs from '@site/src/components/DocsTabs'; import DocsUx from './\_card-list_styleguide.md'; import DocsCode from './\_card-list_code.md'; +import Tags from './../auto-generated/ix-card-list/tags.md'; + # Card list + + +
+
+ diff --git a/packages/documentation/docs/controls/card.md b/packages/documentation/docs/controls/card.md index 88efd333fb..d7d7b0b735 100644 --- a/packages/documentation/docs/controls/card.md +++ b/packages/documentation/docs/controls/card.md @@ -1,9 +1,11 @@ --- -title: Card +title: Cards --- import DocsTabs from '@site/src/components/DocsTabs'; + import DocsUx from './\_card_styleguide.md'; import DocsCode from './\_card_code.md'; ## Card + diff --git a/packages/documentation/docs/controls/charts/charts.md b/packages/documentation/docs/controls/charts/charts.md index 26429920b5..b128d2983b 100644 --- a/packages/documentation/docs/controls/charts/charts.md +++ b/packages/documentation/docs/controls/charts/charts.md @@ -2,8 +2,8 @@ import Playground from '@site/src/components/PlaygroundV2'; # ECharts -Siemens Industrial Experience provides a theme for the populer chart library [ECharts](https://echarts.apache.org/handbook/en/get-started). -This lets you harness the power of ECharts with seemless intergration into the Siemens Industrial Experience styleguide. +Siemens Industrial Experience provides a theme for the popular chart library [ECharts](https://echarts.apache.org/handbook/en/get-started). +This lets you harness the power of ECharts with seamless integration into the Siemens Industrial Experience styleguide.
diff --git a/packages/documentation/docs/controls/checkbox.md b/packages/documentation/docs/controls/checkbox.md index d6554b4c20..a86e0b2247 100644 --- a/packages/documentation/docs/controls/checkbox.md +++ b/packages/documentation/docs/controls/checkbox.md @@ -1,16 +1,26 @@ import Playground from '@site/src/components/PlaygroundV2'; +import Events from './../auto-generated/ix-chip/events.md'; +import Props from './../auto-generated/ix-chip/props.md'; + + # Checkbox -## Usage +## Examples + +### Basic + name="checkbox" + height="8rem" + examplesByName> + ### Indeterminate + name="checkbox-indeterminate" + height="8rem" + hideInitalCodePreview + examplesByName> + diff --git a/packages/documentation/docs/controls/chip.md b/packages/documentation/docs/controls/chip.md index 35f09f885f..65cffa542f 100644 --- a/packages/documentation/docs/controls/chip.md +++ b/packages/documentation/docs/controls/chip.md @@ -1,3 +1,7 @@ +--- +title: Chip +--- + import DocsTabs from '@site/src/components/DocsTabs'; import DocsUx from './\_chip_styleguide.md' diff --git a/packages/documentation/docs/controls/date-dropdown.md b/packages/documentation/docs/controls/date-dropdown.md index d12f8a966c..ed3be7be5a 100644 --- a/packages/documentation/docs/controls/date-dropdown.md +++ b/packages/documentation/docs/controls/date-dropdown.md @@ -1,24 +1,31 @@ -import Playground from '@site/src/components/PlaygroundV2'; import Props from './../auto-generated/ix-date-dropdown/props.md'; import Events from './../auto-generated/ix-date-dropdown/events.md'; -# Date Dropdown +import Playground from '@site/src/components/PlaygroundV2'; + +# Date dropdown + +## Examples -## Usage +### Basic + name="date-dropdown" + height="35rem" + examplesByName> + -## with user defined range options +### With user defined range options + name="date-dropdown-user-range" + height="35rem" + examplesByName> + -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/date-picker.md b/packages/documentation/docs/controls/date-picker.md index 8bf4cb2e8b..ec1aaf2933 100644 --- a/packages/documentation/docs/controls/date-picker.md +++ b/packages/documentation/docs/controls/date-picker.md @@ -1,31 +1,41 @@ -import Playground from '@site/src/components/PlaygroundV2'; import Props from './../auto-generated/ix-date-picker/props.md'; import Events from './../auto-generated/ix-date-picker/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Date picker -## Range Selection +## Examples + +### Basic + name="datepicker-range" + height="35rem" + examplesByName> + -## Single Selection +### Single Selection + name="datepicker" + height="35rem" + examplesByName> + -## Translation +### Translation The `ix-date-picker` can be configured using [BCP 47](https://tools.ietf.org/html/rfc5646) locale strings specifying the language to use generating or interpreting strings. More information can be found [here](https://moment.github.io/luxon/#/intl?id=default-locale) + name="datepicker-locale" + height="35rem" + examplesByName> + -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/date-time-picker.md b/packages/documentation/docs/controls/date-time-picker.md index 8de3763ffe..3f1c8fc00f 100644 --- a/packages/documentation/docs/controls/date-time-picker.md +++ b/packages/documentation/docs/controls/date-time-picker.md @@ -1,14 +1,19 @@ -import Playground from '@site/src/components/PlaygroundV2'; import Props from './../auto-generated/ix-datetime-picker/props.md'; import Events from './../auto-generated/ix-datetime-picker/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Date time picker -## Usage +## Examples + +### Basic + name="datetimepicker" + height="35rem" + examplesByName> + -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/drawer.md b/packages/documentation/docs/controls/drawer.md index 66486f11f1..47b65cfa8d 100644 --- a/packages/documentation/docs/controls/drawer.md +++ b/packages/documentation/docs/controls/drawer.md @@ -1,25 +1,32 @@ -import Playground from '@site/src/components/PlaygroundV2'; import Props from './../auto-generated/ix-drawer/props.md'; import Events from './../auto-generated/ix-drawer/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Drawer -## Usage +## Examples + +### Basic + name="drawer-full-height" + height="24rem" + examplesByName> + ### Auto height + name="drawer" + height="24rem" + hideInitalCodePreview + examplesByName> + -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/empty-state.md b/packages/documentation/docs/controls/empty-state.md index 6a90992d9f..03358ef8aa 100644 --- a/packages/documentation/docs/controls/empty-state.md +++ b/packages/documentation/docs/controls/empty-state.md @@ -1,37 +1,40 @@ -import Playground from '@site/src/components/PlaygroundV2'; - -import Tags from './../auto-generated/ix-empty-state/tags.md'; -import Props from './../auto-generated/ix-empty-state/props.md'; import Events from './../auto-generated/ix-empty-state/events.md'; +import Props from './../auto-generated/ix-empty-state/props.md'; +import Tags from './../auto-generated/ix-empty-state/tags.md'; + +import Playground from '@site/src/components/PlaygroundV2'; # Empty state -## Usage +## Examples + +### Basic + name="empty-state" + height="16rem" + examplesByName> ### Compact + name="empty-state-compact" + examplesByName> ### Compact break + name="empty-state-compact-break" + examplesByName> -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/event-list.md b/packages/documentation/docs/controls/event-list.md index 64dd97483a..6609a3f06c 100644 --- a/packages/documentation/docs/controls/event-list.md +++ b/packages/documentation/docs/controls/event-list.md @@ -1,43 +1,53 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-event-list/props.md'; import Events from './../auto-generated/ix-event-list/events.md'; import ItemProps from './../auto-generated/ix-event-list-item/props.md'; import ItemEvents from './../auto-generated/ix-event-list-item/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Event list -## Usage +## Examples + +### Basic + name="event-list" + height="14rem" + examplesByName> + ### Selected + name="event-list-selected" + height="14rem" + hideInitalCodePreview + examplesByName> + ### Custom item height + name="event-list-custom-item-height" + height="15rem" + hideInitalCodePreview + examplesByName> + ### Compact + name="event-list-compact" + height="14rem" + hideInitalCodePreview + examplesByName> + -## Properties (ix-event-list) +## API (ix-event-list) -### Props +### Properties @@ -45,9 +55,9 @@ examplesByName> -## Properties (ix-event-list-item) +## API (ix-event-list-item) -### Props +### Properties diff --git a/packages/documentation/docs/controls/expanding-search.md b/packages/documentation/docs/controls/expanding-search.md index ecc591506e..b87e00fc62 100644 --- a/packages/documentation/docs/controls/expanding-search.md +++ b/packages/documentation/docs/controls/expanding-search.md @@ -1,19 +1,23 @@ -import Playground from '@site/src/components/PlaygroundV2'; -import Props from './../auto-generated/ix-expanding-search/props.md'; import Events from './../auto-generated/ix-expanding-search/events.md'; +import Props from './../auto-generated/ix-expanding-search/props.md'; + +import Playground from '@site/src/components/PlaygroundV2'; # Expanding search -## Usage +## Examples + +### Basic + name="expanding-search" + height="5rem" + examplesByName> -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/flip.md b/packages/documentation/docs/controls/flip.md index 1968c5d16a..c553b2ca2f 100644 --- a/packages/documentation/docs/controls/flip.md +++ b/packages/documentation/docs/controls/flip.md @@ -1,19 +1,23 @@ -import Playground from '@site/src/components/PlaygroundV2'; import Props from './../auto-generated/ix-flip-tile/props.md'; import Events from './../auto-generated/ix-flip-tile/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Flip -## Usage +## Examples + +### Basic + name="flip-tile" + height="35rem" + examplesByName> -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/grid.md b/packages/documentation/docs/controls/grid.md index a574e0cb37..f09aeebccc 100644 --- a/packages/documentation/docs/controls/grid.md +++ b/packages/documentation/docs/controls/grid.md @@ -63,8 +63,8 @@ e.g.: ## Usage + name="aggrid" + height="14rem" + examplesByName + disableStackBlitz> diff --git a/packages/documentation/docs/controls/group.md b/packages/documentation/docs/controls/group.md index 01006c2278..7f66a5de47 100644 --- a/packages/documentation/docs/controls/group.md +++ b/packages/documentation/docs/controls/group.md @@ -1,32 +1,40 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-group/props.md'; import Events from './../auto-generated/ix-group/events.md'; import ItemProps from './../auto-generated/ix-group-item/props.md'; import ItemEvents from './../auto-generated/ix-group-item/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Group -## Usage +## Examples + +### Basic + name="group" + height="16rem" + examplesByName> + ### Suppress header selection + name="group-header-suppressed" + height="16rem" + hideInitalCodePreview + examplesByName> + ### Custom group entry + name="group-custom-entry" + height="16rem" + hideInitalCodePreview + examplesByName> + ### Group with context menu @@ -40,13 +48,15 @@ Luckily there exists a workaround for rendering context menus inside the group c To show a context menu place an `ix-dropdown` with `slot="dropdown"` combined with `ix-dropdown-item`'s inside the `ix-group-tag` tag. + name="group-context-menu" + height="16rem" + hideInitalCodePreview + examplesByName> + -## Properties (ix-group) +## API (ix-group) -### Props +### Properties @@ -54,9 +64,9 @@ examplesByName> -## Properties (ix-group-item) +## API (ix-group-item) -### Props +### Properties diff --git a/packages/documentation/docs/controls/html-grid.md b/packages/documentation/docs/controls/html-grid.md index 09d5cfe279..49194cb5e7 100644 --- a/packages/documentation/docs/controls/html-grid.md +++ b/packages/documentation/docs/controls/html-grid.md @@ -1,21 +1,25 @@ import Playground from '@site/src/components/PlaygroundV2'; -# HTML table +# HTML-Grid -## Usage +## Examples + +### Basic + name="html-table" height="12rem" + hideInitalCodePreview + files={{ + javascript: ['html-table.html'] + }}> + ### Striped + name="html-table-striped" height="12rem" + hideInitalCodePreview + files={{ + javascript: ['html-table-striped.html'] + }}> + diff --git a/packages/documentation/docs/controls/input.md b/packages/documentation/docs/controls/input.md index e424c75c13..263098bbc7 100644 --- a/packages/documentation/docs/controls/input.md +++ b/packages/documentation/docs/controls/input.md @@ -2,51 +2,60 @@ import Playground from '@site/src/components/PlaygroundV2'; # Input -## Usage +## Examples + +### Basic + name="input" + examplesByName> + ### Disabled + name="input-disabled" + hideInitalCodePreview + examplesByName> + ### Readonly + name="input-readonly" + hideInitalCodePreview + examplesByName> + ### With icon + name="input-with-icon" + hideInitalCodePreview + examplesByName> + ### Label placement + name="input-labels" + hideInitalCodePreview + examplesByName> + ### Input types + name="input-types" + height="15rem" + hideInitalCodePreview + examplesByName> + ### Search + name="input-search" + hideInitalCodePreview + examplesByName> + diff --git a/packages/documentation/docs/controls/key-value-list.md b/packages/documentation/docs/controls/key-value-list.md index a2dcb830e9..7029933925 100644 --- a/packages/documentation/docs/controls/key-value-list.md +++ b/packages/documentation/docs/controls/key-value-list.md @@ -1,42 +1,50 @@ -import Playground from '@site/src/components/PlaygroundV2'; - -import Tags from './../auto-generated/ix-key-value-list/tags.md'; +import Events from './../auto-generated/ix-key-value-list/events.md'; import Props from './../auto-generated/ix-key-value-list/props.md'; +import Tags from './../auto-generated/ix-key-value-list/tags.md'; + +import Playground from '@site/src/components/PlaygroundV2'; # Key value list -## Usage +## Examples + name="key-value-list" height="12rem" + examplesByName> ### With custom value + name="key-value-list-with-custom-value" + height="12rem" + examplesByName> ### With icon + name="key-value-list-with-icon" + height="12rem" + examplesByName> ### Striped + name="key-value-list-striped" + height="12rem" + examplesByName> -## Properties +## API -### Props +### Properties + +### Events + + diff --git a/packages/documentation/docs/controls/key-value.md b/packages/documentation/docs/controls/key-value.md index 6dcf776412..69b567451f 100644 --- a/packages/documentation/docs/controls/key-value.md +++ b/packages/documentation/docs/controls/key-value.md @@ -1,47 +1,55 @@ -import Playground from '@site/src/components/PlaygroundV2'; - -import Tags from './../auto-generated/ix-key-value/tags.md'; +import Events from './../auto-generated/ix-key-value/events.md'; import Props from './../auto-generated/ix-key-value/props.md'; import Slots from './../auto-generated/ix-key-value/slots.md'; +import Tags from './../auto-generated/ix-key-value/tags.md'; + +import Playground from '@site/src/components/PlaygroundV2'; # Key value -## Usage +## Example + +### Basic + name="key-value" + height="16rem" + examplesByName> ### With custom value + name="key-value-with-custom-value" + examplesByName> ### With icon + name="key-value-with-icon" + examplesByName> ### With label on left side + name="key-value-with-label-left" + examplesByName> -## Properties +## API -### Props +### Properties +### Events + + + ### Slots diff --git a/packages/documentation/docs/controls/kpi.md b/packages/documentation/docs/controls/kpi.md index 4d8cdab59f..b8dd2d9fad 100644 --- a/packages/documentation/docs/controls/kpi.md +++ b/packages/documentation/docs/controls/kpi.md @@ -1,17 +1,24 @@ -import Playground from '@site/src/components/PlaygroundV2'; +import Events from './../auto-generated/ix-kpi/events.md'; import Props from './../auto-generated/ix-kpi/props.md'; -# KPI +import Playground from '@site/src/components/PlaygroundV2'; + +# Events ## Usage + name="kpi" + height="28rem" + examplesByName> -## Properties +## API -### Props +### Properties + +### Events + + diff --git a/packages/documentation/docs/controls/layout-grid.md b/packages/documentation/docs/controls/layout-grid.md index ffbaa1bffb..6b48ea0eff 100644 --- a/packages/documentation/docs/controls/layout-grid.md +++ b/packages/documentation/docs/controls/layout-grid.md @@ -1,5 +1,5 @@ --- -title: Layout Grid +title: Layout grid --- import DocsTabs from '@site/src/components/DocsTabs'; @@ -10,4 +10,7 @@ import Tags from './../auto-generated/ix-layout-grid/tags.md'; +
+
+ diff --git a/packages/documentation/docs/controls/messagebar.md b/packages/documentation/docs/controls/messagebar.md index e25681225e..a07ee0ccf7 100644 --- a/packages/documentation/docs/controls/messagebar.md +++ b/packages/documentation/docs/controls/messagebar.md @@ -1,20 +1,19 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-message-bar/props.md'; import Events from './../auto-generated/ix-message-bar/events.md'; -# Message bar +import Playground from '@site/src/components/PlaygroundV2'; -## Usage +## Examples + name="message-bar" + height="14rem" + examplesByName> -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/modal.md b/packages/documentation/docs/controls/modal.md index d6fdb3d9de..1d1bad35b4 100644 --- a/packages/documentation/docs/controls/modal.md +++ b/packages/documentation/docs/controls/modal.md @@ -1,6 +1,5 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Playground from '@site/src/components/PlaygroundV2'; import PropsHeaderJavaScript from './../auto-generated/ix-modal-header/props.md' import EventsHeaderJavaScript from './../auto-generated/ix-modal-header/events.md' @@ -8,6 +7,8 @@ import EventsHeaderJavaScript from './../auto-generated/ix-modal-header/events.m import ModalConfig from './../auto-generated/utils/core/ModalConfig.md' import ModalInstance from './../auto-generated/utils/core/ModalInstance.md' +import Playground from '@site/src/components/PlaygroundV2'; + # Modal ## Sizes @@ -25,10 +26,10 @@ Our modals support the following sizes: The `size` can be configured over the configuration object of the `showModal` function. + height="18rem" + name="modal-sizes" + examplesByName> + ## Custom @@ -38,18 +39,18 @@ Select the appropriate section below for the respective usage information. ### Angular + name="modal" height="18rem" + files={{ + angular: [ + 'modal-by-template.ts', + "modal-by-instance.ts", + "modal-by-instance-content.ts", + ], + }}> `@siemens/ix-angular` provides an injectable service that allows to open modal dialogs based on a `ng-template` reference or by component type. -If you want to pass arbitrary data to the modal use the `data`-property. In order to access that data inside the modal template use `let-modal` as seen in the angular example above. +If you want to pass arbitrary data to the modal use the `data`-property. In order to access that data inside the modal template, use `let-modal` as seen in the angular example above. **ModalService** @@ -104,41 +105,15 @@ files={{ }}> -### API - -#### Modal header - -##### Props - - - -##### Events - - - -#### Modal config - - - -#### Modal instance - - -#### Modal header -##### Props - - -##### Events - - -## Loading +### Loading How to open a loading modal is independent from the framework in use. Note that you have to import `showModalLoading` from the core package `@siemens/ix`. -## Message +### Message How to open a message modal is independent from the framework in use. Note that you have to import `showMessage` from the core package `@siemens/ix`. @@ -151,7 +126,7 @@ How to open a message modal is independent from the framework in use. Note that - question The `showMessage` method returns a Listener with the following signature: @@ -164,3 +139,35 @@ TypedEvent<{ ``` `actionId` represents the configured action button. + +## API (modal header) + +### Properties + + + +### Events + + + +## API (modal config) + +### Properties + + + +## API (modal instance) + +### Properties + + + +## API (modal header) + +### Properties + + + +### Events + + diff --git a/packages/documentation/docs/controls/pagination.md b/packages/documentation/docs/controls/pagination.md index 2801168cc9..c039fae143 100644 --- a/packages/documentation/docs/controls/pagination.md +++ b/packages/documentation/docs/controls/pagination.md @@ -1,30 +1,34 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-pagination/props.md'; import Tags from './../auto-generated/ix-pagination/tags.md'; import Events from './../auto-generated/ix-pagination/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Pagination -## Usage +## Examples + +### Basic + name="pagination" + height="24rem" + examplesByName> -## Advanced +### Advanced + name="pagination-advanced" + height="24rem" + examplesByName> -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/panes.md b/packages/documentation/docs/controls/panes.md index 9efcd0ee45..06e9b5e285 100644 --- a/packages/documentation/docs/controls/panes.md +++ b/packages/documentation/docs/controls/panes.md @@ -3,10 +3,15 @@ title: Panes --- import DocsTabs from '@site/src/components/DocsTabs'; -import Tags from './../auto-generated/ix-pane/tags.md'; -import DocsUx from './\_panes_styleguide.md'; + +import DocsUx from './\_pane_styleguide.md'; import DocsCode from './\_panes_code.md'; +import Tags from './../auto-generated/ix-pane/tags.md'; + +
+
+ diff --git a/packages/documentation/docs/controls/radiobutton.md b/packages/documentation/docs/controls/radiobutton.md index 13e9ee3ab0..88403fef64 100644 --- a/packages/documentation/docs/controls/radiobutton.md +++ b/packages/documentation/docs/controls/radiobutton.md @@ -2,9 +2,11 @@ import Playground from '@site/src/components/PlaygroundV2'; # Radio button -## Usage +## Examples + +### Basic + name="radio-button" + examplesByName> diff --git a/packages/documentation/docs/controls/select.md b/packages/documentation/docs/controls/select.md index 8eaaa3fb5f..3c7d3033b6 100644 --- a/packages/documentation/docs/controls/select.md +++ b/packages/documentation/docs/controls/select.md @@ -1,36 +1,44 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-select/props.md'; import Events from './../auto-generated/ix-select/events.md'; import ItemProps from './../auto-generated/ix-select-item/props.md'; import ItemEvents from './../auto-generated/ix-select-item/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Select -## Usage +## Examples + +### Basic + name="select" + height="18rem" + examplesByName> + ### Editable + name="select-editable" + height="18rem" + hideInitalCodePreview + examplesByName> + ### Multiselect + name="select-multiple" + height="18rem" + hideInitalCodePreview + examplesByName> + -## Properties (ix-select) +## API (ix-select) -### Props +### Properties @@ -38,9 +46,9 @@ examplesByName> -## Properties (ix-select-item) +## API (ix-select-item) -### Props +### Properties diff --git a/packages/documentation/docs/controls/slider.md b/packages/documentation/docs/controls/slider.md index 92c2aa899d..3cbcdb3447 100644 --- a/packages/documentation/docs/controls/slider.md +++ b/packages/documentation/docs/controls/slider.md @@ -1,14 +1,17 @@ -import Playground from '@site/src/components/PlaygroundV2'; import Tags from './../auto-generated/ix-slider/tags.md'; import Props from './../auto-generated/ix-slider/props.md'; import Events from './../auto-generated/ix-slider/events.md'; import Slots from './../auto-generated/ix-slider/slots.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Slider -## Usage +## Examples + +### Basic -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/spinner.md b/packages/documentation/docs/controls/spinner.md index 90b7117f6d..a41cdf74f9 100644 --- a/packages/documentation/docs/controls/spinner.md +++ b/packages/documentation/docs/controls/spinner.md @@ -1,26 +1,32 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-spinner/props.md'; import Events from './../auto-generated/ix-spinner/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Spinner -## Usage +## Examples + +### Basic + name="spinner" + height="5rem" + examplesByName> + ### Large + name="spinner-large" + height="16rem" + hideInitalCodePreview + examplesByName> + -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/tabs.md b/packages/documentation/docs/controls/tabs.md index 906fff135a..09bcc93214 100644 --- a/packages/documentation/docs/controls/tabs.md +++ b/packages/documentation/docs/controls/tabs.md @@ -1,29 +1,33 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-tabs/props.md'; import Events from './../auto-generated/ix-tabs/events.md'; import ItemProps from './../auto-generated/ix-tab-item/props.md'; import ItemEvents from './../auto-generated/ix-tab-item/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Tabs -## Usage +## Examples + +### Basic + name="tabs" + examplesByName> + ### Tabs Rounded + name="tabs-rounded" + hideInitalCodePreview + examplesByName> + -## Properties (ix-tabs) +## API (ix-tabs) -### Props +### Properties @@ -31,9 +35,9 @@ examplesByName> -## Properties (ix-tab-item) +## API (ix-tab-item) -### Props +### Properties diff --git a/packages/documentation/docs/controls/textarea.md b/packages/documentation/docs/controls/textarea.md index d8d821d413..3c00af9d2b 100644 --- a/packages/documentation/docs/controls/textarea.md +++ b/packages/documentation/docs/controls/textarea.md @@ -1,23 +1,34 @@ +import Events from './../auto-generated/ix-tabs/events.md'; + + import Playground from '@site/src/components/PlaygroundV2'; -# Text area +# Textarea + +## Examples -## Usage +### Basic + name="textarea" + height="7rem" + examplesByName> + ### Disabled + name="textarea-disabled" + height="7rem" + hideInitalCodePreview + examplesByName> + ### Readonly + name="textarea-readonly" + height="7rem" + hideInitalCodePreview + examplesByName> + diff --git a/packages/documentation/docs/controls/tile.md b/packages/documentation/docs/controls/tile.md index 6af98443a7..2371340769 100644 --- a/packages/documentation/docs/controls/tile.md +++ b/packages/documentation/docs/controls/tile.md @@ -1,20 +1,23 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-tile/props.md'; import Events from './../auto-generated/ix-tile/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Tile -## Usage +## Examples + +### Basic + name="tile" + height="22rem" + examplesByName> -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/time-picker.md b/packages/documentation/docs/controls/time-picker.md index b01d9de0cf..045a08987b 100644 --- a/packages/documentation/docs/controls/time-picker.md +++ b/packages/documentation/docs/controls/time-picker.md @@ -1,20 +1,23 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-time-picker/props.md'; import Events from './../auto-generated/ix-time-picker/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Time picker -## Usage +## Examples + +### Basic + name="timepicker" + height="25rem" + examplesByName> -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/toast.md b/packages/documentation/docs/controls/toast.md index c630aea070..62243a88b3 100644 --- a/packages/documentation/docs/controls/toast.md +++ b/packages/documentation/docs/controls/toast.md @@ -5,4 +5,4 @@ import DocsCode from './\_toast_code.md' # Toast - \ No newline at end of file + diff --git a/packages/documentation/docs/controls/toggle.md b/packages/documentation/docs/controls/toggle.md index 946e8fabd3..4c2d2fcbea 100644 --- a/packages/documentation/docs/controls/toggle.md +++ b/packages/documentation/docs/controls/toggle.md @@ -1,47 +1,54 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-toggle/props.md'; import Events from './../auto-generated/ix-toggle/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Toggle -## Usage +## Examples + +### Basic + name="toggle" + examplesByName> + ### Custom label + name="toggle-custom-label" + hideInitalCodePreview + examplesByName> + ### Disabled + name="toggle-disabled" + hideInitalCodePreview + examplesByName> + ### Checked + name="toggle-checked" + hideInitalCodePreview + examplesByName> + ### Indeterminate +examplesByName> + -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/tooltip.md b/packages/documentation/docs/controls/tooltip.md index 761a5a02da..0f2876e08d 100644 --- a/packages/documentation/docs/controls/tooltip.md +++ b/packages/documentation/docs/controls/tooltip.md @@ -1,3 +1,4 @@ +import Events from './../auto-generated/ix-tooltip/events.md'; import Tags from './../auto-generated/ix-tooltip/tags.md'; import Props from './../auto-generated/ix-tooltip/props.md'; import Slots from './../auto-generated/ix-tooltip/slots.md'; @@ -8,20 +9,24 @@ import Playground from '@site/src/components/PlaygroundV2' -## Usage +## Examples + name="tooltip" + height="16rem" + examplesByName> -## Properties +## API -### Props +### Properties +### Events + + + ### Slots diff --git a/packages/documentation/docs/controls/tree.md b/packages/documentation/docs/controls/tree.md index dacd288080..f28b1350fc 100644 --- a/packages/documentation/docs/controls/tree.md +++ b/packages/documentation/docs/controls/tree.md @@ -1,30 +1,33 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-tree/props.md'; -import TreeItemProps from './../auto-generated/ix-tree-item/props.md'; import Events from './../auto-generated/ix-tree/events.md'; + +import TreeItemProps from './../auto-generated/ix-tree-item/props.md'; import TreeItemEvents from './../auto-generated/ix-tree-item/events.md'; -import TabItem from '@theme/TabItem'; +import Playground from '@site/src/components/PlaygroundV2'; # Tree -## Usage +## Examples + name="tree" + height="16rem" + examplesByName> + ### Custom tree node + name="tree-custom" + height="12rem" + hideInitalCodePreview + examplesByName> + -## Properties (ix-tree) +## API (ix-tree) -### Props +### Properties @@ -32,9 +35,9 @@ examplesByName> -## Properties (ix-tree-item) +## API (ix-tree-item) -### Props +### Properties diff --git a/packages/documentation/docs/controls/upload.md b/packages/documentation/docs/controls/upload.md index b2e1a274d6..f88ecd52b4 100644 --- a/packages/documentation/docs/controls/upload.md +++ b/packages/documentation/docs/controls/upload.md @@ -1,20 +1,21 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import Props from './../auto-generated/ix-upload/props.md'; import Events from './../auto-generated/ix-upload/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Upload -## Usage +## Examples + name="upload" + height="8rem" + examplesByName> -## Properties +## API -### Props +### Properties diff --git a/packages/documentation/docs/controls/validation.md b/packages/documentation/docs/controls/validation.md index e1a1f721fb..ff2184721a 100644 --- a/packages/documentation/docs/controls/validation.md +++ b/packages/documentation/docs/controls/validation.md @@ -1,23 +1,31 @@ import Playground from '@site/src/components/PlaygroundV2'; +import Events from './../auto-generated/ix-validation-tooltip/events.md'; import Props from './../auto-generated/ix-validation-tooltip/props.md'; # Form validation For the validation `@siemens/ix` use the validation concept of [bootstrap](https://getbootstrap.com/docs/5.2/forms/validation/). -The differences is that the validation tooltip is implemented as `@siemens/ix` [tooltip](#properties-tooltip) +The difference is that the validation tooltip is implemented as `@siemens/ix` [tooltip](#properties-tooltip) -In the following preview section you will find different implementation of a forms validation. +In the following examples section you will find different implementations of a form validation. -## Preview +## Examples + +### Basic + name="validation" + height="20rem" + examplesByName> -## Properties (Tooltip) +## API -## Props +### Properties + +### Events + + diff --git a/packages/documentation/docs/controls/workflow.md b/packages/documentation/docs/controls/workflow.md index 101c772235..9740ab2aec 100644 --- a/packages/documentation/docs/controls/workflow.md +++ b/packages/documentation/docs/controls/workflow.md @@ -1,28 +1,31 @@ -import Playground from '@site/src/components/PlaygroundV2'; - import WorkflowStepProps from './../auto-generated/ix-workflow-step/props.md'; import WorkflowStepEvents from './../auto-generated/ix-workflow-step/events.md'; import WorkflowStepsProps from './../auto-generated/ix-workflow-steps/props.md'; import WorkflowStepsEvents from './../auto-generated/ix-workflow-steps/events.md'; +import Playground from '@site/src/components/PlaygroundV2'; + # Workflow -## Usage +## Examples + name="workflow" + examplesByName> + ### Vertical + name="workflow-vertical" + height="27rem" + hideInitalCodePreview + examplesByName> + -## Properties ix-workflow-steps +## API (ix-workflow-steps) -### Props +### Properties @@ -30,9 +33,9 @@ examplesByName> -## Properties ix-workflow-step +## API (ix-workflow-step) -### Props +### Properties diff --git a/packages/documentation/docs/guidelines/theme.md b/packages/documentation/docs/guidelines/theme.md index a522bed98e..9ba8fbe425 100644 --- a/packages/documentation/docs/guidelines/theme.md +++ b/packages/documentation/docs/guidelines/theme.md @@ -11,17 +11,17 @@ Everyone can use the two embedded themes that already ship with Siemens Industri - Classic light (theme-classic-light) - Classic dark (theme-classic-dark) -You can also create your own themes in order to customize the design system to your own brand. +You can also create your own themes in order to customize the design system for your own brand. Siemens AG applications should utilize the exclusive Siemens AG Corporate Brand Theme. ## Using the old classic theme The original classic theme was deprecated in favor of an updated version that is more easily maintainable for us. -The legacy theme is still available but no longer part of the main CSS file. In order to still apply it to your app you have to load it manually. +The legacy theme is still available but no longer part of the main CSS file. In order to still apply it to your app, you have to load it manually. This can be done in various ways. -The simplest way is to use the bundler/loader and just import the legacy styles inside of your global stylesheet. +The simplest way is to use the bundler/loader and just import the legacy styles inside your global stylesheet. e.g. styles.css: ``` @@ -29,7 +29,7 @@ e.g. styles.css: @import '@siemens/ix/dist-css/theme/legacy-classic-light.css'; ``` -If this step is done you can set the theme name class on the body tag: +If this step is done, you can set the theme name class on the body tag: ```html @@ -46,7 +46,7 @@ If this step is done you can set the theme name class on the body tag:
-The Siemens AG Corporate Brand Theme is exclusively available to official Siemens AG products where it should always be used as the default theme to reflect the latest Siemens AG Corporate Brand guidelines. +The Siemens AG Corporate Brand Theme is exclusively available for official Siemens AG products, where it should always be used as the default theme to reflect the latest Siemens AG Corporate Brand guidelines. Siemens AG employees can access the Corporate Brand Theme at [**https://code.siemens.com/siemens-ix/ix-brand-theme**](https://code.siemens.com/siemens-ix/ix-brand-theme). @@ -55,7 +55,7 @@ Siemens AG employees can access the Corporate Brand Theme at [**https://code.sie ## How to set a theme -The default theme is `theme-classic-dark`. To set a different theme change the `class` attribute of the `` tag to contain e.g. `theme-classic-light` instead of `theme-classic-dark`. +The default theme is `theme-classic-dark`. To set a different theme, change the `class` attribute of the `` tag to contain e.g. `theme-classic-light` instead of `theme-classic-dark`. ```html @@ -67,7 +67,7 @@ The default theme is `theme-classic-dark`. To set a different theme change the ` ## Applying only one theme to reduce build size -Importing `siemens-ix-core.css` will load core related functionalities only, without preloading any theme or bootstrap. +Importing `siemens-ix-core.css` will only load core related functionalities, without preloading any theme or bootstrap. You can load a specific theme by importing the corresponding CSS file. diff --git a/packages/html-test-app/src/preview-examples/toggle-button-primary.html b/packages/html-test-app/src/preview-examples/toggle-button-primary.html new file mode 100644 index 0000000000..c7a324db0b --- /dev/null +++ b/packages/html-test-app/src/preview-examples/toggle-button-primary.html @@ -0,0 +1,30 @@ + + + + + + + Vite App + + + + +
+ Normal + Pressed + Disabled + Loading +
+ + + + diff --git a/packages/react-test-app/src/preview-examples/toggle-button-primary.tsx b/packages/react-test-app/src/preview-examples/toggle-button-primary.tsx new file mode 100644 index 0000000000..8823b395d9 --- /dev/null +++ b/packages/react-test-app/src/preview-examples/toggle-button-primary.tsx @@ -0,0 +1,30 @@ +/* + * 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 'example-styles/dist/toggle-button.css'; + +import { IxToggleButton } from '@siemens/ix-react'; +import React from 'react'; + +export default () => { + return ( + <> + Normal + + Pressed + + + Disabled + + + Loading + + + ); +};