From 48e43b5237e94d8c216e874dc7eb254ead0e1fd1 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Fri, 8 Nov 2024 15:27:59 +0100 Subject: [PATCH 01/26] docs(forms): review findings --- .../docs/controls/_dropdown_code.md | 2 - .../docs/controls/_input_code.md | 8 +--- .../docs/controls/_layout-grid_code.md | 2 - .../docs/controls/_select_code.mdx | 4 -- .../docs/controls/_textarea-field_code.mdx | 37 +++---------------- .../docs/controls/_toast_code.md | 8 ++-- .../controls/buttons/_dropdown-button_code.md | 2 +- .../documentation/docs/controls/checkbox.mdx | 17 --------- .../controls/forms/_forms-validation_code.mdx | 22 ----------- .../documentation/docs/controls/pagination.md | 12 +----- .../documentation/docs/controls/radio.mdx | 13 +------ .../documentation/docs/legacy/textarea.mdx | 6 +-- packages/documentation/scripts/api-tasks.ts | 2 +- .../date-input-validation.html | 5 +++ .../src/preview-examples/input-types.html | 5 +++ .../preview-examples/input-validation.html | 5 +++ .../preview-examples/radio-validation.html | 5 +++ .../preview-examples/textarea-validation.html | 5 +++ 18 files changed, 45 insertions(+), 115 deletions(-) diff --git a/packages/documentation/docs/controls/_dropdown_code.md b/packages/documentation/docs/controls/_dropdown_code.md index 1035f075d3e..c39f840e787 100644 --- a/packages/documentation/docs/controls/_dropdown_code.md +++ b/packages/documentation/docs/controls/_dropdown_code.md @@ -8,8 +8,6 @@ import TagsQuickActions from './../auto-generated/ix-dropdown-quick-actions/tags import Playground from '@site/src/components/PlaygroundV3'; -# Dropdown - ## Examples - ## Examples ### Basic @@ -31,14 +27,14 @@ import Tags from '@site/docs/auto-generated/ix-input/tags.md'; ### Types - + ### Validation ## API diff --git a/packages/documentation/docs/controls/_layout-grid_code.md b/packages/documentation/docs/controls/_layout-grid_code.md index 0165e1e5327..09c04e7666e 100644 --- a/packages/documentation/docs/controls/_layout-grid_code.md +++ b/packages/documentation/docs/controls/_layout-grid_code.md @@ -6,8 +6,6 @@ import ColEvents from './../auto-generated/ix-col/events.md'; import Playground from '@site/src/components/PlaygroundV3' -# Message bar - ## Examples ### Basic diff --git a/packages/documentation/docs/controls/_select_code.mdx b/packages/documentation/docs/controls/_select_code.mdx index 9351080657c..ba2c913d818 100644 --- a/packages/documentation/docs/controls/_select_code.mdx +++ b/packages/documentation/docs/controls/_select_code.mdx @@ -7,10 +7,6 @@ import ItemEvents from './../auto-generated/ix-select-item/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -# Select - - - ## Examples ### Basic diff --git a/packages/documentation/docs/controls/_textarea-field_code.mdx b/packages/documentation/docs/controls/_textarea-field_code.mdx index bda0ee1bfab..1ff4460baa7 100644 --- a/packages/documentation/docs/controls/_textarea-field_code.mdx +++ b/packages/documentation/docs/controls/_textarea-field_code.mdx @@ -7,23 +7,23 @@ import Events from '@site/docs/auto-generated/ix-textarea/events.md'; ### Basic - + ### Disabled - + ### Readonly - + ### RowsCols - + ### Validation - + ## API @@ -34,30 +34,3 @@ import Events from '@site/docs/auto-generated/ix-textarea/events.md'; ### Events - -## Legacy Text area (Deprecated) - - - Please note that the following documentation for a previous implementation of - the component is now deprecated and may be outdated. - - -### Usage - - - -#### Disabled - - - -#### Readonly - - diff --git a/packages/documentation/docs/controls/_toast_code.md b/packages/documentation/docs/controls/_toast_code.md index ce625a4ab18..c33c55c7fff 100644 --- a/packages/documentation/docs/controls/_toast_code.md +++ b/packages/documentation/docs/controls/_toast_code.md @@ -11,20 +11,22 @@ import ApiToastConfigAngular from './\_toast/angular/toast-config.md'; import ApiToastConfigReact from './\_toast/react/toast-config.md'; -# Toast +## Examples + +### Basic -## Custom toast message +### Custom toast message -## Position +### Position diff --git a/packages/documentation/docs/controls/buttons/_dropdown-button_code.md b/packages/documentation/docs/controls/buttons/_dropdown-button_code.md index 8863e279b04..2aa5c3e35fd 100644 --- a/packages/documentation/docs/controls/buttons/_dropdown-button_code.md +++ b/packages/documentation/docs/controls/buttons/_dropdown-button_code.md @@ -17,7 +17,7 @@ import Playground from '@site/src/components/PlaygroundV3'; diff --git a/packages/documentation/docs/controls/checkbox.mdx b/packages/documentation/docs/controls/checkbox.mdx index be2ef2e961e..1eea20e70a5 100644 --- a/packages/documentation/docs/controls/checkbox.mdx +++ b/packages/documentation/docs/controls/checkbox.mdx @@ -43,20 +43,3 @@ import DeprecatedTags from '@site/src/components/Tags'; ### Events - -## Legacy checkbox (Deprecated) - - - Please note that the following documentation for a previous implementation of - the component is now deprecated and may be outdated. - - - - -### Indeterminate - - diff --git a/packages/documentation/docs/controls/forms/_forms-validation_code.mdx b/packages/documentation/docs/controls/forms/_forms-validation_code.mdx index 179a2da049a..376d9fbf674 100644 --- a/packages/documentation/docs/controls/forms/_forms-validation_code.mdx +++ b/packages/documentation/docs/controls/forms/_forms-validation_code.mdx @@ -171,25 +171,3 @@ To suppress the internal validation of a component, you have to provide the `nov - -### Legacy form validation (Deprecated) - - - Please note that the following documentation for a previous implementation is - now deprecated and may be outdated. - - -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) - -In the following preview section you will find different implementation of a forms validation. - -#### Preview - - - -#### Properties (Tooltip) - -#### Props - - diff --git a/packages/documentation/docs/controls/pagination.md b/packages/documentation/docs/controls/pagination.md index e3835d6f4dc..7bf9563cb9d 100644 --- a/packages/documentation/docs/controls/pagination.md +++ b/packages/documentation/docs/controls/pagination.md @@ -12,19 +12,11 @@ import Playground from '@site/src/components/PlaygroundV3'; ### Basic - - + ### Advanced - - + ## API diff --git a/packages/documentation/docs/controls/radio.mdx b/packages/documentation/docs/controls/radio.mdx index d084ff3630b..da8628f7aa1 100644 --- a/packages/documentation/docs/controls/radio.mdx +++ b/packages/documentation/docs/controls/radio.mdx @@ -30,7 +30,7 @@ import Tags from '@site/docs/auto-generated/ix-radio/tags.md'; ### Validation - + ## API @@ -41,14 +41,3 @@ import Tags from '@site/docs/auto-generated/ix-radio/tags.md'; ### Events - -## Legacy radio-button (Deprecated) - - - Please note that the following documentation for a previous implementation of - the component is now deprecated and may be outdated. - - -### Usage - - diff --git a/packages/documentation/docs/legacy/textarea.mdx b/packages/documentation/docs/legacy/textarea.mdx index bc7ac402a79..49895875126 100644 --- a/packages/documentation/docs/legacy/textarea.mdx +++ b/packages/documentation/docs/legacy/textarea.mdx @@ -15,19 +15,19 @@ import LatestTags from '@site/src/components/Tags'; ### Disabled ### Readonly diff --git a/packages/documentation/scripts/api-tasks.ts b/packages/documentation/scripts/api-tasks.ts index 7716d8cb5b6..5cc8a79a008 100644 --- a/packages/documentation/scripts/api-tasks.ts +++ b/packages/documentation/scripts/api-tasks.ts @@ -22,7 +22,7 @@ function htmlFormReadyTag(value: string) { } function htmlSinceTag(value: string) { - return `Since: ${value}`; + return `Since ${value}`; } function htmlDeprecatedTag(value: string) { diff --git a/packages/html-test-app/src/preview-examples/date-input-validation.html b/packages/html-test-app/src/preview-examples/date-input-validation.html index 6014a85c12b..71a47d03850 100644 --- a/packages/html-test-app/src/preview-examples/date-input-validation.html +++ b/packages/html-test-app/src/preview-examples/date-input-validation.html @@ -14,6 +14,11 @@ Date input validation example +
Input types example +
diff --git a/packages/html-test-app/src/preview-examples/input-validation.html b/packages/html-test-app/src/preview-examples/input-validation.html index af904ba508f..16c68e66128 100644 --- a/packages/html-test-app/src/preview-examples/input-validation.html +++ b/packages/html-test-app/src/preview-examples/input-validation.html @@ -14,6 +14,11 @@ Input validation example +
Radio validation example +
diff --git a/packages/html-test-app/src/preview-examples/textarea-validation.html b/packages/html-test-app/src/preview-examples/textarea-validation.html index 8b161cf5642..136e755fa31 100644 --- a/packages/html-test-app/src/preview-examples/textarea-validation.html +++ b/packages/html-test-app/src/preview-examples/textarea-validation.html @@ -14,6 +14,11 @@ Textarea validation example +
Date: Fri, 8 Nov 2024 15:39:19 +0100 Subject: [PATCH 02/26] docs(custom-field): review findings --- .../{custom-field.md => _custom-field_code.mdx} | 4 ---- ...yleguide.md => _custom-field_styleguide.mdx} | 0 .../docs/controls/custom-field.mdx | 17 +++++++++++++++++ 3 files changed, 17 insertions(+), 4 deletions(-) rename packages/documentation/docs/controls/{custom-field.md => _custom-field_code.mdx} (97%) rename packages/documentation/docs/controls/{_forms-custom-field_styleguide.md => _custom-field_styleguide.mdx} (100%) create mode 100644 packages/documentation/docs/controls/custom-field.mdx diff --git a/packages/documentation/docs/controls/custom-field.md b/packages/documentation/docs/controls/_custom-field_code.mdx similarity index 97% rename from packages/documentation/docs/controls/custom-field.md rename to packages/documentation/docs/controls/_custom-field_code.mdx index 6fa16fe8bd2..71bec9b1b65 100644 --- a/packages/documentation/docs/controls/custom-field.md +++ b/packages/documentation/docs/controls/_custom-field_code.mdx @@ -3,10 +3,6 @@ import Props from '@site/docs/auto-generated/ix-custom-field/props.md'; import Events from '@site/docs/auto-generated/ix-custom-field/events.md'; import Tags from '@site/docs/auto-generated/ix-custom-field/tags.md'; -# Custom Field - - - With the help of `ix-custom-field` you are able to create form fields that can host any component / markup, while still having access to all validation states as well as ascociated explanatory texts like `helper-text`, `valid-text`, `info-text`, `warning-text` or `invalid-text`. The component will check if any of its children has one of these classes set: `ix-valid, ix-info, ix-warning or ix-invalid` diff --git a/packages/documentation/docs/controls/_forms-custom-field_styleguide.md b/packages/documentation/docs/controls/_custom-field_styleguide.mdx similarity index 100% rename from packages/documentation/docs/controls/_forms-custom-field_styleguide.md rename to packages/documentation/docs/controls/_custom-field_styleguide.mdx diff --git a/packages/documentation/docs/controls/custom-field.mdx b/packages/documentation/docs/controls/custom-field.mdx new file mode 100644 index 00000000000..eaa823478d1 --- /dev/null +++ b/packages/documentation/docs/controls/custom-field.mdx @@ -0,0 +1,17 @@ +import Tags from '@site/docs/auto-generated/ix-custom-field/tags.md'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; + +import DocsUx from './_custom-field_styleguide.mdx'; +import DocsCode from './_custom-field_code.mdx'; + +# Custom field + + + +
+
+ + + + + From cd94d01651cfb07cf4ab0ba7b835a4550324364c Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Fri, 8 Nov 2024 15:47:59 +0100 Subject: [PATCH 03/26] docs(radio): review findings --- .../docs/controls/_radio_code.mdx | 34 +++++++++++++++ ...on_styleguide.md => _radio_styleguide.mdx} | 6 +-- .../docs/controls/date-input.mdx | 7 ++- .../documentation/docs/controls/radio.mdx | 43 +++++-------------- 4 files changed, 53 insertions(+), 37 deletions(-) create mode 100644 packages/documentation/docs/controls/_radio_code.mdx rename packages/documentation/docs/controls/{_forms-radio-button_styleguide.md => _radio_styleguide.mdx} (74%) diff --git a/packages/documentation/docs/controls/_radio_code.mdx b/packages/documentation/docs/controls/_radio_code.mdx new file mode 100644 index 00000000000..efc0bbb0631 --- /dev/null +++ b/packages/documentation/docs/controls/_radio_code.mdx @@ -0,0 +1,34 @@ +import Admonition from '@theme/Admonition'; + +import Playground from '@site/src/components/PlaygroundV3'; + +import Props from '@site/docs/auto-generated/ix-radio/props.md'; +import Events from '@site/docs/auto-generated/ix-radio/events.md'; + +## Examples + +### Basic + + + +### Disabled + + + +### Group + + + +### Validation + + + +## API + +### Properties + + + +### Events + + diff --git a/packages/documentation/docs/controls/_forms-radio-button_styleguide.md b/packages/documentation/docs/controls/_radio_styleguide.mdx similarity index 74% rename from packages/documentation/docs/controls/_forms-radio-button_styleguide.md rename to packages/documentation/docs/controls/_radio_styleguide.mdx index 3f9dbf858de..687c95ed3c4 100644 --- a/packages/documentation/docs/controls/_forms-radio-button_styleguide.md +++ b/packages/documentation/docs/controls/_radio_styleguide.mdx @@ -1,4 +1,4 @@ -A radio button is a interface element that enables the user to choose only one option from a predefined set of mutually exclusive options. They are presented in groups to signify that only one selection is allowed at a time. Selecting a radio button automatically deselects any previously chosen radio button within the same group. We typically use radio buttons to offer users a set of exclusive choices. +A radio button is an interface element that enables the user to choose only one option from a predefined set of mutually exclusive options. They are presented in groups to signify that only one selection is allowed at a time. Selecting a radio button automatically deselects any previously chosen radio button within the same group. We typically use radio buttons to offer users a set of exclusive choices. ![Anatomy radio button](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3749-1785&t=VCAAFzKIYCDb7nIX-4) @@ -19,10 +19,10 @@ A radio button is a interface element that enables the user to choose only one o ## Dos and Don’ts -- Do use radio buttons when the user needs to select only one option from a set of options +- Do use radio buttons when the user needs to select only one option from a set of options - Do group related radio buttons together to indicate that only one option can be selected at a time - Do provide a default (already selected) option when the user first sees the radio button group -- Don’t use radio buttons if the user needs to select multiple options from a set of options - use a checkbox instead +- Don’t use radio buttons if the user needs to select multiple options from a set of options - use a checkbox instead - Don’t use only one radio button in a group, groups should have at least two options ## Related patterns diff --git a/packages/documentation/docs/controls/date-input.mdx b/packages/documentation/docs/controls/date-input.mdx index 2c9ce88a551..7ca162ed1e3 100644 --- a/packages/documentation/docs/controls/date-input.mdx +++ b/packages/documentation/docs/controls/date-input.mdx @@ -1,5 +1,5 @@ import DeprecatedTags from '@site/src/components/Tags'; -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_date-input_styleguide.mdx' import DocsCode from './\_date-input_code.mdx' @@ -16,4 +16,7 @@ import Tags from '@site/docs/auto-generated/ix-date-input/tags.md';

- + + + + diff --git a/packages/documentation/docs/controls/radio.mdx b/packages/documentation/docs/controls/radio.mdx index da8628f7aa1..f9bd455ea90 100644 --- a/packages/documentation/docs/controls/radio.mdx +++ b/packages/documentation/docs/controls/radio.mdx @@ -1,11 +1,10 @@ -import Admonition from '@theme/Admonition'; - import DeprecatedTags from '@site/src/components/Tags'; -import Playground from '@site/src/components/PlaygroundV3'; - -import Props from '@site/docs/auto-generated/ix-radio/props.md'; -import Events from '@site/docs/auto-generated/ix-radio/events.md'; import Tags from '@site/docs/auto-generated/ix-radio/tags.md'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; + +import DocsUx from './_radio_styleguide.mdx'; +import DocsCode from './_radio_code.mdx'; + # Radio @@ -14,30 +13,10 @@ import Tags from '@site/docs/auto-generated/ix-radio/tags.md';
-## Examples - -### Basic - - - -### Disabled - - - -### Group - - - -### Validation - - - -## API - -### Properties - - - -### Events +
+
- + + + + From a5dd8da888903ca8cba2e38ad6fa1ae7205a6c72 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Fri, 8 Nov 2024 15:52:06 +0100 Subject: [PATCH 04/26] docs(date-input): review findings --- packages/documentation/docs/controls/date-input.mdx | 2 +- packages/documentation/docs/controls/input.mdx | 7 +++++-- packages/documentation/docs/controls/number-input.mdx | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/documentation/docs/controls/date-input.mdx b/packages/documentation/docs/controls/date-input.mdx index 7ca162ed1e3..cdd98e6b0a3 100644 --- a/packages/documentation/docs/controls/date-input.mdx +++ b/packages/documentation/docs/controls/date-input.mdx @@ -6,7 +6,7 @@ import DocsCode from './\_date-input_code.mdx' import Tags from '@site/docs/auto-generated/ix-date-input/tags.md'; -# Date input +# Input (date)
diff --git a/packages/documentation/docs/controls/input.mdx b/packages/documentation/docs/controls/input.mdx index a3788233284..18a76235f78 100644 --- a/packages/documentation/docs/controls/input.mdx +++ b/packages/documentation/docs/controls/input.mdx @@ -3,7 +3,7 @@ title: Input (text) --- import DeprecatedTags from '@site/src/components/Tags'; -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_input_styleguide.md'; import DocsCode from './\_input_code.md'; @@ -18,4 +18,7 @@ import Tags from './../auto-generated/ix-input/tags.md';

- + + + + diff --git a/packages/documentation/docs/controls/number-input.mdx b/packages/documentation/docs/controls/number-input.mdx index 0ad30ff951b..c7f3a1f11c4 100644 --- a/packages/documentation/docs/controls/number-input.mdx +++ b/packages/documentation/docs/controls/number-input.mdx @@ -5,7 +5,7 @@ import DocsUx from './_number-input_styleguide.mdx'; import DocsCode from './_number-input_code.mdx'; import Tags from '@site/docs/auto-generated/ix-number-input/tags.md'; -# Number input +# Input (number)
From 5d4ca217d9eb5d177b898fa180ab7692265619cc Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Fri, 8 Nov 2024 16:03:39 +0100 Subject: [PATCH 05/26] docs(forms): review finding - links and typos --- packages/documentation/docs/controls/forms/forms-behavior.md | 2 +- packages/documentation/docs/controls/forms/forms-field.md | 2 +- packages/documentation/docs/controls/forms/forms-layout.md | 2 +- packages/documentation/docs/controls/layout-auto.md | 2 +- packages/documentation/docs/controls/messagebar.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/documentation/docs/controls/forms/forms-behavior.md b/packages/documentation/docs/controls/forms/forms-behavior.md index e9cf266adec..78d1c37e53a 100644 --- a/packages/documentation/docs/controls/forms/forms-behavior.md +++ b/packages/documentation/docs/controls/forms/forms-behavior.md @@ -50,7 +50,7 @@ In this strategy, there is no need for a submit button. The form is automaticall - Con: Handling validation and error messages without a submit button can be challenging. - Con: Users may not have a chance to review and confirm their input before submission. -For more information on form validation, refer to the [Validation](forms-validation.mdx) chapter. +For more information on form validation, refer to the [validation](forms-validation.mdx) chapter. ## Related patterns diff --git a/packages/documentation/docs/controls/forms/forms-field.md b/packages/documentation/docs/controls/forms/forms-field.md index ef526859342..406997e62cc 100644 --- a/packages/documentation/docs/controls/forms/forms-field.md +++ b/packages/documentation/docs/controls/forms/forms-field.md @@ -10,7 +10,7 @@ A field is a form element when user input is needed. It's typically used with ot 4. Required indicator 5. Counter (input and textarea field only) -**Note:** In this chapter, we describe the default field component. For details about [custom fields](../custom-field.md), refer to the [layouts](forms-layout.md) chapter. +**Note:** In this chapter, we describe the default field component. For details about [custom fields](../custom-field.mdx), refer to the [layouts](forms-layout.md) chapter. ## Options diff --git a/packages/documentation/docs/controls/forms/forms-layout.md b/packages/documentation/docs/controls/forms/forms-layout.md index e3c918d725a..347af7418f7 100644 --- a/packages/documentation/docs/controls/forms/forms-layout.md +++ b/packages/documentation/docs/controls/forms/forms-layout.md @@ -26,7 +26,7 @@ Effective ways to organize form elements enhance user comprehension and interact - **Button alignment:** Position primary action buttons, e.g. submit and cancel consistently. We recommend: - Bottom left: Short forms (up to 5 fields) - Bottom right: Long forms (more than 5 fields) - Bottom right and sticky: Long forms that are already filled in (e.g. edit) with a large number of fields %% - Top right: ??? %% - **Label alignment:** By default, the label is positioned above its input field. Use a custom field component for long forms with a lot of fields to position the label on the left (which saves vertical space). -- **Grouping fields:** In some cases, it makes sense to combine multiple fields in one [custom field](../custom-field.md) with a single label that are connected contextually or through validation, e.g. entering the value and unit of an entity, selecting start and end date. It allows a clearer validation, e.g. the end date must be after the start date. +- **Grouping fields:** In some cases, it makes sense to combine multiple fields in one [custom field](../custom-field.mdx) with a single label that are connected contextually or through validation, e.g. entering the value and unit of an entity, selecting start and end date. It allows a clearer validation, e.g. the end date must be after the start date. - **Field width:** Use a consistent width for input fields to create a harmonious layout. For example, use a width of 100% for full-width fields and 50% for two-column fields. %% - **Responsive behavior**: xxx - Layout grid or flexbox - should I use 1 or 2 columns? %% diff --git a/packages/documentation/docs/controls/layout-auto.md b/packages/documentation/docs/controls/layout-auto.md index 99c82c41256..dc18289ae32 100644 --- a/packages/documentation/docs/controls/layout-auto.md +++ b/packages/documentation/docs/controls/layout-auto.md @@ -3,7 +3,7 @@ import Props from '@site/docs/auto-generated/ix-layout-auto/props.md'; import Events from '@site/docs/auto-generated/ix-layout-auto/events.md'; import Tags from '@site/docs/auto-generated/ix-layout-auto/tags.md'; -# Layout Auto +# Layout auto diff --git a/packages/documentation/docs/controls/messagebar.md b/packages/documentation/docs/controls/messagebar.md index feee15f0059..b24d311dd13 100644 --- a/packages/documentation/docs/controls/messagebar.md +++ b/packages/documentation/docs/controls/messagebar.md @@ -3,7 +3,7 @@ import Events from './../auto-generated/ix-message-bar/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -# Message-bar +# Message bar ## Examples From e7f72d945a42a9a3af06b8ccf20c596b3a0911be Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Fri, 8 Nov 2024 16:37:29 +0100 Subject: [PATCH 06/26] docs(forms): review findings --- .../docs/controls/_blind_styleguide.md | 2 +- .../docs/controls/_breadcrumb_styleguide.md | 2 +- .../docs/controls/_card-list_styleguide.md | 2 +- .../docs/controls/_card_styleguide.md | 4 +- .../docs/controls/_dropdown_styleguide.md | 8 +-- .../docs/controls/_layout-grid_styleguide.md | 7 +-- .../docs/controls/_radio_styleguide.mdx | 4 +- .../docs/controls/_select_styleguide.md | 4 +- .../controls/_textarea-field_styleguide.mdx | 2 +- .../docs/controls/_toggle_code.mdx | 43 ------------- .../_about-and-legal_styleguide.md | 8 +-- .../_application-header_styleguide.md | 12 ++-- .../_application-menu_styleguide.md | 6 +- .../documentation/docs/controls/toggle.mdx | 62 +++++++++++++++---- 14 files changed, 80 insertions(+), 86 deletions(-) delete mode 100644 packages/documentation/docs/controls/_toggle_code.mdx diff --git a/packages/documentation/docs/controls/_blind_styleguide.md b/packages/documentation/docs/controls/_blind_styleguide.md index d18bf2758d8..7cc7bb81bd8 100644 --- a/packages/documentation/docs/controls/_blind_styleguide.md +++ b/packages/documentation/docs/controls/_blind_styleguide.md @@ -45,7 +45,7 @@ For all blind variants, a default, hover, active and focused state is available. ![Blind states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2-352&mode=design&t=9faEnH99BaAxqCGM-1) -## Dos and don'ts +## Dos and Don'ts - Do stay within the recommended number of blinds - between 3 and 7 - Don't use multi-line text in the header. The header section has a fixed height for single-line text entries diff --git a/packages/documentation/docs/controls/_breadcrumb_styleguide.md b/packages/documentation/docs/controls/_breadcrumb_styleguide.md index be441e5840d..cf8831d3fef 100644 --- a/packages/documentation/docs/controls/_breadcrumb_styleguide.md +++ b/packages/documentation/docs/controls/_breadcrumb_styleguide.md @@ -32,7 +32,7 @@ Interactive items can take one of four states: Default, hover, active and focuse ![States of breadcrumb items](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=120-7463&mode=design&t=JS1Aklcq48swr0Im-1) -## Dos and don'ts +## Dos and Don'ts - Do label each item, i.e. use more than icons - Do use single-line text entries as breadcrumb items have a fixed height diff --git a/packages/documentation/docs/controls/_card-list_styleguide.md b/packages/documentation/docs/controls/_card-list_styleguide.md index 8371bf9bdcb..5c6a780e13f 100644 --- a/packages/documentation/docs/controls/_card-list_styleguide.md +++ b/packages/documentation/docs/controls/_card-list_styleguide.md @@ -31,7 +31,7 @@ The scroll card list style displays the content items from left to right next to - **"Show all" button**: Sometimes card lists only need to show the most important or most recent items. Clicking on the "Show all" button in the header section shows all items. Typically, these items are displayed on a new page. - **"Show more" card**: The number of visible items inside a list can be limited to reduce the user's cognitive load. The "Show more" card indicates that more information is available. Selecting the card either displays the next chunk of items or shows all items on a new page, similar to the "Show all" button pattern. -## Dos and don'ts +## Dos and Don'ts - Do keep cards and items within card lists the same size - Don't place different types of components within card lists - Don't nest card lists within each other diff --git a/packages/documentation/docs/controls/_card_styleguide.md b/packages/documentation/docs/controls/_card_styleguide.md index 185a55b85e8..94cea672465 100644 --- a/packages/documentation/docs/controls/_card_styleguide.md +++ b/packages/documentation/docs/controls/_card_styleguide.md @@ -13,7 +13,7 @@ Cards are interactive elements. The entire container is clickable and triggers a ## Card types -We currently offer two types of cards: **action** and **push** +We currently offer two types of cards: **action** and **push**. Action cards have an icon, a heading and a subheading. We use them to trigger key actions. @@ -49,7 +49,7 @@ Cards can take one of three states: Default, hover and active. Action cards also ![Card states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4979&mode=design&t=RDimbEsIHFIXIByo-1) -## Dos and don'ts +## Dos and Don'ts - Do group cards in lists or grids (use the [card list](card-list.md) control) - Do keep multiple cards equal in size - Don't nest cards inside each other diff --git a/packages/documentation/docs/controls/_dropdown_styleguide.md b/packages/documentation/docs/controls/_dropdown_styleguide.md index 11bade1b628..845d23f1747 100644 --- a/packages/documentation/docs/controls/_dropdown_styleguide.md +++ b/packages/documentation/docs/controls/_dropdown_styleguide.md @@ -16,7 +16,7 @@ Dropdown containers display a menu with additional items when users click on the ## Options - **Header:** Add a header for the dropdown container. This allows users to better understand which elements are in the dropdown. -- **Quick Actions:** Add a quick action bar. Add 3 to 5 actions/items to the quick actions. We typically use quick actions to access common functions such as cut, copy and paste. +- **Quick actions:** Add a quick action bar. Add 3 to 5 actions/items to the quick actions. We typically use quick actions to access common functions such as cut, copy and paste. - **Checked:** Mark selected items in the dropdown with a check mark. We typically use check marks when an item can be activated (e.g. for the dropdown "Sort by:" selection: name, modified date, create date). - **Submenu:** Add a submenu for a multi-level dropdown. We typically use a submenu when there is a long item list and different systematic categorization within the items. - **Separator:** Add a separator to visually divide items from each other. We normally use a separator to isolate individual elements from a cohesive item list. @@ -24,13 +24,13 @@ Dropdown containers display a menu with additional items when users click on the - **Label:** Set a label for the dropdown item. We typically use short labels including verbs. - **Trigger:** The trigger defines which element opens the dropdown. A trigger should also be defined for a dropdown submenu. We typically use a button as the trigger element. - **Anchor:** An anchor defines where the dropdown is placed. When no anchor is defined the trigger element is used as the anchor. -- **Close Behavior:** Defines whether a click inside and/or outside the dropdown closes the dropdown. A submenu is always closed together with the parent dropdown. Three Options are possible: +- **Close behavior:** Defines whether a click inside and/or outside the dropdown closes the dropdown. A submenu is always closed together with the parent dropdown. Three Options are possible: - Inside: clicking within the dropdown closes the dropdown. - Outside: clicking outside the dropdown closes the dropdown. - Both: clicking within and outside the dropdown closes the dropdown. - - False: dropdown will only close if it's parent gets closed + - False: dropdown will only close if it's parent gets closed. - **Placement:** Place a dropdown at the top, bottom, left or right edge as well as at the beginning or end of the trigger/anchor element. The placement may be automatically adjusted in case it cannot be displayed correctly (detailed behavior described in the context section below). We typically use the default (bottom right) placement option to ensure consistency. -- **Date Selection:** Use the component [date dropdown](date-dropdown.md) to get a date selection in the dropdown. +- **Date selection:** Use the component [date dropdown](date-dropdown.md) to get a date selection in the dropdown. ![Dropdown Examples](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2372-2696&mode=design&t=OVHeXvLZYLkP2CzN-4) diff --git a/packages/documentation/docs/controls/_layout-grid_styleguide.md b/packages/documentation/docs/controls/_layout-grid_styleguide.md index 4377c1e4c63..98eadd8a869 100644 --- a/packages/documentation/docs/controls/_layout-grid_styleguide.md +++ b/packages/documentation/docs/controls/_layout-grid_styleguide.md @@ -11,9 +11,9 @@ Commonly, the layout grid is based on a 12 column layout. Columns are nested in ## Options ### Layout grid options -- The default number of columns in a grid is 12. It is possible to choose any number of columns between 2 and 12 -- Layout grids contain horizontal margins. For smaller viewports or when used within a component, the margin can be removed or reduced -- As a general rule, a gutter of ``1.5rem`` is applied. The gutter can be decreased to allow for a narrower grouping of columns +- The default number of columns in a grid is 12. It is possible to choose any number of columns between 2 and 12. +- Layout grids contain horizontal margins. For smaller viewports or when used within a component, the margin can be removed or reduced. +- As a general rule, a gutter of ``1.5rem`` is applied. The gutter can be decreased to allow for a narrower grouping of columns. ### Column options - The size of a column is defined by the available space and the number of columns. If no size is set, columns automatically have equal width. The size of a column can be adjusted so that it takes a higher percentage of the available space. The size property refers to the number of columns from the default of 12 per row. @@ -39,4 +39,3 @@ Example: Here is an example of a 12 column layout grid with 4 columns, each with ## Behavior in context Decreasing and increasing the viewport width influences the width of each column within a layout grid. When column width is decreased to the point that the minimum content width is reached for at least one column, the layout breaks into a second line. - diff --git a/packages/documentation/docs/controls/_radio_styleguide.mdx b/packages/documentation/docs/controls/_radio_styleguide.mdx index 687c95ed3c4..bdf49f5a1e1 100644 --- a/packages/documentation/docs/controls/_radio_styleguide.mdx +++ b/packages/documentation/docs/controls/_radio_styleguide.mdx @@ -30,5 +30,5 @@ A radio button is an interface element that enables the user to choose only one - [Form field](forms/forms-field.md) - [Validation](forms/forms-validation.mdx) - [Layout](forms/forms-layout.md) -- Checkbox -- Toggle +- [Checkbox](checkbox.mdx) +- [Toggle](toggle.mdx) diff --git a/packages/documentation/docs/controls/_select_styleguide.md b/packages/documentation/docs/controls/_select_styleguide.md index b5f00e129c1..e500e68a667 100644 --- a/packages/documentation/docs/controls/_select_styleguide.md +++ b/packages/documentation/docs/controls/_select_styleguide.md @@ -41,13 +41,13 @@ A select component allows users to choose from a list of options. It supports si - The text in an input field is truncated with the length of the container. - On the multiselect, the selected items break into a second line and then show a scrollbar if it extends beyond two lines. - The dropdown list is scrollable when the list exceeds the container height. Its width is defined by the longest item. -- **Alignment:** Selects are always aligned to the left, while right alignment is reserved exclusively for [number fields](number-input.mdx). +- **Alignment:** Selects are always aligned to the left, while right alignment is reserved exclusively for [number inputs](number-input.mdx). ## States The select field has five states: default, hover, focused, disabled and read-only. In the disabled state, the input field is displayed without offering any user interaction. -![Field States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3960-760&t=MWpyPDZDK5B531n9-4) +![Field states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3960-760&t=MWpyPDZDK5B531n9-4) ## Dos and Don’ts diff --git a/packages/documentation/docs/controls/_textarea-field_styleguide.mdx b/packages/documentation/docs/controls/_textarea-field_styleguide.mdx index 51afc311df1..27c699ab673 100644 --- a/packages/documentation/docs/controls/_textarea-field_styleguide.mdx +++ b/packages/documentation/docs/controls/_textarea-field_styleguide.mdx @@ -41,7 +41,7 @@ The textarea component allows users to input multi-line text, making it ideal fo ## States -Textareas have five states: Default, hover, focused, read-only and disabled +Textareas have five states: Default, hover, focused, read-only and disabled. ![Textarea states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3947-527&t=DtCmoFcLwhf7ke3S-4) diff --git a/packages/documentation/docs/controls/_toggle_code.mdx b/packages/documentation/docs/controls/_toggle_code.mdx deleted file mode 100644 index 9282868ae9f..00000000000 --- a/packages/documentation/docs/controls/_toggle_code.mdx +++ /dev/null @@ -1,43 +0,0 @@ -import Playground from '@site/src/components/PlaygroundV3'; -import Props from './../auto-generated/ix-toggle/props.md'; -import Events from './../auto-generated/ix-toggle/events.md'; - -## Examples - -### Basic - - - -### Disabled - - - -### Label - - - -### Readonly - - - -### StepperButton - - - -### Validation - - - -## API - -### Properties - - - -### Events - - diff --git a/packages/documentation/docs/controls/application-frame/_about-and-legal_styleguide.md b/packages/documentation/docs/controls/application-frame/_about-and-legal_styleguide.md index 96221d1ba8c..4c6a1cfa7b1 100644 --- a/packages/documentation/docs/controls/application-frame/_about-and-legal_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_about-and-legal_styleguide.md @@ -12,8 +12,8 @@ The About and legal component is an overlay we typically use to show application Overlay opens on top of application content with a semi-transparent background with a background blur effect to emphasize the overlay character. Closing this overlay brings users back to the previous content. The overlay can be closed in three ways: -- Select the close button -- Click the info icon again -- Click another navigation item +- Select the close button. +- Click the info icon again. +- Click another navigation item. -When the navigation menu is collapsed, the overlay stays open. \ No newline at end of file +When the navigation menu is collapsed, the overlay stays open. diff --git a/packages/documentation/docs/controls/application-frame/_application-header_styleguide.md b/packages/documentation/docs/controls/application-frame/_application-header_styleguide.md index 0894e3c561a..9d05ec7b255 100644 --- a/packages/documentation/docs/controls/application-frame/_application-header_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_application-header_styleguide.md @@ -52,8 +52,8 @@ Clicking the avatar opens a dropdown (6) with additional user information (7, 8, ![Examples of access login](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1636-62468&mode=design&t=4XzscFw57dE7McUX-11) If your application can be used without being logged in to, you can offer access to a login process in different ways, for example: -- Show a log in button in the [slot for additional elements](#slot) and hide the avatar -- Show the avatar with a placeholder image and show text in the user information section +- Show a log in button in the [slot for additional elements](#slot) and hide the avatar. +- Show the avatar with a placeholder image and show text in the user information section. ## Options @@ -75,10 +75,10 @@ The header automatically adapts the breakpoints defined in the [application](./a At breakpoints "lg" and "md" the application header behaves identically. At breakpoint "sm" the layout changes in the following way: -- The application menu hides, displaying the application menu icon (12); a click opens the application menu (16) -- The application switch (if used) moves to the application menu (16) -- The brand logo disappears -- The slot for additional elements (if used) moves to the overflow dropdown that opens on click on the overflow icon (13) +- The application menu hides, displaying the application menu icon (12), a click opens the application menu (16). +- The application switch (if used) moves to the application menu (16). +- The brand logo disappears. +- The slot for additional elements (if used) moves to the overflow dropdown that opens on click on the overflow icon (13). ## Dos and Don’ts diff --git a/packages/documentation/docs/controls/application-frame/_application-menu_styleguide.md b/packages/documentation/docs/controls/application-frame/_application-menu_styleguide.md index f6785e95733..e0dad657ff8 100644 --- a/packages/documentation/docs/controls/application-frame/_application-menu_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_application-menu_styleguide.md @@ -79,9 +79,9 @@ See the code tab for more information and other options available. ![Navigation menu overflow behavior](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1013-68267&mode=design&t=RG8M7S3eIKxiDqv5-11) -- Navigation menu expands and collapses with a transition -- The width of the collapse and expand state are fixed and cannot be configured -- The number of menu items can overflow, this is recognizable by the shadow at the bottom and/or top +- Navigation menu expands and collapses with a transition. +- The width of the collapse and expand state are fixed and cannot be configured. +- The number of menu items can overflow, this is recognizable by the shadow at the bottom and/or top.

