From de4a83265b9d3197ad97d59caecc0f0a3c4500e2 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Fri, 6 Dec 2024 14:32:05 +0100 Subject: [PATCH 01/82] docs: intro sentence for date-dropdown --- packages/documentation/docs/controls/date-dropdown.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/documentation/docs/controls/date-dropdown.md b/packages/documentation/docs/controls/date-dropdown.md index 11394d9002..452daa533b 100644 --- a/packages/documentation/docs/controls/date-dropdown.md +++ b/packages/documentation/docs/controls/date-dropdown.md @@ -4,6 +4,7 @@ import Events from './../auto-generated/ix-date-dropdown/events.md'; import Playground from '@site/src/components/PlaygroundV3'; # Date dropdown + Date dropdowns allow users to select a specific date from a date picker or pre-defined date options. ## Examples From 5225027c93f480c176c167f1440d305e38025322 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Fri, 6 Dec 2024 14:55:00 +0100 Subject: [PATCH 02/82] docs: intro sentence for date-picker --- packages/documentation/docs/controls/date-picker.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/documentation/docs/controls/date-picker.md b/packages/documentation/docs/controls/date-picker.md index 85a35aa8ef..39ecea6773 100644 --- a/packages/documentation/docs/controls/date-picker.md +++ b/packages/documentation/docs/controls/date-picker.md @@ -4,6 +4,9 @@ import Events from './../auto-generated/ix-date-picker/events.md'; import Playground from '@site/src/components/PlaygroundV3'; # Date picker + +The date picker component provides a versatile calendar menu that can be used as a standalone element or within a dropdown for date input, offering a seamless way to select dates. + ## Examples From eac292f0bef7d8a752391ecd6095eeea2b6f4d67 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Mon, 9 Dec 2024 16:38:17 +0100 Subject: [PATCH 03/82] docs: intro sentence for blind --- packages/documentation/docs/controls/blind.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/documentation/docs/controls/blind.md b/packages/documentation/docs/controls/blind.md index d2aa3f5943..bce68efe85 100644 --- a/packages/documentation/docs/controls/blind.md +++ b/packages/documentation/docs/controls/blind.md @@ -5,6 +5,10 @@ import DocsCode from './\_blind_code.md' # Blind + +Blinds enhance content organization by allowing users to toggle visibility through collapsing and expanding sections. + + From dd9dd86763205f384a686c247653dd5f16712e2e Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Mon, 9 Dec 2024 17:34:29 +0100 Subject: [PATCH 04/82] docs: intro sentence for application --- .../docs/controls/application-frame/application.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/documentation/docs/controls/application-frame/application.md b/packages/documentation/docs/controls/application-frame/application.md index 8d4123abd1..ad03dba07a 100644 --- a/packages/documentation/docs/controls/application-frame/application.md +++ b/packages/documentation/docs/controls/application-frame/application.md @@ -13,6 +13,12 @@ import Tags from './../../auto-generated/ix-application/tags.md'; +
+ + +Applications manage the layout and theming of top-level app elements, ensuring a cohesive user experience. + +

From c86a7f38501d467256369ad0d9b49311d0abc3d0 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Mon, 9 Dec 2024 17:36:35 +0100 Subject: [PATCH 05/82] docs: intro sentence for application-header --- .../docs/controls/application-frame/application-header.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/documentation/docs/controls/application-frame/application-header.md b/packages/documentation/docs/controls/application-frame/application-header.md index d2997e8207..096bc50e6f 100644 --- a/packages/documentation/docs/controls/application-frame/application-header.md +++ b/packages/documentation/docs/controls/application-frame/application-header.md @@ -12,6 +12,10 @@ import Tags from './../../auto-generated/ix-application-header/tags.md'; + + From d19e64c27d508f1efbcdbfa1d9dfb23de8740d0a Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Mon, 9 Dec 2024 17:39:07 +0100 Subject: [PATCH 06/82] docs: intro sentence for application-header (2) --- .../docs/controls/application-frame/application-header.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/application-frame/application-header.md b/packages/documentation/docs/controls/application-frame/application-header.md index 096bc50e6f..e41021a801 100644 --- a/packages/documentation/docs/controls/application-frame/application-header.md +++ b/packages/documentation/docs/controls/application-frame/application-header.md @@ -12,9 +12,9 @@ import Tags from './../../auto-generated/ix-application-header/tags.md'; - Application headers provide a structured area for key elements like the brand logo, application name, and user avatar. - + From c91d30146806cdd609bedf043bbd18107a3e2180 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 16:57:51 +0100 Subject: [PATCH 07/82] docs: intro sentence for application-menu --- .../docs/controls/application-frame/application-menu.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/application-frame/application-menu.md b/packages/documentation/docs/controls/application-frame/application-menu.md index 814aef22b1..e902de05b5 100644 --- a/packages/documentation/docs/controls/application-frame/application-menu.md +++ b/packages/documentation/docs/controls/application-frame/application-menu.md @@ -8,7 +8,9 @@ import DocsUx from './\_application-menu_styleguide.md'; import DocsCode from './\_application-menu_code.md'; # Menu - + +The navigation menu provides direct access to main application parts, legal and version information, and settings. + From c3f21aa339b203a74364987299018b6ed0cf0b56 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:06:21 +0100 Subject: [PATCH 08/82] docs: intro sentence for content --- .../documentation/docs/controls/application-frame/content.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/application-frame/content.md b/packages/documentation/docs/controls/application-frame/content.md index 446a6c4852..a22a30dc0a 100644 --- a/packages/documentation/docs/controls/application-frame/content.md +++ b/packages/documentation/docs/controls/application-frame/content.md @@ -12,7 +12,9 @@ import Tags from './../../auto-generated/ix-content/tags.md'; # Content - + +The content component is a simple layout component made for hosting content. +