diff --git a/packages/documentation/docs/controls/toggle.mdx b/packages/documentation/docs/controls/toggle.mdx index 024738bbf9b..5317b66296f 100644 --- a/packages/documentation/docs/controls/toggle.mdx +++ b/packages/documentation/docs/controls/toggle.mdx @@ -1,19 +1,57 @@ -import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; +import Props from './../auto-generated/ix-toggle/props.md'; +import Events from './../auto-generated/ix-toggle/events.md'; -import DocsUx from './_forms-toggle_styleguide.md'; -import DocsCode from './_toggle_code.mdx'; +import Playground from '@site/src/components/PlaygroundV3'; -import Tags from '@site/docs/auto-generated/ix-number-input/tags.md'; +# Toggle +## Examples -# Toggle +### Basic + + + + +### Custom label + + + + +### Disabled + + + + +### Checked + + + + +### Indeterminate + + + + +## API + +### Properties - + -
-
+### Events - - - - + From 2ca9ad94ccc17fd821d74397419a8f8c281c34b2 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Mon, 11 Nov 2024 10:25:34 +0100 Subject: [PATCH 07/26] docs(forms): review findings --- packages/documentation/docs/controls/_number-input_code.mdx | 2 +- packages/documentation/docs/controls/_textarea-field_code.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/_number-input_code.mdx b/packages/documentation/docs/controls/_number-input_code.mdx index f1952d5c3d6..418e97fba4d 100644 --- a/packages/documentation/docs/controls/_number-input_code.mdx +++ b/packages/documentation/docs/controls/_number-input_code.mdx @@ -20,7 +20,7 @@ import Events from '@site/docs/auto-generated/ix-number-input/events.md'; -### StepperButton +### Stepper buttons diff --git a/packages/documentation/docs/controls/_textarea-field_code.mdx b/packages/documentation/docs/controls/_textarea-field_code.mdx index 1ff4460baa7..7869be9457d 100644 --- a/packages/documentation/docs/controls/_textarea-field_code.mdx +++ b/packages/documentation/docs/controls/_textarea-field_code.mdx @@ -17,7 +17,7 @@ import Events from '@site/docs/auto-generated/ix-textarea/events.md'; -### RowsCols +### Resize behavior From 0767e0fc7e33b377328c176db4bc9d2f5795b806 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Mon, 11 Nov 2024 10:39:53 +0100 Subject: [PATCH 08/26] docs(forms): rename date and number input files --- packages/documentation/docs/controls/_input_styleguide.md | 6 +++--- packages/documentation/docs/controls/_select_styleguide.md | 4 ++-- .../docs/controls/{date-input.mdx => input-date.mdx} | 0 .../docs/controls/{number-input.mdx => input-number.mdx} | 0 4 files changed, 5 insertions(+), 5 deletions(-) rename packages/documentation/docs/controls/{date-input.mdx => input-date.mdx} (100%) rename packages/documentation/docs/controls/{number-input.mdx => input-number.mdx} (100%) diff --git a/packages/documentation/docs/controls/_input_styleguide.md b/packages/documentation/docs/controls/_input_styleguide.md index d9bb8e7786d..ac6516180f7 100644 --- a/packages/documentation/docs/controls/_input_styleguide.md +++ b/packages/documentation/docs/controls/_input_styleguide.md @@ -25,7 +25,7 @@ An input field is a user interface element that allows users to enter and edit t - **Validation:** See [validation](./forms/forms-validation.mdx). - **Interaction**: Clicking in the container enables the editing of the field. - **Text truncation**: The text in an input field is cut off with the length of the container. -- **Alignment**: Inputs are always aligned to the left, while right alignment is reserved exclusively for [number fields](number-input.mdx). +- **Alignment**: Inputs are always aligned to the left, while right alignment is reserved exclusively for [number fields](input-number.mdx). ## States @@ -46,5 +46,5 @@ The input field has five states: default, focused, hover, disabled and read-only - [Form field](./forms/forms-field.md) - [Validation](./forms/forms-validation.mdx) - [Layout](./forms/forms-layout.md) -- [Number input](number-input.mdx) -- [Date input](date-input.mdx) +- [Number input](input-number.mdx) +- [Date input](input-date.mdx) diff --git a/packages/documentation/docs/controls/_select_styleguide.md b/packages/documentation/docs/controls/_select_styleguide.md index e500e68a667..09804049042 100644 --- a/packages/documentation/docs/controls/_select_styleguide.md +++ b/packages/documentation/docs/controls/_select_styleguide.md @@ -41,7 +41,7 @@ A select component allows users to choose from a list of options. It supports si - The text in an input field is truncated with the length of the container. - On the multiselect, the selected items break into a second line and then show a scrollbar if it extends beyond two lines. - The dropdown list is scrollable when the list exceeds the container height. Its width is defined by the longest item. -- **Alignment:** Selects are always aligned to the left, while right alignment is reserved exclusively for [number inputs](number-input.mdx). +- **Alignment:** Selects are always aligned to the left, while right alignment is reserved exclusively for [number inputs](input-number.mdx). ## States @@ -69,4 +69,4 @@ The select field has five states: default, hover, focused, disabled and read-onl - [Radio button](radio.mdx) - [Checkbox](checkbox.mdx) - [Toggle](toggle.mdx) -- [Date input](date-input.mdx) +- [Date input](input-date.mdx) diff --git a/packages/documentation/docs/controls/date-input.mdx b/packages/documentation/docs/controls/input-date.mdx similarity index 100% rename from packages/documentation/docs/controls/date-input.mdx rename to packages/documentation/docs/controls/input-date.mdx diff --git a/packages/documentation/docs/controls/number-input.mdx b/packages/documentation/docs/controls/input-number.mdx similarity index 100% rename from packages/documentation/docs/controls/number-input.mdx rename to packages/documentation/docs/controls/input-number.mdx From fa4415590168778f827382d575636acfe555fc44 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Mon, 11 Nov 2024 10:47:43 +0100 Subject: [PATCH 09/26] docs(forms): review findings. adjust forms chapter document order, fix typo --- .../documentation/docs/controls/forms/forms-behavior.md | 4 ++++ packages/documentation/docs/controls/forms/forms-field.md | 6 +++++- packages/documentation/docs/controls/forms/forms-layout.md | 4 ++++ .../documentation/docs/controls/forms/forms-validation.mdx | 4 ++++ 4 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/forms/forms-behavior.md b/packages/documentation/docs/controls/forms/forms-behavior.md index 78d1c37e53a..90dba5fb583 100644 --- a/packages/documentation/docs/controls/forms/forms-behavior.md +++ b/packages/documentation/docs/controls/forms/forms-behavior.md @@ -1,3 +1,7 @@ +--- +sidebar_position: 3 +--- + # Behavior Forms behavior refers to the way in which user input is handled and validated within a form. It plays a crucial role in providing a seamless and user-friendly experience for form interactions. diff --git a/packages/documentation/docs/controls/forms/forms-field.md b/packages/documentation/docs/controls/forms/forms-field.md index 406997e62cc..c18c0de77ec 100644 --- a/packages/documentation/docs/controls/forms/forms-field.md +++ b/packages/documentation/docs/controls/forms/forms-field.md @@ -1,4 +1,8 @@ -# Fields +--- +sidebar_position: 2 +--- + +# Field A field is a form element when user input is needed. It's typically used with other form elements in a fieldset. diff --git a/packages/documentation/docs/controls/forms/forms-layout.md b/packages/documentation/docs/controls/forms/forms-layout.md index 347af7418f7..8e670f777a1 100644 --- a/packages/documentation/docs/controls/forms/forms-layout.md +++ b/packages/documentation/docs/controls/forms/forms-layout.md @@ -1,3 +1,7 @@ +--- +sidebar_position: 1 +--- + # Layout Effective form layouts play a crucial role in usability. Well-structured forms include fieldsets, considering the hierarchy of information, and understanding how to strike the right balance between aesthetics and functionality. diff --git a/packages/documentation/docs/controls/forms/forms-validation.mdx b/packages/documentation/docs/controls/forms/forms-validation.mdx index ef19c104cf8..5f390f8397c 100644 --- a/packages/documentation/docs/controls/forms/forms-validation.mdx +++ b/packages/documentation/docs/controls/forms/forms-validation.mdx @@ -1,3 +1,7 @@ +--- +sidebar_position: 4 +--- + import LinkableDocsTabs from "../../../src/components/LinkableDocsTabs"; import DocsUx from './\_forms-validation_style.md' From 6906be21bb764172e4ec808aabc1eacb04204b53 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Mon, 11 Nov 2024 12:08:46 +0100 Subject: [PATCH 10/26] docs(tabs): switch to LinkableDocsTabs --- .../docs/controls/application-frame/about-and-legal.md | 7 +++++-- .../docs/controls/application-frame/application-header.md | 7 +++++-- .../docs/controls/application-frame/application-menu.md | 7 +++++-- .../docs/controls/application-frame/application.md | 7 +++++-- .../docs/controls/application-frame/basic-navigation.md | 7 +++++-- .../docs/controls/application-frame/content.md | 7 +++++-- .../docs/controls/application-frame/map-navigation.md | 8 +++++--- .../docs/controls/application-frame/popover-news.md | 7 +++++-- .../docs/controls/application-frame/settings.md | 7 +++++-- packages/documentation/docs/controls/blind.md | 7 +++++-- packages/documentation/docs/controls/breadcrumb.md | 7 +++++-- packages/documentation/docs/controls/buttons/button.md | 7 +++++-- .../docs/controls/buttons/dropdown-button.md | 7 +++++-- .../documentation/docs/controls/buttons/icon-button.md | 7 +++++-- .../documentation/docs/controls/buttons/link-button.md | 7 +++++-- .../documentation/docs/controls/buttons/split-button.md | 7 +++++-- .../documentation/docs/controls/buttons/toggle-buttons.md | 7 +++++-- packages/documentation/docs/controls/card-list.md | 7 +++++-- packages/documentation/docs/controls/card.md | 7 +++++-- packages/documentation/docs/controls/category-filter.md | 7 +++++-- packages/documentation/docs/controls/chip.md | 7 +++++-- packages/documentation/docs/controls/content-header.md | 7 +++++-- packages/documentation/docs/controls/dropdown.md | 7 +++++-- packages/documentation/docs/controls/layout-grid.md | 7 +++++-- packages/documentation/docs/controls/panes.md | 7 +++++-- packages/documentation/docs/controls/pill.md | 7 +++++-- packages/documentation/docs/controls/select.mdx | 7 +++++-- packages/documentation/docs/controls/toast.md | 7 +++++-- packages/documentation/docs/guidelines/theme-switching.md | 7 +++++-- packages/documentation/docs/icon-library/icons.md | 7 +++++-- 30 files changed, 150 insertions(+), 61 deletions(-) diff --git a/packages/documentation/docs/controls/application-frame/about-and-legal.md b/packages/documentation/docs/controls/application-frame/about-and-legal.md index e43870bed5c..d41779230e3 100644 --- a/packages/documentation/docs/controls/application-frame/about-and-legal.md +++ b/packages/documentation/docs/controls/application-frame/about-and-legal.md @@ -2,11 +2,14 @@ sidebar_position: 4 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_about-and-legal_styleguide.md'; import DocsCode from './\_about-and-legal_code.md'; # About and legal overlay - + + + + diff --git a/packages/documentation/docs/controls/application-frame/application-header.md b/packages/documentation/docs/controls/application-frame/application-header.md index 9a9617d2762..d2997e82074 100644 --- a/packages/documentation/docs/controls/application-frame/application-header.md +++ b/packages/documentation/docs/controls/application-frame/application-header.md @@ -1,7 +1,7 @@ --- sidebar_position: 1 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_application-header_styleguide.md'; import DocsCode from './\_application-header_code.md'; @@ -12,4 +12,7 @@ import Tags from './../../auto-generated/ix-application-header/tags.md'; - + + + + diff --git a/packages/documentation/docs/controls/application-frame/application-menu.md b/packages/documentation/docs/controls/application-frame/application-menu.md index 0515a59d185..814aef22b1a 100644 --- a/packages/documentation/docs/controls/application-frame/application-menu.md +++ b/packages/documentation/docs/controls/application-frame/application-menu.md @@ -2,11 +2,14 @@ sidebar_position: 2 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_application-menu_styleguide.md'; import DocsCode from './\_application-menu_code.md'; # Menu - + + + + diff --git a/packages/documentation/docs/controls/application-frame/application.md b/packages/documentation/docs/controls/application-frame/application.md index 96ad6806cfd..8d4123abd19 100644 --- a/packages/documentation/docs/controls/application-frame/application.md +++ b/packages/documentation/docs/controls/application-frame/application.md @@ -2,7 +2,7 @@ sidebar_position: 0 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_application_styleguide.md'; import DocsCode from './\_application_code.md'; @@ -16,4 +16,7 @@ import Tags from './../../auto-generated/ix-application/tags.md';

- + + + + diff --git a/packages/documentation/docs/controls/application-frame/basic-navigation.md b/packages/documentation/docs/controls/application-frame/basic-navigation.md index 5021ea23675..de717dfa19c 100644 --- a/packages/documentation/docs/controls/application-frame/basic-navigation.md +++ b/packages/documentation/docs/controls/application-frame/basic-navigation.md @@ -2,7 +2,7 @@ sidebar_position: 10 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_basic-navigation_styleguide.md'; import DocsCode from './\_basic-navigation_code.md'; @@ -13,4 +13,7 @@ import Tags from './../../auto-generated/ix-basic-navigation/tags.md'; - + + + + diff --git a/packages/documentation/docs/controls/application-frame/content.md b/packages/documentation/docs/controls/application-frame/content.md index ee1776b30f4..446a6c48523 100644 --- a/packages/documentation/docs/controls/application-frame/content.md +++ b/packages/documentation/docs/controls/application-frame/content.md @@ -2,7 +2,7 @@ sidebar_position: 3 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_content_styleguide.md'; import DocsCode from './\_content_code.md'; @@ -16,5 +16,8 @@ import Tags from './../../auto-generated/ix-content/tags.md';

- + + + + diff --git a/packages/documentation/docs/controls/application-frame/map-navigation.md b/packages/documentation/docs/controls/application-frame/map-navigation.md index e487b16d25b..ffb0dee94da 100644 --- a/packages/documentation/docs/controls/application-frame/map-navigation.md +++ b/packages/documentation/docs/controls/application-frame/map-navigation.md @@ -2,16 +2,18 @@ sidebar_position: 11 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_map-navigation_styleguide.md'; import DocsCode from './\_map-navigation_code.md'; - import Tags from './../../auto-generated/ix-map-navigation/tags.md'; # Map Navigation - + + + + diff --git a/packages/documentation/docs/controls/application-frame/popover-news.md b/packages/documentation/docs/controls/application-frame/popover-news.md index 639925986bb..ab37af8df57 100644 --- a/packages/documentation/docs/controls/application-frame/popover-news.md +++ b/packages/documentation/docs/controls/application-frame/popover-news.md @@ -2,11 +2,14 @@ sidebar_position: 9 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_popover-news_styleguide.md'; import DocsCode from './\_popover-news_code.md'; # Popover news - + + + + diff --git a/packages/documentation/docs/controls/application-frame/settings.md b/packages/documentation/docs/controls/application-frame/settings.md index 4a9b7e2a3c2..534f378a416 100644 --- a/packages/documentation/docs/controls/application-frame/settings.md +++ b/packages/documentation/docs/controls/application-frame/settings.md @@ -2,11 +2,14 @@ sidebar_position: 4 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_settings_styleguide.md'; import DocsCode from './\_settings_code.md'; # Settings overlay - + + + + diff --git a/packages/documentation/docs/controls/blind.md b/packages/documentation/docs/controls/blind.md index 31e162b27fe..d2aa3f5943d 100644 --- a/packages/documentation/docs/controls/blind.md +++ b/packages/documentation/docs/controls/blind.md @@ -1,8 +1,11 @@ -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_blind_styleguide.md' import DocsCode from './\_blind_code.md' # Blind - + + + + diff --git a/packages/documentation/docs/controls/breadcrumb.md b/packages/documentation/docs/controls/breadcrumb.md index edee0b3d06f..609f33d068e 100644 --- a/packages/documentation/docs/controls/breadcrumb.md +++ b/packages/documentation/docs/controls/breadcrumb.md @@ -1,8 +1,11 @@ -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_breadcrumb_styleguide.md' import DocsCode from './\_breadcrumb_code.md' # Breadcrumb - + + + + diff --git a/packages/documentation/docs/controls/buttons/button.md b/packages/documentation/docs/controls/buttons/button.md index 6d07d19aa73..c5ed36cdd35 100644 --- a/packages/documentation/docs/controls/buttons/button.md +++ b/packages/documentation/docs/controls/buttons/button.md @@ -2,11 +2,14 @@ sidebar_position: 0 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_button_styleguide.md'; import DocsCode from './\_button_code.md'; # Button - + + + + diff --git a/packages/documentation/docs/controls/buttons/dropdown-button.md b/packages/documentation/docs/controls/buttons/dropdown-button.md index 826d7aff03e..1b8071be1e6 100644 --- a/packages/documentation/docs/controls/buttons/dropdown-button.md +++ b/packages/documentation/docs/controls/buttons/dropdown-button.md @@ -2,7 +2,7 @@ sidebar_position: 1 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_dropdown-button_styleguide.md'; import DocsCode from './\_dropdown-button_code.md'; @@ -16,4 +16,7 @@ import Tags from './../../auto-generated/ix-dropdown-button/tags.md'

- + + + + diff --git a/packages/documentation/docs/controls/buttons/icon-button.md b/packages/documentation/docs/controls/buttons/icon-button.md index 00d54d7f900..380b7b10ab7 100644 --- a/packages/documentation/docs/controls/buttons/icon-button.md +++ b/packages/documentation/docs/controls/buttons/icon-button.md @@ -2,7 +2,7 @@ sidebar_position: 2 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_icon-button_styleguide.md'; import DocsCode from './\_icon-button_code.md'; @@ -16,4 +16,7 @@ import Tags from './../../auto-generated/ix-icon-button/tags.md';

- + + + + diff --git a/packages/documentation/docs/controls/buttons/link-button.md b/packages/documentation/docs/controls/buttons/link-button.md index a60a141d37a..9622ca740fc 100644 --- a/packages/documentation/docs/controls/buttons/link-button.md +++ b/packages/documentation/docs/controls/buttons/link-button.md @@ -2,7 +2,7 @@ sidebar_position: 3 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_link-button_styleguide.md'; import DocsCode from './\_link-button_code.md'; @@ -16,4 +16,7 @@ import Tags from './../../auto-generated/ix-link-button/tags.md';

- + + + + diff --git a/packages/documentation/docs/controls/buttons/split-button.md b/packages/documentation/docs/controls/buttons/split-button.md index 2d88bf22515..0d3e06fdacf 100644 --- a/packages/documentation/docs/controls/buttons/split-button.md +++ b/packages/documentation/docs/controls/buttons/split-button.md @@ -2,11 +2,14 @@ sidebar_position: 4 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_split-button_styleguide.md'; import DocsCode from './\_split-button_code.md'; # Split button - + + + + diff --git a/packages/documentation/docs/controls/buttons/toggle-buttons.md b/packages/documentation/docs/controls/buttons/toggle-buttons.md index 8f54dccbfc6..2a7ca9fbb56 100644 --- a/packages/documentation/docs/controls/buttons/toggle-buttons.md +++ b/packages/documentation/docs/controls/buttons/toggle-buttons.md @@ -2,7 +2,7 @@ sidebar_position: 5 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_toggle-button_styleguide.md'; import DocsCode from './\_toggle-button_code.md'; @@ -15,4 +15,7 @@ import Tags from './../../auto-generated/ix-toggle-button/tags.md';

- + + + + diff --git a/packages/documentation/docs/controls/card-list.md b/packages/documentation/docs/controls/card-list.md index 768df731242..799f727950f 100644 --- a/packages/documentation/docs/controls/card-list.md +++ b/packages/documentation/docs/controls/card-list.md @@ -2,7 +2,7 @@ title: Card list --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_card-list_styleguide.md'; import DocsCode from './\_card-list_code.md'; @@ -16,4 +16,7 @@ import Tags from './../auto-generated/ix-card-list/tags.md';

- + + + + diff --git a/packages/documentation/docs/controls/card.md b/packages/documentation/docs/controls/card.md index d7d7b0b7350..5e1af7f4f11 100644 --- a/packages/documentation/docs/controls/card.md +++ b/packages/documentation/docs/controls/card.md @@ -1,11 +1,14 @@ --- title: Cards --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_card_styleguide.md'; import DocsCode from './\_card_code.md'; ## Card - + + + + diff --git a/packages/documentation/docs/controls/category-filter.md b/packages/documentation/docs/controls/category-filter.md index 2cfe9cb8305..f56f52cbc0f 100644 --- a/packages/documentation/docs/controls/category-filter.md +++ b/packages/documentation/docs/controls/category-filter.md @@ -1,8 +1,11 @@ -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_category-filter_styleguide.md' import DocsCode from './\_category-filter_code.md' # Category filter - + + + + diff --git a/packages/documentation/docs/controls/chip.md b/packages/documentation/docs/controls/chip.md index 65cffa542f7..b5e4bacd126 100644 --- a/packages/documentation/docs/controls/chip.md +++ b/packages/documentation/docs/controls/chip.md @@ -2,11 +2,14 @@ title: Chip --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_chip_styleguide.md' import DocsCode from './\_chip_code.md' # Chip - + + + + diff --git a/packages/documentation/docs/controls/content-header.md b/packages/documentation/docs/controls/content-header.md index 96ae0dd38a6..34007b232ca 100644 --- a/packages/documentation/docs/controls/content-header.md +++ b/packages/documentation/docs/controls/content-header.md @@ -1,8 +1,11 @@ -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_content-header_styleguide.md' import DocsCode from './\_content-header_code.md' # Content header - + + + + diff --git a/packages/documentation/docs/controls/dropdown.md b/packages/documentation/docs/controls/dropdown.md index 7a5d865cf78..ebf1fb810d7 100644 --- a/packages/documentation/docs/controls/dropdown.md +++ b/packages/documentation/docs/controls/dropdown.md @@ -2,11 +2,14 @@ title: Dropdown --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_dropdown_styleguide.md'; import DocsCode from './\_dropdown_code.md'; # Dropdown - + + + + diff --git a/packages/documentation/docs/controls/layout-grid.md b/packages/documentation/docs/controls/layout-grid.md index 6b48ea0effe..7a54e0b51be 100644 --- a/packages/documentation/docs/controls/layout-grid.md +++ b/packages/documentation/docs/controls/layout-grid.md @@ -2,7 +2,7 @@ title: Layout grid --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_layout-grid_styleguide.md'; import DocsCode from './\_layout-grid_code.md'; @@ -13,4 +13,7 @@ import Tags from './../auto-generated/ix-layout-grid/tags.md';

- + + + + diff --git a/packages/documentation/docs/controls/panes.md b/packages/documentation/docs/controls/panes.md index ffda11b9e8a..6a4c7607715 100644 --- a/packages/documentation/docs/controls/panes.md +++ b/packages/documentation/docs/controls/panes.md @@ -2,7 +2,7 @@ title: Panes --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_panes_styleguide.md'; import DocsCode from './\_panes_code.md'; @@ -14,4 +14,7 @@ import Tags from './../auto-generated/ix-pane/tags.md';

- + + + + diff --git a/packages/documentation/docs/controls/pill.md b/packages/documentation/docs/controls/pill.md index f0c5337fab9..31d3a1de7a0 100644 --- a/packages/documentation/docs/controls/pill.md +++ b/packages/documentation/docs/controls/pill.md @@ -1,8 +1,11 @@ -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_pill_styleguide.md' import DocsCode from './\_pill_code.md' # Pill - + + + + diff --git a/packages/documentation/docs/controls/select.mdx b/packages/documentation/docs/controls/select.mdx index 0d6b411e624..7d0a7811bc1 100644 --- a/packages/documentation/docs/controls/select.mdx +++ b/packages/documentation/docs/controls/select.mdx @@ -2,7 +2,7 @@ title: Select --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_select_styleguide.md'; import DocsCode from './\_select_code.mdx'; @@ -14,4 +14,7 @@ import Tags from './../auto-generated/ix-select/tags.md';

- + + + + diff --git a/packages/documentation/docs/controls/toast.md b/packages/documentation/docs/controls/toast.md index 62243a88b36..648ed6d138e 100644 --- a/packages/documentation/docs/controls/toast.md +++ b/packages/documentation/docs/controls/toast.md @@ -1,8 +1,11 @@ -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_toast_styleguide.md' import DocsCode from './\_toast_code.md' # Toast - + + + + diff --git a/packages/documentation/docs/guidelines/theme-switching.md b/packages/documentation/docs/guidelines/theme-switching.md index fa79f6f780f..311d54895c6 100644 --- a/packages/documentation/docs/guidelines/theme-switching.md +++ b/packages/documentation/docs/guidelines/theme-switching.md @@ -2,11 +2,14 @@ sidebar_position: 2 --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_theme-switching_styleguide.md'; import DocsCode from './\_theme-switching_code.md'; # Theme Switching - + + + + diff --git a/packages/documentation/docs/icon-library/icons.md b/packages/documentation/docs/icon-library/icons.md index bbfdead480b..af1e67911dd 100644 --- a/packages/documentation/docs/icon-library/icons.md +++ b/packages/documentation/docs/icon-library/icons.md @@ -2,11 +2,14 @@ title: Icons --- -import DocsTabs from '@site/src/components/DocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_icon_styleguide.md'; import DocsCode from './\_icon_code.md'; # Icons - + + + + From 0716632dcf8f4738e5fb77ab8c676b8d11efaf0d Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Mon, 11 Nov 2024 12:14:58 +0100 Subject: [PATCH 11/26] docs(tabs): remove unused deprecated DocsTabs component --- .../src/components/DocsTabs/DocsTabs.scss | 50 ------- .../src/components/DocsTabs/index.tsx | 125 ------------------ 2 files changed, 175 deletions(-) delete mode 100644 packages/documentation/src/components/DocsTabs/DocsTabs.scss delete mode 100644 packages/documentation/src/components/DocsTabs/index.tsx diff --git a/packages/documentation/src/components/DocsTabs/DocsTabs.scss b/packages/documentation/src/components/DocsTabs/DocsTabs.scss deleted file mode 100644 index dec6300c544..00000000000 --- a/packages/documentation/src/components/DocsTabs/DocsTabs.scss +++ /dev/null @@ -1,50 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2023 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. - */ -.Docs__Tabs { - display: flex; - position: relative; - - height: 44px; -} - -.Doc_Tab { - display: flex; - position: relative; - - justify-content: center; - align-items: center; - - height: 100%; - width: 100%; - - cursor: pointer; - background-color: var(--theme-color-component-1); - - font-weight: 700; - - > svg { - width: 24px; - height: 24px; - fill: var(--theme-color-std-text); - margin-right: 0.5rem; - } -} - -.Doc_Tab.active { - background-color: var(--theme-color-dynamic); - color: var(--theme-color-primary--contrast); - - > svg { - fill: var(--theme-color-primary--contrast); - } -} - -.Docs__Tabs__Content { - margin-top: 1rem; -} diff --git a/packages/documentation/src/components/DocsTabs/index.tsx b/packages/documentation/src/components/DocsTabs/index.tsx deleted file mode 100644 index 50d4e17e46a..00000000000 --- a/packages/documentation/src/components/DocsTabs/index.tsx +++ /dev/null @@ -1,125 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2023 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 BrowserOnly from '@docusaurus/BrowserOnly'; -import clsx from 'clsx'; -import React, { useState } from 'react'; -import './DocsTabs.scss'; - -export type DocsTabsProps = { - styleguide: any; - code: any; -}; - -const STORAGE_KEY = 'docusaurus.ix.general.tab'; - -type DocsTabSelection = 'styleguide' | 'code'; - -function isDocsTabSelection(value: string): value is DocsTabSelection { - return value === 'styleguide' || value === 'code'; -} - -function getCurrentDocsTabSelection(): DocsTabSelection { - const defaultSelection = window.localStorage.getItem(STORAGE_KEY); - if (!defaultSelection) { - return 'styleguide'; - } - - if (isDocsTabSelection(defaultSelection)) { - return defaultSelection; - } - - return 'styleguide'; -} - -function setCurrentDocsTabSelection(selection: DocsTabSelection) { - window.localStorage.setItem(STORAGE_KEY, selection); -} - -const DocsTabs = (props: DocsTabsProps) => { - const [tabSelection, setTabSelection] = useState( - getCurrentDocsTabSelection() - ); - - const onTabChange = (selection: DocsTabSelection) => { - setTabSelection(selection); - setCurrentDocsTabSelection(selection); - }; - - const Markdown = props[tabSelection]; - return ( - <> -
- onTabChange('styleguide')} - > - - - - - onTabChange('code')} - > - - - - -
-
- -
- - ); -}; - -export default (props) => { - return {() => }; -}; - -export function DocTab( - props: React.PropsWithChildren<{ - name: string; - active: boolean; - onClick: (event: React.MouseEvent) => void; - }> -) { - return ( -
- {props.children} - {props.name} -
- ); -} From 3ce13adcead1a094aa723967dc40e19b1fab9377 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Mon, 11 Nov 2024 13:19:30 +0100 Subject: [PATCH 12/26] docs(tabs): remove unused DocsTabs component imports from chart docs --- packages/documentation/docs/controls/charts/3d.md | 1 - packages/documentation/docs/controls/charts/bar-chart.md | 1 - packages/documentation/docs/controls/charts/gauge-chart.md | 1 - packages/documentation/docs/controls/charts/line-chart.md | 1 - packages/documentation/docs/controls/charts/pie-chart.md | 1 - packages/documentation/docs/controls/charts/special-chart.md | 1 - 6 files changed, 6 deletions(-) diff --git a/packages/documentation/docs/controls/charts/3d.md b/packages/documentation/docs/controls/charts/3d.md index 464694bb85f..e7da1598816 100644 --- a/packages/documentation/docs/controls/charts/3d.md +++ b/packages/documentation/docs/controls/charts/3d.md @@ -1,4 +1,3 @@ -import DocsTabs from '@site/src/components/DocsTabs'; import Playground from '@site/src/components/PlaygroundV3'; # 3D-Charting diff --git a/packages/documentation/docs/controls/charts/bar-chart.md b/packages/documentation/docs/controls/charts/bar-chart.md index 4c1f7148ba5..d24662d06ad 100644 --- a/packages/documentation/docs/controls/charts/bar-chart.md +++ b/packages/documentation/docs/controls/charts/bar-chart.md @@ -1,4 +1,3 @@ -import DocsTabs from '@site/src/components/DocsTabs'; import Playground from '@site/src/components/PlaygroundV3'; # Bar chart diff --git a/packages/documentation/docs/controls/charts/gauge-chart.md b/packages/documentation/docs/controls/charts/gauge-chart.md index c481141b5a5..ae5832fd9f7 100644 --- a/packages/documentation/docs/controls/charts/gauge-chart.md +++ b/packages/documentation/docs/controls/charts/gauge-chart.md @@ -1,4 +1,3 @@ -import DocsTabs from '@site/src/components/DocsTabs'; import Playground from '@site/src/components/PlaygroundV3'; # Gauge chart diff --git a/packages/documentation/docs/controls/charts/line-chart.md b/packages/documentation/docs/controls/charts/line-chart.md index ae54db4d75f..6190b708799 100644 --- a/packages/documentation/docs/controls/charts/line-chart.md +++ b/packages/documentation/docs/controls/charts/line-chart.md @@ -1,4 +1,3 @@ -import DocsTabs from '@site/src/components/DocsTabs'; import Playground from '@site/src/components/PlaygroundV3'; # Line chart diff --git a/packages/documentation/docs/controls/charts/pie-chart.md b/packages/documentation/docs/controls/charts/pie-chart.md index a452bc2499b..80177fd3108 100644 --- a/packages/documentation/docs/controls/charts/pie-chart.md +++ b/packages/documentation/docs/controls/charts/pie-chart.md @@ -1,4 +1,3 @@ -import DocsTabs from '@site/src/components/DocsTabs'; import Playground from '@site/src/components/PlaygroundV3'; # Pie chart diff --git a/packages/documentation/docs/controls/charts/special-chart.md b/packages/documentation/docs/controls/charts/special-chart.md index ac7a40857b5..aad0242907c 100644 --- a/packages/documentation/docs/controls/charts/special-chart.md +++ b/packages/documentation/docs/controls/charts/special-chart.md @@ -1,7 +1,6 @@ --- sidebar_position: 1 --- -import DocsTabs from '@site/src/components/DocsTabs'; import Playground from '@site/src/components/PlaygroundV3'; # Functionalities From 2af20fdb37876dfac0e4cb499f571b136d507fab Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Mon, 11 Nov 2024 13:20:00 +0100 Subject: [PATCH 13/26] docs(card): change title to singular --- packages/documentation/docs/controls/card.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/documentation/docs/controls/card.md b/packages/documentation/docs/controls/card.md index 5e1af7f4f11..e0b9b7eb81c 100644 --- a/packages/documentation/docs/controls/card.md +++ b/packages/documentation/docs/controls/card.md @@ -1,12 +1,9 @@ ---- -title: Cards ---- import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_card_styleguide.md'; import DocsCode from './\_card_code.md'; -## Card +# Card From c4e111f40042f247af55cdf274c978ed02ae0ae3 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Tue, 12 Nov 2024 12:36:47 +0100 Subject: [PATCH 14/26] docs(Tags): refactor form-ready tag to link to /docs/controls/forms-validation, styling --- packages/documentation/scripts/api-tasks.ts | 2 +- packages/documentation/src/css/api-table.scss | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/documentation/scripts/api-tasks.ts b/packages/documentation/scripts/api-tasks.ts index 5cc8a79a008..5403f71d631 100644 --- a/packages/documentation/scripts/api-tasks.ts +++ b/packages/documentation/scripts/api-tasks.ts @@ -18,7 +18,7 @@ import { escapeMarkdown } from './utils'; type DocsTag = { name: string; text: string }; function htmlFormReadyTag(value: string) { - return `Form-ready since ${value}`; + return `Form-ready since ${value}`; } function htmlSinceTag(value: string) { diff --git a/packages/documentation/src/css/api-table.scss b/packages/documentation/src/css/api-table.scss index a3a98a2bed9..ce8b34a71e4 100644 --- a/packages/documentation/src/css/api-table.scss +++ b/packages/documentation/src/css/api-table.scss @@ -37,6 +37,12 @@ font-weight: bold; } +a.Docs__Tag, +a.Docs__Tag:hover { + color: var(--theme-color-inv-std-text) !important; + text-decoration: none !important; +} + .Docs__Tag.Docs__Tag__Deprecated { background-color: var(--theme-color-alarm); } From 2c221f9e431f342249e8b7b5d01a67a856a4be2a Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Tue, 12 Nov 2024 16:20:54 +0100 Subject: [PATCH 15/26] docs(tabs): adapt headings of all docs with linkable tabs, styling --- .../docs/controls/_blind_code.md | 14 +- .../docs/controls/_blind_styleguide.md | 16 ++- .../docs/controls/_breadcrumb_code.md | 48 +++---- .../docs/controls/_breadcrumb_styleguide.md | 20 +-- .../docs/controls/_card-list_code.md | 18 +-- .../docs/controls/_card-list_styleguide.md | 22 ++- .../documentation/docs/controls/_card_code.md | 52 +++---- .../docs/controls/_card_styleguide.md | 25 ++-- .../docs/controls/_category-filter_code.md | 32 +++-- .../controls/_category-filter_styleguide.md | 27 ++-- .../documentation/docs/controls/_chip_code.md | 20 +-- .../docs/controls/_chip_styleguide.md | 28 ++-- .../docs/controls/_content-header_code.md | 26 ++-- .../controls/_content-header_styleguide.md | 28 ++-- .../docs/controls/_custom-field_code.mdx | 19 ++- .../controls/_custom-field_styleguide.mdx | 16 ++- .../docs/controls/_date-input_code.mdx | 20 +-- .../docs/controls/_date-input_styleguide.mdx | 16 ++- .../docs/controls/_dropdown_code.md | 38 +++--- .../docs/controls/_dropdown_styleguide.md | 35 +++-- .../docs/controls/_input_code.md | 33 +++-- .../docs/controls/_input_styleguide.md | 12 +- .../docs/controls/_layout-grid_code.md | 46 ++++--- .../docs/controls/_layout-grid_styleguide.md | 35 +++-- .../docs/controls/_number-input_code.mdx | 22 +-- .../controls/_number-input_styleguide.mdx | 17 ++- .../docs/controls/_panes_code.md | 40 +++--- .../docs/controls/_panes_styleguide.md | 12 +- .../documentation/docs/controls/_pill_code.md | 28 ++-- .../docs/controls/_pill_styleguide.md | 25 ++-- .../docs/controls/_radio_code.mdx | 18 +-- .../docs/controls/_radio_styleguide.mdx | 12 +- .../docs/controls/_select_code.mdx | 33 ++--- .../docs/controls/_select_styleguide.md | 32 +++-- .../docs/controls/_textarea-field_code.mdx | 20 +-- .../controls/_textarea-field_styleguide.mdx | 14 +- .../docs/controls/_toast_code.md | 21 +-- .../docs/controls/_toast_styleguide.md | 27 ++-- .../_about-and-legal_code.md | 32 +++-- .../_about-and-legal_styleguide.md | 8 +- .../_application-header_code.md | 27 ++-- .../_application-header_styleguide.md | 31 +++-- .../_application-menu_code.md | 78 +++++------ .../_application-menu_styleguide.md | 38 +++--- .../application-frame/_application_code.md | 46 ++++--- .../_application_styleguide.md | 16 ++- .../_basic-navigation_code.md | 38 +++--- .../_basic-navigation_styleguide.md | 25 ++-- .../application-frame/_content_code.md | 25 ++-- .../application-frame/_content_styleguide.md | 2 + .../application-frame/_map-navigation_code.md | 44 +++--- .../_map-navigation_styleguide.md | 8 +- .../application-frame/_popover-news_code.md | 22 +-- .../_popover-news_styleguide.md | 15 +- .../application-frame/_settings_code.md | 28 ++-- .../application-frame/_settings_styleguide.md | 9 +- .../docs/controls/buttons/_button_code.md | 128 +++++++++--------- .../controls/buttons/_button_styleguide.md | 32 +++-- .../controls/buttons/_dropdown-button_code.md | 30 ++-- .../buttons/_dropdown-button_styleguide.md | 17 ++- .../controls/buttons/_icon-button_code.md | 20 +-- .../buttons/_icon-button_styleguide.md | 13 +- .../controls/buttons/_link-button_code.md | 24 ++-- .../buttons/_link-button_styleguide.md | 20 ++- .../controls/buttons/_split-button_code.md | 36 ++--- .../buttons/_split-button_styleguide.md | 21 ++- .../controls/buttons/_toggle-button_code.md | 104 +++++++------- .../buttons/_toggle-button_styleguide.md | 18 ++- .../controls/forms/_forms-validation_code.mdx | 2 +- .../controls/forms/_forms-validation_style.md | 2 +- .../docs/guidelines/_theme-switching_code.md | 15 +- .../guidelines/_theme-switching_styleguide.md | 15 +- .../docs/icon-library/_icon_code.md | 21 +-- .../docs/icon-library/_icon_styleguide.md | 62 +++++---- 74 files changed, 1124 insertions(+), 915 deletions(-) diff --git a/packages/documentation/docs/controls/_blind_code.md b/packages/documentation/docs/controls/_blind_code.md index 94c1b5746c2..c87376f0225 100644 --- a/packages/documentation/docs/controls/_blind_code.md +++ b/packages/documentation/docs/controls/_blind_code.md @@ -6,7 +6,9 @@ import Events from './../auto-generated/ix-blind/events.md'; import Playground from '@site/src/components/PlaygroundV3' -## Examples +## Development + +### Examples -### Header actions +#### Header actions @@ -24,7 +26,7 @@ height="16rem" > -### Variants +#### Variants @@ -34,12 +36,12 @@ height="55rem" > -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_blind_styleguide.md b/packages/documentation/docs/controls/_blind_styleguide.md index 7cc7bb81bd8..f17dd207c3d 100644 --- a/packages/documentation/docs/controls/_blind_styleguide.md +++ b/packages/documentation/docs/controls/_blind_styleguide.md @@ -3,6 +3,8 @@ 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'; +## Guidelines + Blinds are UI controls that allow the users to hide or reveal content by clicking on a control element. Blinds can display a large amount of content in a compact space or present information in an organized and hierarchical way. Blinds reduce the user's cognitive load by removing clutter and less important information from an interface. We typically don't use blinds if the content is central to the user's task due to its reduced visibility and accessibility. Blinds consist of a header section on the top and a content section below. The header section contains a chevron on the left followed by the blind's label. Within the content section, content can be placed freely. @@ -12,13 +14,13 @@ Blinds consist of a header section on the top and a content section below. The h 1. Header section 2. Content section -## Types +### Types Multiple blinds can be placed below each other to create an accordion. The recommended distance between the blinds is `0.5rem`. Typically, only one blind can be opened within an accordion but users can be allowed to open multiple blinds at a time. ![Accordion](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2-655&mode=design&t=9faEnH99BaAxqCGM-1) -## Variants +### Variants Multiple blind variants are available: @@ -29,23 +31,23 @@ Multiple blind variants are available: ![Blind variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=929-47485&mode=design&t=9faEnH99BaAxqCGM-1) -## Options +### Options - **Icon**: Blinds can, but don't have to, include an icon in the header section. The icon is positioned before the blind label. - **Sublabel**: A secondary label can be placed within the header section. The sublabel gives additional information about the blind's content. - **Header action**: The header section can contain an action area. We typically use the action area to include one or two buttons for actions directly related to the blind, e.g. to delete the blind or to navigate to additional content. -## Behavior in context +### Behavior in context The user expands and collapses the blind by pressing anywhere in the header section. When the blind is expanded, content below the blind is moved downwards. -## States +### States For all blind variants, a default, hover, active and focused state is available. ![Blind states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2-352&mode=design&t=9faEnH99BaAxqCGM-1) -## Dos and Don'ts +### Dos and Don'ts - Do stay within the recommended number of blinds - between 3 and 7 - Don't use multi-line text in the header. The header section has a fixed height for single-line text entries @@ -53,7 +55,7 @@ For all blind variants, a default, hover, active and focused state is available. - Don't use a blind if there is only a single category to be displayed - Don't use blinds to display hierarchically structured files or objects - rather use a tree for such cases -## Related patterns: +### Related patterns: - [Tabs](tabs.md) - [Tree](tree.md) diff --git a/packages/documentation/docs/controls/_breadcrumb_code.md b/packages/documentation/docs/controls/_breadcrumb_code.md index 1d99d69b45c..d08601b918e 100644 --- a/packages/documentation/docs/controls/_breadcrumb_code.md +++ b/packages/documentation/docs/controls/_breadcrumb_code.md @@ -6,48 +6,50 @@ import ItemEvents from './../auto-generated/ix-breadcrumb-item/events.md'; import Playground from '@site/src/components/PlaygroundV3' -## Examples +## Development + +### Examples - +name="breadcrumb" +height="8rem" + +> -### Truncate +#### Truncate - +name="breadcrumb-truncate" +height="10rem" +hideInitalCodePreview + +> -### Lazy loaded next items +#### Lazy loaded next items - +name="breadcrumb-next-items" +height="8rem" +hideInitalCodePreview -## API (ix-breadcrumb) +> -### Properties +### API (ix-breadcrumb) + +#### Properties -### Events +#### Events -## API (ix-breadcrumb-item) +### API (ix-breadcrumb-item) -### Properties +#### Properties -#### Events +##### Events diff --git a/packages/documentation/docs/controls/_breadcrumb_styleguide.md b/packages/documentation/docs/controls/_breadcrumb_styleguide.md index cf8831d3fef..f4c32f0d05b 100644 --- a/packages/documentation/docs/controls/_breadcrumb_styleguide.md +++ b/packages/documentation/docs/controls/_breadcrumb_styleguide.md @@ -1,45 +1,49 @@ +## Guidelines + Breadcrumb navigation is a UI control that allows users to track their location within an application and easily navigate to previous or child pages. Breadcrumbs make the structure of applications transparent to users. We typically use breadcrumbs in applications that have a deep hierarchy of pages or content. This helps users understand where they are within applications, and makes it easier to navigate to pages further along the navigation tree. As a general rule, we use breadcrumbs for information architecture with more than two levels, but not as a replacement for an application's main navigation. If the information structure is extremely complex, we often consider using a tree instead of a breadcrumb. Breadcrumb items are interactive. Users navigate to their respective location by pressing the item. Each item contains a breadcrumb label. All items in the breadcrumb path are always followed by a chevron icon except for the last item. ![Breadcrumb overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=20-8463&mode=design&t=JS1Aklcq48swr0Im-1) + 1. Breadcrumb item 2. Separator 3. Dropdown -## Variants +### Variants Breadcrumbs are available as a ghost and solid variant. Both variants differ in font and fill color but interact in the same pattern. We typically use the ghost variant to create a lower visual emphasis for users. ![Breadcrumb variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=20-352&mode=design&t=JS1Aklcq48swr0Im-1) -## Options +### Options + - **Icon**: Breadcrumb items can, but don't have to, include an icon. The icon is positioned before the breadcrumb label. Icons can be included for each item or only for specific items (e.g. the root item). -- **Show child items on last item**: By default, the last item of the breadcrumb doesn't offer any user interaction. An interactive item variant is available which allows the user to browse to child pages of the current page. Pressing the item triggers a dropdown listing all child elements. +- **Show child items on last item**: By default, the last item of the breadcrumb doesn't offer any user interaction. An interactive item variant is available which allows the user to browse to child pages of the current page. Pressing the item triggers a dropdown listing all child elements. - **Visible item count**: By default, breadcrumbs display a limited number of items. This number can be adjusted. -## Behavior in context +### Behavior in context - **Population**: As a general rule, we populate breadcrumbs location-based to reflect the hierarchy of the application and the location of the user within it. We always include the current location in the breadcrumb. - **Overflow**: If the number of items exceeds the defined limit, items are hidden within a dropdown menu at the beginning of the path. The dropdown menu is triggered by pressing the respective item. The truncation is visualized with an ellipsis. The overflow behavior can also be triggered if the available space does not allow the complete display of the breadcrumb in one line. - **Text truncation**: Truncation is applied to individual breadcrumb items if the maximum width of the breadcrumb item is exceeded. The label name is truncated with an ellipsis. - **Placement**: We typically place breadcrumbs at the top left side of the page/content area, below the header and above the page title. -## States +### States Interactive items can take one of four states: Default, hover, active and focused. Non-interactive items are always in default state. ![States of breadcrumb items](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=120-7463&mode=design&t=JS1Aklcq48swr0Im-1) -## Dos and Don'ts +### Dos and Don'ts -- Do label each item, i.e. use more than icons +- Do label each item, i.e. use more than icons - Do use single-line text entries as breadcrumb items have a fixed height - Don't use breadcrumbs to display a multistep process (use the [workflow](workflow.md) control instead) - Don't show multiple breadcrumbs on one screen, e.g. in a content area and in a drawer -## Related patterns: +### Related patterns: - [Dropdown](dropdown.md) - [Basic navigation](application-frame/basic-navigation.md) diff --git a/packages/documentation/docs/controls/_card-list_code.md b/packages/documentation/docs/controls/_card-list_code.md index 1416fa7fd01..220c4059098 100644 --- a/packages/documentation/docs/controls/_card-list_code.md +++ b/packages/documentation/docs/controls/_card-list_code.md @@ -4,20 +4,22 @@ import Events from './../auto-generated/ix-card-list/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development + +### Examples - +height="55rem" +name="card-list" + +> -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_card-list_styleguide.md b/packages/documentation/docs/controls/_card-list_styleguide.md index 5c6a780e13f..c96516212db 100644 --- a/packages/documentation/docs/controls/_card-list_styleguide.md +++ b/packages/documentation/docs/controls/_card-list_styleguide.md @@ -1,3 +1,5 @@ +## Guidelines + Card lists are UI controls that display a large number of cards or items of the same type in a lightweight, grouped manner. Users can hide and reveal the card list content by clicking on a control element. We typically use card lists on dashboards to show a huge amount of information in an organized and hierarchical way. Card lists consist of a header section at the top and a content section below. The header section includes an icon button with a chevron on the left, followed by the card list's label. In the content section, items of the same type can be arranged in two different layout styles: stack and scroll. @@ -7,8 +9,10 @@ Card lists consist of a header section at the top and a content section below. T 1. Header section 2. Content section 3. "Show all" button -3. "Show more" card +4. "Show more" card + ## Types + The stack card list style displays content items from left to right next to each other and wraps them into a new line when space runs out. This means the height of the section can dynamically change. ![Card list - stack style](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=910-8581&mode=design&t=2pf1CqY5ifYKN3F2-1) @@ -17,7 +21,8 @@ The scroll card list style displays the content items from left to right next to ![Card list - scroll style](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=915-8647&mode=design&t=2pf1CqY5ifYKN3F2-1) -## Options +### Options + - **Label**: Card lists can include a label in the header section. The label is positioned right next to the chevron. - **Collapse**: By default, the card list is expanded, but this can be customized to suit your specific needs. - **Max visible cards**: By default, the card list displays a maximum of 12 items. If more items are available, a "Show more" card is displayed. @@ -26,16 +31,19 @@ The scroll card list style displays the content items from left to right next to - **Show all count**: This represents the total number of card list items. This value is displayed on the "Show all" button. - **String - More cards**: By default, the card used to indicate when there are more items available is labeled "There are more cards available". -## Behavior in context +### Behavior in context + - **Interaction**: Users expand and collapse card list content by clicking on the icon button with the chevron in the header section. When the card list is expanded, content below the card list is pushed downwards. -- **"Show all" button**: Sometimes card lists only need to show the most important or most recent items. Clicking on the "Show all" button in the header section shows all items. Typically, these items are displayed on a new page. -- **"Show more" card**: The number of visible items inside a list can be limited to reduce the user's cognitive load. The "Show more" card indicates that more information is available. Selecting the card either displays the next chunk of items or shows all items on a new page, similar to the "Show all" button pattern. +- **"Show all" button**: Sometimes card lists only need to show the most important or most recent items. Clicking on the "Show all" button in the header section shows all items. Typically, these items are displayed on a new page. +- **"Show more" card**: The number of visible items inside a list can be limited to reduce the user's cognitive load. The "Show more" card indicates that more information is available. Selecting the card either displays the next chunk of items or shows all items on a new page, similar to the "Show all" button pattern. + +### Dos and Don'ts -## Dos and Don'ts - Do keep cards and items within card lists the same size - Don't place different types of components within card lists - Don't nest card lists within each other -## Related patterns: +### Related patterns: + - [Blind](blind.md) - [Card](card.md) diff --git a/packages/documentation/docs/controls/_card_code.md b/packages/documentation/docs/controls/_card_code.md index 74c8fa71265..b26f4016a9b 100644 --- a/packages/documentation/docs/controls/_card_code.md +++ b/packages/documentation/docs/controls/_card_code.md @@ -12,62 +12,64 @@ 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 +## Development + +### Examples - +height="17rem" +name="card" + +> + +#### Action Card -### Action Card - +height="13rem" +name="action-card" -## Push Card +> + +### Push Card - +height="20rem" +name="push-card" + +> -## API (ix-card) +### API (ix-card) -### Properties +#### Properties -### Events +#### Events -## API (ix-action-card) +### API (ix-action-card) -### Properties +#### Properties -### Events +#### Events -## API (ix-push-card) +### API (ix-push-card) -### Properties +#### Properties -### Events +#### Events - diff --git a/packages/documentation/docs/controls/_card_styleguide.md b/packages/documentation/docs/controls/_card_styleguide.md index 94cea672465..b3b3fcc4806 100644 --- a/packages/documentation/docs/controls/_card_styleguide.md +++ b/packages/documentation/docs/controls/_card_styleguide.md @@ -1,8 +1,11 @@ -Cards are UI controls used to neatly organize and group related information about a specific subject. They make it easy for users to quickly scan small chunks of information. We typically use cards to create dashboards or modular, flexible designs that adapt seamlessly to various screen sizes. Additionally, cards can be used to draw attention to important content and serve as an entry point to deeper levels of navigation or detailed views. +## Guidelines + +Cards are UI controls used to neatly organize and group related information about a specific subject. They make it easy for users to quickly scan small chunks of information. We typically use cards to create dashboards or modular, flexible designs that adapt seamlessly to various screen sizes. Additionally, cards can be used to draw attention to important content and serve as an entry point to deeper levels of navigation or detailed views. Cards are interactive elements. The entire container is clickable and triggers a single action. ![Card overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4956&mode=design&t=RDimbEsIHFIXIByo-1) + 1. Icon 2. Notification 3. Heading @@ -11,7 +14,7 @@ Cards are interactive elements. The entire container is clickable and triggers a 6. Container 7. Expanding content -## Card types +### Card types We currently offer two types of cards: **action** and **push**. @@ -21,41 +24,45 @@ Push cards contain a notification value in addition to the icon, heading, and su ![Card types](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4953&mode=design&t=RDimbEsIHFIXIByo-1) -## Customization +### Customization + We also offer a card container component that enables designers to display various types of content, such as images, charts or key data. Some small rules apply: Background images can stretch over the complete size of the container, whereas the card content must maintain a default padding of at least `1rem`. ![Card examples](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1329-26613&mode=design&t=sOZRNgWt7R52iLSF-1) -## Variants +### Variants + Cards are available in nine variants: Insight (outline style), notification (filled style), alarm, critical, warning, success, info, neutral and primary. Each variant emphasizes different aspects to guide the user's attention. These variants differ visually through the presence of an outline and a distinct container fill color, but they all follow the same interaction pattern. We typically use the insight variant as the default choice as we find this creates a more balanced and subtle appearance for users. ![Card variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4969&mode=design&t=RDimbEsIHFIXIByo-1) -## Options +### Options - **Icon**: Cards can, but don't have to, include an icon. The icon is positioned in the top-left corner of the container. - **Notification**: By default, push cards display a notification value at the top of the container. This value is logically related to the items displayed in the expanding content area. - **Heading**: Cards can, but don't have to, include a heading. The heading is aligned to the top-left corner of the container. - **Subheading**: Cards can, but don't have to, include a subheading. The subheading is aligned to the top-left corner of the container and positioned below the heading. -## Behavior in context +### Behavior in context - **Interaction**: As a general rule, the entire card container is interactive and clickable. If the card also contains interactive elements, the corresponding actions are triggered. - **Size**: By default, cards have a fixed width and height. However, content overflow is not managed automatically, so the card size must be manually adjusted. - **Placement**: We typically group cards and position them at the top-left corner of the page or content area. Within the group, cards can be organized into lists or grids using the [card list](card-list.md) component. -## States +### States + Cards can take one of three states: Default, hover and active. Action cards also offer a selected state. ![Card states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=858-4979&mode=design&t=RDimbEsIHFIXIByo-1) -## Dos and Don'ts +### Dos and Don'ts + - Do group cards in lists or grids (use the [card list](card-list.md) control) - Do keep multiple cards equal in size - Don't nest cards inside each other - Don't use cards to collect user input -## Related patterns: +### Related patterns: - [Card list](card-list.md) - [Flip](flip.md) diff --git a/packages/documentation/docs/controls/_category-filter_code.md b/packages/documentation/docs/controls/_category-filter_code.md index 117f1fa7605..82c72a92230 100644 --- a/packages/documentation/docs/controls/_category-filter_code.md +++ b/packages/documentation/docs/controls/_category-filter_code.md @@ -6,31 +6,33 @@ import Events from './../auto-generated/ix-category-filter/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development -### Basic +### Examples + +#### Basic - +name="category-filter" +height="12rem" + +> -### Without categories +#### Without categories - +name="category-filter-suggestions" +hideInitalCodePreview +height="12rem" + +> -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_category-filter_styleguide.md b/packages/documentation/docs/controls/_category-filter_styleguide.md index 5ac32912c18..7d62f0405cb 100644 --- a/packages/documentation/docs/controls/_category-filter_styleguide.md +++ b/packages/documentation/docs/controls/_category-filter_styleguide.md @@ -1,12 +1,15 @@ +## Guidelines + The category filter component enhances data navigation and user experience. We typically use a category filter to efficiently navigate large data sets, allowing users to quickly narrow their search by selecting predefined categories. It’s particularly useful in scenarios with complex data. The filter also enhances user experience by providing autocomplete suggestions and customizable filter conditions. ![Category filter overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1799-38402&mode=design&t=hgAA8GogE70JbHHy-1) -1. Container -2. Search icon -3. Input chip -4. Clear button -## Options +1. Container +2. Search icon +3. Input chip +4. Clear button + +### Options - **Categories**: Select these predefined groups to narrow down searches or browsing. The categories are customizable and should be defined based on the specific needs of your application or website. - **Suggestions**: These are potential search terms that appear as users begin to type in the input field. The aim is to assist users by predicting their intended search or category, thereby speeding up the input process and reducing potential errors. @@ -17,7 +20,7 @@ The category filter component enhances data navigation and user experience. We t - **Plain text**: Provides the possibility to do a plain text search without choosing a specific category. - **Static operator**: Use to restrict the filter condition to either equal (=) or not equal (!=). This is useful when it doesn't make sense, or is not applicable, to let the user decide between equal and not equal. By default, the filter condition is without restriction. -## Behavior +### Behavior - **Default**: The category filter is designed to adapt to the user’s needs and the context it’s used in. As soon as the user starts typing, the filter begins to apply, narrowing down the available options based on user input. This provides a dynamic and responsive user experience. - **Filter conditions**: These are the operators that determine how the filter matches the user’s input against the available categories. Available are equals (=) and not equals (!=). These conditions provide flexibility and precision in filtering, allowing users to find exactly what they’re looking for. @@ -27,18 +30,18 @@ The category filter component enhances data navigation and user experience. We t - **Without category selection**: Use without category selection if user input alone is sufficient to filter the data, such as when the data is not well-organized into distinct categories, or if the categories are too numerous/complex. - **Visual feedback**: When a category is selected, it’s highlighted and a chip is added to the input field. If a user chooses to delete a category, the chip is removed and the data is unfiltered, allowing for further filtering. -## States +### States Category filter has six states: Default, hover, active, disabled, read-only and focused. ![Category filter states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1799-38415&mode=design&t=1vxCdaFjmBNHp8Sk-4) -- **Read-only**: By setting the category filter to read-only, accidental data modifications or deletions can be prevented. This can be particularly useful when dealing with critical or sensitive information that should not be altered without proper authorization. -- **Disabled**: This state is typically applied when the element is not applicable to the current context or when certain conditions must be met before the category filter can be enabled. +- **Read-only**: By setting the category filter to read-only, accidental data modifications or deletions can be prevented. This can be particularly useful when dealing with critical or sensitive information that should not be altered without proper authorization. +- **Disabled**: This state is typically applied when the element is not applicable to the current context or when certain conditions must be met before the category filter can be enabled. -## Dos and Don’ts +### Dos and Don’ts -- Do use if you have a large amount of content or products organized into different categories +- Do use if you have a large amount of content or products organized into different categories - Do use when catering to a diverse user base with different interests or needs - Do use if your content or products are organized into distinct categories or topics - Do use to make it easier for users to refine their search queries and receive more targeted results @@ -47,7 +50,7 @@ Category filter has six states: Default, hover, active, disabled, read-only and - Don’t use if it slows down the user experience - Don’t use if your users are not familiar with the category names -## Related patterns +### Related patterns - [Expanding search](expanding-search.md) - [Input](input.mdx) diff --git a/packages/documentation/docs/controls/_chip_code.md b/packages/documentation/docs/controls/_chip_code.md index 6a2a44fe054..49c033bd22a 100644 --- a/packages/documentation/docs/controls/_chip_code.md +++ b/packages/documentation/docs/controls/_chip_code.md @@ -3,22 +3,24 @@ import Events from './../auto-generated/ix-chip/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development -### Basic +### Examples + +#### Basic - +name="chip" +height="25rem" + +> -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_chip_styleguide.md b/packages/documentation/docs/controls/_chip_styleguide.md index 5a7a4c4536d..ced52a0ff86 100644 --- a/packages/documentation/docs/controls/_chip_styleguide.md +++ b/packages/documentation/docs/controls/_chip_styleguide.md @@ -1,26 +1,28 @@ +## Guidelines + Chips are components used to display small pieces of information in a compact and visually appealing way. Typically chips contain a concise label and sometimes an icon, and they are clickable and closable. ![Chip overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1149-41643&mode=design&t=ruQOzpPQJMKwnk8f-1) - -1. Container -2. Label text + +1. Container +2. Label text 3. Icon 4. Close button +### Variants -## Variants With our chip variants, you can apply different colors based on their purpose, importance or context. We use chip variants to show class, status and levels of importance. The custom variant is often used for chips that visualize a high number of different categories, but does not permit color specification for hover and active states. -Chip variants: +Chip variants: - **Primary**: For high visual emphasis - **State-related variants**: Alarm, critical, warning, success, info and neutral -- **Custom**: For a customized background and label color +- **Custom**: For a customized background and label color ![Chip variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1201-9512&mode=design&t=ruQOzpPQJMKwnk8f-1) +### Options -## Options - **Active**: Specifies chip interactivity. When set to false, user input such as mouse-over and keyboard navigation are disabled and the close button is not visible. - **Background**: Use to set a custom background color when you require more flexibility in styling the chip. Only available for the custom chip variant. - **Outline**: Use for lower visual emphasis. @@ -29,7 +31,7 @@ Chip variants: - **Color**: Customize font and icon color for chip. This allows users to specify a unique font color in combination with a custom background color (only applicable when the variant is set to 'custom'). - **Width**: Typically content length determines chip width with a minimum width of '2rem'. Chip width can be set to a specific value. -## Behavior +### Behavior - **Reactive**: Chips react or change their appearance or behavior based on user actions. For example, updates occur as a response to system actions, providing real-time information about system changes or events. - **Multi-selection**: Chips can visualize multi-selection and filter actions. This helps users to easily identify and understand their choices. @@ -37,23 +39,21 @@ Chip variants: - **Dismiss**: When users select close, chips are dismissed from the list or interface and are removed visually. - **Text truncation**: When a width is set for chips, long labels are truncated to fit the available space. - -## States +### States Chips take a default, hover, focused or active state with a varying background color. For the custom chip variant, the specified colors for font and background are applied to all states. ![Chip states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1246-6190&mode=design&t=GHOok90R6TcaUrYi-1) -## Dos and Don'ts +### Dos and Don'ts -- Do use chips to tag and categorize so users can easily organize and filter content +- Do use chips to tag and categorize so users can easily organize and filter content - Do ensure proper color contrast between chip background and text/icon with the custom variant to support readability - Do consider chip spacing for easy tapping or selecting with mobiles and desktops - Don't overuse chips as this leads to cluttered and overwhelming interfaces - Don't use different styles for chips with the same or similar use - Don't use chips without any interaction (we recommend pills instead) - -## Related patterns +### Related patterns - [Pill](./pill.md) diff --git a/packages/documentation/docs/controls/_content-header_code.md b/packages/documentation/docs/controls/_content-header_code.md index af17f23553b..68efb2cac94 100644 --- a/packages/documentation/docs/controls/_content-header_code.md +++ b/packages/documentation/docs/controls/_content-header_code.md @@ -3,28 +3,30 @@ import Events from './../auto-generated/ix-content-header/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development -### Basic +### Examples + +#### Basic - +name="content-header" + +> -### No back button +#### No back button - +name="content-header-no-back" + +> -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_content-header_styleguide.md b/packages/documentation/docs/controls/_content-header_styleguide.md index 558051240ba..428265d6757 100644 --- a/packages/documentation/docs/controls/_content-header_styleguide.md +++ b/packages/documentation/docs/controls/_content-header_styleguide.md @@ -1,39 +1,45 @@ +## Guidelines + The content header provides a brief overview of the content on a page. It helps our users understand what the page is about. We typically use it at the very top of the page to show a clear hierarchy of the page. ![Content header overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2250-4784&mode=design&t=XmCepM9jPR9PImPw-4) - -1. Back button + +1. Back button 2. Content title 3. Content subtitle 4. Action buttons -## Variants +### Variants + Our content header variants makes it easier to achieve a well-balanced visual hierarchy throughout the page. -* Primary: In our applications, we most often use the primary variant for main pages or primary sections. -* Secondary: We typically use this variant when we want to provide context or actions for a specific section of a page, such as when displaying detailed information related to a selected item from a list. +- Primary: In our applications, we most often use the primary variant for main pages or primary sections. +- Secondary: We typically use this variant when we want to provide context or actions for a specific section of a page, such as when displaying detailed information related to a selected item from a list. ![Content header variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2250-9102&mode=design&t=XmCepM9jPR9PImPw-4) -## Options +### Options + - **Back button**: Enable if you want to provide a way for the user to navigate back. - **Header title**: Set your page title here. Use a clear, short and descriptive wording. - **Header subtitle**: Provide additional info for your content such as a descriptive sentence when required. - **Action buttons**: Offer convenient shortcuts for actions that the user might need to perform frequently, for example "Add" or "Edit". -## Behavior +### Behavior + - **Interaction**: The back button navigates usually one step back or behaves the same as the browser back. Action buttons typically navigate to another view. - **Alignment**: Place the content header at the very top left corner related to the content position. Back button, title and subtitle are automatically aligned on the left side while the action buttons are aligned on the right side. - **Cluster action buttons**: Action buttons are automatically aligned to the right. An example for the primary content header has the back button, title and subtitle at the left top corner of the whole page, and the action buttons at the right top corner of the page. -## Dos and Don'ts +### Dos and Don'ts + - Do use to provide quick access to common tasks for the whole content area - Don't use a secondary content header as a page title - Don't use more than one primary headline in one page -## Related patterns +### Related patterns - [Application header](./application-frame/application-header.md) -- [Content](./application-frame/content.md) -- [Button](./buttons/button.md) +- [Content](./application-frame/content.md) +- [Button](./buttons/button.md) diff --git a/packages/documentation/docs/controls/_custom-field_code.mdx b/packages/documentation/docs/controls/_custom-field_code.mdx index 71bec9b1b65..4551b033499 100644 --- a/packages/documentation/docs/controls/_custom-field_code.mdx +++ b/packages/documentation/docs/controls/_custom-field_code.mdx @@ -3,6 +3,8 @@ import Props from '@site/docs/auto-generated/ix-custom-field/props.md'; import Events from '@site/docs/auto-generated/ix-custom-field/events.md'; import Tags from '@site/docs/auto-generated/ix-custom-field/tags.md'; +## Development + With the help of `ix-custom-field` you are able to create form fields that can host any component / markup, while still having access to all validation states as well as ascociated explanatory texts like `helper-text`, `valid-text`, `info-text`, `warning-text` or `invalid-text`. The component will check if any of its children has one of these classes set: `ix-valid, ix-info, ix-warning or ix-invalid` @@ -10,14 +12,11 @@ If this is the case the custom field will display the corresponding text. Custom fields can be used to migrate from the existing input validation (native inputs) to the new validation / froms concept. -### Basic +#### Basic - + -### Validation +#### Validation -## API +### API -### Properties +#### Properties -### Events +#### Events - + diff --git a/packages/documentation/docs/controls/_custom-field_styleguide.mdx b/packages/documentation/docs/controls/_custom-field_styleguide.mdx index f3f92697110..32e8c9e9fc6 100644 --- a/packages/documentation/docs/controls/_custom-field_styleguide.mdx +++ b/packages/documentation/docs/controls/_custom-field_styleguide.mdx @@ -1,3 +1,5 @@ +## Guidelines + The custom field is a wrapper component that can host any forms component. Its properties allows you to control the validation state of the field and the helper text. The custom field is a versatile tool to create your own form fields, that can be used in combination with the 'Form' components to create complex forms. ![Custom field](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3303-3291&t=SikqVQr6LWjMEjKI-4) @@ -6,7 +8,8 @@ The custom field is a wrapper component that can host any forms component. Its p 2. Helper or feedback text 3. Form component(s) 4. Mandatory indicator -## Options + +### Options - **Label:** See [form field](forms/forms-field.md). - **Group label:** Add a label to the group of radio buttons to provide context to your users. We typically use short and descriptive labels to summarize the options in the group. @@ -16,20 +19,23 @@ The custom field is a wrapper component that can host any forms component. Its p ![Custom field example](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3483-7223&t=DlxXBQ9vTnyDcIUI-4) -## Behavior in context +### Behavior in context - **Validation:** See [validation](forms/forms-validation.mdx). - **Form behavior:** See [behavior](forms/forms-behavior.md). -## States + +### States The states depend on the component that you use in the custom field. The custom field itself does not have any interaction states. -## Dos and Don’ts + +### Dos and Don’ts - Do use the custom field when your desired solution is not covered by the already existing form field components - Do use the custom field in combination with the form component to create complex forms - Don't use the custom field for simple form fields, use the form field component instead - Don't use the custom field without a form component, it is a wrapper component that is meant to be used in combination with the form component -## Related patterns + +### Related patterns - [Form field](forms/forms-field.md) - [Validation](forms/forms-validation.mdx) diff --git a/packages/documentation/docs/controls/_date-input_code.mdx b/packages/documentation/docs/controls/_date-input_code.mdx index 3a4e986a80e..e8cd3223e71 100644 --- a/packages/documentation/docs/controls/_date-input_code.mdx +++ b/packages/documentation/docs/controls/_date-input_code.mdx @@ -2,25 +2,27 @@ import Playground from '@site/src/components/PlaygroundV2'; import Props from '@site/docs/auto-generated/ix-date-input/props.md'; import Events from '@site/docs/auto-generated/ix-date-input/events.md'; -## Examples +## Development -### Basic +### Examples + +#### Basic -### Disabled +#### Disabled -### Label +#### Label -### Readonly +#### Readonly -### Validation +#### Validation -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_date-input_styleguide.mdx b/packages/documentation/docs/controls/_date-input_styleguide.mdx index 25041a821e7..3c537b2e57f 100644 --- a/packages/documentation/docs/controls/_date-input_styleguide.mdx +++ b/packages/documentation/docs/controls/_date-input_styleguide.mdx @@ -1,6 +1,9 @@ +## Guidelines + The date input component enables users to enter and select a date in a standardized format. We typically use this component in forms, filters and scheduling tools to ensure consistent and accurate date entries. ![Date input overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3629-6200&t=ADQCetGKOEH1WG2r-4) + 1. Label 2. Required field indicator 3. Current value @@ -9,11 +12,11 @@ The date input component enables users to enter and select a date in a standardi 6. Date dropdown 7. Month and year selection 8. Weekdays -9. Week numbers  +9. Week numbers 10. Indicator for current day 11. Indicator for selected day -## Options +### Options - **Label**: See [form field](./forms/forms-field.md). - **Required**: See [form field](./forms/forms-field.md). @@ -24,7 +27,7 @@ The date input component enables users to enter and select a date in a standardi - **Error message**: Feedback text when date is not parsable. We typically use this to inform users that the entered date format is incorrect and guide them to enter a valid date. - **Format**: Specify the date format, default ‘yyyy/LL/dd’ to ensure that dates are entered in a consistent and recognizable format. -## Behavior in context +### Behavior in context - **Interaction**: - Click or focus opens the date picker. @@ -39,14 +42,13 @@ The date input component enables users to enter and select a date in a standardi - **Overflow**: The input field should be wide enough to display the full date without truncation. - **Alignment**: Date inputs are always aligned to the left. -## States +### States Date input has five states: Default, hover, disabled, read-only and focused. ![Date input states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3989-2545&t=ADQCetGKOEH1WG2r-4) - -## Dos and Don’ts +### Dos and Don’ts - Do use consistent date formats throughout the application to avoid confusion - Do use separate inputs for start and end dates to simplify date ranges @@ -55,7 +57,7 @@ Date input has five states: Default, hover, disabled, read-only and focused. - Don't use ambiguous formats like 09/08/2006 without giving clear context - Don't allow free text without validation or formatting guidance -## Related patterns +### Related patterns - [Date dropdown](./date-dropdown.md) - [Date picker](./date-picker.md) diff --git a/packages/documentation/docs/controls/_dropdown_code.md b/packages/documentation/docs/controls/_dropdown_code.md index c39f840e787..712f20efdcd 100644 --- a/packages/documentation/docs/controls/_dropdown_code.md +++ b/packages/documentation/docs/controls/_dropdown_code.md @@ -8,56 +8,58 @@ import TagsQuickActions from './../auto-generated/ix-dropdown-quick-actions/tags import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development + +### Examples - -### Dropdown with icon +> + +#### Dropdown with icon - -### Dropdown with quick actions menu +> + +#### Dropdown with quick actions menu - -### Dropdown with submenu +> + +#### Dropdown with submenu - -## API (ix-dropdown) +> + +### API (ix-dropdown) -### Properties +#### Properties -### Events +#### Events -## API (ix-dropdown-item) +### API (ix-dropdown-item) -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_dropdown_styleguide.md b/packages/documentation/docs/controls/_dropdown_styleguide.md index 845d23f1747..dec86f46157 100644 --- a/packages/documentation/docs/controls/_dropdown_styleguide.md +++ b/packages/documentation/docs/controls/_dropdown_styleguide.md @@ -1,5 +1,6 @@ -Dropdown containers display a menu with additional items when users click on the trigger element, e.g. a dropdown button. Clicking on one of the items in the dropdown performs the action. We typically use dropdowns to allow users to select one option from a list. +## Guidelines +Dropdown containers display a menu with additional items when users click on the trigger element, e.g. a dropdown button. Clicking on one of the items in the dropdown performs the action. We typically use dropdowns to allow users to select one option from a list. ![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2353-2278&mode=design&t=OVHeXvLZYLkP2CzN-4) @@ -13,7 +14,7 @@ Dropdown containers display a menu with additional items when users click on the 8. Icon 9. Label -## Options +### Options - **Header:** Add a header for the dropdown container. This allows users to better understand which elements are in the dropdown. - **Quick actions:** Add a quick action bar. Add 3 to 5 actions/items to the quick actions. We typically use quick actions to access common functions such as cut, copy and paste. @@ -24,30 +25,33 @@ Dropdown containers display a menu with additional items when users click on the - **Label:** Set a label for the dropdown item. We typically use short labels including verbs. - **Trigger:** The trigger defines which element opens the dropdown. A trigger should also be defined for a dropdown submenu. We typically use a button as the trigger element. - **Anchor:** An anchor defines where the dropdown is placed. When no anchor is defined the trigger element is used as the anchor. -- **Close behavior:** Defines whether a click inside and/or outside the dropdown closes the dropdown. A submenu is always closed together with the parent dropdown. Three Options are possible: - - Inside: clicking within the dropdown closes the dropdown. - - Outside: clicking outside the dropdown closes the dropdown. - - Both: clicking within and outside the dropdown closes the dropdown. - - False: dropdown will only close if it's parent gets closed. +- **Close behavior:** Defines whether a click inside and/or outside the dropdown closes the dropdown. A submenu is always closed together with the parent dropdown. Three Options are possible: + - Inside: clicking within the dropdown closes the dropdown. + - Outside: clicking outside the dropdown closes the dropdown. + - Both: clicking within and outside the dropdown closes the dropdown. + - False: dropdown will only close if it's parent gets closed. - **Placement:** Place a dropdown at the top, bottom, left or right edge as well as at the beginning or end of the trigger/anchor element. The placement may be automatically adjusted in case it cannot be displayed correctly (detailed behavior described in the context section below). We typically use the default (bottom right) placement option to ensure consistency. - **Date selection:** Use the component [date dropdown](date-dropdown.md) to get a date selection in the dropdown. ![Dropdown Examples](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2372-2696&mode=design&t=OVHeXvLZYLkP2CzN-4) -## Behavior in context +### Behavior in context + - **Text truncation:** The labels of the items and the header only consist of one line. A truncation only occurs if there is not enough space on the screen. - **Scrollbar:** A dropdown is provided with a scrollbar when the dropdown takes up 50% of the screen. -- **Placement:** The position depends on the trigger/anchor element (e.g. a button). By default, the dropdown is displayed at the bottom right of the trigger element. When there is not enough space for the selected placement, it is corrected automatically. The placement of the submenu is always generated automatically. -- **Quick actions:** Quick actions only consist of icons, therefore, it is important to use icons that are understandable without a label or tooltip. A quick action bar can also be used without additional items in the dropdown. +- **Placement:** The position depends on the trigger/anchor element (e.g. a button). By default, the dropdown is displayed at the bottom right of the trigger element. When there is not enough space for the selected placement, it is corrected automatically. The placement of the submenu is always generated automatically. +- **Quick actions:** Quick actions only consist of icons, therefore, it is important to use icons that are understandable without a label or tooltip. A quick action bar can also be used without additional items in the dropdown. ![Dropdown in Context](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2463-3302&t=QaiBJKNOwHMdBuk2-4) -## States +### States + Dropdown items have five states: Default, hover, active, disabled and focused. When a submenu is in an active state, the submenu displays an additional dropdown with selectable options. ![Item States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2343-42235&mode=design&t=OVHeXvLZYLkP2CzN-4) -## Dos and Don’ts +### Dos and Don’ts + - Do structure dropdown items coherently with submenus, quick actions and separators - Do use dropdowns to showcase related actions - Do disable items that cannot be used at that moment @@ -55,8 +59,9 @@ Dropdown items have five states: Default, hover, active, disabled and focused. W - Don’t use too many dropdown items - we recommend a maximum of seven - Don’t insert the [date picker](date-picker.md) or [date time picker](date-time-picker.md) components into a dropdown (use [date dropdown](date-dropdown.md) instead) -## Related patterns +### Related patterns + - [Dropdown button](buttons/dropdown-button.md) -- [Split button](buttons/split-button.md) -- [Date dropdown](date-dropdown.md) +- [Split button](buttons/split-button.md) +- [Date dropdown](date-dropdown.md) - [Select](select.mdx) diff --git a/packages/documentation/docs/controls/_input_code.md b/packages/documentation/docs/controls/_input_code.md index 57f33289962..5cb523c245c 100644 --- a/packages/documentation/docs/controls/_input_code.md +++ b/packages/documentation/docs/controls/_input_code.md @@ -3,46 +3,49 @@ import Props from '@site/docs/auto-generated/ix-input/props.md'; import Events from '@site/docs/auto-generated/ix-input/events.md'; import Tags from '@site/docs/auto-generated/ix-input/tags.md'; -## Examples +## Development -### Basic +### Examples + +#### Basic -### Disabled +#### Disabled -### Label +#### Label -### Pattern +#### Pattern -### Readonly +#### Readonly -### Types +#### Types -### Validation +#### Validation +name="input-validation" +examplesByName +height="27rem" + +> -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_input_styleguide.md b/packages/documentation/docs/controls/_input_styleguide.md index ac6516180f7..4e138b1f372 100644 --- a/packages/documentation/docs/controls/_input_styleguide.md +++ b/packages/documentation/docs/controls/_input_styleguide.md @@ -1,3 +1,5 @@ +## Guidelines + An input field is a user interface element that allows users to enter and edit text, numbers and symbols. It’s commonly used in forms, search bars, and other areas where data input is required. ![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3054-593&t=jhhv5OZGqmBpgXcs-4) @@ -11,7 +13,7 @@ An input field is a user interface element that allows users to enter and edit t 7. Helper or feedback text 8. Counter -## Options +### Options - **Label:** See [form field](./forms/forms-field.md). - **Slot options:** Add optional elements at the end and/or start of the input field, e.g. an icon, a button or a text option. We typically use slots for additional indications, options or information like a visibility toggle in a password field. @@ -20,20 +22,20 @@ An input field is a user interface element that allows users to enter and edit t - **Counter:** See [form field](./forms/forms-field.md). - **Feedback text**: See [form field](./forms/forms-field.md). -## Behavior in context +### Behavior in context - **Validation:** See [validation](./forms/forms-validation.mdx). - **Interaction**: Clicking in the container enables the editing of the field. - **Text truncation**: The text in an input field is cut off with the length of the container. - **Alignment**: Inputs are always aligned to the left, while right alignment is reserved exclusively for [number fields](input-number.mdx). -## States +### States The input field has five states: default, focused, hover, disabled and read-only. In the read-only state, the input field is displayed without offering any user interaction. ![Field States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3198-7167&t=jhhv5OZGqmBpgXcs-4) -## Dos and Don’ts +### Dos and Don’ts - Do use helper text to guide users through the input process - Do use feedback text to inform users about the status of their input @@ -41,7 +43,7 @@ The input field has five states: default, focused, hover, disabled and read-only - Don’t overcrowd the input field with too many elements - Don’t use placeholders as a substitute for labels -## Related patterns +### Related patterns - [Form field](./forms/forms-field.md) - [Validation](./forms/forms-validation.mdx) diff --git a/packages/documentation/docs/controls/_layout-grid_code.md b/packages/documentation/docs/controls/_layout-grid_code.md index 09c04e7666e..a17c72de00d 100644 --- a/packages/documentation/docs/controls/_layout-grid_code.md +++ b/packages/documentation/docs/controls/_layout-grid_code.md @@ -6,48 +6,50 @@ import ColEvents from './../auto-generated/ix-col/events.md'; import Playground from '@site/src/components/PlaygroundV3' -## Examples +## Development -### Basic +### Examples + +#### Basic - +height="15rem" +name="grid" + +> -### Size +#### Size - +height="17rem" +name="grid-size" -### Padding +> + +#### Padding - +name="grid-padding" +height="17rem" + +> -## API (ix-layout-grid) +### API (ix-layout-grid) -### Properties +#### Properties -### Events +#### Events -## API (ix-col) +### API (ix-col) -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_layout-grid_styleguide.md b/packages/documentation/docs/controls/_layout-grid_styleguide.md index 98eadd8a869..b75edddcd74 100644 --- a/packages/documentation/docs/controls/_layout-grid_styleguide.md +++ b/packages/documentation/docs/controls/_layout-grid_styleguide.md @@ -1,41 +1,46 @@ +## Guidelines + Grids are typically used to make layouts more cohesive and consistent. With layout grids, a two-dimensional layout system is available to create responsive layouts. Our layout grids are made of three elements: a grid, row(s) and column(s). The layout grid adapts to screen size and orientation. Commonly, the layout grid is based on a 12 column layout. Columns are nested in rows and adapt in width according to the available space. Content is placed within columns. Column widths are set as percentage. ![Layout grid overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=800-2637&mode=design&t=R26qUrZCUTY2iIxG-1) + 1. Layout grid 2. Row 3. Column 4. Gutter 5. Margin -## Options -### Layout grid options +### Options + +#### Layout grid options + - The default number of columns in a grid is 12. It is possible to choose any number of columns between 2 and 12. - Layout grids contain horizontal margins. For smaller viewports or when used within a component, the margin can be removed or reduced. -- As a general rule, a gutter of ``1.5rem`` is applied. The gutter can be decreased to allow for a narrower grouping of columns. +- As a general rule, a gutter of `1.5rem` is applied. The gutter can be decreased to allow for a narrower grouping of columns. + +#### Column options -### Column options - The size of a column is defined by the available space and the number of columns. If no size is set, columns automatically have equal width. The size of a column can be adjusted so that it takes a higher percentage of the available space. The size property refers to the number of columns from the default of 12 per row. -Example: In a 12 column layout with 6 columns with equal width in place, each column takes a space of 1/6 (or 2 out of 12). When setting the size of the first column to ``3`` (corresponding to 3 out of 12), the remaining columns adjust their width to fit within the remaining space of 3/4 (or 9 out of 12). +Example: In a 12 column layout with 6 columns with equal width in place, each column takes a space of 1/6 (or 2 out of 12). When setting the size of the first column to `3` (corresponding to 3 out of 12), the remaining columns adjust their width to fit within the remaining space of 3/4 (or 9 out of 12). ![Example for column size option](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=796-3&mode=design&t=R26qUrZCUTY2iIxG-1) -- A column size ``auto`` is available. When set to ``auto``, column width is defined by the width of its content. The remaining columns resize to fill the row. +- A column size `auto` is available. When set to `auto`, column width is defined by the width of its content. The remaining columns resize to fill the row. - Column size can be tailored to viewports. Three viewports are currently supported. The viewport size can't be adjusted at this point. When setting the size for one viewport, larger viewports are adjusted in the same way. -| Viewport name | Viewport size | Description | -| -------------------------- | --------------------------------- |-------------------------------------------- | -| Small | 0-767 | set columns when min width is 0 | -| Medium | 768-1279 | set columns when min width is 768 | -| Large | 1280+ | set columns when min width is 1280 | +| Viewport name | Viewport size | Description | +| ------------- | ------------- | ---------------------------------- | +| Small | 0-767 | set columns when min width is 0 | +| Medium | 768-1279 | set columns when min width is 768 | +| Large | 1280+ | set columns when min width is 1280 | -Example: Here is an example of a 12 column layout grid with 4 columns, each with equal width. The columns' ``size`` is set to ``12`` and for medium viewports and larger (``size md``) it is set to ``3``. On small viewports, the columns take the full width and stack vertically. For medium and large viewports, columns take equal width. +Example: Here is an example of a 12 column layout grid with 4 columns, each with equal width. The columns' `size` is set to `12` and for medium viewports and larger (`size md`) it is set to `3`. On small viewports, the columns take the full width and stack vertically. For medium and large viewports, columns take equal width. ![Example for viewport-based column sizes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=800-23920&mode=design&t=R26qUrZCUTY2iIxG-1) +### Behavior in context -## Behavior in context - -Decreasing and increasing the viewport width influences the width of each column within a layout grid. When column width is decreased to the point that the minimum content width is reached for at least one column, the layout breaks into a second line. +Decreasing and increasing the viewport width influences the width of each column within a layout grid. When column width is decreased to the point that the minimum content width is reached for at least one column, the layout breaks into a second line. diff --git a/packages/documentation/docs/controls/_number-input_code.mdx b/packages/documentation/docs/controls/_number-input_code.mdx index 418e97fba4d..c2d790c18ca 100644 --- a/packages/documentation/docs/controls/_number-input_code.mdx +++ b/packages/documentation/docs/controls/_number-input_code.mdx @@ -2,29 +2,31 @@ import Playground from '@site/src/components/PlaygroundV3'; import Props from '@site/docs/auto-generated/ix-number-input/props.md'; import Events from '@site/docs/auto-generated/ix-number-input/events.md'; -## Examples +## Development -### Basic +### Examples + +#### Basic -### Disabled +#### Disabled -### Label +#### Label -### Readonly +#### Readonly -### Stepper buttons +#### Stepper buttons -### Validation +#### Validation -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_number-input_styleguide.mdx b/packages/documentation/docs/controls/_number-input_styleguide.mdx index cece667eb34..bde046118c8 100644 --- a/packages/documentation/docs/controls/_number-input_styleguide.mdx +++ b/packages/documentation/docs/controls/_number-input_styleguide.mdx @@ -1,5 +1,6 @@ -The number input component allows users to enter and adjust numerical values. It’s commonly used in forms, calculators, and other areas where precise numerical input is required. We typically use the number input component to ensure accurate and efficient data entry. +## Guidelines +The number input component allows users to enter and adjust numerical values. It’s commonly used in forms, calculators, and other areas where precise numerical input is required. We typically use the number input component to ensure accurate and efficient data entry. ![Number input overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3805-24565&t=DtCmoFcLwhf7ke3S-4) @@ -10,7 +11,7 @@ The number input component allows users to enter and adjust numerical values. It 5. Input field 6. Helper or feedback text -## Options +### Options - **Label**: See [form field](./forms/forms-field.md). - **Value**: See [form field](./forms/forms-field.md). @@ -24,23 +25,27 @@ The number input component allows users to enter and adjust numerical values. It - **Min/Max**: Specify the minimum and maximum values that can be entered to ensure the input stays within the defined range. We typically use this option to prevent invalid entries and guide users towards acceptable values. - **Show stepper buttons**: Use these optional controls to increment or decrement the value (suitable for small ranges with few steps). We typically use these buttons when precise adjustments are needed, such as in quantity selectors, rating systems or form inputs requiring fine-tuned numerical values. -## Behavior in context +### Behavior in context + - **Interaction:** Users can type a value or use stepper buttons to adjust it. We recommend using stepper buttons, especially for touch interactions, to enhance usability and precision. - **Validation:** See [form field](./forms/forms-validation.mdx). - **Overflow:** Numbers are truncated to fit within the input field. Ensure that the expected value is visible in the input field so it can be properly displayed. - **Alignment:** Number inputs are always aligned to the right. -## States +### States + The number input has five states: default, hover, focused, disabled and read-only. ![Number input states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=4097-1041&t=lGjPn4Q9U7Fa81TI-4) -## Dos and Don’ts +### Dos and Don’ts + - Do set appropriate min and max values to prevent invalid entries and guide user input - Do provide clear error messages when the input value is out of the allowed range or does not match the required pattern - Do consider special cases such as zero, negative numbers and very large numbers to ensure all possible inputs are handled correctly - Don't specify patterns that do not align with your use case, e.g. inappropriate intervals between valid values -## Related patterns +### Related patterns + - [Form fields](./forms/forms-field.md) - [Validation](./forms/forms-validation.mdx) - [Layout](./forms/forms-layout.md) diff --git a/packages/documentation/docs/controls/_panes_code.md b/packages/documentation/docs/controls/_panes_code.md index f0f03393f00..2cdcb7d51b7 100644 --- a/packages/documentation/docs/controls/_panes_code.md +++ b/packages/documentation/docs/controls/_panes_code.md @@ -6,44 +6,46 @@ import Tags from './../auto-generated/ix-pane/tags.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Example +## Development -### Basic +### Example + +#### Basic - +name="pane" +height="24rem" +noMargin + +> -### Pane Layout +#### Pane Layout - +name="pane-layout" +height="24rem" +noMargin + +> -## API (ix-pane) +### API (ix-pane) -### Properties +#### Properties -### Events +#### Events -## API (ix-pane-layout) +### API (ix-pane-layout) -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_panes_styleguide.md b/packages/documentation/docs/controls/_panes_styleguide.md index 41eb21f1b9d..7ca9177904a 100644 --- a/packages/documentation/docs/controls/_panes_styleguide.md +++ b/packages/documentation/docs/controls/_panes_styleguide.md @@ -1,3 +1,5 @@ +## Guidelines + Panes are interactive components that allow users to access content that isn't constantly visible on the screen. Panes have a header and a content area. When collapsed, panes are either hidden or reduced to a bar. In our applications, we often include contextual information, options, trees and lists inside panes. Panes help users focus on tasks as related controls are visually grouped and the main content has less information. They are also beneficial for compact and hierarchically organized content and provide a more dynamic layout. @@ -9,7 +11,7 @@ Panes help users focus on tasks as related controls are visually grouped and the 3. Right pane, floating 4. Bottom pane, inline -## Options +### Options - **Heading**: Set a headline for the pane (we normally use a short content description). - **Icon**: Panes can display an icon in the pane header next to the title. @@ -25,7 +27,7 @@ Panes help users focus on tasks as related controls are visually grouped and the 1. Full height (left/right) 2. Full width (top/bottom) -## Behavior +### Behavior - **Interaction**: Users expand panes that are collapsible by pressing on the expand button. To expand panes with hidden collapsed state, users typically click on a button or another interactive component within the main content. They close these panes by either pressing on the button on the right side of the header or clicking outside the pane area. This removes the pane from their view. - **Overflow**: When content extends the available space within the pane, scrollbars appear. Headers stay fixed at the top allowing users to scroll the content area. We like to avoid overfilling panes with content to remove the need for scrolling. @@ -39,11 +41,11 @@ Panes help users focus on tasks as related controls are visually grouped and the 2. Inline or floating pane in expanded state 3. Opened navigation menu -## States +### States Panes have two states: collapsed and expanded. The appearance of the states varies between variants and screen sizes. -## Dos and Don'ts +### Dos and Don'ts - Do use panes to organize your content and guide your users' attention - Do use panes to display different views within a single screen @@ -51,7 +53,7 @@ Panes have two states: collapsed and expanded. The appearance of the states vari - Don't use panes for a small amount of content - Don't use panes for content that should stay visible -## Related patterns +### Related patterns - [Drawers](./drawer.md) - [Header](../controls/application-frame/application-header.md) diff --git a/packages/documentation/docs/controls/_pill_code.md b/packages/documentation/docs/controls/_pill_code.md index 26f2483b729..8f0838229d3 100644 --- a/packages/documentation/docs/controls/_pill_code.md +++ b/packages/documentation/docs/controls/_pill_code.md @@ -3,29 +3,31 @@ import Events from './../auto-generated/ix-pill/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development -### Basic +### Examples + +#### Basic - +name="pill" + +> -### Variants +#### Variants - +name="pill-variants" +height="24rem" + +> -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_pill_styleguide.md b/packages/documentation/docs/controls/_pill_styleguide.md index b4e181f1f0d..705bdc67102 100644 --- a/packages/documentation/docs/controls/_pill_styleguide.md +++ b/packages/documentation/docs/controls/_pill_styleguide.md @@ -1,5 +1,6 @@ -Pills are components used to display small pieces of information in a compact and visually appealing way. Typically pills contain a concise label and sometimes an icon, and they aren't clickable or closable. +## Guidelines +Pills are components used to display small pieces of information in a compact and visually appealing way. Typically pills contain a concise label and sometimes an icon, and they aren't clickable or closable. ![Pill overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1377-3110&mode=design&t=ZmcRP4ggXtr8b7vZ-1) @@ -7,7 +8,8 @@ Pills are components used to display small pieces of information in a compact an 2. Icon 3. Label text -## Variants +### Variants + With our pill variants, you can apply different colors based on their purpose, importance or context. We use chip variants to show class, status and levels of importance. The custom variant is often used for pills that visualize a high number of different categories. Pill variants: @@ -18,25 +20,25 @@ Pill variants: ![Pill variants](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1375-1985&mode=design&t=ZmcRP4ggXtr8b7vZ-1) -## Options +### Options - **Align left**: Position the pill content to the left side. - **Background**: Use to set a custom background color when you require more flexibility in styling the pill. Only available for the custom pill variant. - **Color**: Customize font and icon color for pill. This allows users to specify a unique font color in combination with a custom background color (only applicable when the variant is set to 'custom'). - **Icon**: Pills can include a close icon within the element which is positioned before the pill label. - **Outline**: Use for lower visual emphasis. -- **Width**: Pill width can be set to a specific value, but content length normally determines pill width with a minimum width of '2rem'. +- **Width**: Pill width can be set to a specific value, but content length normally determines pill width with a minimum width of '2rem'. -## Behavior +### Behavior -- **Placement**: We usually position pills inline with other elements to convey their status or category. We do not place pills within input and filter components as these already contain similar components. However, it's possible to add components similar to pills to tabs and navigation menu items. These counter or notification components are provided as component options. +- **Placement**: We usually position pills inline with other elements to convey their status or category. We do not place pills within input and filter components as these already contain similar components. However, it's possible to add components similar to pills to tabs and navigation menu items. These counter or notification components are provided as component options. - **Text truncation**: When you set a width for pills, long labels are truncated to fit the available space. -## States +### States -Pills are read-only. +Pills are read-only. -## Dos and Don'ts +### Dos and Don'ts - Do use pills to communicate tags and categories - Do use pills to indicate the status or characteristics of an item @@ -44,9 +46,6 @@ Pills are read-only. - Don't use different styles for pills with the same or similar use - Don't use pills if users can interact with the component (e.g. click, close) use chips instead -## Related patterns +### Related patterns - [Chip](chip.md) - - - diff --git a/packages/documentation/docs/controls/_radio_code.mdx b/packages/documentation/docs/controls/_radio_code.mdx index efc0bbb0631..52b795c4853 100644 --- a/packages/documentation/docs/controls/_radio_code.mdx +++ b/packages/documentation/docs/controls/_radio_code.mdx @@ -5,30 +5,32 @@ import Playground from '@site/src/components/PlaygroundV3'; import Props from '@site/docs/auto-generated/ix-radio/props.md'; import Events from '@site/docs/auto-generated/ix-radio/events.md'; -## Examples +## Development -### Basic +### Examples + +#### Basic -### Disabled +#### Disabled -### Group +#### Group -### Validation +#### Validation -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_radio_styleguide.mdx b/packages/documentation/docs/controls/_radio_styleguide.mdx index bdf49f5a1e1..63ce9bc1f1d 100644 --- a/packages/documentation/docs/controls/_radio_styleguide.mdx +++ b/packages/documentation/docs/controls/_radio_styleguide.mdx @@ -1,23 +1,25 @@ +## Guidelines + A radio button is an interface element that enables the user to choose only one option from a predefined set of mutually exclusive options. They are presented in groups to signify that only one selection is allowed at a time. Selecting a radio button automatically deselects any previously chosen radio button within the same group. We typically use radio buttons to offer users a set of exclusive choices. ![Anatomy radio button](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3749-1785&t=VCAAFzKIYCDb7nIX-4) -## Options +### Options - **Label:** See [form field](forms/forms-field.md). - **Helper text**: See [form field](forms/forms-field.md). - **Feedback text**: See [form field](forms/forms-field.md). -## Behavior in context +### Behavior in context - **Validation**: Radio buttons are validated collectively, not individually. For more information on validation, see [validation](forms/forms-validation.mdx). - **Interaction**: Clicking on a radio button toggles its state between checked and unchecked/default. Every other radio button in the group is automatically unchecked. -## States +### States ![States radio button](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3387-8703&t=ZvZOV5vvqWRxmqyv-4) -## Dos and Don’ts +### Dos and Don’ts - Do use radio buttons when the user needs to select only one option from a set of options - Do group related radio buttons together to indicate that only one option can be selected at a time @@ -25,7 +27,7 @@ A radio button is an interface element that enables the user to choose only one - Don’t use radio buttons if the user needs to select multiple options from a set of options - use a checkbox instead - Don’t use only one radio button in a group, groups should have at least two options -## Related patterns +### Related patterns - [Form field](forms/forms-field.md) - [Validation](forms/forms-validation.mdx) diff --git a/packages/documentation/docs/controls/_select_code.mdx b/packages/documentation/docs/controls/_select_code.mdx index ba2c913d818..e2c328c205a 100644 --- a/packages/documentation/docs/controls/_select_code.mdx +++ b/packages/documentation/docs/controls/_select_code.mdx @@ -7,26 +7,23 @@ import ItemEvents from './../auto-generated/ix-select-item/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development -### Basic +### Examples - - +#### Basic -### Editable + + +#### Editable - +> -### Multiselect +#### Multiselect -### Validation +#### Validation -## API (ix-select) +### API (ix-select) -### Properties +#### Properties -### Events +#### Events -## Properties (ix-select-item) +### Properties (ix-select-item) -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_select_styleguide.md b/packages/documentation/docs/controls/_select_styleguide.md index 09804049042..f27e66d8a2f 100644 --- a/packages/documentation/docs/controls/_select_styleguide.md +++ b/packages/documentation/docs/controls/_select_styleguide.md @@ -1,3 +1,5 @@ +## Guidelines + A select component allows users to choose from a list of options. It supports single or multiple selections and the editable variant allows users to add new items. We typically use select components in forms, filters and settings where users need to choose from predefined options. ![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3647-6332&t=DtCmoFcLwhf7ke3S-4) @@ -13,43 +15,43 @@ A select component allows users to choose from a list of options. It supports si 9. Selected list item 10. Editable mode (add new items) -## Options +### Options - **Label:** See [form field](./forms/forms-field.md). - **Placeholder:** Use a placeholder to provide information about what to enter or additional relevant context while the input field is empty. We typically use a placeholder when the label is not visible or we need to provide additional context. - **Helper text:** See [form field](./forms/forms-field.md). - **Feedback text:** See [form field](./forms/forms-field.md). - **Show clear button:** Select components can have a dedicated button to easily clear the selection. Hide the button when offering users other ways to reset, e.g. a default item like "none", or if you aim for simplified keyboard accessibility. -- **List header:** Use a header to provide additional context or instructions about the items to help users understand the choices better. - - **Hide list header:** Hide the header of the dropdown list when not required. +- **List header:** Use a header to provide additional context or instructions about the items to help users understand the choices better. + - **Hide list header:** Hide the header of the dropdown list when not required. - **Information for no matches:** Set a message to be displayed when no item matches the inserted text. - **Editable:** When enabled, users can add new items to the list. - **Multiselect:** Allow users to select multiple items from the list. - **Item label:** Set a short and concise label for dropdown items. - **Selected item:** Mark selected items in the dropdown with a check mark. -## Behavior in context +### Behavior in context - **Validation:** See [validation](./forms/forms-validation.mdx). - **Interaction:** - - Click or Enter key on button opens dropdown list. - - Typing in the input field filters the dropdown list. - - Arrow keys navigate within the dropdown list. - - Click or Enter selects a highlighted list item. - - Escape key closes dropdown list and returns to the originally selected value. + - Click or Enter key on button opens dropdown list. + - Typing in the input field filters the dropdown list. + - Arrow keys navigate within the dropdown list. + - Click or Enter selects a highlighted list item. + - Escape key closes dropdown list and returns to the originally selected value. - **Overflow:** - - The text in an input field is truncated with the length of the container. - - On the multiselect, the selected items break into a second line and then show a scrollbar if it extends beyond two lines. - - The dropdown list is scrollable when the list exceeds the container height. Its width is defined by the longest item. + - The text in an input field is truncated with the length of the container. + - On the multiselect, the selected items break into a second line and then show a scrollbar if it extends beyond two lines. + - The dropdown list is scrollable when the list exceeds the container height. Its width is defined by the longest item. - **Alignment:** Selects are always aligned to the left, while right alignment is reserved exclusively for [number inputs](input-number.mdx). -## States +### States The select field has five states: default, hover, focused, disabled and read-only. In the disabled state, the input field is displayed without offering any user interaction. ![Field states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3960-760&t=MWpyPDZDK5B531n9-4) -## Dos and Don’ts +### Dos and Don’ts - Do consider performance when loading an extensive list of items - Do use the select component when there is a finite list of items available to avoid manual input errors or duplicates @@ -60,7 +62,7 @@ The select field has five states: default, hover, focused, disabled and read-onl ![Don't combine data attributes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3978-800&t=MWpyPDZDK5B531n9-4) -## Related patterns +### Related patterns - [Form field](./forms/forms-field.md) - [Validation](./forms/forms-validation.mdx) diff --git a/packages/documentation/docs/controls/_textarea-field_code.mdx b/packages/documentation/docs/controls/_textarea-field_code.mdx index 7869be9457d..1e2a23e13dc 100644 --- a/packages/documentation/docs/controls/_textarea-field_code.mdx +++ b/packages/documentation/docs/controls/_textarea-field_code.mdx @@ -3,34 +3,36 @@ import Playground from '@site/src/components/PlaygroundV3'; import Props from '@site/docs/auto-generated/ix-textarea/props.md'; import Events from '@site/docs/auto-generated/ix-textarea/events.md'; -## Examples +## Development -### Basic +### Examples + +#### Basic -### Disabled +#### Disabled -### Readonly +#### Readonly -### Resize behavior +#### Resize behavior -### Validation +#### Validation -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/_textarea-field_styleguide.mdx b/packages/documentation/docs/controls/_textarea-field_styleguide.mdx index 27c699ab673..1111c1a3bb2 100644 --- a/packages/documentation/docs/controls/_textarea-field_styleguide.mdx +++ b/packages/documentation/docs/controls/_textarea-field_styleguide.mdx @@ -1,6 +1,9 @@ +## Guidelines + The textarea component allows users to input multi-line text, making it ideal for forms that require longer entries. We typically use textareas in scenarios such as feedback forms, comment sections and message composition. ![Textarea overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3814-1128&t=DtCmoFcLwhf7ke3S-4) + 1. Label 2. Required field indicator 3. Placeholder @@ -9,7 +12,7 @@ The textarea component allows users to input multi-line text, making it ideal fo 6. Helper or feedback text 7. Counter -## Options +### Options - **Label**: See [form field](./forms/forms-field.md). - **Value**: See [form field](./forms/forms-field.md). @@ -23,8 +26,7 @@ The textarea component allows users to input multi-line text, making it ideal fo - **Columns and width**: Defines initial width by number of columns and/or width. - **Rows and height**: Defines initial height by number of rows and/or height. - -## Behavior in context +### Behavior in context - **Interaction**: - Clicking in the container enables the editing of the field. @@ -39,20 +41,20 @@ The textarea component allows users to input multi-line text, making it ideal fo - Use columns and rows when you want to define the size of the textarea based on the number of characters (columns) and lines (rows) it can display. This is particularly useful for textareas where the content length is predictable, such as input fields with character limits. - Use width and height when you need to specify the exact dimensions of the textarea in terms of pixels, rems or other units. This is ideal for ensuring consistent layout and design across different screen sizes and devices, especially in responsive designs. -## States +### States Textareas have five states: Default, hover, focused, read-only and disabled. ![Textarea states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3947-527&t=DtCmoFcLwhf7ke3S-4) -## Dos and Don’ts +### Dos and Don’ts - Do ensure the textarea size matches the expected input, e.g. 5 to 10 rows for detailed feedback - Do use the placeholder to give users an example of the expected input - Do set minimum and maximum character limits to ensure appropriate input length - Don’t use the textarea for short, single-line input like name or email address, use an [input field](./input.mdx) instead -## Related patterns +### Related patterns - [Form fields](./forms/forms-field.md) - [Validation](./forms/forms-validation.mdx) diff --git a/packages/documentation/docs/controls/_toast_code.md b/packages/documentation/docs/controls/_toast_code.md index c33c55c7fff..98a51b885dc 100644 --- a/packages/documentation/docs/controls/_toast_code.md +++ b/packages/documentation/docs/controls/_toast_code.md @@ -11,30 +11,35 @@ import ApiToastConfigAngular from './\_toast/angular/toast-config.md'; import ApiToastConfigReact from './\_toast/react/toast-config.md'; -## Examples +## Development -### Basic +### Examples + +#### Basic -### Custom toast message +> + +#### Custom toast message -### Position +> + +#### Position -## API +> + +### API diff --git a/packages/documentation/docs/controls/_toast_styleguide.md b/packages/documentation/docs/controls/_toast_styleguide.md index 582cd34d400..9689e781c7e 100644 --- a/packages/documentation/docs/controls/_toast_styleguide.md +++ b/packages/documentation/docs/controls/_toast_styleguide.md @@ -1,3 +1,5 @@ +## Guidelines + Toasts are small pop-ups that provide simple feedback on a process. They are UI elements where an event causes a small text field to appear on screen. Toasts are informative, last for a few seconds only, and take up a very small part of the screen to avoid interrupting the workflow. They usually follow an action performed by the user and provide information about the success or failure of that action. We typically use toasts for immediate feedback or tips on actions that a user performs, e.g. successful deletion. ![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2550-58743&t=LITgbzwcgm87dQXa-4) @@ -9,14 +11,14 @@ Toasts are small pop-ups that provide simple feedback on a process. They are UI 5. Message 6. Close action -## Options +### Options -- **Toast types:** There are four preset toast types and one custom type: - - Info: Provides users with additional information about the performed action. - - Success: Informs users of a successfully performed action. - - Warning: Warns users of potential problems that could occur due to the action. - - Error: Notifies users that the action cannot be performed due to a specific problem. - - Custom: Adjust the icon and its color to customize your own toast messages. +- **Toast types:** There are four preset toast types and one custom type: + - Info: Provides users with additional information about the performed action. + - Success: Informs users of a successfully performed action. + - Warning: Warns users of potential problems that could occur due to the action. + - Error: Notifies users that the action cannot be performed due to a specific problem. + - Custom: Adjust the icon and its color to customize your own toast messages. - **Header:** Add a header for the toast. Use short and concise words. We typically use 1 to 3 keywords, such as "Error occurred" or "Action completed". - **Message:** Add a clear and concise message providing more detailed information about the toast event. We typically provide additional context or instructions related to the event, e.g. "Please check your email for further instructions" or "Your changes have been saved successfully". - **Button:** Include a button to provide users with an option to take further action. We typically use a button to give the user an option to undo the action or to provide a link for further information. @@ -24,7 +26,8 @@ Toasts are small pop-ups that provide simple feedback on a process. They are UI ![Toast types](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2552-64766&t=VfiuoHWd1VYl1GYb-4) -## Behavior in context +### Behavior in context + - **Auto closure:** Toasts should only be displayed on the screen for a few seconds. A progress bar is displayed to visualize the time left until the toast disappears. We typically leave the toast on the screen from 3 to 8 seconds. - **Manual closure:** Toasts can be closed manually at any time. It's also possible to suppress the automatic closing so that the user has to actively close the toast. We normally use a purely manual closure of the toast if the workflow is continued by using the toast, e.g. downloading files. - **Multiple toasts:** Toasts are stacked on top of each other with the newest at the bottom. @@ -32,7 +35,8 @@ Toasts are small pop-ups that provide simple feedback on a process. They are UI ![Toast in Context](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2589-2697&t=Ysb6WohsxOfZv2ls-4) -## Dos and Don’ts +### Dos and Don’ts + - Do use toasts to provide contextual tips and shortcuts for users - Do use toasts to instantly inform a user about the outcome of an action - Do include shortcuts to undo an action immediately after it's taken @@ -40,7 +44,8 @@ Toasts are small pop-ups that provide simple feedback on a process. They are UI - Don’t use toasts for high-priority or critical alerts that prevent the user from continuing their work (use a [modal](modal.md) or a [message bar](messagebar.md) instead) - Don’t edit or reuse icons or icon colors from the four predefined toast types when creating custom toasts -## Related patterns +### Related patterns + - [Modal](modal.md) - [Message bar](messagebar.md) -- [Drawer](drawer.md) \ No newline at end of file +- [Drawer](drawer.md) 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 4e9418277ed..31e468c478c 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 @@ -6,38 +6,40 @@ import EventsItem from './../../auto-generated/ix-menu-about-item/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development -### Basic +### Examples + +#### Basic - +name="about-and-legal" +height="30rem" +width="100%" +noMargin + +> -### Change language of legal links +#### Change language of legal links Supported language codes are `'global/en' | 'global/es' | 'de/de' | 'cn/zh'` -## API (ix-menu-about) +### API (ix-menu-about) -### Properties +#### Properties -### Events +#### Events -## API (ix-menu-about-item) +### API (ix-menu-about-item) -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/application-frame/_about-and-legal_styleguide.md b/packages/documentation/docs/controls/application-frame/_about-and-legal_styleguide.md index 4c6a1cfa7b1..433b73a632b 100644 --- a/packages/documentation/docs/controls/application-frame/_about-and-legal_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_about-and-legal_styleguide.md @@ -1,3 +1,5 @@ +## Guidelines + The About and legal component is an overlay we typically use to show application information, application versions, license terms, legal regulations, copyright information and other legal content. It appears when users click on the "About and legal" icon (1) and overlays the current content. Closing this overlay brings users back to the original content. ![About and legal overlay](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1029-79866&mode=design&t=Ntzn8IlSOlPey8s5-11) @@ -8,10 +10,12 @@ The About and legal component is an overlay we typically use to show application - (4) Tabs (optional): navigates through multiple content categories - (5) Changeable content: we use this to add specific application information and local legal regulations (note our Figma design is our personal recommendation) -## Behavior -Overlay opens on top of application content with a semi-transparent background with a background blur effect to emphasize the overlay character. Closing this overlay brings users back to the previous content. +### Behavior + +Overlay opens on top of application content with a semi-transparent background with a background blur effect to emphasize the overlay character. Closing this overlay brings users back to the previous content. The overlay can be closed in three ways: + - Select the close button. - Click the info icon again. - Click another navigation item. 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 c65da92f68d..42b9f6234f1 100644 --- a/packages/documentation/docs/controls/application-frame/_application-header_code.md +++ b/packages/documentation/docs/controls/application-frame/_application-header_code.md @@ -4,34 +4,35 @@ import Events from './../../auto-generated/ix-application-header/events.md'; import Playground from '@site/src/components/PlaygroundV3'; +## Development + The application-header can host custom content which will be displayed on the far right side of the header. -## Examples +### Examples + +### Basic -## Basic + +noMargin +height="18rem"> -### Avatar +#### 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. -## API +### API -### Properties +#### Properties -### Slots +#### Slots -### Events +#### Events - diff --git a/packages/documentation/docs/controls/application-frame/_application-header_styleguide.md b/packages/documentation/docs/controls/application-frame/_application-header_styleguide.md index 9d05ec7b255..db220c8e859 100644 --- a/packages/documentation/docs/controls/application-frame/_application-header_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_application-header_styleguide.md @@ -1,3 +1,5 @@ +## Guidelines + ![Application header with different options](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1634-56424&mode=design&t=4XzscFw57dE7McUX-11) 1. [Application switch](#application-switch) (optional) @@ -6,35 +8,33 @@ 4. [Slot](#slot) for additional elements (optional) 5. [Avatar](#avatar) (optional) +#### Application switch -### Application switch Use the application switch (see [application](./application.md)) to allow users to navigate across applications. When clicking the application switch (1), a modal with a list of available applications opens. +#### Brand logo -### Brand logo Provide the brand logo (2) as SVG. The logo must be monochromatic and cannot contain strokes as it is colored during runtime depending on your chosen theme. For Siemens applications, only the Siemens logo with the brand theme is allowed. +#### Application name -### Application name The application name (3) shows the official name of the application. It can be extended with additional information by using the pipe character "|" and 2 spaces before and after to separate both. - -### Slot +#### Slot ![Examples of slot usages](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1679-19526&mode=design&t=UPXhDWuRHtygtfFI-11) We use this slot to provide additional high-level information or actions and functions which may impact the application context, e.g. mode switching. Note that overflows are not handled automatically; at breakpoint sm the slot collapses and is only accessible via the overflow icon. We typically use the slot for: + - Log in button, if the application runs without a logged in user - Changing the top level data context like environment, workspace, tenant or similar - Important contextual information users should be aware of (like local times in remote access use cases) -- Access to application-wide actions like global search +- Access to application-wide actions like global search - - -### Avatar +#### Avatar With the new modular application frame we moved the avatar from the navigation menu to the application header. This ensures the avatar has security-relevant information available at all breakpoints. Nonetheless, if you still use the [basic navigation](./basic-navigation.md) or the [map navigation](./map-navigation.md), the avatar is still in the navigation menu for compatibility reasons. @@ -45,43 +45,44 @@ With the new modular application frame we moved the avatar from the navigation m 8. Top text line 9. Bottom text line -The avatar is an optional element and indicates the current logged in user. If your application doesn’t support different users or user profiles, don’t use the avatar. +The avatar is an optional element and indicates the current logged in user. If your application doesn’t support different users or user profiles, don’t use the avatar. Clicking the avatar opens a dropdown (6) with additional user information (7, 8, 9) and possibly other user related actions like log out, profile settings or user settings. ![Examples of access login](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1636-62468&mode=design&t=4XzscFw57dE7McUX-11) If your application can be used without being logged in to, you can offer access to a login process in different ways, for example: + - Show a log in button in the [slot for additional elements](#slot) and hide the avatar. - Show the avatar with a placeholder image and show text in the user information section. -## Options +### Options If the application is hosted inside a framework that comes with its own header, you can omit the entire application header to avoid having two headers on top of each other. The framework’s header then provides the brand identity, the application name and other information. -## Behavior +### Behavior The header automatically adapts the breakpoints defined in the [application](./application.md). ![Application header at breakpoints lg/md and sm](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1636-62980&mode=design&t=4XzscFw57dE7McUX-11) 10. Layout at breakpoint lg and md -11. Layout at breakpoint (sm) +11. Layout at breakpoint (sm) 12. Application menu icon 13. Overflow icon to access the slot content (14) 14. Slot content 15. Close icon to close the application menu 16. Application menu with the application switch icon at the top -At breakpoints "lg" and "md" the application header behaves identically. At breakpoint "sm" the layout changes in the following way: +At breakpoints "lg" and "md" the application header behaves identically. At breakpoint "sm" the layout changes in the following way: - The application menu hides, displaying the application menu icon (12), a click opens the application menu (16). - The application switch (if used) moves to the application menu (16). - The brand logo disappears. - The slot for additional elements (if used) moves to the overflow dropdown that opens on click on the overflow icon (13). +### Dos and Don’ts -## Dos and Don’ts - Do align other slot usages for Siemens applications with our team to keep a consistent look and feel - Do use the avatar dropdown for actions related to the current logged in user - Don’t overload the slot with too many elements (overflows are not handled automatically) 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 7ae498674ff..9d5c617c4c7 100644 --- a/packages/documentation/docs/controls/application-frame/_application-menu_code.md +++ b/packages/documentation/docs/controls/application-frame/_application-menu_code.md @@ -19,19 +19,21 @@ import AvatarTags from './../../auto-generated/ix-menu-avatar/tags.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development -### Basic +### Examples + +#### Basic - +name="vertical-tabs" +height="30rem" +noMargin +hideInitalCodePreview + +> -### 2nd navigation level +#### 2nd navigation level -### Avatar +#### Avatar - +name="vertical-tabs-with-avatar" +height="30rem" +noMargin +hideInitalCodePreview + +> -### 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.
- +name="menu-with-bottom-tabs" +height="30rem" +noMargin +hideInitalCodePreview + +> -## API (ix-menu) +### API (ix-menu) -### Properties +#### Properties -### Events +#### Events -## API (ix-menu-item) +### API (ix-menu-item) -### Props +#### Props -### Events +#### Events -## API (ix-menu-category) +### API (ix-menu-category) -### Properties +#### Properties -### Events +#### Events -## API (ix-menu-avatar) +### API (ix-menu-avatar) -### Properties +#### Properties -### Events +#### Events -## API (ix-menu-avatar-item) +### API (ix-menu-avatar-item) -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/application-frame/_application-menu_styleguide.md b/packages/documentation/docs/controls/application-frame/_application-menu_styleguide.md index e0dad657ff8..18b59411afc 100644 --- a/packages/documentation/docs/controls/application-frame/_application-menu_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_application-menu_styleguide.md @@ -1,28 +1,32 @@ +## Guidelines + The navigation menu is an essential part of your application. It offers a way to directly navigate to the main application parts and it can give your users access to legal and version information, and access to settings. ![Navigation menu collapsed and expanded](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=990-122297&mode=design&t=JbZngO5IAS8hvpTb-11) 1. Expand/collapse icon button: Expands and collapses the navigation menu. 2. [Avatar button](#avatar-button,): Shows the logged-in user and provides access to user-related actions (optional) -**Please note:** Only basic navigation and map navigation still use the avatar at this position. The new [application](./application.md) frame uses the avatar inside the [application header](./application-header.md). + **Please note:** Only basic navigation and map navigation still use the avatar at this position. The new [application](./application.md) frame uses the avatar inside the [application header](./application-header.md). 3. Navigation section: Navigates through the main parts of an application. 4. [Bottom section](#bottom-section): Hosts infrastructural actions and additional content but does not navigate away from the selected main part. -## Avatar button +### Avatar button The avatar button is optional. It shows information about the logged-in user. When collapsed it shows only the avatar, and when expanded it shows additional user information. A dropdown menu with user-related actions appears when selecting (note the available actions are specific to each application). The log out item is available by default. **Please note:** Only basic navigation and map navigation still use the avatar in the navigation menu. The new [application](./application.md) frame uses the avatar inside the [application header](./application-header.md). ![Avatar dropdown menu](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1013-70909&mode=design&t=Ch2wsi2EtQ3sPBpS-11) -### Avatar button options -- **top:** Defines the first line of the additional user information. We typically use this to show primary user information (first and last name or username), depending on the available information. Overflows are clipped with an ellipsis (...). -- **bottom:** Defines the second line of additional user information, used to show secondary information, for example user role. Overflows are clipped with an ellipsis (...). -- **initials:** Shows avatar with initials. -- **image:** Shows avatar with images. +#### Avatar button options + +- **top:** Defines the first line of the additional user information. We typically use this to show primary user information (first and last name or username), depending on the available information. Overflows are clipped with an ellipsis (...). +- **bottom:** Defines the second line of additional user information, used to show secondary information, for example user role. Overflows are clipped with an ellipsis (...). +- **initials:** Shows avatar with initials. +- **image:** Shows avatar with images. + +### Menu item and menu category -## Menu item and menu category -Menu items represent the main parts of an application. They have an icon for quick visual identification. When the navigation menu is expanded, the full name of the item is visible. +Menu items represent the main parts of an application. They have an icon for quick visual identification. When the navigation menu is expanded, the full name of the item is visible. Menu categories can host menu items as a second navigation level. @@ -31,7 +35,7 @@ Menu categories can host menu items as a second navigation level. 1. Selected item 2. Item with notification 3. Unselected item -4. Menu category, holds menu items as a second level navigation (on selection, the second level items appear) +4. Menu category, holds menu items as a second level navigation (on selection, the second level items appear) 5. Second level navigation menu, appears when navigation menu is collapsed 6. Second level navigation expanded inline, appears when navigation menu is expanded @@ -46,14 +50,13 @@ Second level items with icons in collapsed (9) and expanded (10) navigation menu We usually don’t use icons on the second navigation level as in most cases it won’t add any value for users. But it is allowed to use icons if it helps users to better understand and recognize the items. Don’t mix items with and without icon within a category. -### Options of menu items and menu category +#### Options of menu items and menu category - **Notifications:** Displays a number at the top right corner of the icon (2). +#### Bottom section - -### Bottom section -Items in this section do not navigate away from the current content. They either toggle states, e.g. light and dark mode, or open a layer over the current content. This means users do not lose their current workflow by interacting with these items. +Items in this section do not navigate away from the current content. They either toggle states, e.g. light and dark mode, or open a layer over the current content. This means users do not lose their current workflow by interacting with these items. ![Bottom section icons](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1005-10817&mode=design&t=ljAWsgheUZngQeQG-11) @@ -65,7 +68,7 @@ Items in this section do not navigate away from the current content. They either