From 85a8be771898c8a0e65d8a4081ec80899bf1c502 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:07:24 +0100 Subject: [PATCH 09/82] docs: Remove intro sentence from _content_styleguide.md --- .../docs/controls/application-frame/_content_styleguide.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/documentation/docs/controls/application-frame/_content_styleguide.md b/packages/documentation/docs/controls/application-frame/_content_styleguide.md index 55e81a6e45..bfc51dcc87 100644 --- a/packages/documentation/docs/controls/application-frame/_content_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_content_styleguide.md @@ -2,8 +2,6 @@ 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) The purple dotted line illustrates the extent of the content component. From 641f2cec294842f3c8a4720e1cb2dce00e8357ab Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:10:19 +0100 Subject: [PATCH 10/82] docs: intro sentence for about-and-legal --- .../docs/controls/application-frame/about-and-legal.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 d41779230e..cc8d0af576 100644 --- a/packages/documentation/docs/controls/application-frame/about-and-legal.md +++ b/packages/documentation/docs/controls/application-frame/about-and-legal.md @@ -8,7 +8,9 @@ import DocsUx from './\_about-and-legal_styleguide.md'; import DocsCode from './\_about-and-legal_code.md'; # About and legal overlay - + +The about and legal overlay displays application information, versions, license terms, and other legal content. + From b56141149d4ae00e90ff93c87f223226a179d761 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:11:45 +0100 Subject: [PATCH 11/82] docs: intro sentence for settings overlay --- .../documentation/docs/controls/application-frame/settings.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/application-frame/settings.md b/packages/documentation/docs/controls/application-frame/settings.md index 534f378a41..8bc2d86765 100644 --- a/packages/documentation/docs/controls/application-frame/settings.md +++ b/packages/documentation/docs/controls/application-frame/settings.md @@ -8,7 +8,9 @@ import DocsUx from './\_settings_styleguide.md'; import DocsCode from './\_settings_code.md'; # Settings overlay - + +The settings overlay provides a centralized location for application settings. + From c64242c3ce222c9432cf1513a2845863e394c986 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:14:30 +0100 Subject: [PATCH 12/82] docs: intro sentence for popover-news --- .../docs/controls/application-frame/popover-news.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/application-frame/popover-news.md b/packages/documentation/docs/controls/application-frame/popover-news.md index ab37af8df5..e09e3122a5 100644 --- a/packages/documentation/docs/controls/application-frame/popover-news.md +++ b/packages/documentation/docs/controls/application-frame/popover-news.md @@ -8,7 +8,9 @@ import DocsUx from './\_popover-news_styleguide.md'; import DocsCode from './\_popover-news_code.md'; # Popover news - + +Popover news present important updates and information when the application starts. + From 8b0463d1848887438e10a96e3e347f1ee125d709 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:20:02 +0100 Subject: [PATCH 13/82] docs: intro sentence for basic-navigation --- .../docs/controls/application-frame/basic-navigation.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/application-frame/basic-navigation.md b/packages/documentation/docs/controls/application-frame/basic-navigation.md index de717dfa19..0798c16ea3 100644 --- a/packages/documentation/docs/controls/application-frame/basic-navigation.md +++ b/packages/documentation/docs/controls/application-frame/basic-navigation.md @@ -12,7 +12,9 @@ import Tags from './../../auto-generated/ix-basic-navigation/tags.md'; # Basic Navigation - + +Basic navigation combines essential infrastructure components to form the foundational layout structure of an application. + From 1aedb2f0ad106c9450901505e4ffae7793d7f5d7 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:21:09 +0100 Subject: [PATCH 14/82] docs: intro sentence for map-navigation --- .../docs/controls/application-frame/map-navigation.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/application-frame/map-navigation.md b/packages/documentation/docs/controls/application-frame/map-navigation.md index ffb0dee94d..1c345a0e84 100644 --- a/packages/documentation/docs/controls/application-frame/map-navigation.md +++ b/packages/documentation/docs/controls/application-frame/map-navigation.md @@ -12,7 +12,9 @@ import Tags from './../../auto-generated/ix-map-navigation/tags.md'; # Map Navigation - + +Map navigation structures layout to present map-like content, supported by a collapsible context panel and temporary overlays. + From faeb216a5670a38ad543c5c7ca96d4969d84a5d0 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:22:21 +0100 Subject: [PATCH 15/82] docs: intro sentence for avatar --- packages/documentation/docs/controls/avatar.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/documentation/docs/controls/avatar.md b/packages/documentation/docs/controls/avatar.md index a8a4882edf..d32f63635b 100644 --- a/packages/documentation/docs/controls/avatar.md +++ b/packages/documentation/docs/controls/avatar.md @@ -8,10 +8,9 @@ import Tags from './../auto-generated/ix-avatar/tags.md'; # Avatar - -
-
- + +Avatars visually or textually represent individual identities, typically for users logged into a system. + From b4877dfc15e8d456d0c0f5824afeddbde6e0630a Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:23:42 +0100 Subject: [PATCH 16/82] docs: intro sentence for breadcrumb --- packages/documentation/docs/controls/breadcrumb.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/breadcrumb.md b/packages/documentation/docs/controls/breadcrumb.md index 609f33d068..6fba4753dd 100644 --- a/packages/documentation/docs/controls/breadcrumb.md +++ b/packages/documentation/docs/controls/breadcrumb.md @@ -4,7 +4,9 @@ import DocsUx from './\_breadcrumb_styleguide.md' import DocsCode from './\_breadcrumb_code.md' # Breadcrumb - + +Breadcrumb navigation provides a clear path of navigation within an application. + From e0136c4b30af088b16131faa375002e9f1faab67 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:33:06 +0100 Subject: [PATCH 17/82] docs: intro sentence for button --- packages/documentation/docs/controls/buttons/button.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/buttons/button.md b/packages/documentation/docs/controls/buttons/button.md index c5ed36cdd3..4b3f30b4a1 100644 --- a/packages/documentation/docs/controls/buttons/button.md +++ b/packages/documentation/docs/controls/buttons/button.md @@ -8,7 +8,9 @@ import DocsUx from './\_button_styleguide.md'; import DocsCode from './\_button_code.md'; # Button - + +Buttons facilitate user interactions by initiating actions and applying functions within an application. + From 5abf5d0852cd788d6ba020dc7386ae8610d18366 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:35:49 +0100 Subject: [PATCH 18/82] docs: intro sentence for dropdown button --- .../documentation/docs/controls/buttons/dropdown-button.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/documentation/docs/controls/buttons/dropdown-button.md b/packages/documentation/docs/controls/buttons/dropdown-button.md index 1b8071be1e..a2a3a1c03c 100644 --- a/packages/documentation/docs/controls/buttons/dropdown-button.md +++ b/packages/documentation/docs/controls/buttons/dropdown-button.md @@ -12,10 +12,9 @@ import Tags from './../../auto-generated/ix-dropdown-button/tags.md' # Dropdown button - -
-
- + +Dropdown buttons enable users to choose from a list of actions by clicking a button to reveal a dropdown menu. + From 1e754d3fc61c35b2727e724cc69a991399c11d77 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:37:00 +0100 Subject: [PATCH 19/82] docs: intro sentence for icon-button --- .../documentation/docs/controls/buttons/icon-button.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/documentation/docs/controls/buttons/icon-button.md b/packages/documentation/docs/controls/buttons/icon-button.md index 380b7b10ab..c5eb7470e1 100644 --- a/packages/documentation/docs/controls/buttons/icon-button.md +++ b/packages/documentation/docs/controls/buttons/icon-button.md @@ -12,10 +12,9 @@ import Tags from './../../auto-generated/ix-icon-button/tags.md'; # Icon button - -
-
- + +Icon buttons use only icons to represent actions, making them ideal for space-constrained layouts. + From d6d276233a95a3e3eaa0d8314a65a7f978b2b4e0 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:38:14 +0100 Subject: [PATCH 20/82] docs: intro sentence for link-button --- .../documentation/docs/controls/buttons/link-button.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/documentation/docs/controls/buttons/link-button.md b/packages/documentation/docs/controls/buttons/link-button.md index 9622ca740f..b940a99d6f 100644 --- a/packages/documentation/docs/controls/buttons/link-button.md +++ b/packages/documentation/docs/controls/buttons/link-button.md @@ -12,10 +12,9 @@ import Tags from './../../auto-generated/ix-link-button/tags.md'; # Link button - -
-
- + +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. + From e6352390a782d428de54a8e8c6c49215dd722a98 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:38:58 +0100 Subject: [PATCH 21/82] docs: Remove intro sentence from _link-button_styleguide.md --- .../docs/controls/buttons/_link-button_styleguide.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/documentation/docs/controls/buttons/_link-button_styleguide.md b/packages/documentation/docs/controls/buttons/_link-button_styleguide.md index e66f3f94eb..6fb27f2b66 100644 --- a/packages/documentation/docs/controls/buttons/_link-button_styleguide.md +++ b/packages/documentation/docs/controls/buttons/_link-button_styleguide.md @@ -1,7 +1,4 @@ ## 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 From 66371c0f09c025c34949400a049c84f3620a61b5 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:40:18 +0100 Subject: [PATCH 22/82] docs: intro sentence for split-button --- packages/documentation/docs/controls/buttons/split-button.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/buttons/split-button.md b/packages/documentation/docs/controls/buttons/split-button.md index 0d3e06fdac..2834f96281 100644 --- a/packages/documentation/docs/controls/buttons/split-button.md +++ b/packages/documentation/docs/controls/buttons/split-button.md @@ -8,7 +8,9 @@ import DocsUx from './\_split-button_styleguide.md'; import DocsCode from './\_split-button_code.md'; # Split button - + +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.  + From b6cf0eb9ae4fa4dbe26a2c0668f5331b5eaed9e6 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:41:35 +0100 Subject: [PATCH 23/82] docs: Remove intro sentence from _split-button_styleguide.md --- .../docs/controls/buttons/_split-button_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/buttons/_split-button_styleguide.md b/packages/documentation/docs/controls/buttons/_split-button_styleguide.md index 50aa26954f..13a6d4228a 100644 --- a/packages/documentation/docs/controls/buttons/_split-button_styleguide.md +++ b/packages/documentation/docs/controls/buttons/_split-button_styleguide.md @@ -1,6 +1,6 @@ ## 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. +Split buttons 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) From 564eeda5560ccadceb22ee7079b1aa1ad976b765 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:42:53 +0100 Subject: [PATCH 24/82] docs: intro sentence for toggle-buttons --- .../documentation/docs/controls/buttons/toggle-buttons.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/documentation/docs/controls/buttons/toggle-buttons.md b/packages/documentation/docs/controls/buttons/toggle-buttons.md index 2a7ca9fbb5..2ee2d91376 100644 --- a/packages/documentation/docs/controls/buttons/toggle-buttons.md +++ b/packages/documentation/docs/controls/buttons/toggle-buttons.md @@ -12,9 +12,9 @@ import Tags from './../../auto-generated/ix-toggle-button/tags.md'; # Toggle buttons -
-
- + +Toggle buttons are button elements which allow the user to activate/deactivate a function. + From d474da2e9aefa19c85e777e61993989370741d75 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:43:35 +0100 Subject: [PATCH 25/82] docs: Remove intro sentence from _toggle-button_styleguide.md --- .../docs/controls/buttons/_toggle-button_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md b/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md index 8c9fb88cf8..c0cd4eeaf3 100644 --- a/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md +++ b/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md @@ -1,6 +1,6 @@ ## 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. +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) From 486a9c5993e38da0df7a073a3d3f34ceb4df71ed Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:57:39 +0100 Subject: [PATCH 26/82] docs: intro sentence for card-list --- packages/documentation/docs/controls/card-list.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/documentation/docs/controls/card-list.md b/packages/documentation/docs/controls/card-list.md index 799f727950..53fdda8218 100644 --- a/packages/documentation/docs/controls/card-list.md +++ b/packages/documentation/docs/controls/card-list.md @@ -12,10 +12,9 @@ import Tags from './../auto-generated/ix-card-list/tags.md'; # Card list - -
-
- + +Card lists are UI controls that display a large number of cards or items of the same type in a lightweight, grouped manner. + From af90bc06d7a774c8ab807a6754afd8fd4034fd48 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:58:36 +0100 Subject: [PATCH 27/82] docs: Remove intro sentence from _card-list_styleguide.md --- packages/documentation/docs/controls/_card-list_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_card-list_styleguide.md b/packages/documentation/docs/controls/_card-list_styleguide.md index c96516212d..37799f394b 100644 --- a/packages/documentation/docs/controls/_card-list_styleguide.md +++ b/packages/documentation/docs/controls/_card-list_styleguide.md @@ -1,6 +1,6 @@ ## 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. +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. From 8e812c538ed95d2efea67bcb13f9565f577cc16d Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 18:01:00 +0100 Subject: [PATCH 28/82] docs: intro sentence for card --- packages/documentation/docs/controls/card.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/card.md b/packages/documentation/docs/controls/card.md index e0b9b7eb81..826903bc69 100644 --- a/packages/documentation/docs/controls/card.md +++ b/packages/documentation/docs/controls/card.md @@ -4,7 +4,9 @@ import DocsUx from './\_card_styleguide.md'; import DocsCode from './\_card_code.md'; # Card - + +Cards are UI controls used to neatly organize and group related information about a specific subject. + From 95d4b7a4f001b05681416bb00e669def0562df19 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 18:01:38 +0100 Subject: [PATCH 29/82] docs: Remove intro sentence from _card_styleguide.md --- packages/documentation/docs/controls/_card_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_card_styleguide.md b/packages/documentation/docs/controls/_card_styleguide.md index b3b3fcc480..aff454314b 100644 --- a/packages/documentation/docs/controls/_card_styleguide.md +++ b/packages/documentation/docs/controls/_card_styleguide.md @@ -1,6 +1,6 @@ ## 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 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. From 8e22bc0cb148aaa5b92cba752e67a88522ded249 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:16:50 +0100 Subject: [PATCH 30/82] docs: intro sentence for category-filter --- packages/documentation/docs/controls/category-filter.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/category-filter.md b/packages/documentation/docs/controls/category-filter.md index f56f52cbc0..2c182fda06 100644 --- a/packages/documentation/docs/controls/category-filter.md +++ b/packages/documentation/docs/controls/category-filter.md @@ -4,7 +4,9 @@ import DocsUx from './\_category-filter_styleguide.md' import DocsCode from './\_category-filter_code.md' # Category filter - + +The category filter allows users to quickly narrow their search by selecting predefined categories. + From f81004bf1ce3d852358c5ab432f2fac16436f5ed Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:17:55 +0100 Subject: [PATCH 31/82] docs: Remove intro sentence from _category-filter_styleguide.md --- .../documentation/docs/controls/_category-filter_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_category-filter_styleguide.md b/packages/documentation/docs/controls/_category-filter_styleguide.md index 7d62f0405c..3dfb19fdcb 100644 --- a/packages/documentation/docs/controls/_category-filter_styleguide.md +++ b/packages/documentation/docs/controls/_category-filter_styleguide.md @@ -1,6 +1,6 @@ ## 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. +The category filter component enhances data navigation and user experience. We typically use a category filter to efficiently navigate large data sets, being 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) From 577d952b7264331c2911c6c5b5b66336f7f230e3 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:21:58 +0100 Subject: [PATCH 32/82] docs: intro sentence for charts-basics --- packages/documentation/docs/controls/charts/overview.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/charts/overview.md b/packages/documentation/docs/controls/charts/overview.md index 63b34796c3..215978a70f 100644 --- a/packages/documentation/docs/controls/charts/overview.md +++ b/packages/documentation/docs/controls/charts/overview.md @@ -4,7 +4,9 @@ sidebar_position: 0 import Playground from '@site/src/components/PlaygroundV3'; # Basics - + +Charts are essential tools for visualizing data, making complex information more accessible and easier to understand. + Siemens Industrial Experience provides a theme for the popular chart library [ECharts](https://echarts.apache.org/handbook/en/get-started). This lets you harness the power of ECharts with seamless integration into the Siemens Industrial Experience styleguide. From a5accb29eef0c2bb081caaed06c3e85c0c053f7d Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:23:46 +0100 Subject: [PATCH 33/82] docs: intro sentence for charts-functionalities --- packages/documentation/docs/controls/charts/special-chart.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/charts/special-chart.md b/packages/documentation/docs/controls/charts/special-chart.md index aad0242907..ff7c89cbc1 100644 --- a/packages/documentation/docs/controls/charts/special-chart.md +++ b/packages/documentation/docs/controls/charts/special-chart.md @@ -4,9 +4,9 @@ sidebar_position: 1 import Playground from '@site/src/components/PlaygroundV3'; # Functionalities - + ECharts offers a wide variety of different chart types and features. Following page deals with some more special chart types and chart features, which might become handy in some use cases. - + ## Examples From 226e454d15475612327b4bc529d21eefb34f56c3 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:27:35 +0100 Subject: [PATCH 34/82] docs: intro sentence for 3d-charts --- packages/documentation/docs/controls/charts/3d.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/charts/3d.md b/packages/documentation/docs/controls/charts/3d.md index e7da159881..1bc208d177 100644 --- a/packages/documentation/docs/controls/charts/3d.md +++ b/packages/documentation/docs/controls/charts/3d.md @@ -1,7 +1,9 @@ import Playground from '@site/src/components/PlaygroundV3'; # 3D-Charting - + +3D charts are dynamic tools that enhance data visualization by adding depth to traditional 2D charts, making complex data sets more comprehensible. + The `echarts-gl` package extends ECharts to support 3D visualizations, enabling you to create immersive and interactive charts. With this package, you can design a variety of 3D charts, including: From 9ade775308df311c4605ecf22f22ce36a810dbf2 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:32:26 +0100 Subject: [PATCH 35/82] docs: intro sentence for bar-chart --- packages/documentation/docs/controls/charts/bar-chart.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/documentation/docs/controls/charts/bar-chart.md b/packages/documentation/docs/controls/charts/bar-chart.md index d24662d06a..837e0092ab 100644 --- a/packages/documentation/docs/controls/charts/bar-chart.md +++ b/packages/documentation/docs/controls/charts/bar-chart.md @@ -1,11 +1,14 @@ import Playground from '@site/src/components/PlaygroundV3'; # Bar chart - + +Bar charts are widely used visual tools that simplify data representation and comparison across different categories. + +Bar charts can be oriented horizontally or vertically, providing a straightforward way to represent and compare data across various categories or assets. Each bar in a bar chart represents a category of data, with the length or height of the bar proportional to the value it represents. This makes it easy to quickly identify which categories are larger or smaller and to compare values across different groups. ## Examples ### Bar chart horizontal - +A basic bar chart is a simple graphical representation of data, where the length of each bar is proportional to the value it represents. It’s commonly used to compare different categories or track changes over time. ### Bar chart horizontal stacked - +A stacked bar chart is a variation where the bars in a standard chart are divided into segments denoting contributing categories that sum up to the whole. These charts are used to compare totals and simultaneously understand the values of contributing categories. Date: Tue, 10 Dec 2024 20:39:27 +0100 Subject: [PATCH 36/82] docs: intro sentence for gauge-chart --- .../documentation/docs/controls/charts/gauge-chart.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/documentation/docs/controls/charts/gauge-chart.md b/packages/documentation/docs/controls/charts/gauge-chart.md index ae5832fd9f..77b4728c17 100644 --- a/packages/documentation/docs/controls/charts/gauge-chart.md +++ b/packages/documentation/docs/controls/charts/gauge-chart.md @@ -1,11 +1,14 @@ import Playground from '@site/src/components/PlaygroundV3'; # Gauge chart - + +Gauge charts are a type of data visualization used to display information as a reading on a dial. They are particularly effective for showing progress towards a goal, performance metrics, or any data that falls within a range. + +The chart consists of a circular arc with a needle pointing to a specific value, making it easy to quickly assess the status or performance level. Gauge charts are commonly used in dashboards to provide an at-a-glance view of key performance indicators (KPIs). ## Examples ### Performance metrics gauge - +Performance metrics gauge charts, also known as dial or speedometer charts, are an effective way to visualize key performance indicators (KPIs) and other metrics. These charts use a needle or pointer to indicate the current value of a metric within a predefined range, often segmented into different zones (e.g., red for poor performance, green for good performance). This design allows for a quick and intuitive understanding of performance levels. ### Progress circle gauge - +Progress circle charts, also known as radial progress charts or circular progress bars, are a visually appealing way to represent data and track progress towards a goal. These charts use a circular shape to display the percentage of completion, making it easy to quickly grasp the status of a project or task. The circle is typically filled in proportion to the progress made, with the center often displaying the percentage value. ### Progress arc gauge - +Progress arc charts, also known as semi-circular progress bars, are a dynamic way to visualize data and track progress. Unlike (full) circle charts, progress arc charts use a semi-circle or arc to represent the percentage of completion. This design can be particularly effective in dashboards and user interfaces where space is limited, yet a clear and engaging visual representation is needed. Date: Tue, 10 Dec 2024 20:44:58 +0100 Subject: [PATCH 37/82] docs: intro sentence for line-chart --- .../documentation/docs/controls/charts/line-chart.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/documentation/docs/controls/charts/line-chart.md b/packages/documentation/docs/controls/charts/line-chart.md index 6190b70879..796f2416c1 100644 --- a/packages/documentation/docs/controls/charts/line-chart.md +++ b/packages/documentation/docs/controls/charts/line-chart.md @@ -1,12 +1,15 @@ import Playground from '@site/src/components/PlaygroundV3'; # Line chart - + +Line charts are effective graphical tools for displaying data trends over time, helping users identify patterns and anomalies. + +Line charts can reveal patterns or fluctuations in data, making it easier for users to identify anomalies. By analyzing past trends, line charts can help in predicting future values. Multiple lines can be used to compare different sets of data, such as the performance of various assets or technical devices, providing a clear visual comparison. ## Examples ### Basic line chart - +Basic line charts use a series of data points connected by straight lines to show changes in values, making it easy to identify patterns, trends, and fluctuations. They are particularly effective for displaying continuous data, such as stock prices, temperature changes, or sales figures. Their simplicity and clarity make them a popular choice for dashboards, where understanding data trends is essential. ### Multi-y-axis line chart - +Multi-y-axis line charts visualize complex data sets that involve different scales or units of measurement. These charts use two or more vertical axes to plot multiple data series, allowing for a clear comparison of trends and relationships between different variables. By aligning each data series with its respective axis, these charts make it easier to interpret and analyze data that would otherwise be difficult to compare on a single axis. ### Advanced line chart - +Advanced line charts are an enhanced version of basic line charts, designed to provide deeper insights and more detailed analysis of data trends. These charts often incorporate features such as multiple data series, interactive elements, and additional annotations to highlight key points or events. Advanced line charts can also include trend lines, moving averages, and other statistical tools to help identify patterns and correlations. Date: Tue, 10 Dec 2024 20:47:18 +0100 Subject: [PATCH 38/82] docs: intro sentence for pie-chart --- .../docs/controls/charts/pie-chart.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/documentation/docs/controls/charts/pie-chart.md b/packages/documentation/docs/controls/charts/pie-chart.md index 80177fd310..4950ab24c0 100644 --- a/packages/documentation/docs/controls/charts/pie-chart.md +++ b/packages/documentation/docs/controls/charts/pie-chart.md @@ -1,23 +1,26 @@ import Playground from '@site/src/components/PlaygroundV3'; # Pie chart - + +Pie charts are a popular and visually appealing way to represent data. They are circular graphs divided into slices, where each slice represents a proportion of the whole. + +This type of chart is particularly useful for displaying categorical data and showing the relative sizes of different categories. By providing a clear and immediate visual comparison, pie charts make it easy to understand the distribution and composition of data at a glance. ## Examples -### Donut chart - +### Pie chart +Pie charts are a straightforward and effective way to visualize data proportions within a whole. -### Pie chart - +### Donut chart +Donut charts are a variation of pie charts. They feature a central hole, giving them a distinctive “donut” shape. This design not only makes them visually appealing but also allows for additional information or labels to be placed in the center. From 5ae305ed5cecf3caaa2fd08239a0e2999a7c599b Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:51:29 +0100 Subject: [PATCH 39/82] docs: intro sentence for checkbox --- packages/documentation/docs/controls/checkbox.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/checkbox.mdx b/packages/documentation/docs/controls/checkbox.mdx index 25ea5d0f35..1ee0b965db 100644 --- a/packages/documentation/docs/controls/checkbox.mdx +++ b/packages/documentation/docs/controls/checkbox.mdx @@ -15,8 +15,9 @@ import DocsCode from './_forms-checkbox_code.mdx'; > -
-
+ +Checkboxes are small interactive boxes that allow users to toggle between an affirmative or negative choice. + From c53124ee9e305a14f7c9067db2de8f5d00e595c0 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:52:16 +0100 Subject: [PATCH 40/82] docs: Remove intro sentence from _forms-checkbox_styleguide.md --- .../documentation/docs/controls/_forms-checkbox_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_forms-checkbox_styleguide.md b/packages/documentation/docs/controls/_forms-checkbox_styleguide.md index 82ef6dca3b..8d801765bf 100644 --- a/packages/documentation/docs/controls/_forms-checkbox_styleguide.md +++ b/packages/documentation/docs/controls/_forms-checkbox_styleguide.md @@ -1,6 +1,6 @@ ## 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. +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) From b93a477a34e9ee142f10bfa581ba608a095ee6fc Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:53:50 +0100 Subject: [PATCH 41/82] docs: intro sentence for chip --- packages/documentation/docs/controls/chip.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/chip.md b/packages/documentation/docs/controls/chip.md index b5e4bacd12..2632690603 100644 --- a/packages/documentation/docs/controls/chip.md +++ b/packages/documentation/docs/controls/chip.md @@ -8,7 +8,9 @@ import DocsUx from './\_chip_styleguide.md' import DocsCode from './\_chip_code.md' # Chip - + +Chips are components used to display small pieces of information in a compact and visually appealing way. + From 2a253303c2bfcfdcef4bb884305883518eb1514c Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:54:33 +0100 Subject: [PATCH 42/82] docs: Remove intro sentence from _chip_styleguide.md --- packages/documentation/docs/controls/_chip_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_chip_styleguide.md b/packages/documentation/docs/controls/_chip_styleguide.md index ced52a0ff8..b3e2264e78 100644 --- a/packages/documentation/docs/controls/_chip_styleguide.md +++ b/packages/documentation/docs/controls/_chip_styleguide.md @@ -1,6 +1,6 @@ ## 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. +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) From fef5ff401a80360092a992d8cc77523d61e41719 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:56:27 +0100 Subject: [PATCH 43/82] docs: intro sentence for content-header --- packages/documentation/docs/controls/content-header.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/content-header.md b/packages/documentation/docs/controls/content-header.md index 34007b232c..5d9be771d2 100644 --- a/packages/documentation/docs/controls/content-header.md +++ b/packages/documentation/docs/controls/content-header.md @@ -4,7 +4,9 @@ import DocsUx from './\_content-header_styleguide.md' import DocsCode from './\_content-header_code.md' # Content header - + +The content header provides a brief overview of the content on a page.  + From 457f5e98dfa7001bd02006853fa1faac6c7891bc Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:56:57 +0100 Subject: [PATCH 44/82] docs: Remove intro sentence from _content-header_styleguide.md --- .../documentation/docs/controls/_content-header_styleguide.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/_content-header_styleguide.md b/packages/documentation/docs/controls/_content-header_styleguide.md index 428265d675..7fdf48aae6 100644 --- a/packages/documentation/docs/controls/_content-header_styleguide.md +++ b/packages/documentation/docs/controls/_content-header_styleguide.md @@ -1,7 +1,6 @@ ## 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. +The content header 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) From 1b7a2b33aa44de1547f31702d5f269a5a2f634bd Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:58:22 +0100 Subject: [PATCH 45/82] docs: intro sentence for custom-field --- packages/documentation/docs/controls/custom-field.mdx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/documentation/docs/controls/custom-field.mdx b/packages/documentation/docs/controls/custom-field.mdx index eaa823478d..09ce9d069e 100644 --- a/packages/documentation/docs/controls/custom-field.mdx +++ b/packages/documentation/docs/controls/custom-field.mdx @@ -7,10 +7,9 @@ import DocsCode from './_custom-field_code.mdx'; # Custom field - -
-
- + +The custom field is a wrapper component that can host any forms component. + From d91e6c1c1d66509b2b87c01ea3c8b9f1243b9401 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 20:59:18 +0100 Subject: [PATCH 46/82] docs: Remove intro sentence from _custom-field_styleguide.md --- .../documentation/docs/controls/_custom-field_styleguide.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_custom-field_styleguide.mdx b/packages/documentation/docs/controls/_custom-field_styleguide.mdx index f08e162723..86831861b8 100644 --- a/packages/documentation/docs/controls/_custom-field_styleguide.mdx +++ b/packages/documentation/docs/controls/_custom-field_styleguide.mdx @@ -1,6 +1,6 @@ ## 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. +The custom field's properties allow 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) From d28816c858523b69b782ae36c5b60e51a56fe7e7 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:01:20 +0100 Subject: [PATCH 47/82] docs: intro sentence for dropdown --- packages/documentation/docs/controls/dropdown.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/dropdown.md b/packages/documentation/docs/controls/dropdown.md index ebf1fb810d..c3363495f5 100644 --- a/packages/documentation/docs/controls/dropdown.md +++ b/packages/documentation/docs/controls/dropdown.md @@ -8,7 +8,9 @@ import DocsUx from './\_dropdown_styleguide.md'; import DocsCode from './\_dropdown_code.md'; # Dropdown - + +Dropdown containers display a menu with additional items when users click on the trigger element, e.g. a dropdown button. + From e55cdc82c261a84255b6cc1e891dd3e74667f3c2 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:05:46 +0100 Subject: [PATCH 48/82] docs: Remove intro sentence from _dropdown_styleguide.md --- packages/documentation/docs/controls/_dropdown_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_dropdown_styleguide.md b/packages/documentation/docs/controls/_dropdown_styleguide.md index dec86f4615..4e5d2dd9a2 100644 --- a/packages/documentation/docs/controls/_dropdown_styleguide.md +++ b/packages/documentation/docs/controls/_dropdown_styleguide.md @@ -1,6 +1,6 @@ ## 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. +We typically use dropdowns to allow users to select one option from a list. Selecting one of the items in the dropdown performs the action. ![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2353-2278&mode=design&t=OVHeXvLZYLkP2CzN-4) From 84f56992d582ee7fb44f84d0cce24b775d82ca5c Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:07:16 +0100 Subject: [PATCH 49/82] docs: intro sentence for panes --- packages/documentation/docs/controls/panes.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/panes.md b/packages/documentation/docs/controls/panes.md index 6a4c760771..ea02385bee 100644 --- a/packages/documentation/docs/controls/panes.md +++ b/packages/documentation/docs/controls/panes.md @@ -11,8 +11,9 @@ import Tags from './../auto-generated/ix-pane/tags.md'; -
-
+ +Panes are interactive components that allow users to access content that isn't constantly visible on the screen. + From 875f015ca8b3dd789ee1d1ba7e3e15dd56538d1d Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:07:42 +0100 Subject: [PATCH 50/82] docs: Remove intro sentence from _panes_styleguide.md --- packages/documentation/docs/controls/_panes_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_panes_styleguide.md b/packages/documentation/docs/controls/_panes_styleguide.md index 7ca9177904..17d2c69055 100644 --- a/packages/documentation/docs/controls/_panes_styleguide.md +++ b/packages/documentation/docs/controls/_panes_styleguide.md @@ -1,6 +1,6 @@ ## 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 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. From e396c3f9c12f7e266ec282dc5037259bfc9e08f1 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:09:55 +0100 Subject: [PATCH 51/82] docs: intro sentence for input-date --- packages/documentation/docs/controls/input-date.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/input-date.mdx b/packages/documentation/docs/controls/input-date.mdx index cdd98e6b0a..c391c329b9 100644 --- a/packages/documentation/docs/controls/input-date.mdx +++ b/packages/documentation/docs/controls/input-date.mdx @@ -13,8 +13,9 @@ import Tags from '@site/docs/auto-generated/ix-date-input/tags.md'; -
-
+ +The date input component allows users to enter and select dates in a standardized format, ensuring consistency and accuracy. + From bcc2cdb8af9d22b59e7d7b9f48d69a5ca6c287f6 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:11:20 +0100 Subject: [PATCH 52/82] docs: Remove intro sentence from _date-input_styleguide.md --- packages/documentation/docs/controls/_date-input_styleguide.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_date-input_styleguide.mdx b/packages/documentation/docs/controls/_date-input_styleguide.mdx index 3c537b2e57..c2a104a52c 100644 --- a/packages/documentation/docs/controls/_date-input_styleguide.mdx +++ b/packages/documentation/docs/controls/_date-input_styleguide.mdx @@ -1,6 +1,6 @@ ## 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. +The date input component is typically used in forms, filters, and scheduling tools to ensure consistent and accurate date entries. By standardizing date input, it helps maintain data integrity and improves the user experience in applications requiring precise date information. ![Date input overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3629-6200&t=ADQCetGKOEH1WG2r-4) From 72007d7cdc61bf5e09609667cd03852c309bdd18 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:12:32 +0100 Subject: [PATCH 53/82] docs: intro sentence for input-number --- packages/documentation/docs/controls/input-number.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/input-number.mdx b/packages/documentation/docs/controls/input-number.mdx index c7f3a1f11c..cb50f839f8 100644 --- a/packages/documentation/docs/controls/input-number.mdx +++ b/packages/documentation/docs/controls/input-number.mdx @@ -12,8 +12,9 @@ import Tags from '@site/docs/auto-generated/ix-number-input/tags.md'; -
-
+ +The number input component allows users to enter and adjust numerical values. + From 11ca058e3e4fff0ed17820eb617d54fd8e8a57e4 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:13:24 +0100 Subject: [PATCH 54/82] docs: Remove intro sentence from _number-input_styleguide.md --- .../documentation/docs/controls/_number-input_styleguide.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_number-input_styleguide.mdx b/packages/documentation/docs/controls/_number-input_styleguide.mdx index bde046118c..c789af25d3 100644 --- a/packages/documentation/docs/controls/_number-input_styleguide.mdx +++ b/packages/documentation/docs/controls/_number-input_styleguide.mdx @@ -1,6 +1,6 @@ ## 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. +The number input component is 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) From 0baa11572fd95572efc65c437ddef43e81566e5b Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:15:20 +0100 Subject: [PATCH 55/82] docs: intro sentence for input --- packages/documentation/docs/controls/input.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/input.mdx b/packages/documentation/docs/controls/input.mdx index 18a76235f7..24af6ca8d1 100644 --- a/packages/documentation/docs/controls/input.mdx +++ b/packages/documentation/docs/controls/input.mdx @@ -15,8 +15,9 @@ import Tags from './../auto-generated/ix-input/tags.md'; -
-
+ +Input fields enable users to enter and edit text, numbers, and symbols within an application. + From 42d819031fda35e0b542048c672dfc22d4fd67d8 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:16:30 +0100 Subject: [PATCH 56/82] docs: Remove intro sentence from _input_styleguide.md --- packages/documentation/docs/controls/_input_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_input_styleguide.md b/packages/documentation/docs/controls/_input_styleguide.md index 4e138b1f37..27d8d600e3 100644 --- a/packages/documentation/docs/controls/_input_styleguide.md +++ b/packages/documentation/docs/controls/_input_styleguide.md @@ -1,6 +1,6 @@ ## 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. +Input fields are 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) From 068e2df5baa6442c0f838d570ca5e791c1934bc0 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:17:52 +0100 Subject: [PATCH 57/82] docs: intro sentence for layout-grid --- packages/documentation/docs/controls/layout-grid.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/layout-grid.md b/packages/documentation/docs/controls/layout-grid.md index 7a54e0b51b..bcef9727ea 100644 --- a/packages/documentation/docs/controls/layout-grid.md +++ b/packages/documentation/docs/controls/layout-grid.md @@ -10,8 +10,9 @@ import Tags from './../auto-generated/ix-layout-grid/tags.md'; -
-
+ +Grids are typically used to make layouts more cohesive and consistent. + From e4ea369bf5128dd453a4e4e4e1db19cbe9d38a93 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:18:30 +0100 Subject: [PATCH 58/82] docs: Remove intro sentence from _layout-grid_styleguide.md --- packages/documentation/docs/controls/_layout-grid_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_layout-grid_styleguide.md b/packages/documentation/docs/controls/_layout-grid_styleguide.md index b75edddcd7..fa2de3102f 100644 --- a/packages/documentation/docs/controls/_layout-grid_styleguide.md +++ b/packages/documentation/docs/controls/_layout-grid_styleguide.md @@ -1,6 +1,6 @@ ## 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. +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. From f8685b143231ecfa7816ecbaccc49ac94f7bfbf0 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:20:11 +0100 Subject: [PATCH 59/82] docs: intro sentence for pill --- packages/documentation/docs/controls/pill.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/pill.md b/packages/documentation/docs/controls/pill.md index 31d3a1de7a..31193842dd 100644 --- a/packages/documentation/docs/controls/pill.md +++ b/packages/documentation/docs/controls/pill.md @@ -4,7 +4,9 @@ import DocsUx from './\_pill_styleguide.md' import DocsCode from './\_pill_code.md' # Pill - + +Pills are compact UI components designed to display small pieces of information in a visually appealing manner. + From 91b18f7c390799925ca114b27d831f1e010d1e2a Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:21:13 +0100 Subject: [PATCH 60/82] docs: Remove intro sentence from _pill_styleguide.md --- packages/documentation/docs/controls/_pill_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_pill_styleguide.md b/packages/documentation/docs/controls/_pill_styleguide.md index 705bdc6710..dec6df309d 100644 --- a/packages/documentation/docs/controls/_pill_styleguide.md +++ b/packages/documentation/docs/controls/_pill_styleguide.md @@ -1,6 +1,6 @@ ## 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. +Typically, pills contain a concise label and sometimes an icon. They are not clickable or closable, making them ideal for presenting static information succinctly within an application. ![Pill overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1377-3110&mode=design&t=ZmcRP4ggXtr8b7vZ-1) From 30f8806f3c20760b406a87cb20a3a2e4ed61c623 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:22:51 +0100 Subject: [PATCH 61/82] docs: intro sentence for radio --- packages/documentation/docs/controls/radio.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/radio.mdx b/packages/documentation/docs/controls/radio.mdx index f9bd455ea9..1d9936c115 100644 --- a/packages/documentation/docs/controls/radio.mdx +++ b/packages/documentation/docs/controls/radio.mdx @@ -13,8 +13,9 @@ import DocsCode from './_radio_code.mdx'; -
-
+ +Radio buttons are elements that enable users to choose only one option from a predefined set of mutually exclusive options. + From 6d862b1445e962a66e9938362ff3e20a1493ba03 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:23:27 +0100 Subject: [PATCH 62/82] docs: Remove intro sentence from _radio_styleguide.md --- packages/documentation/docs/controls/_radio_styleguide.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_radio_styleguide.mdx b/packages/documentation/docs/controls/_radio_styleguide.mdx index 727e1a1a24..a1372eebe6 100644 --- a/packages/documentation/docs/controls/_radio_styleguide.mdx +++ b/packages/documentation/docs/controls/_radio_styleguide.mdx @@ -1,6 +1,6 @@ ## 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. +Radio buttons 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=3384-108&t=GDd4aJQUrPB3cC9X-4) From 0c5fe72b54d660a87dfb7d1bf1e9dc4baf8e62e6 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:24:40 +0100 Subject: [PATCH 63/82] docs: intro sentence for select --- packages/documentation/docs/controls/select.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/select.mdx b/packages/documentation/docs/controls/select.mdx index 7d0a7811bc..db774d5667 100644 --- a/packages/documentation/docs/controls/select.mdx +++ b/packages/documentation/docs/controls/select.mdx @@ -11,8 +11,9 @@ import Tags from './../auto-generated/ix-select/tags.md'; -
-
+ +A select component allows users to choose from a list of options. + From 1558ba851991cde1e705ab6fb99266291fda77d9 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:25:20 +0100 Subject: [PATCH 64/82] docs: Remove intro sentence from _select_styleguide.md --- packages/documentation/docs/controls/_select_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_select_styleguide.md b/packages/documentation/docs/controls/_select_styleguide.md index f27e66d8a2..66fa67c74c 100644 --- a/packages/documentation/docs/controls/_select_styleguide.md +++ b/packages/documentation/docs/controls/_select_styleguide.md @@ -1,6 +1,6 @@ ## 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. +The select component 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) From b1c1e43938894a1b43ddd8e85419e63c3fac503f Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:26:54 +0100 Subject: [PATCH 65/82] docs: intro sentence for textarea --- packages/documentation/docs/controls/textarea.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/textarea.mdx b/packages/documentation/docs/controls/textarea.mdx index 5bce88f4d4..b1443723d0 100644 --- a/packages/documentation/docs/controls/textarea.mdx +++ b/packages/documentation/docs/controls/textarea.mdx @@ -12,8 +12,9 @@ import Tags from '@site/docs/auto-generated/ix-textarea/tags.md'; -
-
+ +The textarea component is designed for multi-line text input, making it perfect for forms that require longer entries. + From 5c1909fe69f09d4bcf56014af035be98fbc691cd Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:27:54 +0100 Subject: [PATCH 66/82] docs: Remove intro sentence from _textarea_styleguide.md --- .../documentation/docs/controls/_textarea-field_styleguide.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_textarea-field_styleguide.mdx b/packages/documentation/docs/controls/_textarea-field_styleguide.mdx index 1111c1a3bb..55f0a70873 100644 --- a/packages/documentation/docs/controls/_textarea-field_styleguide.mdx +++ b/packages/documentation/docs/controls/_textarea-field_styleguide.mdx @@ -1,6 +1,6 @@ ## 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. +The textarea component is typically used in scenarios such as feedback forms, comment sections, and message composition. Its ability to handle extensive text input makes it a versatile tool for collecting detailed user information. ![Textarea overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3814-1128&t=DtCmoFcLwhf7ke3S-4) From 61effaee472b8d276b480bf595c3909fb7f68985 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:29:11 +0100 Subject: [PATCH 67/82] docs: intro sentence for toast --- packages/documentation/docs/controls/toast.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/toast.md b/packages/documentation/docs/controls/toast.md index 648ed6d138..c46478c1ed 100644 --- a/packages/documentation/docs/controls/toast.md +++ b/packages/documentation/docs/controls/toast.md @@ -4,7 +4,9 @@ import DocsUx from './\_toast_styleguide.md' import DocsCode from './\_toast_code.md' # Toast - + +Toasts are small pop-ups that provide simple feedback on a process. + From cc0f1c9f490c4c7fb5173ce2aefa630d48ef79b2 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:29:58 +0100 Subject: [PATCH 68/82] docs: Remove intro sentence from _toast_styleguide.md --- packages/documentation/docs/controls/_toast_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_toast_styleguide.md b/packages/documentation/docs/controls/_toast_styleguide.md index 9689e781c7..dac54c9fe3 100644 --- a/packages/documentation/docs/controls/_toast_styleguide.md +++ b/packages/documentation/docs/controls/_toast_styleguide.md @@ -1,6 +1,6 @@ ## 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. +Toasts 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) From 78e8fd5da7f642f929334838dee7c21ef299a9f8 Mon Sep 17 00:00:00 2001 From: flxlst09 <116285506+flxlst09@users.noreply.github.com> Date: Wed, 11 Dec 2024 08:20:02 +0100 Subject: [PATCH 69/82] docs: intro sentence for time-picker --- packages/documentation/docs/controls/time-picker.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/time-picker.md b/packages/documentation/docs/controls/time-picker.md index 1f669e1485..b0c1aaf48b 100644 --- a/packages/documentation/docs/controls/time-picker.md +++ b/packages/documentation/docs/controls/time-picker.md @@ -4,7 +4,9 @@ import Events from './../auto-generated/ix-time-picker/events.md'; import Playground from '@site/src/components/PlaygroundV3'; # Time picker - + +The time picker component allows users to select specific times ensuring accurate time input. + ## Examples ### Basic From 2b0ca139261b90bd068757d3fa73bf4323d3623d Mon Sep 17 00:00:00 2001 From: "kathrin.schalber.ext" Date: Wed, 11 Dec 2024 09:41:19 +0100 Subject: [PATCH 70/82] docs: intro sentence for drawer --- packages/documentation/docs/controls/drawer.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/documentation/docs/controls/drawer.md b/packages/documentation/docs/controls/drawer.md index 6bb63fccfd..12a75cb976 100644 --- a/packages/documentation/docs/controls/drawer.md +++ b/packages/documentation/docs/controls/drawer.md @@ -5,6 +5,10 @@ import Playground from '@site/src/components/PlaygroundV3'; # Drawer + +The drawer is a component that opens on click on a button and shows additional content. + + ## Examples ### Basic From 930c7e89a6607a4ca384f7586b72a958ad283b69 Mon Sep 17 00:00:00 2001 From: "kathrin.schalber.ext" Date: Wed, 11 Dec 2024 09:45:47 +0100 Subject: [PATCH 71/82] docs: fix intro sentence for drawer --- packages/documentation/docs/controls/drawer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/drawer.md b/packages/documentation/docs/controls/drawer.md index 12a75cb976..45336857c3 100644 --- a/packages/documentation/docs/controls/drawer.md +++ b/packages/documentation/docs/controls/drawer.md @@ -6,7 +6,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Drawer -The drawer is a component that opens on click on a button and shows additional content. +Drawers are containers that open on click on a button to show additional content. ## Examples From f9281072a943688b7465b267234f27626c4d4aab Mon Sep 17 00:00:00 2001 From: "kathrin.schalber.ext" Date: Wed, 11 Dec 2024 09:46:08 +0100 Subject: [PATCH 72/82] docs: intro sentence for empty state --- packages/documentation/docs/controls/empty-state.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/documentation/docs/controls/empty-state.md b/packages/documentation/docs/controls/empty-state.md index cb3e15dc4a..53851b2b74 100644 --- a/packages/documentation/docs/controls/empty-state.md +++ b/packages/documentation/docs/controls/empty-state.md @@ -7,6 +7,9 @@ import Playground from '@site/src/components/PlaygroundV3'; # Empty state + +Empty states inform users that there is no content to display. + ## Examples From 829b515ac04f8962218695772de2df4066f87cb5 Mon Sep 17 00:00:00 2001 From: "kathrin.schalber.ext" Date: Wed, 11 Dec 2024 10:00:20 +0100 Subject: [PATCH 73/82] docs: intro sentence for event-list --- packages/documentation/docs/controls/event-list.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/documentation/docs/controls/event-list.md b/packages/documentation/docs/controls/event-list.md index c9d1dde05f..13f629da4b 100644 --- a/packages/documentation/docs/controls/event-list.md +++ b/packages/documentation/docs/controls/event-list.md @@ -8,6 +8,10 @@ import Playground from '@site/src/components/PlaygroundV3'; # Event list + +Event lists display a list of any type of elements with additional details. + + ## Examples ### Basic From d58ee2a6e6b3237a3658b8547bcea7f62a8f572b Mon Sep 17 00:00:00 2001 From: "kathrin.schalber.ext" Date: Wed, 11 Dec 2024 10:00:28 +0100 Subject: [PATCH 74/82] docs: intro sentence for expanding-search --- packages/documentation/docs/controls/expanding-search.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/documentation/docs/controls/expanding-search.md b/packages/documentation/docs/controls/expanding-search.md index 04aba17b72..861b671543 100644 --- a/packages/documentation/docs/controls/expanding-search.md +++ b/packages/documentation/docs/controls/expanding-search.md @@ -5,6 +5,10 @@ import Playground from '@site/src/components/PlaygroundV3'; # Expanding search + +Expanding searches are search fields that expand on click to save space. + + ## Examples ### Basic From 59c0d13b69e66463a161d436e7fd8b93edb45f84 Mon Sep 17 00:00:00 2001 From: "kathrin.schalber.ext" Date: Wed, 11 Dec 2024 10:00:33 +0100 Subject: [PATCH 75/82] docs: intro sentence for flip --- packages/documentation/docs/controls/flip.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/documentation/docs/controls/flip.md b/packages/documentation/docs/controls/flip.md index 915ebd6210..7648183c5f 100644 --- a/packages/documentation/docs/controls/flip.md +++ b/packages/documentation/docs/controls/flip.md @@ -5,6 +5,10 @@ import Playground from '@site/src/components/PlaygroundV3'; # Flip + +Flips are containers that flip on click to reveal additional content. + + ## Examples ### Basic From ed1e83fded2f27164bac5f4a2e825437e0889166 Mon Sep 17 00:00:00 2001 From: "kathrin.schalber.ext" Date: Wed, 11 Dec 2024 10:00:37 +0100 Subject: [PATCH 76/82] docs: intro sentence for grid --- packages/documentation/docs/controls/grid.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/documentation/docs/controls/grid.md b/packages/documentation/docs/controls/grid.md index 536f3443fe..e6f6ee0b0c 100644 --- a/packages/documentation/docs/controls/grid.md +++ b/packages/documentation/docs/controls/grid.md @@ -2,6 +2,10 @@ import Playground from '@site/src/components/PlaygroundV3'; # Grid (AG Grid) + +AG Grids are used to display tabular data in a structured way and provide additional functionality, e.g. sorting. + + Siemens Industrial Experience provides a theme for the popular data grid library [AG Grid](https://www.ag-grid.com). This lets you harness the power of AG Grid with seamless integration into the Siemens Industrial Experience styleguide. From d134b0561232a576b3ac08cfd81e2e01ddfaf73e Mon Sep 17 00:00:00 2001 From: "kathrin.schalber.ext" Date: Wed, 11 Dec 2024 10:00:40 +0100 Subject: [PATCH 77/82] docs: intro sentence for group --- packages/documentation/docs/controls/group.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/documentation/docs/controls/group.md b/packages/documentation/docs/controls/group.md index 7a6b7cbd08..4a5df2769a 100644 --- a/packages/documentation/docs/controls/group.md +++ b/packages/documentation/docs/controls/group.md @@ -8,6 +8,10 @@ import Playground from '@site/src/components/PlaygroundV3'; # Group + +Groups are expandable containers for a list of selectable options. + + ## Examples ### Basic From d827a3b8cbf61d5f9301871fe2d06bc4376a987d Mon Sep 17 00:00:00 2001 From: "kathrin.schalber.ext" Date: Wed, 11 Dec 2024 10:00:46 +0100 Subject: [PATCH 78/82] docs: intro sentence for html-grid --- packages/documentation/docs/controls/html-grid.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/documentation/docs/controls/html-grid.mdx b/packages/documentation/docs/controls/html-grid.mdx index ede22342d7..cc61beb22a 100644 --- a/packages/documentation/docs/controls/html-grid.mdx +++ b/packages/documentation/docs/controls/html-grid.mdx @@ -2,6 +2,10 @@ import Playground from '@site/src/components/PlaygroundV3'; # HTML-Grid + +HTML Grids are used to display tabular data in a structured way. + + ## Examples ### Basic From 110d3bb70ae1519de8e65aa7acb89c0b05bd2a46 Mon Sep 17 00:00:00 2001 From: "kathrin.schalber.ext" Date: Wed, 11 Dec 2024 11:17:14 +0100 Subject: [PATCH 79/82] fixed inconsistencies and rephrased a bit --- packages/documentation/docs/controls/breadcrumb.md | 2 +- packages/documentation/docs/controls/buttons/dropdown-button.md | 2 +- packages/documentation/docs/controls/buttons/link-button.md | 2 +- packages/documentation/docs/controls/buttons/split-button.md | 2 +- packages/documentation/docs/controls/buttons/toggle-buttons.md | 2 +- packages/documentation/docs/controls/card-list.md | 2 +- packages/documentation/docs/controls/card.md | 2 +- packages/documentation/docs/controls/category-filter.md | 2 +- packages/documentation/docs/controls/charts/3d.md | 2 +- packages/documentation/docs/controls/charts/bar-chart.md | 2 +- packages/documentation/docs/controls/charts/gauge-chart.md | 2 +- packages/documentation/docs/controls/charts/line-chart.md | 2 +- packages/documentation/docs/controls/charts/pie-chart.md | 2 +- packages/documentation/docs/controls/charts/special-chart.md | 2 +- packages/documentation/docs/controls/checkbox.mdx | 2 +- packages/documentation/docs/controls/chip.md | 2 +- packages/documentation/docs/controls/content-header.md | 2 +- packages/documentation/docs/controls/custom-field.mdx | 2 +- packages/documentation/docs/controls/date-picker.md | 2 +- packages/documentation/docs/controls/input-date.mdx | 2 +- packages/documentation/docs/controls/input-number.mdx | 2 +- packages/documentation/docs/controls/input.mdx | 2 +- packages/documentation/docs/controls/layout-grid.md | 2 +- packages/documentation/docs/controls/pill.md | 2 +- packages/documentation/docs/controls/radio.mdx | 2 +- packages/documentation/docs/controls/select.mdx | 2 +- packages/documentation/docs/controls/textarea.mdx | 2 +- packages/documentation/docs/controls/time-picker.md | 2 +- 28 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/documentation/docs/controls/breadcrumb.md b/packages/documentation/docs/controls/breadcrumb.md index 6fba4753dd..f93221a2ed 100644 --- a/packages/documentation/docs/controls/breadcrumb.md +++ b/packages/documentation/docs/controls/breadcrumb.md @@ -5,7 +5,7 @@ import DocsCode from './\_breadcrumb_code.md' # Breadcrumb -Breadcrumb navigation provides a clear path of navigation within an application. +Breadcrumbs provide a clear path of navigation within an application. diff --git a/packages/documentation/docs/controls/buttons/dropdown-button.md b/packages/documentation/docs/controls/buttons/dropdown-button.md index a2a3a1c03c..a29d57da37 100644 --- a/packages/documentation/docs/controls/buttons/dropdown-button.md +++ b/packages/documentation/docs/controls/buttons/dropdown-button.md @@ -13,7 +13,7 @@ import Tags from './../../auto-generated/ix-dropdown-button/tags.md' -Dropdown buttons enable users to choose from a list of actions by clicking a button to reveal a dropdown menu. +Dropdown buttons reveal a list of actions on click on a button. diff --git a/packages/documentation/docs/controls/buttons/link-button.md b/packages/documentation/docs/controls/buttons/link-button.md index b940a99d6f..cca63b37fe 100644 --- a/packages/documentation/docs/controls/buttons/link-button.md +++ b/packages/documentation/docs/controls/buttons/link-button.md @@ -13,7 +13,7 @@ import Tags from './../../auto-generated/ix-link-button/tags.md'; -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. +Link buttons lead users to another location within the application or outside of it and contain a chevron and a text label. diff --git a/packages/documentation/docs/controls/buttons/split-button.md b/packages/documentation/docs/controls/buttons/split-button.md index 2834f96281..d01edc5998 100644 --- a/packages/documentation/docs/controls/buttons/split-button.md +++ b/packages/documentation/docs/controls/buttons/split-button.md @@ -9,7 +9,7 @@ import DocsCode from './\_split-button_code.md'; # Split button -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.  +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. diff --git a/packages/documentation/docs/controls/buttons/toggle-buttons.md b/packages/documentation/docs/controls/buttons/toggle-buttons.md index 2ee2d91376..dc2e718860 100644 --- a/packages/documentation/docs/controls/buttons/toggle-buttons.md +++ b/packages/documentation/docs/controls/buttons/toggle-buttons.md @@ -13,7 +13,7 @@ import Tags from './../../auto-generated/ix-toggle-button/tags.md'; -Toggle buttons are button elements which allow the user to activate/deactivate a function. +Toggle buttons allow users to activate and deactivate a function. diff --git a/packages/documentation/docs/controls/card-list.md b/packages/documentation/docs/controls/card-list.md index 53fdda8218..3acc794f1e 100644 --- a/packages/documentation/docs/controls/card-list.md +++ b/packages/documentation/docs/controls/card-list.md @@ -13,7 +13,7 @@ import Tags from './../auto-generated/ix-card-list/tags.md'; -Card lists are UI controls that display a large number of cards or items of the same type in a lightweight, grouped manner. +Card lists display a large number of cards or items of the same type in a lightweight, grouped manner. diff --git a/packages/documentation/docs/controls/card.md b/packages/documentation/docs/controls/card.md index 826903bc69..fb9c353b22 100644 --- a/packages/documentation/docs/controls/card.md +++ b/packages/documentation/docs/controls/card.md @@ -5,7 +5,7 @@ import DocsCode from './\_card_code.md'; # Card -Cards are UI controls used to neatly organize and group related information about a specific subject. +Cards neatly organize and group related information about a specific subject. diff --git a/packages/documentation/docs/controls/category-filter.md b/packages/documentation/docs/controls/category-filter.md index 2c182fda06..e33058a9c9 100644 --- a/packages/documentation/docs/controls/category-filter.md +++ b/packages/documentation/docs/controls/category-filter.md @@ -5,7 +5,7 @@ import DocsCode from './\_category-filter_code.md' # Category filter -The category filter allows users to quickly narrow their search by selecting predefined categories. +Category filters allow users to quickly narrow their search by selecting predefined categories. diff --git a/packages/documentation/docs/controls/charts/3d.md b/packages/documentation/docs/controls/charts/3d.md index 1bc208d177..7d96cdb3ac 100644 --- a/packages/documentation/docs/controls/charts/3d.md +++ b/packages/documentation/docs/controls/charts/3d.md @@ -2,7 +2,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # 3D-Charting -3D charts are dynamic tools that enhance data visualization by adding depth to traditional 2D charts, making complex data sets more comprehensible. +3D charts enhance data visualization by adding depth to traditional 2D charts, making complex data sets more comprehensible. The `echarts-gl` package extends ECharts to support 3D visualizations, enabling you to create immersive and interactive charts. With this package, you can design a variety of 3D charts, including: diff --git a/packages/documentation/docs/controls/charts/bar-chart.md b/packages/documentation/docs/controls/charts/bar-chart.md index 837e0092ab..36e8ddf28a 100644 --- a/packages/documentation/docs/controls/charts/bar-chart.md +++ b/packages/documentation/docs/controls/charts/bar-chart.md @@ -2,7 +2,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Bar chart -Bar charts are widely used visual tools that simplify data representation and comparison across different categories. +Bar charts display data to visualize and compare relationships between or trends across different categories. Bar charts can be oriented horizontally or vertically, providing a straightforward way to represent and compare data across various categories or assets. Each bar in a bar chart represents a category of data, with the length or height of the bar proportional to the value it represents. This makes it easy to quickly identify which categories are larger or smaller and to compare values across different groups. ## Examples diff --git a/packages/documentation/docs/controls/charts/gauge-chart.md b/packages/documentation/docs/controls/charts/gauge-chart.md index 77b4728c17..6919607528 100644 --- a/packages/documentation/docs/controls/charts/gauge-chart.md +++ b/packages/documentation/docs/controls/charts/gauge-chart.md @@ -2,7 +2,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Gauge chart -Gauge charts are a type of data visualization used to display information as a reading on a dial. They are particularly effective for showing progress towards a goal, performance metrics, or any data that falls within a range. +Gauge charts display information as a reading on a dial. They are particularly effective for showing progress towards a goal, performance metrics, or any data that falls within a range. The chart consists of a circular arc with a needle pointing to a specific value, making it easy to quickly assess the status or performance level. Gauge charts are commonly used in dashboards to provide an at-a-glance view of key performance indicators (KPIs). ## Examples diff --git a/packages/documentation/docs/controls/charts/line-chart.md b/packages/documentation/docs/controls/charts/line-chart.md index 796f2416c1..4fccdff178 100644 --- a/packages/documentation/docs/controls/charts/line-chart.md +++ b/packages/documentation/docs/controls/charts/line-chart.md @@ -2,7 +2,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Line chart -Line charts are effective graphical tools for displaying data trends over time, helping users identify patterns and anomalies. +Line charts display data trends over time to help users identify patterns and anomalies. Line charts can reveal patterns or fluctuations in data, making it easier for users to identify anomalies. By analyzing past trends, line charts can help in predicting future values. Multiple lines can be used to compare different sets of data, such as the performance of various assets or technical devices, providing a clear visual comparison. diff --git a/packages/documentation/docs/controls/charts/pie-chart.md b/packages/documentation/docs/controls/charts/pie-chart.md index 4950ab24c0..649ff219ef 100644 --- a/packages/documentation/docs/controls/charts/pie-chart.md +++ b/packages/documentation/docs/controls/charts/pie-chart.md @@ -2,7 +2,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Pie chart -Pie charts are a popular and visually appealing way to represent data. They are circular graphs divided into slices, where each slice represents a proportion of the whole. +Pie charts are circular graphs divided into slices, where each slice represents a proportion of the whole. This type of chart is particularly useful for displaying categorical data and showing the relative sizes of different categories. By providing a clear and immediate visual comparison, pie charts make it easy to understand the distribution and composition of data at a glance. ## Examples diff --git a/packages/documentation/docs/controls/charts/special-chart.md b/packages/documentation/docs/controls/charts/special-chart.md index ff7c89cbc1..bbd7284888 100644 --- a/packages/documentation/docs/controls/charts/special-chart.md +++ b/packages/documentation/docs/controls/charts/special-chart.md @@ -5,7 +5,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Functionalities -ECharts offers a wide variety of different chart types and features. Following page deals with some more special chart types and chart features, which might become handy in some use cases. +ECharts offers a wide variety of different chart types and features, including interacting with charts that users need in some use cases. ## Examples diff --git a/packages/documentation/docs/controls/checkbox.mdx b/packages/documentation/docs/controls/checkbox.mdx index 1ee0b965db..aa4b529514 100644 --- a/packages/documentation/docs/controls/checkbox.mdx +++ b/packages/documentation/docs/controls/checkbox.mdx @@ -16,7 +16,7 @@ import DocsCode from './_forms-checkbox_code.mdx'; -Checkboxes are small interactive boxes that allow users to toggle between an affirmative or negative choice. +Checkboxes are form controls that allow users to select no, one or more options. diff --git a/packages/documentation/docs/controls/chip.md b/packages/documentation/docs/controls/chip.md index 2632690603..22a6d0f432 100644 --- a/packages/documentation/docs/controls/chip.md +++ b/packages/documentation/docs/controls/chip.md @@ -9,7 +9,7 @@ import DocsCode from './\_chip_code.md' # Chip -Chips are components used to display small pieces of information in a compact and visually appealing way. +Chips display small pieces of information in a compact and visually appealing way. diff --git a/packages/documentation/docs/controls/content-header.md b/packages/documentation/docs/controls/content-header.md index 5d9be771d2..f5b37bf5b7 100644 --- a/packages/documentation/docs/controls/content-header.md +++ b/packages/documentation/docs/controls/content-header.md @@ -5,7 +5,7 @@ import DocsCode from './\_content-header_code.md' # Content header -The content header provides a brief overview of the content on a page.  +Content headers provide a brief overview of the content on a page.  diff --git a/packages/documentation/docs/controls/custom-field.mdx b/packages/documentation/docs/controls/custom-field.mdx index 09ce9d069e..4f6a845218 100644 --- a/packages/documentation/docs/controls/custom-field.mdx +++ b/packages/documentation/docs/controls/custom-field.mdx @@ -8,7 +8,7 @@ import DocsCode from './_custom-field_code.mdx'; -The custom field is a wrapper component that can host any forms component. +Custom fields are wrapper components that can host any forms component. diff --git a/packages/documentation/docs/controls/date-picker.md b/packages/documentation/docs/controls/date-picker.md index 39ecea6773..8f62e2ec34 100644 --- a/packages/documentation/docs/controls/date-picker.md +++ b/packages/documentation/docs/controls/date-picker.md @@ -5,7 +5,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Date picker -The date picker component provides a versatile calendar menu that can be used as a standalone element or within a dropdown for date input, offering a seamless way to select dates. +Date pickers provide a versatile calendar that can be used as a standalone element or within a dropdown for date input, offering a seamless way to select dates. ## Examples diff --git a/packages/documentation/docs/controls/input-date.mdx b/packages/documentation/docs/controls/input-date.mdx index c391c329b9..fba70b2d1e 100644 --- a/packages/documentation/docs/controls/input-date.mdx +++ b/packages/documentation/docs/controls/input-date.mdx @@ -14,7 +14,7 @@ import Tags from '@site/docs/auto-generated/ix-date-input/tags.md'; -The date input component allows users to enter and select dates in a standardized format, ensuring consistency and accuracy. +Date inputs allow users to enter and select dates in a standardized format, ensuring consistency and accuracy. diff --git a/packages/documentation/docs/controls/input-number.mdx b/packages/documentation/docs/controls/input-number.mdx index cb50f839f8..9569a00ae7 100644 --- a/packages/documentation/docs/controls/input-number.mdx +++ b/packages/documentation/docs/controls/input-number.mdx @@ -13,7 +13,7 @@ import Tags from '@site/docs/auto-generated/ix-number-input/tags.md'; -The number input component allows users to enter and adjust numerical values. +Number inputs allow users to enter and adjust numerical values. diff --git a/packages/documentation/docs/controls/input.mdx b/packages/documentation/docs/controls/input.mdx index 24af6ca8d1..a3d57c2d62 100644 --- a/packages/documentation/docs/controls/input.mdx +++ b/packages/documentation/docs/controls/input.mdx @@ -16,7 +16,7 @@ import Tags from './../auto-generated/ix-input/tags.md'; -Input fields enable users to enter and edit text, numbers, and symbols within an application. +Input fields allow users to enter and edit single-line text, numbers, and other character-based symbols within an application. diff --git a/packages/documentation/docs/controls/layout-grid.md b/packages/documentation/docs/controls/layout-grid.md index bcef9727ea..bdad9e7440 100644 --- a/packages/documentation/docs/controls/layout-grid.md +++ b/packages/documentation/docs/controls/layout-grid.md @@ -11,7 +11,7 @@ import Tags from './../auto-generated/ix-layout-grid/tags.md'; -Grids are typically used to make layouts more cohesive and consistent. +Layout grids are used to structure the layout of a page or screen responsively. diff --git a/packages/documentation/docs/controls/pill.md b/packages/documentation/docs/controls/pill.md index 31193842dd..250489036a 100644 --- a/packages/documentation/docs/controls/pill.md +++ b/packages/documentation/docs/controls/pill.md @@ -5,7 +5,7 @@ import DocsCode from './\_pill_code.md' # Pill -Pills are compact UI components designed to display small pieces of information in a visually appealing manner. +Pills display small pieces of information, e.g. counters or statuses. diff --git a/packages/documentation/docs/controls/radio.mdx b/packages/documentation/docs/controls/radio.mdx index 1d9936c115..4ea838206d 100644 --- a/packages/documentation/docs/controls/radio.mdx +++ b/packages/documentation/docs/controls/radio.mdx @@ -14,7 +14,7 @@ import DocsCode from './_radio_code.mdx'; -Radio buttons are elements that enable users to choose only one option from a predefined set of mutually exclusive options. +Radio buttons enable users to choose only one option from a predefined set of mutually exclusive options. diff --git a/packages/documentation/docs/controls/select.mdx b/packages/documentation/docs/controls/select.mdx index db774d5667..5cfaa98e49 100644 --- a/packages/documentation/docs/controls/select.mdx +++ b/packages/documentation/docs/controls/select.mdx @@ -12,7 +12,7 @@ import Tags from './../auto-generated/ix-select/tags.md'; -A select component allows users to choose from a list of options. +Selects allow users to choose from a list of options. diff --git a/packages/documentation/docs/controls/textarea.mdx b/packages/documentation/docs/controls/textarea.mdx index b1443723d0..1c9475a077 100644 --- a/packages/documentation/docs/controls/textarea.mdx +++ b/packages/documentation/docs/controls/textarea.mdx @@ -13,7 +13,7 @@ import Tags from '@site/docs/auto-generated/ix-textarea/tags.md'; -The textarea component is designed for multi-line text input, making it perfect for forms that require longer entries. +Textareas allow users to enter and edit multi-line text input, making it perfect for forms that require longer entries. diff --git a/packages/documentation/docs/controls/time-picker.md b/packages/documentation/docs/controls/time-picker.md index b0c1aaf48b..63c36ad2c7 100644 --- a/packages/documentation/docs/controls/time-picker.md +++ b/packages/documentation/docs/controls/time-picker.md @@ -5,7 +5,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Time picker -The time picker component allows users to select specific times ensuring accurate time input. +Time pickers allow users to select specific times ensuring accurate time input. ## Examples From 380c3c67bab10e2958b5b1a90e62ac76ca476464 Mon Sep 17 00:00:00 2001 From: "kathrin.schalber.ext" Date: Wed, 11 Dec 2024 11:17:44 +0100 Subject: [PATCH 80/82] added key-value-list, key-value, kpi, layout-auto, messagebar, modal, pagination --- packages/documentation/docs/controls/key-value-list.md | 4 +++- packages/documentation/docs/controls/key-value.md | 3 +++ packages/documentation/docs/controls/kpi.md | 4 +++- packages/documentation/docs/controls/layout-auto.md | 4 +++- packages/documentation/docs/controls/messagebar.md | 4 ++++ packages/documentation/docs/controls/modal.md | 4 ++++ packages/documentation/docs/controls/pagination.md | 3 +++ 7 files changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/documentation/docs/controls/key-value-list.md b/packages/documentation/docs/controls/key-value-list.md index b428989645..9a1edae14a 100644 --- a/packages/documentation/docs/controls/key-value-list.md +++ b/packages/documentation/docs/controls/key-value-list.md @@ -7,7 +7,9 @@ import Playground from '@site/src/components/PlaygroundV3'; # Key value list - + +Key value lists organizes and lists a series of [key-value pairs](key-value.md). + ## Examples + +Key value pairs display a label (key) and a value in a structured, easy way. + ## Example diff --git a/packages/documentation/docs/controls/kpi.md b/packages/documentation/docs/controls/kpi.md index 2db39b9f94..2b9669a292 100644 --- a/packages/documentation/docs/controls/kpi.md +++ b/packages/documentation/docs/controls/kpi.md @@ -4,7 +4,9 @@ import Props from './../auto-generated/ix-kpi/props.md'; import Playground from '@site/src/components/PlaygroundV3'; # KPI - + +KPIs display measured values together with a status to help the user make better decisions. + ## Usage diff --git a/packages/documentation/docs/controls/layout-auto.md b/packages/documentation/docs/controls/layout-auto.md index 324ff0307b..3334ea3b46 100644 --- a/packages/documentation/docs/controls/layout-auto.md +++ b/packages/documentation/docs/controls/layout-auto.md @@ -6,7 +6,9 @@ import Tags from '@site/docs/auto-generated/ix-layout-auto/tags.md'; # Layout auto - + +Auto-layouts are containers that automatically adjust the size of their columns based on the content. + ## Examples ### Basic diff --git a/packages/documentation/docs/controls/messagebar.md b/packages/documentation/docs/controls/messagebar.md index b24d311dd1..a040de358c 100644 --- a/packages/documentation/docs/controls/messagebar.md +++ b/packages/documentation/docs/controls/messagebar.md @@ -5,6 +5,10 @@ import Playground from '@site/src/components/PlaygroundV3'; # Message bar + +Message bars display important information to users, e.g. feedback, warnings, or errors. + + ## Examples +Modals present information prominently and are useful to gather essential user input without navigating to another page. + + ## Sizes Our modals support the following sizes: diff --git a/packages/documentation/docs/controls/pagination.md b/packages/documentation/docs/controls/pagination.md index 7bf9563cb9..077767c1c2 100644 --- a/packages/documentation/docs/controls/pagination.md +++ b/packages/documentation/docs/controls/pagination.md @@ -7,6 +7,9 @@ import Playground from '@site/src/components/PlaygroundV3'; # Pagination + +Paginations allow users to navigate between pages of content when it is split for performance reasons. + ## Examples From 8f9bd1fad8b42330a355e0ffef93de3741fe98d2 Mon Sep 17 00:00:00 2001 From: "kathrin.schalber.ext" Date: Wed, 11 Dec 2024 11:28:48 +0100 Subject: [PATCH 81/82] added slider, spinner, tabs, tile, toggle, tooltip, tree, upload, workflow --- packages/documentation/docs/controls/slider.md | 3 +++ packages/documentation/docs/controls/spinner.md | 4 +++- packages/documentation/docs/controls/tabs.md | 4 ++++ packages/documentation/docs/controls/tile.md | 4 ++++ packages/documentation/docs/controls/toggle.mdx | 4 ++++ packages/documentation/docs/controls/tooltip.md | 4 +++- packages/documentation/docs/controls/tree.md | 4 ++++ packages/documentation/docs/controls/upload.md | 4 ++++ packages/documentation/docs/controls/workflow.md | 4 ++++ 9 files changed, 33 insertions(+), 2 deletions(-) diff --git a/packages/documentation/docs/controls/slider.md b/packages/documentation/docs/controls/slider.md index 5f71ff514e..84636cf9ef 100644 --- a/packages/documentation/docs/controls/slider.md +++ b/packages/documentation/docs/controls/slider.md @@ -8,6 +8,9 @@ import Playground from '@site/src/components/PlaygroundV3'; # Slider + +Sliders allow users to select a value from a range of values. + ## Examples diff --git a/packages/documentation/docs/controls/spinner.md b/packages/documentation/docs/controls/spinner.md index 9160ed5d0b..28b002d5af 100644 --- a/packages/documentation/docs/controls/spinner.md +++ b/packages/documentation/docs/controls/spinner.md @@ -4,7 +4,9 @@ import Events from './../auto-generated/ix-spinner/events.md'; import Playground from '@site/src/components/PlaygroundV3'; # Spinner - + +Spinners indicate that a process is running, to provide feedback to the user. + ## Examples ### Basic diff --git a/packages/documentation/docs/controls/tabs.md b/packages/documentation/docs/controls/tabs.md index 1c05a6abe6..b41e7f1edd 100644 --- a/packages/documentation/docs/controls/tabs.md +++ b/packages/documentation/docs/controls/tabs.md @@ -8,6 +8,10 @@ import Playground from '@site/src/components/PlaygroundV3'; # Tabs + +Tabs consist of tab items and organize content into separate sections by grouping similar information. + + ## Examples ### Basic diff --git a/packages/documentation/docs/controls/tile.md b/packages/documentation/docs/controls/tile.md index 3a01eb4663..35abd3f254 100644 --- a/packages/documentation/docs/controls/tile.md +++ b/packages/documentation/docs/controls/tile.md @@ -5,6 +5,10 @@ import Playground from '@site/src/components/PlaygroundV3'; # Tile + +Tiles are containers that display content in a [card](card.md)-like format. + + ## Examples ### Basic diff --git a/packages/documentation/docs/controls/toggle.mdx b/packages/documentation/docs/controls/toggle.mdx index 5317b66296..73f05f88e7 100644 --- a/packages/documentation/docs/controls/toggle.mdx +++ b/packages/documentation/docs/controls/toggle.mdx @@ -5,6 +5,10 @@ import Playground from '@site/src/components/PlaygroundV3'; # Toggle + +Toggles (switches) enable users to toggle between an on and off state. + + ## Examples ### Basic diff --git a/packages/documentation/docs/controls/tooltip.md b/packages/documentation/docs/controls/tooltip.md index 30dd7f1cc6..67b7294cee 100644 --- a/packages/documentation/docs/controls/tooltip.md +++ b/packages/documentation/docs/controls/tooltip.md @@ -8,7 +8,9 @@ import Playground from '@site/src/components/PlaygroundV3' # Tooltip - + +Tooltips provide additional information when users hover over or focus an element. + ## Examples +Trees display hierarchical data structures and allow users to navigate by expanding and collapsing nodes. + + ## Examples +Uploads allow users to select and upload files from their device by drag-and-drop. + + ## Examples +Workflows are a series of logical steps that guide users through a process. + + ## Examples Date: Tue, 17 Dec 2024 13:01:54 +0100 Subject: [PATCH 82/82] docs: Apply suggestions from writing review Co-authored-by: tokyojen <143795032+tokyojen@users.noreply.github.com> --- .../documentation/docs/controls/_card-list_styleguide.md | 2 +- .../docs/controls/_category-filter_styleguide.md | 2 +- packages/documentation/docs/controls/_chip_styleguide.md | 2 +- .../docs/controls/_content-header_styleguide.md | 2 +- .../docs/controls/_custom-field_styleguide.mdx | 2 +- .../documentation/docs/controls/_date-input_styleguide.mdx | 2 +- .../documentation/docs/controls/_dropdown_styleguide.md | 2 +- .../docs/controls/_forms-checkbox_styleguide.md | 2 +- packages/documentation/docs/controls/_input_styleguide.md | 2 +- .../docs/controls/_number-input_styleguide.mdx | 2 +- packages/documentation/docs/controls/_pill_styleguide.md | 2 +- .../docs/controls/_textarea-field_styleguide.mdx | 2 +- .../docs/controls/application-frame/about-and-legal.md | 2 +- .../docs/controls/application-frame/application-header.md | 2 +- .../docs/controls/application-frame/map-navigation.md | 2 +- .../docs/controls/application-frame/popover-news.md | 2 +- packages/documentation/docs/controls/breadcrumb.md | 2 +- .../docs/controls/buttons/_toggle-button_styleguide.md | 2 +- .../documentation/docs/controls/buttons/dropdown-button.md | 2 +- packages/documentation/docs/controls/buttons/link-button.md | 2 +- .../documentation/docs/controls/buttons/toggle-buttons.md | 2 +- packages/documentation/docs/controls/charts/gauge-chart.md | 6 +++--- packages/documentation/docs/controls/charts/line-chart.md | 4 ++-- packages/documentation/docs/controls/charts/pie-chart.md | 2 +- .../documentation/docs/controls/charts/special-chart.md | 2 +- packages/documentation/docs/controls/checkbox.mdx | 2 +- packages/documentation/docs/controls/custom-field.mdx | 2 +- packages/documentation/docs/controls/drawer.md | 2 +- packages/documentation/docs/controls/event-list.md | 2 +- packages/documentation/docs/controls/flip.md | 2 +- packages/documentation/docs/controls/kpi.md | 2 +- packages/documentation/docs/controls/messagebar.md | 2 +- packages/documentation/docs/controls/modal.md | 2 +- packages/documentation/docs/controls/pagination.md | 2 +- packages/documentation/docs/controls/spinner.md | 2 +- packages/documentation/docs/controls/toggle.mdx | 2 +- packages/documentation/docs/controls/tooltip.md | 2 +- packages/documentation/docs/controls/upload.md | 2 +- 38 files changed, 41 insertions(+), 41 deletions(-) diff --git a/packages/documentation/docs/controls/_card-list_styleguide.md b/packages/documentation/docs/controls/_card-list_styleguide.md index 37799f394b..d7cdff7f28 100644 --- a/packages/documentation/docs/controls/_card-list_styleguide.md +++ b/packages/documentation/docs/controls/_card-list_styleguide.md @@ -1,6 +1,6 @@ ## Guidelines -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 list content can be hidden or revealed 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. diff --git a/packages/documentation/docs/controls/_category-filter_styleguide.md b/packages/documentation/docs/controls/_category-filter_styleguide.md index 3dfb19fdcb..ab5162bf8e 100644 --- a/packages/documentation/docs/controls/_category-filter_styleguide.md +++ b/packages/documentation/docs/controls/_category-filter_styleguide.md @@ -1,6 +1,6 @@ ## Guidelines -The category filter component enhances data navigation and user experience. We typically use a category filter to efficiently navigate large data sets, being particularly useful in scenarios with complex data. The filter also enhances user experience by providing autocomplete suggestions and customizable filter conditions. +The category filter component enhances data navigation and user experience. We typically use a category filter to efficiently navigate large data sets, and it's particularly useful for complex data scenarios. The filter also enhances the 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) diff --git a/packages/documentation/docs/controls/_chip_styleguide.md b/packages/documentation/docs/controls/_chip_styleguide.md index b3e2264e78..b018307d93 100644 --- a/packages/documentation/docs/controls/_chip_styleguide.md +++ b/packages/documentation/docs/controls/_chip_styleguide.md @@ -1,6 +1,6 @@ ## Guidelines -Typically chips contain a concise label and sometimes an icon, and they are clickable and closable. +Chips typically contain a concise label and sometimes an icon, and they are both 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) diff --git a/packages/documentation/docs/controls/_content-header_styleguide.md b/packages/documentation/docs/controls/_content-header_styleguide.md index 7fdf48aae6..941e373ffc 100644 --- a/packages/documentation/docs/controls/_content-header_styleguide.md +++ b/packages/documentation/docs/controls/_content-header_styleguide.md @@ -1,6 +1,6 @@ ## Guidelines -The content header 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. +The content header helps users understand what the page is about. We typically use it at the very top of the page to show a clear page hierarchy. ![Content header overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2250-4784&mode=design&t=XmCepM9jPR9PImPw-4) diff --git a/packages/documentation/docs/controls/_custom-field_styleguide.mdx b/packages/documentation/docs/controls/_custom-field_styleguide.mdx index 86831861b8..ee704c3b37 100644 --- a/packages/documentation/docs/controls/_custom-field_styleguide.mdx +++ b/packages/documentation/docs/controls/_custom-field_styleguide.mdx @@ -1,6 +1,6 @@ ## Guidelines -The custom field's properties allow 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. +The custom field's properties allow you to control the validation state of the field and the helper text. It's 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) diff --git a/packages/documentation/docs/controls/_date-input_styleguide.mdx b/packages/documentation/docs/controls/_date-input_styleguide.mdx index c2a104a52c..b5c0b29b89 100644 --- a/packages/documentation/docs/controls/_date-input_styleguide.mdx +++ b/packages/documentation/docs/controls/_date-input_styleguide.mdx @@ -1,6 +1,6 @@ ## Guidelines -The date input component is typically used in forms, filters, and scheduling tools to ensure consistent and accurate date entries. By standardizing date input, it helps maintain data integrity and improves the user experience in applications requiring precise date information. +The date input component is typically used in forms, filters and scheduling tools to ensure consistent and accurate date entries. By standardizing date input, it helps maintain data integrity and improves the user experience in applications requiring precise date information. ![Date input overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3629-6200&t=ADQCetGKOEH1WG2r-4) diff --git a/packages/documentation/docs/controls/_dropdown_styleguide.md b/packages/documentation/docs/controls/_dropdown_styleguide.md index 4e5d2dd9a2..63afbdef07 100644 --- a/packages/documentation/docs/controls/_dropdown_styleguide.md +++ b/packages/documentation/docs/controls/_dropdown_styleguide.md @@ -1,6 +1,6 @@ ## Guidelines -We typically use dropdowns to allow users to select one option from a list. Selecting one of the items in the dropdown performs the action. +Dropdown containers allow users to select one option from a list. Selecting one of the items in the dropdown performs the action. ![Overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=2353-2278&mode=design&t=OVHeXvLZYLkP2CzN-4) diff --git a/packages/documentation/docs/controls/_forms-checkbox_styleguide.md b/packages/documentation/docs/controls/_forms-checkbox_styleguide.md index 8d801765bf..53113332c9 100644 --- a/packages/documentation/docs/controls/_forms-checkbox_styleguide.md +++ b/packages/documentation/docs/controls/_forms-checkbox_styleguide.md @@ -1,6 +1,6 @@ ## Guidelines -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. +Checkboxes are commonly used when there are multiple options that can be selected or used 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) diff --git a/packages/documentation/docs/controls/_input_styleguide.md b/packages/documentation/docs/controls/_input_styleguide.md index 27d8d600e3..6b70c4034f 100644 --- a/packages/documentation/docs/controls/_input_styleguide.md +++ b/packages/documentation/docs/controls/_input_styleguide.md @@ -1,6 +1,6 @@ ## Guidelines -Input fields are commonly used in forms, search bars, and other areas where data input is required. +Input fields are 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) diff --git a/packages/documentation/docs/controls/_number-input_styleguide.mdx b/packages/documentation/docs/controls/_number-input_styleguide.mdx index c789af25d3..35486497c3 100644 --- a/packages/documentation/docs/controls/_number-input_styleguide.mdx +++ b/packages/documentation/docs/controls/_number-input_styleguide.mdx @@ -1,6 +1,6 @@ ## Guidelines -The number input component is 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. +The number input component is 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) diff --git a/packages/documentation/docs/controls/_pill_styleguide.md b/packages/documentation/docs/controls/_pill_styleguide.md index dec6df309d..d8abdf7fbe 100644 --- a/packages/documentation/docs/controls/_pill_styleguide.md +++ b/packages/documentation/docs/controls/_pill_styleguide.md @@ -1,6 +1,6 @@ ## Guidelines -Typically, pills contain a concise label and sometimes an icon. They are not clickable or closable, making them ideal for presenting static information succinctly within an application. +Pills typically contain a concise label and sometimes an icon. They are not clickable or closable, making them ideal for presenting static information succinctly within an application. ![Pill overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1377-3110&mode=design&t=ZmcRP4ggXtr8b7vZ-1) diff --git a/packages/documentation/docs/controls/_textarea-field_styleguide.mdx b/packages/documentation/docs/controls/_textarea-field_styleguide.mdx index 55f0a70873..89fe637160 100644 --- a/packages/documentation/docs/controls/_textarea-field_styleguide.mdx +++ b/packages/documentation/docs/controls/_textarea-field_styleguide.mdx @@ -1,6 +1,6 @@ ## Guidelines -The textarea component is typically used in scenarios such as feedback forms, comment sections, and message composition. Its ability to handle extensive text input makes it a versatile tool for collecting detailed user information. +The textarea component is typically used in scenarios such as feedback forms, comment sections and message composition. Its ability to handle extensive text input makes it a versatile tool for collecting detailed user information. ![Textarea overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3814-1128&t=DtCmoFcLwhf7ke3S-4) 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 cc8d0af576..5396b9da68 100644 --- a/packages/documentation/docs/controls/application-frame/about-and-legal.md +++ b/packages/documentation/docs/controls/application-frame/about-and-legal.md @@ -9,7 +9,7 @@ import DocsCode from './\_about-and-legal_code.md'; # About and legal overlay -The about and legal overlay displays application information, versions, license terms, and other legal content. +The about and legal overlay displays application information, versions, license terms and other legal content. diff --git a/packages/documentation/docs/controls/application-frame/application-header.md b/packages/documentation/docs/controls/application-frame/application-header.md index e41021a801..e240f89283 100644 --- a/packages/documentation/docs/controls/application-frame/application-header.md +++ b/packages/documentation/docs/controls/application-frame/application-header.md @@ -13,7 +13,7 @@ import Tags from './../../auto-generated/ix-application-header/tags.md'; -Application headers provide a structured area for key elements like the brand logo, application name, and user avatar. +Application headers provide a structured area for key elements like brand logo, application name and user avatar. diff --git a/packages/documentation/docs/controls/application-frame/map-navigation.md b/packages/documentation/docs/controls/application-frame/map-navigation.md index 1c345a0e84..086310f38b 100644 --- a/packages/documentation/docs/controls/application-frame/map-navigation.md +++ b/packages/documentation/docs/controls/application-frame/map-navigation.md @@ -13,7 +13,7 @@ import Tags from './../../auto-generated/ix-map-navigation/tags.md'; -Map navigation structures layout to present map-like content, supported by a collapsible context panel and temporary overlays. +Map navigation layout structures present map-like content, supported by a collapsible context panel and temporary overlays. diff --git a/packages/documentation/docs/controls/application-frame/popover-news.md b/packages/documentation/docs/controls/application-frame/popover-news.md index e09e3122a5..29d061218a 100644 --- a/packages/documentation/docs/controls/application-frame/popover-news.md +++ b/packages/documentation/docs/controls/application-frame/popover-news.md @@ -9,7 +9,7 @@ import DocsCode from './\_popover-news_code.md'; # Popover news -Popover news present important updates and information when the application starts. +Popover news presents important updates and information when the application starts. diff --git a/packages/documentation/docs/controls/breadcrumb.md b/packages/documentation/docs/controls/breadcrumb.md index f93221a2ed..4b1fc8663e 100644 --- a/packages/documentation/docs/controls/breadcrumb.md +++ b/packages/documentation/docs/controls/breadcrumb.md @@ -5,7 +5,7 @@ import DocsCode from './\_breadcrumb_code.md' # Breadcrumb -Breadcrumbs provide a clear path of navigation within an application. +Breadcrumbs provide a clear navigation path within an application. diff --git a/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md b/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md index c0cd4eeaf3..9ff67739ef 100644 --- a/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md +++ b/packages/documentation/docs/controls/buttons/_toggle-button_styleguide.md @@ -1,6 +1,6 @@ ## Guidelines -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. +Toggle buttons with and without text labels are available. We typically use toggle buttons within button groups when users can choose 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) diff --git a/packages/documentation/docs/controls/buttons/dropdown-button.md b/packages/documentation/docs/controls/buttons/dropdown-button.md index a29d57da37..6037914d4b 100644 --- a/packages/documentation/docs/controls/buttons/dropdown-button.md +++ b/packages/documentation/docs/controls/buttons/dropdown-button.md @@ -13,7 +13,7 @@ import Tags from './../../auto-generated/ix-dropdown-button/tags.md' -Dropdown buttons reveal a list of actions on click on a button. +Dropdown buttons reveal a list of actions when selected. diff --git a/packages/documentation/docs/controls/buttons/link-button.md b/packages/documentation/docs/controls/buttons/link-button.md index cca63b37fe..288318f22d 100644 --- a/packages/documentation/docs/controls/buttons/link-button.md +++ b/packages/documentation/docs/controls/buttons/link-button.md @@ -13,7 +13,7 @@ import Tags from './../../auto-generated/ix-link-button/tags.md'; -Link buttons lead users to another location within the application or outside of it and contain a chevron and a text label. +Link buttons take users to another location either within or outside the application and contain a chevron and a text label. diff --git a/packages/documentation/docs/controls/buttons/toggle-buttons.md b/packages/documentation/docs/controls/buttons/toggle-buttons.md index dc2e718860..c434c38abb 100644 --- a/packages/documentation/docs/controls/buttons/toggle-buttons.md +++ b/packages/documentation/docs/controls/buttons/toggle-buttons.md @@ -13,7 +13,7 @@ import Tags from './../../auto-generated/ix-toggle-button/tags.md'; -Toggle buttons allow users to activate and deactivate a function. +Toggle buttons allow users to either activate or deactivate a function. diff --git a/packages/documentation/docs/controls/charts/gauge-chart.md b/packages/documentation/docs/controls/charts/gauge-chart.md index 6919607528..84261311be 100644 --- a/packages/documentation/docs/controls/charts/gauge-chart.md +++ b/packages/documentation/docs/controls/charts/gauge-chart.md @@ -2,13 +2,13 @@ import Playground from '@site/src/components/PlaygroundV3'; # Gauge chart -Gauge charts display information as a reading on a dial. They are particularly effective for showing progress towards a goal, performance metrics, or any data that falls within a range. +Gauge charts display information as a reading on a dial. They are particularly effective for showing progress towards a goal, performance metrics or any data that falls within a range. The chart consists of a circular arc with a needle pointing to a specific value, making it easy to quickly assess the status or performance level. Gauge charts are commonly used in dashboards to provide an at-a-glance view of key performance indicators (KPIs). ## Examples ### Performance metrics gauge -Performance metrics gauge charts, also known as dial or speedometer charts, are an effective way to visualize key performance indicators (KPIs) and other metrics. These charts use a needle or pointer to indicate the current value of a metric within a predefined range, often segmented into different zones (e.g., red for poor performance, green for good performance). This design allows for a quick and intuitive understanding of performance levels. +Performance metrics gauge charts, also known as dial or speedometer charts, are an effective way to visualize key performance indicators (KPIs) and other metrics. These charts use a needle or pointer to indicate the current value of a metric within a predefined range, often segmented into different zones, e.g. red for poor performance, green for good performance. This design allows for a quick and intuitive understanding of performance levels. ### Progress arc gauge -Progress arc charts, also known as semi-circular progress bars, are a dynamic way to visualize data and track progress. Unlike (full) circle charts, progress arc charts use a semi-circle or arc to represent the percentage of completion. This design can be particularly effective in dashboards and user interfaces where space is limited, yet a clear and engaging visual representation is needed. +Progress arc charts, also known as semi-circular progress bars, are a dynamic way to visualize data and track progress. Unlike full circle charts, progress arc charts use a semi-circle or arc to represent the percentage of completion. This design can be particularly effective in dashboards and user interfaces where space is limited, yet a clear and engaging visual representation is needed. ### Advanced line chart -Advanced line charts are an enhanced version of basic line charts, designed to provide deeper insights and more detailed analysis of data trends. These charts often incorporate features such as multiple data series, interactive elements, and additional annotations to highlight key points or events. Advanced line charts can also include trend lines, moving averages, and other statistical tools to help identify patterns and correlations. +Advanced line charts are an enhanced version of basic line charts, designed to provide deeper insights and more detailed analysis of data trends. These charts often incorporate features such as multiple data series, interactive elements and additional annotations to highlight key points or events. Advanced line charts can also include trend lines, moving averages and other statistical tools to help identify patterns and correlations. ### Donut chart -Donut charts are a variation of pie charts. They feature a central hole, giving them a distinctive “donut” shape. This design not only makes them visually appealing but also allows for additional information or labels to be placed in the center. +Donut charts are a variation of pie charts. They feature a central hole, giving them a distinctive 'donut' shape. This design not only makes them visually appealing but also allows for additional information or labels to be placed in the center. -ECharts offers a wide variety of different chart types and features, including interacting with charts that users need in some use cases. +ECharts offers a wide variety of different chart types and features for enhanced visualization and charting. ## Examples diff --git a/packages/documentation/docs/controls/checkbox.mdx b/packages/documentation/docs/controls/checkbox.mdx index aa4b529514..141479a701 100644 --- a/packages/documentation/docs/controls/checkbox.mdx +++ b/packages/documentation/docs/controls/checkbox.mdx @@ -16,7 +16,7 @@ import DocsCode from './_forms-checkbox_code.mdx'; -Checkboxes are form controls that allow users to select no, one or more options. +Checkboxes are form controls that allow users to select none, one or more options. diff --git a/packages/documentation/docs/controls/custom-field.mdx b/packages/documentation/docs/controls/custom-field.mdx index 4f6a845218..89ab490b2d 100644 --- a/packages/documentation/docs/controls/custom-field.mdx +++ b/packages/documentation/docs/controls/custom-field.mdx @@ -8,7 +8,7 @@ import DocsCode from './_custom-field_code.mdx'; -Custom fields are wrapper components that can host any forms component. +Custom fields are wrapper components that can host any form component. diff --git a/packages/documentation/docs/controls/drawer.md b/packages/documentation/docs/controls/drawer.md index 45336857c3..4616bcf222 100644 --- a/packages/documentation/docs/controls/drawer.md +++ b/packages/documentation/docs/controls/drawer.md @@ -6,7 +6,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Drawer -Drawers are containers that open on click on a button to show additional content. +Drawers are containers that open on the click of a button to show additional content. ## Examples diff --git a/packages/documentation/docs/controls/event-list.md b/packages/documentation/docs/controls/event-list.md index 13f629da4b..25c5968964 100644 --- a/packages/documentation/docs/controls/event-list.md +++ b/packages/documentation/docs/controls/event-list.md @@ -9,7 +9,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Event list -Event lists display a list of any type of elements with additional details. +Event lists display a list of any type of element with additional details. ## Examples diff --git a/packages/documentation/docs/controls/flip.md b/packages/documentation/docs/controls/flip.md index 7648183c5f..ff802f7ab4 100644 --- a/packages/documentation/docs/controls/flip.md +++ b/packages/documentation/docs/controls/flip.md @@ -6,7 +6,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Flip -Flips are containers that flip on click to reveal additional content. +Flips are containers that flip when clicked to reveal additional content. ## Examples diff --git a/packages/documentation/docs/controls/kpi.md b/packages/documentation/docs/controls/kpi.md index 2b9669a292..154995b017 100644 --- a/packages/documentation/docs/controls/kpi.md +++ b/packages/documentation/docs/controls/kpi.md @@ -5,7 +5,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # KPI -KPIs display measured values together with a status to help the user make better decisions. +KPIs display measured values together with a status indicator to help users interpret data. ## Usage diff --git a/packages/documentation/docs/controls/messagebar.md b/packages/documentation/docs/controls/messagebar.md index a040de358c..73364ad71a 100644 --- a/packages/documentation/docs/controls/messagebar.md +++ b/packages/documentation/docs/controls/messagebar.md @@ -6,7 +6,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Message bar -Message bars display important information to users, e.g. feedback, warnings, or errors. +Message bars display important information to users, e.g. feedback, warnings or errors. ## Examples diff --git a/packages/documentation/docs/controls/modal.md b/packages/documentation/docs/controls/modal.md index 01e88b340c..791646de58 100644 --- a/packages/documentation/docs/controls/modal.md +++ b/packages/documentation/docs/controls/modal.md @@ -12,7 +12,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Modal -Modals present information prominently and are useful to gather essential user input without navigating to another page. +Modals present information prominently and are useful for gathering essential user input without navigating to another page. ## Sizes diff --git a/packages/documentation/docs/controls/pagination.md b/packages/documentation/docs/controls/pagination.md index 077767c1c2..4b1b88e02d 100644 --- a/packages/documentation/docs/controls/pagination.md +++ b/packages/documentation/docs/controls/pagination.md @@ -8,7 +8,7 @@ import Playground from '@site/src/components/PlaygroundV3'; -Paginations allow users to navigate between pages of content when it is split for performance reasons. +Paginations allow users to navigate between pages of content when it's split for performance reasons. ## Examples diff --git a/packages/documentation/docs/controls/spinner.md b/packages/documentation/docs/controls/spinner.md index 28b002d5af..0dd053f4a2 100644 --- a/packages/documentation/docs/controls/spinner.md +++ b/packages/documentation/docs/controls/spinner.md @@ -5,7 +5,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Spinner -Spinners indicate that a process is running, to provide feedback to the user. +Spinners indicate that a process is running to provide feedback to the user. ## Examples diff --git a/packages/documentation/docs/controls/toggle.mdx b/packages/documentation/docs/controls/toggle.mdx index 73f05f88e7..c5361868b1 100644 --- a/packages/documentation/docs/controls/toggle.mdx +++ b/packages/documentation/docs/controls/toggle.mdx @@ -6,7 +6,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Toggle -Toggles (switches) enable users to toggle between an on and off state. +Toggle switches enable users to toggle between an on and off state. ## Examples diff --git a/packages/documentation/docs/controls/tooltip.md b/packages/documentation/docs/controls/tooltip.md index 67b7294cee..72aec91a5d 100644 --- a/packages/documentation/docs/controls/tooltip.md +++ b/packages/documentation/docs/controls/tooltip.md @@ -9,7 +9,7 @@ import Playground from '@site/src/components/PlaygroundV3' -Tooltips provide additional information when users hover over or focus an element. +Tooltips provide additional information when users hover over or focus on an element. ## Examples diff --git a/packages/documentation/docs/controls/upload.md b/packages/documentation/docs/controls/upload.md index fb8a2e42e0..bb3eb339bc 100644 --- a/packages/documentation/docs/controls/upload.md +++ b/packages/documentation/docs/controls/upload.md @@ -6,7 +6,7 @@ import Playground from '@site/src/components/PlaygroundV3'; # Upload -Uploads allow users to select and upload files from their device by drag-and-drop. +Uploads allow users to select and upload files from their device via drag-and-drop. ## Examples