-## Navigation menu options +### Navigation menu options - **enableSettings `default: true`:** Shows the settings icon (gear wheel) in the bottom section, it opens the [settings](./settings.md) overlay and the content can be freely defined. - **enableToggleTheme `default: false`:** Shows the theme toggle icon, offers an easy and direct way to toggle between light and dark themes. We don’t typically use this when dedicated theme settings are available elsewhere, e.g. in the settings overlay. @@ -75,7 +78,7 @@ See the code tab for more information and other options available.

-## Behavior +### Behavior ![Navigation menu overflow behavior](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1013-68267&mode=design&t=RG8M7S3eIKxiDqv5-11) @@ -85,7 +88,8 @@ See the code tab for more information and other options available.

-## Dos and Don’ts +### Dos and Don’ts + - Do use icons in second-level navigation items when it helps users to better understand and recognize them - Don’t mix menu items with and without icons within a second-level navigation category - Don’t place non-navigational items in the navigation section diff --git a/packages/documentation/docs/controls/application-frame/_application_code.md b/packages/documentation/docs/controls/application-frame/_application_code.md index 85e0f386d3d..f458267aae1 100644 --- a/packages/documentation/docs/controls/application-frame/_application_code.md +++ b/packages/documentation/docs/controls/application-frame/_application_code.md @@ -3,35 +3,37 @@ import Events from './../../auto-generated/ix-application/events.md'; import Playground from '@site/src/components/PlaygroundV3'; +## Development + 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. The component itself is designed with modularity in mind. It can be seamlessly integrated with other components such as application-header, menu, content and more. This modular approach allows you to mix and match components based on your specific application requirements, providing flexibility and customization options. It's important to note that the application component focuses solely on layouting and does not dictate visual design. -## Examples +### Examples -### Basic +#### Basic The code snippet below shows an example of a combination of different components, like `ix-application-header` or `ix-content`. - + -### Breakpoints +#### Breakpoints - + -### Application switch +#### Application switch The navigation to another application is implemented via `window.open` (https://developer.mozilla.org/en-US/docs/Web/API/Window/open). Therefore you can control if the navigation should happen inside the current browser context `target: '_self'` or inside a new tab `target: '_blank'` (more information about target can be found [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)) @@ -47,19 +49,19 @@ The navigation to another application is implemented via `window.open` (https:// } ``` - + -## API +### API -### Props +#### Props -### Events +#### Events diff --git a/packages/documentation/docs/controls/application-frame/_application_styleguide.md b/packages/documentation/docs/controls/application-frame/_application_styleguide.md index 49bb0aaa95f..8b98cdded7f 100644 --- a/packages/documentation/docs/controls/application-frame/_application_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_application_styleguide.md @@ -1,5 +1,6 @@ -Application is a technical and infrastructural component without a direct visual appearance. It lays out the top level app elements like [header](./application-header.md), [navigation menu](./application-menu.md) and [content](./content.md). Furthermore, it controls the breakpoint handling and the theming of an application. +## Guidelines +Application is a technical and infrastructural component without a direct visual appearance. It lays out the top level app elements like [header](./application-header.md), [navigation menu](./application-menu.md) and [content](./content.md). Furthermore, it controls the breakpoint handling and the theming of an application. ### Application switch @@ -12,20 +13,21 @@ Application is a technical and infrastructural component without a direct visual 5. Indicator "open in a new browser tab" 6. Close icon -With the application switch, users can navigate across applications. The interaction control – the application switch button (1) – is in the [application header](./application-header.md). Clicking the button opens a modal (2) with a list of available applications your users can switch to. This list is technically defined in the application component and its content depends on your product strategy. Our lists typically contain applications belonging to a software suite, applications with a similar scope or applications a user has purchased. +With the application switch, users can navigate across applications. The interaction control – the application switch button (1) – is in the [application header](./application-header.md). Clicking the button opens a modal (2) with a list of available applications your users can switch to. This list is technically defined in the application component and its content depends on your product strategy. Our lists typically contain applications belonging to a software suite, applications with a similar scope or applications a user has purchased. -Clicking the current application closes the modal. Clicking another application closes the modal and opens the target application in the same or in a new browser tab, depending on the defined target option. Switching between browser tabs is much faster than loading the applications each time in the same browser tab, however, switching between multiple browser tabs could confuse users. +Clicking the current application closes the modal. Clicking another application closes the modal and opens the target application in the same or in a new browser tab, depending on the defined target option. Switching between browser tabs is much faster than loading the applications each time in the same browser tab, however, switching between multiple browser tabs could confuse users. -We typically avoid opening the same application in multiple browser tabs. Instead, we recommend switching to the browser tab where the application is already open. Nonetheless, be aware this does not work under all circumstances and some browsers cannot support this feature. +We typically avoid opening the same application in multiple browser tabs. Instead, we recommend switching to the browser tab where the application is already open. Nonetheless, be aware this does not work under all circumstances and some browsers cannot support this feature.

- -## Options +### Options - **forceBreakpoint:** Forces a specific breakpoint "lg", "md" or "sm". This can be used to force a specific application behavior that ignores the current browser viewport width. -## Behavior +### Behavior + The application component automatically adapts, by default, to three breakpoints and changes the application layout accordingly: + - "lg" for large screens (min-width 62em) - "md" for medium screens (min-width 48em) - "sm" for small screens (min-width 36em) 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 64a12cb71f5..d65d8a80b59 100644 --- a/packages/documentation/docs/controls/application-frame/_basic-navigation_code.md +++ b/packages/documentation/docs/controls/application-frame/_basic-navigation_code.md @@ -3,33 +3,35 @@ import Events from './../../auto-generated/ix-basic-navigation/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development -### Basic +### Examples - - +#### Basic -### Without header + + +#### Without header - +name="basic-navigation-without-header" +height="30rem" +noMargin +hideInitalCodePreview + +> -## API +### API -### Properties +#### Properties -### Events +#### 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 1b7dbf6df0c..20ee1344917 100644 --- a/packages/documentation/docs/controls/application-frame/_basic-navigation_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_basic-navigation_styleguide.md @@ -1,17 +1,20 @@ import { ApiTableSinceTag } from '@site/src/components/ApiTableTag'; import Playground from '@site/src/components/Demo'; +## Guidelines + Basic navigation is a combination of essential infrastructure components forming the basic application layout structure. Alternatively, the [map navigation](./map-navigation.md) offers an additional but less flexible layout. The new [application](./application.md) component released February 2024 is even more flexible, has a modular approach and introduces new features. Hence, we highly recommend using the new application frame. ![Basic navigation overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=984-33226&mode=design&t=SxUA6AcHswBAiIzi-11) Basic navigation has: + 1. Application header 2. [Navigation menu](./application-menu.md) 3. Application content -### Application header +#### Application header ![Application header](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=987-122161&mode=design&t=SxUA6AcHswBAiIzi-11) @@ -21,33 +24,37 @@ Basic navigation has: The application header (1) typically hosts the brand logo (4) and the application name (5). You can extended it with additional, context-related information by using the pipe character "|" and 2 spaces before and after to separate both. If the application is hosted inside a framework that comes with its own header, you can hide the application header to avoid two headers on top of each other (option: `hideHeader`). The brand identity and the application name is then provided by the framework’s header. +### Options -## Options - **breakpoints:** Defines which breakpoints the basic navigation adapts to: lg (large), md (medium), sm (small). - **hideHeader:** If true, the header component is hidden. - **forceBreakpoint:** This option forces the application to use only one of the available breakpoints. -## Behavior +### Behavior + Basic navigation automatically adapts, by default, to the three breakpoints lg (large), md (medium) and sm (small). Depending on the breakpoint, the behavior of the navigation menu is different. ![Behavior at different breakpoints](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=984-57503&mode=design&t=SxUA6AcHswBAiIzi-11) -### 6. and 7. Breakpoint lg +#### 6. and 7. Breakpoint lg + - `only screen and (min-width: 62em)` - At this breakpoint, the navigation menu and the application content share the available viewport width - Clicking the navigation menu icon expands it permanently until the collapse button is clicked (content width adapts accordingly) -### 8. and 9. Breakpoint md -- `only screen and (min-width: 48em)` +#### 8. and 9. Breakpoint md + +- `only screen and (min-width: 48em)` - Clicking the navigation menu icon expands it temporarily as an overlay - Another click or tap on the content or a navigation item collapses the navigation menu again -### 10. and 11. Breakpoint sm -- `only screen and (min-width: 36em)` +#### 10. and 11. Breakpoint sm + +- `only screen and (min-width: 36em)` - The navigation menu disappears and the icon moves into the application header - Clicking the icon displays the navigation menu as an overlay -### Examples +#### Examples +height="18rem" +noMargin> -## API +### API -### Properties +#### Properties -### Events +#### Events -### Slots +#### Slots - diff --git a/packages/documentation/docs/controls/application-frame/_content_styleguide.md b/packages/documentation/docs/controls/application-frame/_content_styleguide.md index f6a6402a1f4..55e81a6e451 100644 --- a/packages/documentation/docs/controls/application-frame/_content_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_content_styleguide.md @@ -1,5 +1,7 @@ import Tags from './../../auto-generated/ix-content/tags.md'; +## Guidelines + The content component is a simple layout component made for hosting content. ![application content](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1759-25130&mode=design&t=UPXhDWuRHtygtfFI-11) 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 482e2ed6b18..c777e33f382 100644 --- a/packages/documentation/docs/controls/application-frame/_map-navigation_code.md +++ b/packages/documentation/docs/controls/application-frame/_map-navigation_code.md @@ -5,44 +5,46 @@ import EventsOverlay from './../../auto-generated/ix-map-navigation-overlay/even import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development -### Basic +### Examples + +#### Basic - +name="map-navigation" +height="35rem" +oMargin +hideInitalCodePreview + +> -### Custom overlay +#### Custom overlay - +name="map-navigation-overlay" +height="35rem" +noMargin +hideInitalCodePreview + +> -## API (ix-map-navigation) +### API (ix-map-navigation) -### Properties +#### Properties -### Events +#### Events -## API (ix-map-navigation-overlay) +### API (ix-map-navigation-overlay) -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/application-frame/_map-navigation_styleguide.md b/packages/documentation/docs/controls/application-frame/_map-navigation_styleguide.md index 12e0d3949d5..f0f9094d022 100644 --- a/packages/documentation/docs/controls/application-frame/_map-navigation_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_map-navigation_styleguide.md @@ -1,3 +1,5 @@ +## Guidelines + Map navigation is a combination of infrastructural components that form a layout structure to present map-like content (geographical maps, P&I diagrams or other plans). It is supported by a collapsible context panel and an overlay can temporarily present additional information. Map navigation does not offer all features the [basic navigation](./basic-navigation.md) offers. The new [application](./application.md) component released February 2024 is even more flexible, has a modular approach and introduces new features. Hence, we highly recommend using the new application frame. @@ -10,17 +12,17 @@ The new [application](./application.md) component released February 2024 is even 5. Context pane icon: Expands and collapses the context pane 6. Overlay: Shows detailed information of selected objects -### Application header +#### Application header The application header (1) hosts the brand logo and the application name. As this space is limited, we recommend short application names without further information. The application header is placed inside the context panel which means it appears and disappears with the context pane.

-## Behavior +### Behavior Map navigation does not adapt to breakpoints and should only be used on large screens (desktop size). The navigation menu provides a control at the bottom (5) to expand and collapse the context pane. The overlay’s (6) background appears semi-transparent with background blur to emphasize the overlay character. -## Dos and Don’ts +### Dos and Don’ts - Don't use map navigation for typical main-detail use cases, instead use [application](./application.md) frame - Don't use map navigation if you want to support mobile use cases 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 771d22c3473..c9c4e44d523 100644 --- a/packages/documentation/docs/controls/application-frame/_popover-news_code.md +++ b/packages/documentation/docs/controls/application-frame/_popover-news_code.md @@ -3,23 +3,25 @@ import Playground from '@site/src/components/PlaygroundV3'; import Props from './../../auto-generated/ix-menu-about-news/props.md'; import Events from './../../auto-generated/ix-menu-about-news/events.md'; -## Examples +## Development -### Basic +### Examples + +#### Basic - +name="popover-news" +height="30rem" +noMargin + +> -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/application-frame/_popover-news_styleguide.md b/packages/documentation/docs/controls/application-frame/_popover-news_styleguide.md index c9ed624009c..35eadd4a44c 100644 --- a/packages/documentation/docs/controls/application-frame/_popover-news_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_popover-news_styleguide.md @@ -1,3 +1,5 @@ +## Guidelines + Use the popover news component to present news and information when the application starts like release notes, new app features or marketing-related information. For Siemens applications, provide the information within the [About and legal overlay](./about-and-legal.md) as well. ![Popover news](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1013-70517&mode=design&t=Ntzn8IlSOlPey8s5-11) @@ -8,21 +10,24 @@ Use the popover news component to present news and information when the applicat - (4) "Show more" button takes users to another place in the app to learn more about the information given - (5) Spike shows popover origin -## Options +### Options - **label:** Defines the header text of the popover news (1)| - **i18nShowMore:** Adjusts the text of the "Show more" button (4) | - **offsetBottom:** Adjusts the popover position. The spike (5) should point to the info icon. -## Behavior -Unlike a modal, popover news does not prevent users from navigating and interacting with the content. It only overlays the content partially and appears once triggered by the app. As soon as the user closes the popover, it does not appear again until it is re-triggered. Therefore we recommend that the information should be additionally available in the [About and legal overlay](./about-and-legal.md). The popover spike should always point to the information icon so users can find the information again. The `offsetBottom` option can be used to control its exact position. +### Behavior + +Unlike a modal, popover news does not prevent users from navigating and interacting with the content. It only overlays the content partially and appears once triggered by the app. As soon as the user closes the popover, it does not appear again until it is re-triggered. Therefore we recommend that the information should be additionally available in the [About and legal overlay](./about-and-legal.md). The popover spike should always point to the information icon so users can find the information again. The `offsetBottom` option can be used to control its exact position. + +### Dos and Don’ts -## Dos and Don’ts - Do use popover news for "nice to know" information - Don‘t use popover news for essential information a user must read, instead use a [modal](../modal.md) or a [message bar](../messagebar.md) - Don‘t use popover news for system feedback or messages, instead use a [modal](../modal.md) or a [toast message](../toast.md) -## Related patterns +### Related patterns + - [Toast message](../toast.md) - [Modal](../modal.md) - [Message bar](../messagebar.md) diff --git a/packages/documentation/docs/controls/application-frame/_settings_code.md b/packages/documentation/docs/controls/application-frame/_settings_code.md index 2993eda81d4..855b19db687 100644 --- a/packages/documentation/docs/controls/application-frame/_settings_code.md +++ b/packages/documentation/docs/controls/application-frame/_settings_code.md @@ -5,33 +5,35 @@ 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'; -## Examples +## Development -### Basic +### Examples + +#### Basic - +name="settings" +height="30rem" +noMargin + +> -## API (ix-menu-settings) +### API (ix-menu-settings) -### Properties +#### Properties -### Events +#### Events -## API (ix-menu-settings-item) +### API (ix-menu-settings-item) -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/application-frame/_settings_styleguide.md b/packages/documentation/docs/controls/application-frame/_settings_styleguide.md index 3f49a96d438..627550e82c2 100644 --- a/packages/documentation/docs/controls/application-frame/_settings_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_settings_styleguide.md @@ -1,3 +1,5 @@ +## Guidelines + The settings component is an overlay that presents settings in a central location. It appears when users click on the "settings" icon (1). It overlays the current content and closing this overlay brings users back to the original content. ![Settings overlay](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1030-80408&mode=design&t=Ntzn8IlSOlPey8s5-11) @@ -8,11 +10,12 @@ The settings component is an overlay that presents settings in a central locatio - (4) Tabs (optional): navigates through multiple settings categories - (5) Content -## Behavior -The overlay opens on top of the application content. The overlay has a semi-transparent background with a background blur effect to emphasize the overlay character. Closing this overlay brings users back to previous content. +### Behavior + +The overlay opens on top of the application content. The overlay has a semi-transparent background with a background blur effect to emphasize the overlay character. Closing this overlay brings users back to previous content. The overlay can be closed in three ways: + - Use the close button - Click the settings icon again - Click another navigation item - diff --git a/packages/documentation/docs/controls/buttons/_button_code.md b/packages/documentation/docs/controls/buttons/_button_code.md index 9707cd45f4d..dcf70629c72 100644 --- a/packages/documentation/docs/controls/buttons/_button_code.md +++ b/packages/documentation/docs/controls/buttons/_button_code.md @@ -5,16 +5,18 @@ import Events from './../../auto-generated/ix-button/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development -### Primary +### Examples + +#### Primary - +name="buttons" + +> -### Primary Outline +#### Primary Outline :::info @@ -23,12 +25,12 @@ Will be used as **Secondary** in UX context ::: - +name="button-secondary" +hideInitalCodePreview -### Primary Ghost +> + +#### Primary Ghost :::info @@ -37,12 +39,12 @@ Will be used as **Ghost** in UX context ::: - +name="button-ghost" +hideInitalCodePreview + +> -### Secondary +#### Secondary :::info @@ -51,12 +53,12 @@ Will be used as **Grey button** in UX context ::: - +name="button-grey" +hideInitalCodePreview -### Secondary Outline +> + +#### Secondary Outline :::info @@ -65,12 +67,12 @@ Will be used as **Grey secondary** in UX context ::: - +name="button-grey-secondary" +hideInitalCodePreview + +> -### Secondary Ghost +#### Secondary Ghost :::info @@ -79,71 +81,71 @@ Will be used as **Grey ghost** in UX context ::: - +name="button-grey-ghost" +hideInitalCodePreview + +> -### Danger +#### Danger - +name="button-danger" +hideInitalCodePreview -### Danger Outline +> + +#### Danger Outline - +name="button-danger-outline" +hideInitalCodePreview + +> -### Danger Ghost +#### Danger Ghost - +name="button-danger-ghost" +hideInitalCodePreview + +> -### Button group +#### Button group - +name="button-group" +hideInitalCodePreview -### Button with text and icon +> + +#### Button with text and icon - +name="button-text-icon" +hideInitalCodePreview + +> -### Loading button +#### Loading button - +name="button-loading" +hideInitalCodePreview + +> -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/buttons/_button_styleguide.md b/packages/documentation/docs/controls/buttons/_button_styleguide.md index 662e29715fe..c530e21428f 100644 --- a/packages/documentation/docs/controls/buttons/_button_styleguide.md +++ b/packages/documentation/docs/controls/buttons/_button_styleguide.md @@ -1,42 +1,46 @@ -Buttons initiate actions, apply actions to selected objects and activate/deactivate functions. We typically use buttons to trigger an immediate action, and you can place them within dialogs, forms, modal windows and other containers. +## Guidelines + +Buttons initiate actions, apply actions to selected objects and activate/deactivate functions. We typically use buttons to trigger an immediate action, and you can place them within dialogs, forms, modal windows and other containers. ![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1097-5037&mode=design&t=KAxDgJoFX436Uk0b-11) 1. Button label 2. Button icon -## Variants +### Variants - **Primary button:** In our applications, we most often use the primary button variant. - **Secondary button:** The secondary button variant has a grayscale appearance to distinguish it from the primary button. -- **Danger button:** We use the danger button variant to emphasize particularly dangerous, destructive or critical actions that cannot easily be undone. Consider this especially in confirmation dialogs. +- **Danger button:** We use the danger button variant to emphasize particularly dangerous, destructive or critical actions that cannot easily be undone. Consider this especially in confirmation dialogs. + +**Note:** Please be aware that the terms _primary_ and _secondary_ are not used in accordance to common UX terminology for primary, secondary and ghost button. -**Note:** Please be aware that the terms *primary* and *secondary* are not used in accordance to common UX terminology for primary, secondary and ghost button. +### Options -## Options -- **Default:** Use for the most important or most-likely next action within the user interface. These are typically actions that advance the user through a process, such as "Submit", "Save" or "Add". We use these sparingly and recommend only one per layout. These are typically called *primary* buttons in UX. -- **Outline:** Use for standard actions that need to be easily recognizable or for actions supporting the default (primary) action. These could include actions like "Cancel", "Reset" or "Advanced Options". These are typically called *secondary* buttons in UX. +- **Default:** Use for the most important or most-likely next action within the user interface. These are typically actions that advance the user through a process, such as "Submit", "Save" or "Add". We use these sparingly and recommend only one per layout. These are typically called _primary_ buttons in UX. +- **Outline:** Use for standard actions that need to be easily recognizable or for actions supporting the default (primary) action. These could include actions like "Cancel", "Reset" or "Advanced Options". These are typically called _secondary_ buttons in UX. - **Ghost:** Use for actions that are typically not part of the core user journey but serve specialized or conditional purposes. Tertiary buttons can represent actions such as "Advanced settings", "More options", "Help" or "Customize". They may also be used for conditional actions like "Change preferences" or "View details". - **Icon:** Icons can also be displayed with button labels. - **Disabled:** Buttons can be disabled (see also button states). - **Loading:** A loading spinner is displayed on the button. The spinner replaces an icon when available. - **Type:** A submit button is available. Submit buttons are typically used in forms and trigger a submit event. Apply this type to make a submit button more accessible. -## Behavior in context +### Behavior in context + - **Interaction:** Buttons can be triggered by pressing anywhere within the button container. When buttons are focused, they can be triggered by pressing `Space`. -- **Text truncation:** Button labels are not truncated. All text on buttons is one line only. +- **Text truncation:** Button labels are not truncated. All text on buttons is one line only. - **Ellipsis (…):** Ellipsis can be used to indicate that an action requires further input or choice from the user, such as "Save as…" which opens a further list of file types to choose from. Ellipses is typically not used for actions with a subsequent confirmation dialog. - **Alignment:** Buttons can be left-justified or right-justified or fully span a container’s width. -- **Cluster buttons:** Buttons can be clustered in groups based on their relationship. A cluster can contain a mixture of buttons, e.g. a combination of a primary button with two primary ghost buttons. We recommend a minimum distance of `0.5rem` between adjacent buttons, and we typically cluster buttons if actions/functions are related but not excluding each other. Otherwise, consider using a `button group`. +- **Cluster buttons:** Buttons can be clustered in groups based on their relationship. A cluster can contain a mixture of buttons, e.g. a combination of a primary button with two primary ghost buttons. We recommend a minimum distance of `0.5rem` between adjacent buttons, and we typically cluster buttons if actions/functions are related but not excluding each other. Otherwise, consider using a `button group`. - **Button width:** Button width depends on its content. In addition, buttons have a default minimum width of 5rem to lay out common combinations such as "OK" and "Cancel" more harmoniously with equal widths. The minimum width is customizable to accommodate other combinations. -## States +### States Buttons have six states: Default, hover, active, disabled, loading and focused. In a disabled state, buttons are visually displayed but don’t offer any user interaction. ![Button states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=132-13020&mode=design&t=KAxDgJoFX436Uk0b-11) -## Dos and Don’ts +### Dos and Don’ts - Do use short button labels to allow users to quickly scan, understand and remember them (follow our writing style guide for more support) - Do use only one primary (default) button in one visual unit for a clear and singular focus on the main call to action @@ -48,11 +52,9 @@ Buttons have six states: Default, hover, active, disabled, loading and focused. - Don’t rely on standard buttons when many actions/functions are necessary (use dropdown, split or menu buttons or move some functionality to a panel or a dialog) - Don’t use buttons for navigation -## Related patterns +### Related patterns - [Dropdown button](./dropdown-button.md) - [Split button](./split-button.md) - [Toggle button](./toggle-buttons.md) - [Modal](./../modal.md) - - diff --git a/packages/documentation/docs/controls/buttons/_dropdown-button_code.md b/packages/documentation/docs/controls/buttons/_dropdown-button_code.md index 2aa5c3e35fd..6f2437c0adf 100644 --- a/packages/documentation/docs/controls/buttons/_dropdown-button_code.md +++ b/packages/documentation/docs/controls/buttons/_dropdown-button_code.md @@ -3,30 +3,32 @@ import Events from './../../auto-generated/ix-dropdown-button/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development -### Basic +### Examples + +#### Basic - +name="dropdown-button" +height="16rem" + +> -### Icon +#### Icon - +name="dropdown-button-icon" +height="16rem" + +> -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/buttons/_dropdown-button_styleguide.md b/packages/documentation/docs/controls/buttons/_dropdown-button_styleguide.md index 165f759ca07..2041808519e 100644 --- a/packages/documentation/docs/controls/buttons/_dropdown-button_styleguide.md +++ b/packages/documentation/docs/controls/buttons/_dropdown-button_styleguide.md @@ -1,3 +1,5 @@ +## Guidelines + Dropdown buttons are button elements that allow users to select an action from a list of options by clicking on a button and revealing a dropdown. Clicking on one of the exposed options triggers the action. We typically use dropdown buttons when no default action is available. Dropdown buttons typically group similar or related actions. ![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1477-13932&mode=design&t=97WS5dUS2rk3MCp2-11) @@ -9,26 +11,31 @@ Dropdown buttons are button elements that allow users to select an action from a All the variants, options and states of the ix button component apply to the dropdown button. We've listed additional or deviating specifications here. -## Options +### Options + - **Label:** Set a label for the dropdown button. We typically use short labels including verbs. - **Placement:** Define where the dropdown appears when the button is active. Choose between different directions (top, bottom, left, right) and two options for alignment with the button (start, end). When there isn't enough space for the chosen placement, it's automatically corrected. ![Placement example](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1504-2203&mode=design&t=5MYmq6zAbfw7xIkC-11) + 1. Bottom-end placement 2. Bottom-start placement - For options of the dropdown triggered when pressing the button, please refer to our separate dropdown component guide. - The options **loading** and **type** are not available for split buttons. -## States +### States + Dropdown buttons have five states: Default, hover, active, disabled and focused. In an active state, dropdown buttons show a dropdown with the available options. The visual appearance of the states is the same as the ix button component. -## Does and Don'ts +### Does and Don'ts + - Do use dropdown buttons when selecting an option triggers an action - Don't use dropdown buttons when there is a frequent or most-important action (use a standard button or a split button instead) -## Related patterns +### Related patterns + - [Button](button.md) - [Dropdown](../dropdown.md) - [Select](../select.mdx) -- [Split button](split-button.md) +- [Split button](split-button.md) diff --git a/packages/documentation/docs/controls/buttons/_icon-button_code.md b/packages/documentation/docs/controls/buttons/_icon-button_code.md index bb0f15d3b76..9652297bb45 100644 --- a/packages/documentation/docs/controls/buttons/_icon-button_code.md +++ b/packages/documentation/docs/controls/buttons/_icon-button_code.md @@ -3,22 +3,24 @@ import Playground from '@site/src/components/PlaygroundV3'; import Props from './../../auto-generated/ix-icon-button/props.md'; import Events from './../../auto-generated/ix-icon-button/events.md'; -## Examples +## Development -### Basic +### Examples + +#### Basic - +name="button-with-icon" +hideInitalCodePreview + +> -## API (ix-icon-button) +### API (ix-icon-button) -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/buttons/_icon-button_styleguide.md b/packages/documentation/docs/controls/buttons/_icon-button_styleguide.md index b6fe6e032b2..ca167d5b1a3 100644 --- a/packages/documentation/docs/controls/buttons/_icon-button_styleguide.md +++ b/packages/documentation/docs/controls/buttons/_icon-button_styleguide.md @@ -1,4 +1,6 @@ -Icon buttons are button elements containing only an icon and no text. Due to their small size, icon buttons are often used in complex layouts. We only use icon buttons if a well-known icon is available or the meaning of the icon metaphor is clear from the context. +## Guidelines + +Icon buttons are button elements containing only an icon and no text. Due to their small size, icon buttons are often used in complex layouts. We only use icon buttons if a well-known icon is available or the meaning of the icon metaphor is clear from the context. ![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1477-1714&mode=design&t=97WS5dUS2rk3MCp2-1) @@ -7,16 +9,19 @@ Icon buttons are button elements containing only an icon and no text. Due to the All the variants, options and states of the [button](./button.md) component apply to the icon button. We’ve listed additional or deviating specifications here. -## Options +### Options + - **Color:** The color of the icon displayed on an icon button is adjustable. In our applications, we only adjust the icon color when we place icon buttons on backgrounds with a non-standard color to maintain a proper contrast between the elements. - **Oval:** The shape of icon button containers can be adjusted from square to oval. The recommended shape of icon buttons depends on the shape of the parent component. We typically use square icon buttons within rectangular components or in a button cluster, and oval icon buttons within oval components. - **Size:** Icon buttons can have three different sizes. We use the extra small size (12) within very small parent components, the small size (16) within any standard parent components (e.g. to clear the search input) and the default size (24) for standalone applications. -## Dos and Don’ts +### Dos and Don’ts + - Do use icons that have a clear meaning for the user, otherwise use text buttons - Don’t use icon buttons in large numbers, instead use a toolbar - Don’t stretch icon buttons to span a container’s width -## Related patterns +### Related patterns + - [Button](./button.md) diff --git a/packages/documentation/docs/controls/buttons/_link-button_code.md b/packages/documentation/docs/controls/buttons/_link-button_code.md index 4b82fd69c6f..8769c592fd4 100644 --- a/packages/documentation/docs/controls/buttons/_link-button_code.md +++ b/packages/documentation/docs/controls/buttons/_link-button_code.md @@ -4,26 +4,28 @@ import Events from './../../auto-generated/ix-link-button/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development + +### Examples - +name="link-button" + +> -### Disabled +#### Disabled - +name="link-button-disabled" + +> -## API +### API -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/buttons/_link-button_styleguide.md b/packages/documentation/docs/controls/buttons/_link-button_styleguide.md index 3ccab530fce..e66f3f94eb1 100644 --- a/packages/documentation/docs/controls/buttons/_link-button_styleguide.md +++ b/packages/documentation/docs/controls/buttons/_link-button_styleguide.md @@ -1,12 +1,15 @@ -Link buttons are simple button components that lead users to another location within the application or outside of it. Link buttons contain a chevron and a text label. +## Guidelines + +Link buttons are simple button components that lead users to another location within the application or outside of it. Link buttons contain a chevron and a text label. ![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1506-4003&mode=design&t=5MYmq6zAbfw7xIkC-11) 1. Chevron 2. Label -## Options -- **Disabled:** Link buttons can be disabled (see also button states). +### Options + +- **Disabled:** Link buttons can be disabled (see also button states). - **Target:** To define where a link opens, there are four options: | Value | Description | @@ -15,20 +18,25 @@ Link buttons are simple button components that lead users to another location wi | `_blank` | opens the document in a new window/tab | | `_parent` | opens the document in the parent frame | | `_top` | opens the document in the full body of the window | + (Reference: https://www.w3schools.com/html/html_links.asp) + - **URL:** Specify the link destination. -## Behavior in context +### Behavior in context + - **Interaction:** Link buttons can be triggered by pressing anywhere within the button area. When link buttons are focused, they can be triggered by pressing `Enter`. - **Placement:** We typically place link buttons below or next to related content but not within paragraphs. It's also possible to place multiple link buttons on top of each other to create link lists. - **Line length:** Link buttons cannot support line break or text truncation. Link button texts are displayed in one line. If there is not enough space, the complete link text is not visible. -## States +### States + Link buttons take five states: Default, hover, active, disabled and focused. On hover, the link destination is shown. In a disabled state, link buttons are visually displayed but don't offer any user interaction. ![States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1507-9250&mode=design&t=5MYmq6zAbfw7xIkC-11) -## Dos and Don'ts +### Dos and Don'ts + - Do use link buttons for navigation - Don't use link buttons to indicate actions - Don't place link buttons within a paragraph diff --git a/packages/documentation/docs/controls/buttons/_split-button_code.md b/packages/documentation/docs/controls/buttons/_split-button_code.md index e396208a136..564351a2ba0 100644 --- a/packages/documentation/docs/controls/buttons/_split-button_code.md +++ b/packages/documentation/docs/controls/buttons/_split-button_code.md @@ -6,39 +6,41 @@ import ItemEvents from './../../auto-generated/ix-split-button-item/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development + +### Examples - +name="split-button" +height="16rem" + +> -### With icon only +#### With icon only - +name="split-button-icons" +height="16rem" +hideInitalCodePreview + +> -## API (ix-split-button) +### API (ix-split-button) -### Properties +#### Properties -### Events +#### Events -## API (ix-split-button-item) +### API (ix-split-button-item) -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/buttons/_split-button_styleguide.md b/packages/documentation/docs/controls/buttons/_split-button_styleguide.md index d351d243333..b588620a3ca 100644 --- a/packages/documentation/docs/controls/buttons/_split-button_styleguide.md +++ b/packages/documentation/docs/controls/buttons/_split-button_styleguide.md @@ -1,3 +1,5 @@ +## Guidelines + Split buttons are button elements that allow users to either trigger an action with one click or select an action from a list of options. They consist of two parts: a button labeled with text and/or an icon on the left and a dropdown button labeled with an icon on the right. We typically use split buttons when a default action is available but more options need to be offered. Split buttons group similar or related actions. ![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1480-30799&mode=design&t=97WS5dUS2rk3MCp2-11) @@ -10,31 +12,36 @@ Split buttons are button elements that allow users to either trigger an action w All the variants, options and states of the ix button and the ix dropdown button components apply to the split button. We've listed additional or deviating specifications here. -## Options +### Options + - **Disabled:** The disabled option can be applied to the complete component. There is no option to disable each part of the split button independently. - **Label:** Set a label for the button component (left side). We typically use short labels that contain a verb. - **Placement:** Define where the flyout appears which is triggered when the dropdown button is active. You can choose between different directions (top, bottom, left, right) and two options for alignment with the button (start, end). When there is not enough space for the chosen setting, the placement is corrected automatically. ![Placement example](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1504-2203&mode=design&t=5MYmq6zAbfw7xIkC-11) -1. Bottom-end placement -2. Bottom-start placement +1. Bottom-end placement +2. Bottom-start placement - **SplitIcon:** We typically use a chevron icon on the dropdown button, but a custom icon can be set. A common alternative to the chevron is the "more-menu" icon. - The options **loading** and **type** are not available for split buttons. -## Behavior in context +### Behavior in context + - **Interaction:** When users press an option from the dropdown list, the action is triggered. Typically the label of the button on the left side stays static. Be aware that updating the left side with the last triggered action may lead to layout changes (e.g. button width) and requires updating the dropdown by adding the action that was removed from the button face. -## States +### States + Split buttons have five states: Default, hover, active, disabled and focused. States are applied to left and the right part of the split button independently except for the disabled state. The visual appearance and the behavior of the states is the same as the ix button and the ix dropdown button. -## Does and Don'ts +### Does and Don'ts + - Do use split buttons when there is a frequent or most-important action - Don't use split buttons for unrelated actions - Don't duplicate the default option in the dropdown -## Related patterns +### Related patterns + - [Button](button.md) - [Dropdown](../dropdown.md) - [Select](../select.mdx) diff --git a/packages/documentation/docs/controls/buttons/_toggle-button_code.md b/packages/documentation/docs/controls/buttons/_toggle-button_code.md index 0c6fdf152f1..62ca1e0d128 100644 --- a/packages/documentation/docs/controls/buttons/_toggle-button_code.md +++ b/packages/documentation/docs/controls/buttons/_toggle-button_code.md @@ -10,101 +10,103 @@ import TagsToggleButton from './../../auto-generated/ix-toggle-button/tags.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Examples +## Development -### Toggle button primary +### Examples + +#### Toggle button primary - +name="toggle-button-primary" + +> -### Toggle button primary outline +#### Toggle button primary outline - +name="toggle-button-primary-outline" + +> -### Toggle button primary ghost +#### Toggle button primary ghost - +name="toggle-button-primary-ghost" -### Toggle button secondary +> + +#### Toggle button secondary - +name="toggle-button-secondary" + +> -### Toggle button secondary outline +#### Toggle button secondary outline - +name="toggle-button-secondary-outline" + +> -### Toggle button secondary ghost +#### Toggle button secondary ghost - +name="toggle-button-secondary-ghost" -### Icon Toggle button secondary outline +> + +#### Icon Toggle button secondary outline - +name="icon-toggle-button-secondary-outline" + +> -### Icon Toggle button secondary ghost +#### Icon Toggle button secondary ghost - +name="icon-toggle-button-secondary-ghost" + +> -### Icon Toggle Button secondary +#### Icon Toggle Button secondary - +name="icon-toggle-button-secondary" -### Icon Toggle button primary outline +> + +#### Icon Toggle button primary outline - +name="icon-toggle-button-primary-outline" + +> -### Icon Toggle Button primary ghost +#### Icon Toggle Button primary ghost - +name="icon-toggle-button-primary-ghost" + +> -## API (ix-toggle-button) +### API (ix-toggle-button) -### Properties +#### Properties -### Events +#### Events -## API (ix-icon-toggle-button) +### API (ix-icon-toggle-button) -### Properties +#### Properties -### Events +#### Events diff --git a/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md b/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md index 4164d5317fa..8c9fb88cf8d 100644 --- a/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md +++ b/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md @@ -1,25 +1,31 @@ -Toggle buttons are button elements which allow the user to activate/deactivate a function. Toggle buttons with and without text labels are available. We typically use toggle buttons within button groups when users can chose between more than two options or when two available options don't follow the on/off metaphor. +## Guidelines + +Toggle buttons are button elements which allow the user to activate/deactivate a function. Toggle buttons with and without text labels are available. We typically use toggle buttons within button groups when users can chose between more than two options or when two available options don't follow the on/off metaphor. ![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1480-33046&mode=design&t=iUJlfIvOwhKY3qk9-4) Variants, options and states of the ix button and the ix icon button components apply. Only additional, deviating or detailing specifications are listed here. -## Options +### Options + - **Pressed:** Toggle buttons can take a pressed (active) state. To improve accessibility, this state is set via the pressed option so it can be read by screen readers. - The options **type** and **color** are not available for toggle buttons. - For the primary variant, one of the options **outline** or **ghost** has to be set. -## Behavior in context +### Behavior in context + - **Button groups:** We often place toggle buttons in button groups. Typically, only one button within the group is pressed while the others take the default state. -## States +### States + Toggle buttons have five states: Default, hover, active, disabled, loading and focused. All states are also available for pressed toggled buttons. -## Dos and Don'ts +### Dos and Don'ts + - Do use toggle buttons when users can switch between more than two exclusive options - Do use toggle buttons when two opposing options don't follow the on/off metaphor -## Related patterns +### Related patterns - [Button](button.md) - [Icon button](icon-button.md) diff --git a/packages/documentation/docs/controls/forms/_forms-validation_code.mdx b/packages/documentation/docs/controls/forms/_forms-validation_code.mdx index 376d9fbf674..523a650469b 100644 --- a/packages/documentation/docs/controls/forms/_forms-validation_code.mdx +++ b/packages/documentation/docs/controls/forms/_forms-validation_code.mdx @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import Props from '@site/docs/auto-generated/ix-validation-tooltip/props.md'; -## Code +## Development All components which are tagged via `form-ready` are usable inside a `form` without requiring manual integration. diff --git a/packages/documentation/docs/controls/forms/_forms-validation_style.md b/packages/documentation/docs/controls/forms/_forms-validation_style.md index e8d4f65acf3..774e1687870 100644 --- a/packages/documentation/docs/controls/forms/_forms-validation_style.md +++ b/packages/documentation/docs/controls/forms/_forms-validation_style.md @@ -1,4 +1,4 @@ -## Style +## Guidelines Form validation gives users feedback on their input to ensure accurate, consistent data is submitted. When requirements are not met or data is incorrect, it’s rejected. diff --git a/packages/documentation/docs/guidelines/_theme-switching_code.md b/packages/documentation/docs/guidelines/_theme-switching_code.md index ab6c659971f..eafc6c551fe 100644 --- a/packages/documentation/docs/guidelines/_theme-switching_code.md +++ b/packages/documentation/docs/guidelines/_theme-switching_code.md @@ -1,15 +1,16 @@ import { ApiTableSinceTag } from '@site/src/components/ApiTableTag'; import PlaygroundV3 from '@site/src/components/PlaygroundV3'; -# Theme switching +## Development -## Working with themes during runtime +### Theme switching + +#### Working with themes during runtime - +name="theme-switcher" +height="15rem" + +> diff --git a/packages/documentation/docs/guidelines/_theme-switching_styleguide.md b/packages/documentation/docs/guidelines/_theme-switching_styleguide.md index d0185305c15..488cf4858ea 100644 --- a/packages/documentation/docs/guidelines/_theme-switching_styleguide.md +++ b/packages/documentation/docs/guidelines/_theme-switching_styleguide.md @@ -1,25 +1,28 @@ -# Selecting a theme for designing +## Guidelines + +### Selecting a theme for designing When working with our Figma library, you can apply a theme to either an entire page or an individual element, such as a frame or component: ![Applying a theme](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2232-192&mode=design&t=C6IjeY71MP4uA7vZ-4) -## Applying one theme to a whole page + +#### Applying one theme to a whole page 1. First ensure there are no selected elements on the page by pressing the "Esc" key to deselect them. 2. Click the button with the hexagon in the right panel on the right side of the "Page" section to open the theme selection dropdown. -3. Select from the dropdown the desired theme colors to apply to the entire page. +3. Select from the dropdown the desired theme colors to apply to the entire page. -## Applying one theme to an element +#### Applying one theme to an element 1. Select the specific element (such as a frame or component) you want to apply a theme to. 2. Click the button with the hexagon in the right panel on the right side of the "Layer" section to open the theme selection dropdown. -3. Select from the dropdown the desired theme colors to apply to the selected element. +3. Select from the dropdown the desired theme colors to apply to the selected element. Note: When applying a theme to an individual element, it overrides the page-level theme. For more information see the official [Figma documentation](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma). -# Changing theme variables +### Changing theme variables ![Changing theme variables](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2232-101&mode=design&t=C6IjeY71MP4uA7vZ-4) diff --git a/packages/documentation/docs/icon-library/_icon_code.md b/packages/documentation/docs/icon-library/_icon_code.md index 5a980177e7d..d9ef8589b82 100644 --- a/packages/documentation/docs/icon-library/_icon_code.md +++ b/packages/documentation/docs/icon-library/_icon_code.md @@ -1,8 +1,10 @@ import Icons from '@site/src/components/Icons'; -## Usage +## Development -### Angular +### Usage + +#### Angular ```html @@ -10,7 +12,7 @@ import Icons from '@site/src/components/Icons'; ``` -### React +#### React ```html @@ -18,7 +20,7 @@ import Icons from '@site/src/components/Icons'; ``` -### Web components +#### Web components ```html @@ -26,7 +28,7 @@ import Icons from '@site/src/components/Icons'; ``` -### Vue +#### Vue ```html @@ -34,9 +36,10 @@ import Icons from '@site/src/components/Icons'; ``` -## Integrate external icons +### Integrate external icons + +#### Technical requirements -### Technical requirements - Supported icon format is SVG - Each icon is a single SVG file, Sprites are not supported yet - The icon has a size of 512✕512 (width, height and viewBox) @@ -49,10 +52,10 @@ import Icons from '@site/src/components/Icons'; ``` -### Internal SVG structure +#### Internal SVG structure The provided SVG icons are graphic resources whose code is mostly generated by design applications such as Figma, Sketch or Adobe Illustrator. The tools use different export routines, which can also change over time. We therefore cannot guarantee that the internal structure of an SVG will be preserved after updates – even if the icons remain visually the same. -## Icon library +### Icon library diff --git a/packages/documentation/docs/icon-library/_icon_styleguide.md b/packages/documentation/docs/icon-library/_icon_styleguide.md index d2779e98280..355e9228ede 100644 --- a/packages/documentation/docs/icon-library/_icon_styleguide.md +++ b/packages/documentation/docs/icon-library/_icon_styleguide.md @@ -1,17 +1,19 @@ +## Guidelines + +## Icons -# Icons - The following section is about in-app icons, used in the actual application UI and UI elements. It is not about application icons, that usually appear on a launch pad, home screen, desktop, task bar or the like. -## Usage +### Usage Icons are graphical representations of terms, functions, objects etc.. Ideally, they are used together with a descriptive text to make it easier for users to learn their meaning. A standalone icon, without textual description, has to be paired with a tooltip that describes the meaning of the icon. Make sure a description can be read out by screen readers. -## Icon library +### Icon library The Siemens Industrial Experience design system comes with an extensive set of icons made for the industrial context. Since it is almost impossible to cover every thinkable icon usecase, it is also possible to integrate external icons to complement the icon set. -## Designing new icons +### Designing new icons + Before you start designing your specific icon set for your application, consider the following: - Make sure the icons you need are not already in the library @@ -26,56 +28,59 @@ Before you start designing your specific icon set for your application, consider - Finally: Entrust a professional designer with the task of designing an icon -### Technical requirements +#### Technical requirements + Icons in our design system are monochromatic. They will be colored during runtime, depending on the context they are being used in. For more technical requirements see the "Code" tab above. -### Formal requirements -New icons should follow the app icon guidelines below for a consistent look & feel across applications. For Siemens applications it is mandatory to follow these guidelines. +#### Formal requirements +New icons should follow the app icon guidelines below for a consistent look & feel across applications. For Siemens applications it is mandatory to follow these guidelines. -# Icon design guidelines +## Icon design guidelines These guidelines extend the basic guidelines on [Siemens brandville](https://brandville.siemens.com/en/design-elements/icons/ui-icons). -## 1. Icon grid size +### 1. Icon grid size + - The basic icon grid size is 24✕24 ![Basic grid](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=801-253&mode=design&t=LqIxNidruCmTfYDF-4) -## 2. In-app icon design grid +### 2. In-app icon design grid + - Use the design grid component “Icon Design Grid” from the “Assets” library as background for creating new icons - The design grid helps to limit the icon boundaries to achieve an evenly optical weight of different icon shapes - The clearance zone (red area) should not be touched by the icon (for exceptions see below) - The lines represent the boundaries of key shapes or just mark the center ![In-app icon design grid](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=801-856&mode=design&t=LqIxNidruCmTfYDF-4) - Use the portrait key shape for vertically oriented shapes -![Portrait key shapes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=802-17540&mode=design&t=LqIxNidruCmTfYDF-4) + ![Portrait key shapes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=802-17540&mode=design&t=LqIxNidruCmTfYDF-4) - Use the landscape key shape for horizontally oriented shapes -![Landscape key shapes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=802-19334&mode=design&t=LqIxNidruCmTfYDF-4) + ![Landscape key shapes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=802-19334&mode=design&t=LqIxNidruCmTfYDF-4) - Use the square key shape for square icons -![Square key shapes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=802-23090&mode=design&t=LqIxNidruCmTfYDF-4) + ![Square key shapes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=802-23090&mode=design&t=LqIxNidruCmTfYDF-4) - Use the circle key shape for round icons -![Circle key shapes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=802-23091&mode=design&t=LqIxNidruCmTfYDF-4) + ![Circle key shapes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=802-23091&mode=design&t=LqIxNidruCmTfYDF-4) -### Exceptions to the clearance zone +#### Exceptions to the clearance zone - Icons with attributes: Icons can be enhanced with attributes. These attributes are allowed to touch the clearance zone but should keep at least 1px space to the outer boundary -![Exception 1: icon attributes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=802-23092&mode=design&t=LqIxNidruCmTfYDF-4) + ![Exception 1: icon attributes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=802-23092&mode=design&t=LqIxNidruCmTfYDF-4) - Optical fixes: Shapes are allowed to touch the clearance zone to equalize visual effects with pointed shapes or single strokes -![Exception 2: optical fixes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=802-23093&mode=design&t=LqIxNidruCmTfYDF-4) + ![Exception 2: optical fixes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=802-23093&mode=design&t=LqIxNidruCmTfYDF-4) -## 3. Light weight icons +### 3. Light weight icons - Prefer strokes and outlines over filled shapes - Please provide a filled variant of the icon as well, where possible and potentially useful. It can be used in situations when more visual weight is required. The filled variant gets the name suffix “-filled”. ![Normal and filled variant](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=808-23094&mode=design&t=LqIxNidruCmTfYDF-4) -## 4. Simple and geometric +### 4. Simple and geometric - Keep icons as simple as possible - Avoid complex symbols or symbol combinations whenever possible @@ -85,14 +90,14 @@ These guidelines extend the basic guidelines on [Siemens brandville](https://bra ![Simple and geometric shapes](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=808-23095&mode=design&t=LqIxNidruCmTfYDF-4) -## 5. Stroke widths +### 5. Stroke widths - Default stroke width is 2px - In case icon readability can't be guaranteed otherwise, stroke widths of 1.5px or even 1x are also allowed. Before doing that please make sure all rules from section 4 are followed. ![Stroke widths](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=809-23096&mode=design&t=LqIxNidruCmTfYDF-4) -## 6. Gaps +### 6. Gaps - Anti-aliasing effects can lead to blurry borders and edges - Use 2px gaps to visually separate two shapes from each other @@ -100,7 +105,7 @@ These guidelines extend the basic guidelines on [Siemens brandville](https://bra ![Gaps and unsafe pattern](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=809-23097&mode=design&t=LqIxNidruCmTfYDF-4) -## 7. Strikethrough, cuts and cutouts +### 7. Strikethrough, cuts and cutouts - A diagonal strikethrough is used to symbolize the opposite of an icon or an unavailability (e.g. show & hide, switch off alarm) - A diagonal strikethrough starts from top left and ends at the bottom right (refers to the crossbar of letter “N” for “No”), followed by a 2px space above right @@ -108,22 +113,25 @@ These guidelines extend the basic guidelines on [Siemens brandville](https://bra ![Strikethroughs and gaps](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=810-23098&mode=design&t=LqIxNidruCmTfYDF-4) -## 8. The technical finish +### 8. The technical finish + +#### Prepare your icon for integration -### Prepare your icon for integration - The icon size (including clearance zone) must be 24x24 - The icon must not contain strokes (convert all strokes to outlines) - Combine all icon parts to one single shape by using boolean operations - Name the remaining shape “Vector”, otherwise color overrides will not work properly in Figma - Make sure the shape is set to “Scale” in the “Constraints” settings in Figma, otherwise the resizing will not work properly -### Integrate in Figma +#### Integrate in Figma + - Create a component from your icon - Use a short, descriptive and unique name - also consider adding a project or application suffix to the icon name to prevent naming collisions with other external icons - "Publish" the document with your icon(s) and it will be available as library in your document assets - Activate your library in the design document -### Export for development +#### Export for development + - Create an instance of your icon (this can be done in the same document the icon is stored in) - Resize this instance to 512×512 (target size for development integration) - Check if the scaling works properly (check scaling settings, if not) From 0e37bed9934a5da663b113e7f74d97d69c3d528d Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Fri, 15 Nov 2024 15:22:16 +0100 Subject: [PATCH 16/26] docs(validation-legacy): adjust example height --- packages/documentation/docs/legacy/validation.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/legacy/validation.mdx b/packages/documentation/docs/legacy/validation.mdx index 80f19116ae2..d511eda80de 100644 --- a/packages/documentation/docs/legacy/validation.mdx +++ b/packages/documentation/docs/legacy/validation.mdx @@ -26,7 +26,7 @@ In the following examples section you will find different implementations of a f ## API From b101d39e9184a48cfb2e0226aeab78890788d61d Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Mon, 18 Nov 2024 10:28:18 +0100 Subject: [PATCH 17/26] docs(select): add since tag to validation example --- packages/documentation/docs/controls/_select_code.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/documentation/docs/controls/_select_code.mdx b/packages/documentation/docs/controls/_select_code.mdx index e2c328c205a..7d87cb9bb88 100644 --- a/packages/documentation/docs/controls/_select_code.mdx +++ b/packages/documentation/docs/controls/_select_code.mdx @@ -6,6 +6,7 @@ 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/PlaygroundV3'; +import { ApiTableSinceTag } from '@site/src/components/ApiTableTag'; ## Development @@ -33,6 +34,8 @@ import Playground from '@site/src/components/PlaygroundV3'; #### Validation + + Date: Tue, 19 Nov 2024 13:52:51 +0100 Subject: [PATCH 18/26] docs(forms): reorder form chapters (#1565) --- .../docs/controls/forms/_forms-field_code.mdx | 44 +++++++++++ .../controls/forms/_forms-field_style.mdx | 57 +++++++++++++++ .../controls/forms/_forms-layout_code.mdx | 69 ++++++++++++++++++ .../controls/forms/_forms-layout_style.mdx | 36 +++++++++ .../controls/forms/_forms-validation_code.mdx | 73 +------------------ .../docs/controls/forms/forms-field.md | 62 +++------------- .../docs/controls/forms/forms-layout.md | 42 +++-------- 7 files changed, 228 insertions(+), 155 deletions(-) create mode 100644 packages/documentation/docs/controls/forms/_forms-field_code.mdx create mode 100644 packages/documentation/docs/controls/forms/_forms-field_style.mdx create mode 100644 packages/documentation/docs/controls/forms/_forms-layout_code.mdx create mode 100644 packages/documentation/docs/controls/forms/_forms-layout_style.mdx diff --git a/packages/documentation/docs/controls/forms/_forms-field_code.mdx b/packages/documentation/docs/controls/forms/_forms-field_code.mdx new file mode 100644 index 00000000000..a7043371bd4 --- /dev/null +++ b/packages/documentation/docs/controls/forms/_forms-field_code.mdx @@ -0,0 +1,44 @@ +import Admonition from '@theme/Admonition'; +import Playground, { + SourceCodePreview, +} from '@site/src/components/PlaygroundV2'; +import StackblitzEmbedded from '@site/src/components/StackblitzEmbedded'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import Props from '@site/docs/auto-generated/ix-validation-tooltip/props.md'; + +## Development + +All components which are tagged via `form-ready` are usable inside a `form` without requiring manual integration. + +### Label + +Each `form-ready` component includes a `label` attribute that displays a label above the component. + +```html + +``` + +The `label` attribute is optional and can be left empty to display no label. + +### Required indicator + +To display an indicator whether a field is required, use the attribute `required`. The indicator is only displayed, when a label is set. + +```html + +``` + + +### Helper or validation text + +To display a helper or validation text below your component please refer to [validation](forms-validation.mdx). + + +### Counter + +To display a counter on inputs or textareas, use the attribute `maxLength`. + +```html + +``` diff --git a/packages/documentation/docs/controls/forms/_forms-field_style.mdx b/packages/documentation/docs/controls/forms/_forms-field_style.mdx new file mode 100644 index 00000000000..567695c01df --- /dev/null +++ b/packages/documentation/docs/controls/forms/_forms-field_style.mdx @@ -0,0 +1,57 @@ +## Guidelines + +A field is a form element when user input is needed. It's typically used with other form elements in a fieldset. + +![Field](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-323&t=pKzFQBhaXmjTsR8P-4) + +1. Label +2. Form component +3. Helper text +4. Required indicator +5. Counter (input and textarea field only) + +**Note:** In this chapter, we describe the default field component. For details about [custom fields](../custom-field.mdx), refer to the [layouts](forms-layout.md) chapter. + +## Options + +- **Label:** Add a label for the field that provides context to your users. +- **Required:** The asterisk states whether user input is required on the field before submitting the form. +- **Field:** Use the appropriate field based on the type of input data, e.g. use [text inputs](../input.mdx) for text-based data, [checkboxes](../checkbox.mdx) for selecting from a list of predefined options, or [toggle switches](../toggle.mdx) for a binary choice. +- **Helper text:** Use to help users understand the field better. We typically use this when there are input restrictions or more information is required. +- **Show text as tooltip:** Display validation feedback either below the input field or as tooltip when the user hovers or focuses on the form field. Use a different text for the individual validation states that apply (see [validation](forms-validation.mdx)). +- **Counter:** Use a counter to show the number of characters entered into the field and the maximum number of characters allowed. We typically use it for [text input](../input.mdx) or [textarea](../textarea.mdx) fields. + +## Behavior in context + +- **Interaction:** See [validation](forms-validation.mdx). +- **Behavior of a field as part of a form:** See [behavior](forms-validation.mdx). +- **Text truncation:** Labels, feedback and helper texts are not truncated but break into multiple lines if they exceed the field's width. + +## States + +Interaction states: Default, hover, active, disabled, readonly, focus. + +When a feedback tooltip is chosen over a message, the field shows a tooltip when in focus or hovered over in specific validation states. + +![States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-12426&t=pKzFQBhaXmjTsR8P-4) + +**Note:** There are also several validation states (default, valid, info, warning, invalid) that are described in [validation](forms-validation.mdx). + +## Dos and Don’ts + +- Do use a label for every field +- Do use a counter for fields with a character limit +- Do use helper text to provide additional information or context about the field +- Don’t use helper text as a replacement for clear labels +- Don’t mix different variants of feedback text and tooltips + +## Related patterns + +- [Validation](forms-validation.mdx) +- [Behavior](forms-behavior.md) +- [Input](../input.mdx) +- [Textarea](../textarea.mdx) +- [Select](../select.mdx) +- [Checkbox](../checkbox.mdx) +- [Radio button](../radio.mdx) +- [Toggle switch](../toggle.mdx) diff --git a/packages/documentation/docs/controls/forms/_forms-layout_code.mdx b/packages/documentation/docs/controls/forms/_forms-layout_code.mdx new file mode 100644 index 00000000000..53aeff9e81c --- /dev/null +++ b/packages/documentation/docs/controls/forms/_forms-layout_code.mdx @@ -0,0 +1,69 @@ +import Admonition from '@theme/Admonition'; +import Playground, { + SourceCodePreview, +} from '@site/src/components/PlaygroundV2'; +import StackblitzEmbedded from '@site/src/components/StackblitzEmbedded'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import Props from '@site/docs/auto-generated/ix-validation-tooltip/props.md'; + +## Development + +### Using custom layout + +To align `form-ready` components in a complex form layout, you typically omit the `label` attribute and define the label +as an `ix-field-label` component. + +You can follow the example here: + +1. Define the `ix-input` component including an `id` attribute. + +```html + +``` + +2. Define an `ix-field-label` component with a `for` attribute to link the label to the `ix-input` component. + +```html +Test +``` + +3. Define an `ix-helper-text` component with a `for` attribute to link the helper text to the `ix-input` component. + +```html + +``` + +### Using ix-layout-form + +```html +
+ + + + Example + + + + + + + + Example + + + + + + +
+``` + + diff --git a/packages/documentation/docs/controls/forms/_forms-layout_style.mdx b/packages/documentation/docs/controls/forms/_forms-layout_style.mdx new file mode 100644 index 00000000000..f30bdf50e0f --- /dev/null +++ b/packages/documentation/docs/controls/forms/_forms-layout_style.mdx @@ -0,0 +1,36 @@ +## Guidelines + +Effective form layouts play a crucial role in usability. Well-structured forms include fieldsets, considering the hierarchy of information, and understanding how to strike the right balance between aesthetics and functionality. + +![Form layout examples](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3046-516&t=kneyH2DQ9aKpFhdv-4) + +1. Small form (modal) +2. Medium form +3. Big form (page) + +### Structuring a form + +Effective ways to organize form elements enhance user comprehension and interaction within your forms: + +- **Single-column layout:** Ideal for short forms with a few fields or small viewports. +- **Multi-column layout:** Suitable for long forms with multiple fields to save vertical space. Use a [layout grid](../layout-grid.md) or flexbox to align fields. +- **Tabbed layout:** Use [tabs](../tabs.md) to break up long forms into manageable sections. This helps users focus on one part of the form at a time. +- **Stepped layout:** Use our workflow pattern to guide users through multi-step forms. +- **Fieldset:** Group related fields together using fieldsets. This helps users understand the context of the information they are providing. Add a legend (title) to describe the field group. +- **Section heading:** Use section headings to break up long forms into manageable sections. This helps users focus on one part of the form at a time. +- **Blind:** Use a [blind](../blind.md) to hide optional fields and reveal them when the user selects a specific option. + +### Best practice + +- **Z and F shape pattern:** Follow natural reading patterns, for example left to right, to guide users through the form. Consider a clear order of fields to ensure users don’t forget to fill in fields and improve data quality. +- **Button alignment:** Position primary action buttons, e.g. submit and cancel consistently. We recommend: - Bottom left: Short forms (up to 5 fields) - Bottom right: Long forms (more than 5 fields) - Bottom right and sticky: Long forms that are already filled in (e.g. edit) with a large number of fields + %% - Top right: ??? %% +- **Label alignment:** By default, the label is positioned above its input field. Use a custom field component for long forms with a lot of fields to position the label on the left (which saves vertical space). +- **Grouping fields:** In some cases, it makes sense to combine multiple fields in one [custom field](../custom-field.mdx) with a single label that are connected contextually or through validation, e.g. entering the value and unit of an entity, selecting start and end date. It allows a clearer validation, e.g. the end date must be after the start date. +- **Field width:** Use a consistent width for input fields to create a harmonious layout. For example, use a width of 100% for full-width fields and 50% for two-column fields. + %% - **Responsive behavior**: xxx - Layout grid or flexbox - should I use 1 or 2 columns? %% + +### Related patterns + +- [Validation](forms-validation.mdx) +- [Behavior](forms-behavior.md) diff --git a/packages/documentation/docs/controls/forms/_forms-validation_code.mdx b/packages/documentation/docs/controls/forms/_forms-validation_code.mdx index 523a650469b..73cd9939bb3 100644 --- a/packages/documentation/docs/controls/forms/_forms-validation_code.mdx +++ b/packages/documentation/docs/controls/forms/_forms-validation_code.mdx @@ -9,76 +9,7 @@ import Props from '@site/docs/auto-generated/ix-validation-tooltip/props.md'; ## Development -All components which are tagged via `form-ready` are usable inside a `form` without requiring manual integration. - -### Label - -Each `form-ready` component includes a `label` attribute that displays a label above the component. - -```html - -``` - -The `label` attribute is optional and can be left empty to display no label. - -### Form layouting - -#### Using custom layout - -To align `form-ready` components in a complex form layout, you typically omit the `label` attribute and define the label -as an `ix-field-label` component. - -You can follow the example here: - -1. Define the `ix-input` component including an `id` attribute. - -```html - -``` - -2. Define an `ix-field-label` component with a `for` attribute to link the label to the `ix-input` component. - -```html -Test -``` - -3. Define an `ix-helper-text` component with a `for` attribute to link the helper text to the `ix-input` component. - -```html - -``` - -#### Using `ix-layout-form` - -```html -
- - - - Example - - - - - - - - Example - - - - - - -
-``` +This section details the technical implementation of validation in form components, utilizing component attributes along with corresponding CSS classes to represent various validation states. ### Validation text @@ -100,7 +31,7 @@ To change the validation representation, you have to apply the corresponding cla These classes have different priority levels, which determining in which order the styling is applied to the component. (`1` is the lowest priority and `3` the highest) -e.g +#### Example ```html diff --git a/packages/documentation/docs/controls/forms/forms-field.md b/packages/documentation/docs/controls/forms/forms-field.md index c18c0de77ec..627abd283f6 100644 --- a/packages/documentation/docs/controls/forms/forms-field.md +++ b/packages/documentation/docs/controls/forms/forms-field.md @@ -1,61 +1,19 @@ --- -sidebar_position: 2 +sidebar_position: 1 --- -# Field - -A field is a form element when user input is needed. It's typically used with other form elements in a fieldset. - -![Field](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-323&t=pKzFQBhaXmjTsR8P-4) - -1. Label -2. Form component -3. Helper text -4. Required indicator -5. Counter (input and textarea field only) - -**Note:** In this chapter, we describe the default field component. For details about [custom fields](../custom-field.mdx), refer to the [layouts](forms-layout.md) chapter. - -## Options - -- **Label:** Add a label for the field that provides context to your users. -- **Required:** The asterisk states whether user input is required on the field before submitting the form. -- **Field:** Use the appropriate field based on the type of input data, e.g. use [text inputs](../input.mdx) for text-based data, [checkboxes](../checkbox.mdx) for selecting from a list of predefined options, or [toggle switches](../toggle.mdx) for a binary choice. -- **Helper text:** Use to help users understand the field better. We typically use this when there are input restrictions or more information is required. -- **Show text as tooltip:** Display validation feedback either below the input field or as tooltip when the user hovers or focuses on the form field. Use a different text for the individual validation states that apply (see [validation](forms-validation.mdx)). -- **Counter:** Use a counter to show the number of characters entered into the field and the maximum number of characters allowed. We typically use it for [text input](../input.mdx) or [textarea](../textarea.mdx) fields. +import LinkableDocsTabs from "../../../src/components/LinkableDocsTabs"; -## Behavior in context +import DocsUx from './\_forms-field_style.mdx' +import DocsCode from './\_forms-field_code.mdx' -- **Interaction:** See [validation](forms-validation.mdx). -- **Behavior of a field as part of a form:** See [behavior](forms-validation.mdx). -- **Text truncation:** Labels, feedback and helper texts are not truncated but break into multiple lines if they exceed the field's width. +import DeprecatedTags from '@site/src/components/Tags'; -## States - -Interaction states: Default, hover, active, disabled, readonly, focus. - -When a feedback tooltip is chosen over a message, the field shows a tooltip when in focus or hovered over in specific validation states. - -![States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-12426&t=pKzFQBhaXmjTsR8P-4) - -**Note:** There are also several validation states (default, valid, info, warning, invalid) that are described in [validation](forms-validation.mdx). - -## Dos and Don’ts +# Field -- Do use a label for every field -- Do use a counter for fields with a character limit -- Do use helper text to provide additional information or context about the field -- Don’t use helper text as a replacement for clear labels -- Don’t mix different variants of feedback text and tooltips -## Related patterns + + + + -- [Validation](forms-validation.mdx) -- [Behavior](forms-behavior.md) -- [Input](../input.mdx) -- [Textarea](../textarea.mdx) -- [Select](../select.mdx) -- [Checkbox](../checkbox.mdx) -- [Radio button](../radio.mdx) -- [Toggle switch](../toggle.mdx) diff --git a/packages/documentation/docs/controls/forms/forms-layout.md b/packages/documentation/docs/controls/forms/forms-layout.md index 8e670f777a1..03bb2eebe2d 100644 --- a/packages/documentation/docs/controls/forms/forms-layout.md +++ b/packages/documentation/docs/controls/forms/forms-layout.md @@ -1,40 +1,18 @@ --- -sidebar_position: 1 +sidebar_position: 2 --- -# Layout - -Effective form layouts play a crucial role in usability. Well-structured forms include fieldsets, considering the hierarchy of information, and understanding how to strike the right balance between aesthetics and functionality. - -![Form layout examples](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3046-516&t=kneyH2DQ9aKpFhdv-4) - -1. Small form (modal) -2. Medium form -3. Big form (page) +import LinkableDocsTabs from "../../../src/components/LinkableDocsTabs"; -## Structuring a form +import DocsUx from './\_forms-layout_style.mdx' +import DocsCode from './\_forms-layout_code.mdx' -Effective ways to organize form elements enhance user comprehension and interaction within your forms: +import DeprecatedTags from '@site/src/components/Tags'; -- **Single-column layout:** Ideal for short forms with a few fields or small viewports. -- **Multi-column layout:** Suitable for long forms with multiple fields to save vertical space. Use a [layout grid](../layout-grid.md) or flexbox to align fields. -- **Tabbed layout:** Use [tabs](../tabs.md) to break up long forms into manageable sections. This helps users focus on one part of the form at a time. -- **Stepped layout:** Use our workflow pattern to guide users through multi-step forms. -- **Fieldset:** Group related fields together using fieldsets. This helps users understand the context of the information they are providing. Add a legend (title) to describe the field group. -- **Section heading:** Use section headings to break up long forms into manageable sections. This helps users focus on one part of the form at a time. -- **Blind:** Use a [blind](../blind.md) to hide optional fields and reveal them when the user selects a specific option. - -## Best practice - -- **Z and F shape pattern:** Follow natural reading patterns, for example left to right, to guide users through the form. Consider a clear order of fields to ensure users don’t forget to fill in fields and improve data quality. -- **Button alignment:** Position primary action buttons, e.g. submit and cancel consistently. We recommend: - Bottom left: Short forms (up to 5 fields) - Bottom right: Long forms (more than 5 fields) - Bottom right and sticky: Long forms that are already filled in (e.g. edit) with a large number of fields - %% - Top right: ??? %% -- **Label alignment:** By default, the label is positioned above its input field. Use a custom field component for long forms with a lot of fields to position the label on the left (which saves vertical space). -- **Grouping fields:** In some cases, it makes sense to combine multiple fields in one [custom field](../custom-field.mdx) with a single label that are connected contextually or through validation, e.g. entering the value and unit of an entity, selecting start and end date. It allows a clearer validation, e.g. the end date must be after the start date. -- **Field width:** Use a consistent width for input fields to create a harmonious layout. For example, use a width of 100% for full-width fields and 50% for two-column fields. - %% - **Responsive behavior**: xxx - Layout grid or flexbox - should I use 1 or 2 columns? %% +# Layout -## Related patterns + + + + -- [Validation](forms-validation.mdx) -- [Behavior](forms-behavior.md) From 85ac5152dc87524d33d48f2d1b0abed4811795e7 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Tue, 19 Nov 2024 14:13:46 +0100 Subject: [PATCH 19/26] docs(forms): remove unused imports, format --- .../documentation/docs/controls/forms/forms-field.md | 4 ---- .../docs/controls/forms/forms-layout.md | 3 --- .../docs/controls/forms/forms-validation.mdx | 12 +++++++----- 3 files changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/documentation/docs/controls/forms/forms-field.md b/packages/documentation/docs/controls/forms/forms-field.md index 627abd283f6..776e71a4b44 100644 --- a/packages/documentation/docs/controls/forms/forms-field.md +++ b/packages/documentation/docs/controls/forms/forms-field.md @@ -7,13 +7,9 @@ import LinkableDocsTabs from "../../../src/components/LinkableDocsTabs"; import DocsUx from './\_forms-field_style.mdx' import DocsCode from './\_forms-field_code.mdx' -import DeprecatedTags from '@site/src/components/Tags'; - # Field - - diff --git a/packages/documentation/docs/controls/forms/forms-layout.md b/packages/documentation/docs/controls/forms/forms-layout.md index 03bb2eebe2d..4ea8f01111f 100644 --- a/packages/documentation/docs/controls/forms/forms-layout.md +++ b/packages/documentation/docs/controls/forms/forms-layout.md @@ -7,12 +7,9 @@ import LinkableDocsTabs from "../../../src/components/LinkableDocsTabs"; import DocsUx from './\_forms-layout_style.mdx' import DocsCode from './\_forms-layout_code.mdx' -import DeprecatedTags from '@site/src/components/Tags'; - # Layout - diff --git a/packages/documentation/docs/controls/forms/forms-validation.mdx b/packages/documentation/docs/controls/forms/forms-validation.mdx index 5f390f8397c..e46af9b0d2d 100644 --- a/packages/documentation/docs/controls/forms/forms-validation.mdx +++ b/packages/documentation/docs/controls/forms/forms-validation.mdx @@ -2,17 +2,20 @@ sidebar_position: 4 --- -import LinkableDocsTabs from "../../../src/components/LinkableDocsTabs"; +import LinkableDocsTabs from '../../../src/components/LinkableDocsTabs'; -import DocsUx from './\_forms-validation_style.md' -import DocsCode from './\_forms-validation_code.mdx' +import DocsUx from './_forms-validation_style.md'; +import DocsCode from './_forms-validation_code.mdx'; import DeprecatedTags from '@site/src/components/Tags'; # Validation
- +

@@ -22,4 +25,3 @@ import DeprecatedTags from '@site/src/components/Tags'; - From cd2350c2482f2424195ec88a9bbf64369954df43 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Tue, 19 Nov 2024 15:08:51 +0100 Subject: [PATCH 20/26] docs(menu): apply force-breakpoint to menu with 2nd level navigation to prevent hiding the example --- packages/html-test-app/src/preview-examples/menu-category.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/html-test-app/src/preview-examples/menu-category.html b/packages/html-test-app/src/preview-examples/menu-category.html index f5ce96c8ebe..0d01d2fc80c 100644 --- a/packages/html-test-app/src/preview-examples/menu-category.html +++ b/packages/html-test-app/src/preview-examples/menu-category.html @@ -16,7 +16,7 @@ - + Home Normal Tab From e27d9611b561326341448af247069fe6262b5389 Mon Sep 17 00:00:00 2001 From: Felix Leist Date: Tue, 19 Nov 2024 15:18:39 +0100 Subject: [PATCH 21/26] docs(forms): radio pattern illustration and wording --- .../documentation/docs/controls/_radio_styleguide.mdx | 9 ++++++++- .../docs/controls/forms/_forms-field_code.mdx | 4 ++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/documentation/docs/controls/_radio_styleguide.mdx b/packages/documentation/docs/controls/_radio_styleguide.mdx index 63ce9bc1f1d..727e1a1a247 100644 --- a/packages/documentation/docs/controls/_radio_styleguide.mdx +++ b/packages/documentation/docs/controls/_radio_styleguide.mdx @@ -2,7 +2,14 @@ A radio button is an interface element that enables the user to choose only one option from a predefined set of mutually exclusive options. They are presented in groups to signify that only one selection is allowed at a time. Selecting a radio button automatically deselects any previously chosen radio button within the same group. We typically use radio buttons to offer users a set of exclusive choices. -![Anatomy radio button](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3749-1785&t=VCAAFzKIYCDb7nIX-4) +![Anatomy radio button](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3384-108&t=GDd4aJQUrPB3cC9X-4) + +1. Label +2. Required indicator +3. Radio button group +4. Helper or feedback text +5. Radio button +6. Radio button label ### Options diff --git a/packages/documentation/docs/controls/forms/_forms-field_code.mdx b/packages/documentation/docs/controls/forms/_forms-field_code.mdx index a7043371bd4..5fe14f71dc2 100644 --- a/packages/documentation/docs/controls/forms/_forms-field_code.mdx +++ b/packages/documentation/docs/controls/forms/_forms-field_code.mdx @@ -30,9 +30,9 @@ To display an indicator whether a field is required, use the attribute `required ``` -### Helper or validation text +### Helper or feedback text -To display a helper or validation text below your component please refer to [validation](forms-validation.mdx). +To display a helper or feedback text below your component please refer to [validation](forms-validation.mdx). ### Counter From 22b2d6cc81d9e940cd557b17f07ecce41f5baf1e Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Wed, 20 Nov 2024 17:10:36 +0100 Subject: [PATCH 22/26] docs(checkbox): add tabs and guidelines, fix links, on new branch --- .../docs/controls/_forms-checkbox_code.mdx | 37 ++++++++++++++ .../controls/_forms-checkbox_styleguide.md | 16 +++--- .../documentation/docs/controls/checkbox.mdx | 49 ++++++------------- 3 files changed, 60 insertions(+), 42 deletions(-) create mode 100644 packages/documentation/docs/controls/_forms-checkbox_code.mdx diff --git a/packages/documentation/docs/controls/_forms-checkbox_code.mdx b/packages/documentation/docs/controls/_forms-checkbox_code.mdx new file mode 100644 index 00000000000..f27449196a7 --- /dev/null +++ b/packages/documentation/docs/controls/_forms-checkbox_code.mdx @@ -0,0 +1,37 @@ +import Playground from '@site/src/components/PlaygroundV3'; +import Props from '@site/docs/auto-generated/ix-checkbox/props.md'; +import Events from '@site/docs/auto-generated/ix-checkbox/events.md'; + +## Development + +### Examples + +#### Basic + + + +#### Disabled + + + +#### Group + + + +#### Indeterminate group + + + +#### Validation + + + +### API + +#### Properties + + + +#### Events + + diff --git a/packages/documentation/docs/controls/_forms-checkbox_styleguide.md b/packages/documentation/docs/controls/_forms-checkbox_styleguide.md index 6adec179561..725ad1d32bf 100644 --- a/packages/documentation/docs/controls/_forms-checkbox_styleguide.md +++ b/packages/documentation/docs/controls/_forms-checkbox_styleguide.md @@ -1,8 +1,10 @@ +## Guidelines + A checkbox is a small interactive box that allows the user to toggle between an affirmative or negative choice. Checkboxes are commonly used when there are multiple options that can be selected or to easily enable or disable a setting. They are often utilized in forms where users can choose multiple options, such as selecting items or categories that apply to a specific product or service. ![Checkbox anatomy](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3364-8247&t=VCAAFzKIYCDb7nIX-4) -## Options +### Options - **Checkbox label:** See [form field](forms/forms-field.md). - **Group label:** Add a label to the group of checkboxes to provide context to your users. We typically use short and descriptive labels to summarize the options in the group. @@ -11,21 +13,21 @@ A checkbox is a small interactive box that allows the user to toggle between an - **Indeterminate checkbox:** Indicates that only some items in a checkbox group are selected. We offer the indeterminate state, but the implementation when this state is active is the responsibility of each individual. - **Checkbox group**: Group checkboxes to indicate that they are related. We typically use checkbox groups when multiple options need to be presented for selection, allowing users to choose any combination of the available choices. They are particularly useful in user interface design for forms, settings and preferences where multiple selections are possible. -## Behavior in context +### Behavior in context - **Validation**: See [validation](forms/forms-validation.mdx). -- **Interaction**: Clicking on the checkbox toggles the state between checked and unchecked.  +- **Interaction**: Clicking on the checkbox toggles the state between checked and unchecked. - **Grouping**: Checkbox groups have only one label and helper text for the entire group. Grouped checkboxes are validated collectively, not individually. -## States +### States ![Checkbox states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3749-1431&t=VCAAFzKIYCDb7nIX-4) -## Dos and Don’ts +### Dos and Don’ts - Do use checkbox when you have multiple options that can be selected - Do group related checkboxes together to indicate their relationship - Do use checkboxes in forms to allow users to select multiple options - Don’t use a checkbox for binary choices (yes/no, true/false) - use a toggle switch instead -- Don’t use checkboxes for mutually exclusive options - use [radio buttons](forms-radio-button.md) instead -- Don’t use checkboxes for actions that have immediate consequences - use [buttons](buttons.md) or [links](links.md) instead +- Don’t use checkboxes for mutually exclusive options - use [radio buttons](radio.mdx) instead +- Don’t use checkboxes for actions that have immediate consequences - use [buttons](buttons/button.md) or links instead diff --git a/packages/documentation/docs/controls/checkbox.mdx b/packages/documentation/docs/controls/checkbox.mdx index 1eea20e70a5..25ea5d0f352 100644 --- a/packages/documentation/docs/controls/checkbox.mdx +++ b/packages/documentation/docs/controls/checkbox.mdx @@ -1,45 +1,24 @@ -import Admonition from '@theme/Admonition'; -import Playground from '@site/src/components/PlaygroundV3'; -import Props from '@site/docs/auto-generated/ix-checkbox/props.md'; -import Events from '@site/docs/auto-generated/ix-checkbox/events.md'; import Tags from '@site/docs/auto-generated/ix-checkbox/tags.md'; import DeprecatedTags from '@site/src/components/Tags'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; + +import DocsUx from './_forms-checkbox_styleguide.md'; +import DocsCode from './_forms-checkbox_code.mdx'; # Checkbox
- +
-## Examples - -### Basic - - - -### Disabled - - - -### Group - - - -### Indeterminate group - - - -### Validation - - - -## API - -### Properties - - - -### Events +
+
- + + + + From 33426774bff4143df59f338d87b383545580945b Mon Sep 17 00:00:00 2001 From: Felix Leist Date: Wed, 20 Nov 2024 17:45:07 +0100 Subject: [PATCH 23/26] docs(forms): description checkbox group --- .../docs/controls/_custom-field_styleguide.mdx | 3 ++- .../docs/controls/_forms-checkbox_styleguide.md | 14 ++++++++++---- .../docs/controls/forms/forms-behavior.md | 2 +- .../docs/controls/forms/forms-validation.mdx | 2 +- 4 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/documentation/docs/controls/_custom-field_styleguide.mdx b/packages/documentation/docs/controls/_custom-field_styleguide.mdx index 32e8c9e9fc6..f08e162723d 100644 --- a/packages/documentation/docs/controls/_custom-field_styleguide.mdx +++ b/packages/documentation/docs/controls/_custom-field_styleguide.mdx @@ -7,7 +7,7 @@ The custom field is a wrapper component that can host any forms component. Its p 1. Label 2. Helper or feedback text 3. Form component(s) -4. Mandatory indicator +4. Required indicator ### Options @@ -34,6 +34,7 @@ The states depend on the component that you use in the custom field. The custom - Do use the custom field in combination with the form component to create complex forms - Don't use the custom field for simple form fields, use the form field component instead - Don't use the custom field without a form component, it is a wrapper component that is meant to be used in combination with the form component +- Don't use helper and feedback texts for single fields within a custom field, use the helper and feedback text of the whole custom field instead ### Related patterns diff --git a/packages/documentation/docs/controls/_forms-checkbox_styleguide.md b/packages/documentation/docs/controls/_forms-checkbox_styleguide.md index 725ad1d32bf..82ef6dca3bf 100644 --- a/packages/documentation/docs/controls/_forms-checkbox_styleguide.md +++ b/packages/documentation/docs/controls/_forms-checkbox_styleguide.md @@ -4,14 +4,20 @@ A checkbox is a small interactive box that allows the user to toggle between an ![Checkbox anatomy](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3364-8247&t=VCAAFzKIYCDb7nIX-4) +1. Checkbox +2. Checkbox label +3. Group label +4. Group required indicator +5. Group helper or feedback text + ### Options - **Checkbox label:** See [form field](forms/forms-field.md). -- **Group label:** Add a label to the group of checkboxes to provide context to your users. We typically use short and descriptive labels to summarize the options in the group. -- **Helper text**: See [form field](forms/forms-field.md). -- **Feedback text**: See [form field](forms/forms-field.md). - **Indeterminate checkbox:** Indicates that only some items in a checkbox group are selected. We offer the indeterminate state, but the implementation when this state is active is the responsibility of each individual. - **Checkbox group**: Group checkboxes to indicate that they are related. We typically use checkbox groups when multiple options need to be presented for selection, allowing users to choose any combination of the available choices. They are particularly useful in user interface design for forms, settings and preferences where multiple selections are possible. +- **Group label:** Add a label to the group of checkboxes to provide context to your users. We typically use short and descriptive labels to summarize the options in the group. +- **Group helper text**: See [form field](forms/forms-field.md). +- **Group feedback text**: See [form field](forms/forms-field.md). ### Behavior in context @@ -25,7 +31,7 @@ A checkbox is a small interactive box that allows the user to toggle between an ### Dos and Don’ts -- Do use checkbox when you have multiple options that can be selected +- Do use checkboxes when you have multiple options that can be selected - Do group related checkboxes together to indicate their relationship - Do use checkboxes in forms to allow users to select multiple options - Don’t use a checkbox for binary choices (yes/no, true/false) - use a toggle switch instead diff --git a/packages/documentation/docs/controls/forms/forms-behavior.md b/packages/documentation/docs/controls/forms/forms-behavior.md index 90dba5fb583..8d64ff16916 100644 --- a/packages/documentation/docs/controls/forms/forms-behavior.md +++ b/packages/documentation/docs/controls/forms/forms-behavior.md @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 4 --- # Behavior diff --git a/packages/documentation/docs/controls/forms/forms-validation.mdx b/packages/documentation/docs/controls/forms/forms-validation.mdx index e46af9b0d2d..697fd3f6b6d 100644 --- a/packages/documentation/docs/controls/forms/forms-validation.mdx +++ b/packages/documentation/docs/controls/forms/forms-validation.mdx @@ -1,5 +1,5 @@ --- -sidebar_position: 4 +sidebar_position: 3 --- import LinkableDocsTabs from '../../../src/components/LinkableDocsTabs'; From e5c3f83430f324935a0f1c78c61e9891be4fc772 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Thu, 21 Nov 2024 08:50:06 +0100 Subject: [PATCH 24/26] refactor(docs): remove unused imports, change LinkableTabs import style --- packages/documentation/docs/controls/_radio_code.mdx | 3 --- packages/documentation/docs/controls/_textarea-field_code.mdx | 1 - .../docs/controls/buttons/_toggle-button_code.md | 4 +--- .../documentation/docs/controls/forms/_forms-field_code.mdx | 3 --- .../documentation/docs/controls/forms/_forms-layout_code.mdx | 3 --- packages/documentation/docs/controls/forms/forms-field.md | 2 +- packages/documentation/docs/controls/forms/forms-layout.md | 2 +- .../documentation/docs/controls/forms/forms-validation.mdx | 2 +- 8 files changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/documentation/docs/controls/_radio_code.mdx b/packages/documentation/docs/controls/_radio_code.mdx index 52b795c4853..c3c43c34d3f 100644 --- a/packages/documentation/docs/controls/_radio_code.mdx +++ b/packages/documentation/docs/controls/_radio_code.mdx @@ -1,7 +1,4 @@ -import Admonition from '@theme/Admonition'; - import Playground from '@site/src/components/PlaygroundV3'; - import Props from '@site/docs/auto-generated/ix-radio/props.md'; import Events from '@site/docs/auto-generated/ix-radio/events.md'; diff --git a/packages/documentation/docs/controls/_textarea-field_code.mdx b/packages/documentation/docs/controls/_textarea-field_code.mdx index 1e2a23e13dc..415913dada4 100644 --- a/packages/documentation/docs/controls/_textarea-field_code.mdx +++ b/packages/documentation/docs/controls/_textarea-field_code.mdx @@ -1,4 +1,3 @@ -import Admonition from '@theme/Admonition'; import Playground from '@site/src/components/PlaygroundV3'; import Props from '@site/docs/auto-generated/ix-textarea/props.md'; import Events from '@site/docs/auto-generated/ix-textarea/events.md'; diff --git a/packages/documentation/docs/controls/buttons/_toggle-button_code.md b/packages/documentation/docs/controls/buttons/_toggle-button_code.md index 62ca1e0d128..36fcd4eb8b9 100644 --- a/packages/documentation/docs/controls/buttons/_toggle-button_code.md +++ b/packages/documentation/docs/controls/buttons/_toggle-button_code.md @@ -17,9 +17,7 @@ import Playground from '@site/src/components/PlaygroundV3'; #### Toggle button primary +name="toggle-button-primary"> #### Toggle button primary outline diff --git a/packages/documentation/docs/controls/forms/_forms-field_code.mdx b/packages/documentation/docs/controls/forms/_forms-field_code.mdx index 5fe14f71dc2..9e7081297d1 100644 --- a/packages/documentation/docs/controls/forms/_forms-field_code.mdx +++ b/packages/documentation/docs/controls/forms/_forms-field_code.mdx @@ -1,4 +1,3 @@ -import Admonition from '@theme/Admonition'; import Playground, { SourceCodePreview, } from '@site/src/components/PlaygroundV2'; @@ -29,12 +28,10 @@ To display an indicator whether a field is required, use the attribute `required ``` - ### Helper or feedback text To display a helper or feedback text below your component please refer to [validation](forms-validation.mdx). - ### Counter To display a counter on inputs or textareas, use the attribute `maxLength`. diff --git a/packages/documentation/docs/controls/forms/_forms-layout_code.mdx b/packages/documentation/docs/controls/forms/_forms-layout_code.mdx index 53aeff9e81c..bd780fdbbe6 100644 --- a/packages/documentation/docs/controls/forms/_forms-layout_code.mdx +++ b/packages/documentation/docs/controls/forms/_forms-layout_code.mdx @@ -1,4 +1,3 @@ -import Admonition from '@theme/Admonition'; import Playground, { SourceCodePreview, } from '@site/src/components/PlaygroundV2'; @@ -65,5 +64,3 @@ You can follow the example here: ``` - - diff --git a/packages/documentation/docs/controls/forms/forms-field.md b/packages/documentation/docs/controls/forms/forms-field.md index 776e71a4b44..b71fcfc4e82 100644 --- a/packages/documentation/docs/controls/forms/forms-field.md +++ b/packages/documentation/docs/controls/forms/forms-field.md @@ -2,7 +2,7 @@ sidebar_position: 1 --- -import LinkableDocsTabs from "../../../src/components/LinkableDocsTabs"; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_forms-field_style.mdx' import DocsCode from './\_forms-field_code.mdx' diff --git a/packages/documentation/docs/controls/forms/forms-layout.md b/packages/documentation/docs/controls/forms/forms-layout.md index 4ea8f01111f..254388fbdbb 100644 --- a/packages/documentation/docs/controls/forms/forms-layout.md +++ b/packages/documentation/docs/controls/forms/forms-layout.md @@ -2,7 +2,7 @@ sidebar_position: 2 --- -import LinkableDocsTabs from "../../../src/components/LinkableDocsTabs"; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './\_forms-layout_style.mdx' import DocsCode from './\_forms-layout_code.mdx' diff --git a/packages/documentation/docs/controls/forms/forms-validation.mdx b/packages/documentation/docs/controls/forms/forms-validation.mdx index 697fd3f6b6d..75546f61a38 100644 --- a/packages/documentation/docs/controls/forms/forms-validation.mdx +++ b/packages/documentation/docs/controls/forms/forms-validation.mdx @@ -2,7 +2,7 @@ sidebar_position: 3 --- -import LinkableDocsTabs from '../../../src/components/LinkableDocsTabs'; +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import DocsUx from './_forms-validation_style.md'; import DocsCode from './_forms-validation_code.mdx'; From 595eea3870e9d45fe36063a00af5dc7631def374 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Thu, 21 Nov 2024 09:04:50 +0100 Subject: [PATCH 25/26] docs(buttons): fix typos --- .../docs/controls/buttons/_dropdown-button_styleguide.md | 2 +- .../docs/controls/buttons/_split-button_styleguide.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/buttons/_dropdown-button_styleguide.md b/packages/documentation/docs/controls/buttons/_dropdown-button_styleguide.md index 2041808519e..3139e29da01 100644 --- a/packages/documentation/docs/controls/buttons/_dropdown-button_styleguide.md +++ b/packages/documentation/docs/controls/buttons/_dropdown-button_styleguide.md @@ -28,7 +28,7 @@ All the variants, options and states of the ix button component apply to the dro Dropdown buttons have five states: Default, hover, active, disabled and focused. In an active state, dropdown buttons show a dropdown with the available options. The visual appearance of the states is the same as the ix button component. -### Does and Don'ts +### Dos and Don’ts - Do use dropdown buttons when selecting an option triggers an action - Don't use dropdown buttons when there is a frequent or most-important action (use a standard button or a split button instead) diff --git a/packages/documentation/docs/controls/buttons/_split-button_styleguide.md b/packages/documentation/docs/controls/buttons/_split-button_styleguide.md index b588620a3ca..50aa26954f8 100644 --- a/packages/documentation/docs/controls/buttons/_split-button_styleguide.md +++ b/packages/documentation/docs/controls/buttons/_split-button_styleguide.md @@ -34,7 +34,7 @@ All the variants, options and states of the ix button and the ix dropdown button Split buttons have five states: Default, hover, active, disabled and focused. States are applied to left and the right part of the split button independently except for the disabled state. The visual appearance and the behavior of the states is the same as the ix button and the ix dropdown button. -### Does and Don'ts +### Dos and Don’ts - Do use split buttons when there is a frequent or most-important action - Don't use split buttons for unrelated actions From dcb6aebbbf51f38914e8f818e2c1706e5267f0e5 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Thu, 21 Nov 2024 09:10:48 +0100 Subject: [PATCH 26/26] docs(checkbox): fix form-checkbox-validation example, organize imports --- packages/vue-test-app/src/Root.vue | 170 +++++++++--------- .../form-checkbox-validation.vue | 63 ++++--- 2 files changed, 126 insertions(+), 107 deletions(-) diff --git a/packages/vue-test-app/src/Root.vue b/packages/vue-test-app/src/Root.vue index 9e1d7a86131..f7aa6f91531 100644 --- a/packages/vue-test-app/src/Root.vue +++ b/packages/vue-test-app/src/Root.vue @@ -18,24 +18,17 @@ import ApplicationAppSwitch from './preview-examples/application-app-switch.vue' import ApplicationBreakpoints from './preview-examples/application-breakpoints.vue'; import ApplicationHeader from './preview-examples/application-header.vue'; import Application from './preview-examples/application.vue'; +import AvatarImage from './preview-examples/avatar-image.vue'; +import AvatarInitials from './preview-examples/avatar-initials.vue'; +import Avatar from './preview-examples/avatar.vue'; import BasicNavigationWithoutHeader from './preview-examples/basic-navigation-without-header.vue'; import BasicNavigation from './preview-examples/basic-navigation.vue'; +import BlindHeaderActions from './preview-examples/blind-header-actions.vue'; +import BlindVariants from './preview-examples/blind-variants.vue'; import Blind from './preview-examples/blind.vue'; import BreadcrumbNextItems from './preview-examples/breadcrumb-next-items.vue'; import BreadcrumbTruncate from './preview-examples/breadcrumb-truncate.vue'; import Breadcrumb from './preview-examples/breadcrumb.vue'; -import ButtonGroup from './preview-examples/button-group.vue'; -import ButtonWithIcon from './preview-examples/button-with-icon.vue'; -import Buttons from './preview-examples/buttons.vue'; -import CheckboxIndeterminate from './preview-examples/checkbox-indeterminate.vue'; -import Checkbox from './preview-examples/checkbox.vue'; -import FormCheckboxGroupIndeterminate from './preview-examples/form-checkbox-group-indeterminate.vue'; -import Chip from './preview-examples/chip.vue'; -import AvatarImage from './preview-examples/avatar-image.vue'; -import AvatarInitials from './preview-examples/avatar-initials.vue'; -import Avatar from './preview-examples/avatar.vue'; -import BlindHeaderActions from './preview-examples/blind-header-actions.vue'; -import BlindVariants from './preview-examples/blind-variants.vue'; import ButtonDangerGhost from './preview-examples/button-danger-ghost.vue'; import ButtonDangerOutline from './preview-examples/button-danger-outline.vue'; import ButtonDanger from './preview-examples/button-danger.vue'; @@ -43,24 +36,31 @@ import ButtonGhost from './preview-examples/button-ghost.vue'; import ButtonGreyGhost from './preview-examples/button-grey-ghost.vue'; import ButtonGreySecondary from './preview-examples/button-grey-secondary.vue'; import ButtonGrey from './preview-examples/button-grey.vue'; +import ButtonGroup from './preview-examples/button-group.vue'; import ButtonLoading from './preview-examples/button-loading.vue'; import ButtonSecondary from './preview-examples/button-secondary.vue'; import ButtonTextIcon from './preview-examples/button-text-icon.vue'; -import Card from './preview-examples/card.vue'; +import ButtonWithIcon from './preview-examples/button-with-icon.vue'; +import Buttons from './preview-examples/buttons.vue'; import CardList from './preview-examples/card-list.vue'; +import Card from './preview-examples/card.vue'; +import CategoryFilterSuggestions from './preview-examples/category-filter-suggestions.vue'; import CategoryFilter from './preview-examples/category-filter.vue'; +import CheckboxIndeterminate from './preview-examples/checkbox-indeterminate.vue'; +import Checkbox from './preview-examples/checkbox.vue'; +import Chip from './preview-examples/chip.vue'; import ContentHeaderNoBack from './preview-examples/content-header-no-back.vue'; -import Content from './preview-examples/content.vue'; import ContentHeader from './preview-examples/content-header.vue'; -import CustomField from './preview-examples/custom-field.vue'; +import Content from './preview-examples/content.vue'; import CustomFieldValidation from './preview-examples/custom-field-validation.vue'; -import DateDropdown from './preview-examples/date-dropdown.vue'; +import CustomField from './preview-examples/custom-field.vue'; import DateDropdownUserRange from './preview-examples/date-dropdown-user-range.vue'; +import DateDropdown from './preview-examples/date-dropdown.vue'; +import DatepickerLocale from './preview-examples/datepicker-locale.vue'; import DatepickerRange from './preview-examples/datepicker-range.vue'; -import Divider from './preview-examples/divider.vue'; import Datepicker from './preview-examples/datepicker.vue'; -import DatepickerLocale from './preview-examples/datepicker-locale.vue'; import Datetimepicker from './preview-examples/datetimepicker.vue'; +import Divider from './preview-examples/divider.vue'; import DrawerFullHeight from './preview-examples/drawer-full-height.vue'; import Drawer from './preview-examples/drawer.vue'; import DropdownButtonIcon from './preview-examples/dropdown-button-icon.vue'; @@ -69,44 +69,62 @@ import DropdownIcon from './preview-examples/dropdown-icon.vue'; import DropdownQuickActions from './preview-examples/dropdown-quick-actions.vue'; import DropdownSubmenu from './preview-examples/dropdown-submenu.vue'; import Dropdown from './preview-examples/dropdown.vue'; -import Echarts from './preview-examples/echarts.vue'; -import EchartsGauge from './preview-examples/echarts-gauge.vue'; import EchartsBarHorizontalStacked from './preview-examples/echarts-bar-horizontal-stacked.vue'; import EchartsBarSimple from './preview-examples/echarts-bar-simple.vue'; import EchartsCircle from './preview-examples/echarts-circle.vue'; import EchartsEmptyState from './preview-examples/echarts-empty-state.vue'; +import EchartsGauge from './preview-examples/echarts-gauge.vue'; import EchartsLineAdvanced from './preview-examples/echarts-line-advanced.vue'; import EchartsLineMultipleYAxis from './preview-examples/echarts-line-multiple-y-axis.vue'; import EchartsLineSimple from './preview-examples/echarts-line-simple.vue'; import EchartsPie from './preview-examples/echarts-pie.vue'; -import EchartsProgressCircle from './preview-examples/echarts-progress-circle.vue'; import EchartsProgressArc from './preview-examples/echarts-progress-arc.vue'; +import EchartsProgressCircle from './preview-examples/echarts-progress-circle.vue'; import EchartsSpecial3d from './preview-examples/echarts-special-3d.vue'; import EchartsSpecialToolbox from './preview-examples/echarts-special-toolbox.vue'; import EchartsSpecialZoom from './preview-examples/echarts-special-zoom.vue'; -import MenuCategory from './preview-examples/menu-category.vue'; -import Slider from './preview-examples/slider.vue'; -import SliderTrace from './preview-examples/slider-trace.vue'; -import SliderMarker from './preview-examples/slider-marker.vue'; -import SliderError from './preview-examples/slider-error.vue'; +import Echarts from './preview-examples/echarts.vue'; import EmptyStateCompactBreak from './preview-examples/empty-state-compact-break.vue'; +import EmptyStateCompact from './preview-examples/empty-state-compact.vue'; import EmptyState from './preview-examples/empty-state.vue'; import EventListCompact from './preview-examples/event-list-compact.vue'; +import EventListCustomItemHeight from './preview-examples/event-list-custom-item-height.vue'; import EventListSelected from './preview-examples/event-list-selected.vue'; import EventList from './preview-examples/event-list.vue'; import ExpandingSearch from './preview-examples/expanding-search.vue'; import FlipTile from './preview-examples/flip-tile.vue'; -import FormCheckbox from './preview-examples/form-checkbox.vue'; import FormCheckboxDisabled from './preview-examples/form-checkbox-disabled.vue'; +import FormCheckboxGroupIndeterminate from './preview-examples/form-checkbox-group-indeterminate.vue'; import FormCheckboxGroup from './preview-examples/form-checkbox-group.vue'; +import FormCheckboxValidation from './preview-examples/form-checkbox-validation.vue'; +import FormCheckbox from './preview-examples/form-checkbox.vue'; +import FormValidation from './preview-examples/form-validation.vue'; +import GridPadding from './preview-examples/grid-padding.vue'; +import GridSize from './preview-examples/grid-size.vue'; +import Grid from './preview-examples/grid.vue'; import GroupContextMenu from './preview-examples/group-context-menu.vue'; import GroupCustomEntry from './preview-examples/group-custom-entry.vue'; import GroupHeaderSuppressed from './preview-examples/group-header-suppressed.vue'; import Group from './preview-examples/group.vue'; +import IconToggleButtonPrimaryGhost from './preview-examples/icon-toggle-button-primary-ghost.vue'; +import IconToggleButtonPrimaryOutline from './preview-examples/icon-toggle-button-primary-outline.vue'; +import IconToggleButtonSecondaryGhost from './preview-examples/icon-toggle-button-secondary-ghost.vue'; +import IconToggleButtonSecondaryOutline from './preview-examples/icon-toggle-button-secondary-outline.vue'; +import IconToggleButtonSecondary from './preview-examples/icon-toggle-button-secondary.vue'; +import InputDisabled from './preview-examples/input-disabled.vue'; +import InputLabel from './preview-examples/input-label.vue'; import InputLegacyDisabled from './preview-examples/input-legacy-disabled.vue'; +import InputLegacyLabels from './preview-examples/input-legacy-labels.vue'; import InputLegacyReadonly from './preview-examples/input-legacy-readonly.vue'; +import InputLegacySearch from './preview-examples/input-legacy-search.vue'; +import InputLegacyTypes from './preview-examples/input-legacy-types.vue'; import InputLegacyWithIcon from './preview-examples/input-legacy-with-icon.vue'; import InputLegacy from './preview-examples/input-legacy.vue'; +import InputPattern from './preview-examples/input-pattern.vue'; +import InputReadonly from './preview-examples/input-readonly.vue'; +import InputTypes from './preview-examples/input-types.vue'; +import InputValidation from './preview-examples/input-validation.vue'; +import Input from './preview-examples/input.vue'; import KeyValueListStriped from './preview-examples/key-value-list-striped.vue'; import KeyValueListWithCustomValue from './preview-examples/key-value-list-with-custom-value.vue'; import KeyValueListWithIcon from './preview-examples/key-value-list-with-icon.vue'; @@ -115,91 +133,67 @@ import KeyValueWithCustomValue from './preview-examples/key-value-with-custom-va import KeyValueWithIcon from './preview-examples/key-value-with-icon.vue'; import KeyValueWithLabelLeft from './preview-examples/key-value-with-label-left.vue'; import KeyValue from './preview-examples/key-value.vue'; +import Kpi from './preview-examples/kpi.vue'; +import LayoutAutoCustom from './preview-examples/layout-auto-custom.vue'; +import LayoutAuto from './preview-examples/layout-auto.vue'; +import LinkButtonDisabled from './preview-examples/link-button-disabled.vue'; +import LinkButton from './preview-examples/link-button.vue'; +import Loading from './preview-examples/loading.vue'; import MapNavigationOverlay from './preview-examples/map-navigation-overlay.vue'; import MapNavigation from './preview-examples/map-navigation.vue'; +import MenuCategory from './preview-examples/menu-category.vue'; +import MenuWithBottomTabs from './preview-examples/menu-with-bottom-tabs.vue'; +import MessageBar from './preview-examples/message-bar.vue'; +import Message from './preview-examples/message.vue'; +import ModalSizes from './preview-examples/modal-sizes.vue'; import ModalExample from './preview-examples/modal.vue'; -import NumberInput from './preview-examples/number-input.vue'; -import NumberInputLabel from './preview-examples/number-input-label.vue'; import NumberInputDisabled from './preview-examples/number-input-disabled.vue'; +import NumberInputLabel from './preview-examples/number-input-label.vue'; import NumberInputReadOnly from './preview-examples/number-input-readonly.vue'; import NumberInputStepperButton from './preview-examples/number-input-stepper-button.vue'; -import Pill from './preview-examples/pill.vue'; +import NumberInput from './preview-examples/number-input.vue'; +import PaginationAdvanced from './preview-examples/pagination-advanced.vue'; +import Pagination from './preview-examples/pagination.vue'; +import PaneLayout from './preview-examples/pane-layout.vue'; +import Pane from './preview-examples/pane.vue'; import PillVariants from './preview-examples/pill-variants.vue'; +import Pill from './preview-examples/pill.vue'; import PopoverNews from './preview-examples/popover-news.vue'; import PushCard from './preview-examples/push-card.vue'; import RadioButton from './preview-examples/radio-button.vue'; -import Radio from './preview-examples/radio.vue'; import RadioDisabled from './preview-examples/radio-disabled.vue'; import RadioGroup from './preview-examples/radio-group.vue'; import RadioValidation from './preview-examples/radio-validation.vue'; -import Select from './preview-examples/select.vue'; +import Radio from './preview-examples/radio.vue'; import SelectEditable from './preview-examples/select-editable.vue'; import SelectMultiple from './preview-examples/select-multiple.vue'; import SelectValidation from './preview-examples/select-validation.vue'; +import Select from './preview-examples/select.vue'; import Settings from './preview-examples/settings.vue'; +import SliderError from './preview-examples/slider-error.vue'; +import SliderMarker from './preview-examples/slider-marker.vue'; +import SliderTrace from './preview-examples/slider-trace.vue'; +import Slider from './preview-examples/slider.vue'; import SpinnerLarge from './preview-examples/spinner-large.vue'; import Spinner from './preview-examples/spinner.vue'; +import SplitButtonIcons from './preview-examples/split-button-icons.vue'; +import SplitButton from './preview-examples/split-button.vue'; +import TabsRounded from './preview-examples/tabs-rounded.vue'; import Tabs from './preview-examples/tabs.vue'; -import TextareaLegacy from './preview-examples/textarea-legacy.vue'; +import TextareaFieldDisabled from './preview-examples/textarea-disabled.vue'; import TextareaLegacyDisabled from './preview-examples/textarea-legacy-disabled.vue'; import TextareaLegacyReadonly from './preview-examples/textarea-legacy-readonly.vue'; -import TextareaField from './preview-examples/textarea.vue'; -import TextareaFieldDisabled from './preview-examples/textarea-disabled.vue'; +import TextareaLegacy from './preview-examples/textarea-legacy.vue'; import TextareaFieldReadonly from './preview-examples/textarea-readonly.vue'; import TextareaFieldRowsCols from './preview-examples/textarea-rows-cols.vue'; import TextareaFieldValidation from './preview-examples/textarea-validation.vue'; -import Input from './preview-examples/input.vue'; -import InputDisabled from './preview-examples/input-disabled.vue'; -import InputLabel from './preview-examples/input-label.vue'; -import InputPattern from './preview-examples/input-pattern.vue'; -import InputReadonly from './preview-examples/input-readonly.vue'; -import InputTypes from './preview-examples/input-types.vue'; -import InputValidation from './preview-examples/input-validation.vue'; +import TextareaField from './preview-examples/textarea.vue'; +import ThemeSwitcher from './preview-examples/theme-switcher.vue'; import Tile from './preview-examples/tile.vue'; import Timepicker from './preview-examples/timepicker.vue'; import ToastCustom from './preview-examples/toast-custom.vue'; import ToastPosition from './preview-examples/toast-position.vue'; import Toast from './preview-examples/toast.vue'; -import ToggleCustomLabel from './preview-examples/toggle-custom-label.vue'; -import ToggleDisabled from './preview-examples/toggle-disabled.vue'; -import Toggle from './preview-examples/toggle.vue'; -import Tooltip from './preview-examples/tooltip.vue'; -import TreeCustom from './preview-examples/tree-custom.vue'; -import Tree from './preview-examples/tree.vue'; -import WorkflowVertical from './preview-examples/workflow-vertical.vue'; -import Workflow from './preview-examples/workflow.vue'; -import ValidationSelect from './preview-examples/validation-select.vue'; -import FormValidation from './preview-examples/form-validation.vue'; -import LayoutAuto from './preview-examples/layout-auto.vue'; -import LayoutAutoCustom from './preview-examples/layout-auto-custom.vue'; -import Grid from './preview-examples/grid.vue'; -import GridSize from './preview-examples/grid-size.vue'; -import GridPadding from './preview-examples/grid-padding.vue'; -import EventListCustomItemHeight from './preview-examples/event-list-custom-item-height.vue'; -import IconToggleButtonPrimaryGhost from './preview-examples/icon-toggle-button-primary-ghost.vue'; -import IconToggleButtonPrimaryOutline from './preview-examples/icon-toggle-button-primary-outline.vue'; -import IconToggleButtonSecondaryGhost from './preview-examples/icon-toggle-button-secondary-ghost.vue'; -import IconToggleButtonSecondaryOutline from './preview-examples/icon-toggle-button-secondary-outline.vue'; -import IconToggleButtonSecondary from './preview-examples/icon-toggle-button-secondary.vue'; -import InputLegacyLabels from './preview-examples/input-legacy-labels.vue'; -import InputLegacySearch from './preview-examples/input-legacy-search.vue'; -import InputLegacyTypes from './preview-examples/input-legacy-types.vue'; -import Kpi from './preview-examples/kpi.vue'; -import LinkButtonDisabled from './preview-examples/link-button-disabled.vue'; -import LinkButton from './preview-examples/link-button.vue'; -import Loading from './preview-examples/loading.vue'; -import MenuWithBottomTabs from './preview-examples/menu-with-bottom-tabs.vue'; -import ModalSizes from './preview-examples/modal-sizes.vue'; -import Message from './preview-examples/message.vue'; -import MessageBar from './preview-examples/message-bar.vue'; -import PaginationAdvanced from './preview-examples/pagination-advanced.vue'; -import Pagination from './preview-examples/pagination.vue'; -import Pane from './preview-examples/pane.vue'; -import PaneLayout from './preview-examples/pane-layout.vue'; -import SplitButtonIcons from './preview-examples/split-button-icons.vue'; -import SplitButton from './preview-examples/split-button.vue'; -import TabsRounded from './preview-examples/tabs-rounded.vue'; -import ThemeSwitcher from './preview-examples/theme-switcher.vue'; import ToggleButtonPrimaryGhost from './preview-examples/toggle-button-primary-ghost.vue'; import ToggleButtonPrimaryOutline from './preview-examples/toggle-button-primary-outline.vue'; import ToggleButtonPrimary from './preview-examples/toggle-button-primary.vue'; @@ -207,13 +201,20 @@ import ToggleButtonSecondaryGhost from './preview-examples/toggle-button-seconda import ToggleButtonSecondaryOutline from './preview-examples/toggle-button-secondary-outline.vue'; import ToggleButtonSecondary from './preview-examples/toggle-button-secondary.vue'; import ToggleChecked from './preview-examples/toggle-checked.vue'; +import ToggleCustomLabel from './preview-examples/toggle-custom-label.vue'; +import ToggleDisabled from './preview-examples/toggle-disabled.vue'; import ToggleIndeterminate from './preview-examples/toggle-indeterminate.vue'; +import Toggle from './preview-examples/toggle.vue'; +import Tooltip from './preview-examples/tooltip.vue'; +import TreeCustom from './preview-examples/tree-custom.vue'; +import Tree from './preview-examples/tree.vue'; import Upload from './preview-examples/upload.vue'; +import ValidationSelect from './preview-examples/validation-select.vue'; import Validation from './preview-examples/validation.vue'; import VerticalTabsWithAvatar from './preview-examples/vertical-tabs-with-avatar.vue'; import VerticalTabs from './preview-examples/vertical-tabs.vue'; -import CategoryFilterSuggestions from './preview-examples/category-filter-suggestions.vue'; -import EmptyStateCompact from './preview-examples/empty-state-compact.vue'; +import WorkflowVertical from './preview-examples/workflow-vertical.vue'; +import Workflow from './preview-examples/workflow.vue'; const routes: any = { '/': App, @@ -300,6 +301,7 @@ const routes: any = { '/preview/form-checkbox': FormCheckbox, '/preview/form-checkbox-disabled': FormCheckboxDisabled, '/preview/form-checkbox-group': FormCheckboxGroup, + '/preview/form-checkbox-validation': FormCheckboxValidation, '/preview/group': Group, '/preview/grid-padding': GridPadding, '/preview/grid-size': GridSize, diff --git a/packages/vue-test-app/src/preview-examples/form-checkbox-validation.vue b/packages/vue-test-app/src/preview-examples/form-checkbox-validation.vue index 09c509b5234..f6129e4795b 100644 --- a/packages/vue-test-app/src/preview-examples/form-checkbox-validation.vue +++ b/packages/vue-test-app/src/preview-examples/form-checkbox-validation.vue @@ -13,40 +13,57 @@ import { IxCheckbox, IxCheckboxGroup } from '@siemens/ix-vue';