Merge pull request #1133 from Infineon/1132-revert-reversion-of-docum…

…entation-changes

Bugfix: revert reversion of documentation changes

packages/components/src/components/modal/Usage.mdx

@@ -40,7 +40,7 @@ This is the main container that holds all the content and controls within the mo
 
 
 **Close (Dismiss) Icon (4)**\
-A close icon placed at the top right corner of the modal. Clicking on this icon dismisses the modal.
+A close icon placed at the top right corner of the modal. Clicking on this icon dismisses the modal. The dismiss function should be avoided for critical alarms or notifications that require immediate action or confirmation by the user.
 
 
 **Divider (5)**\
@@ -52,7 +52,7 @@ If required, buttons can be displayed to confirm an action by the user. The prim
 
 
 **Backdrop (7)**\
-The backdrop is a semi-transparent overlay `color-overlay-dark` that covers the rest of the page when the modal is open. Clicking on the backdrop dismisses the modal.
+The backdrop is a semi-transparent overlay `$ifxColorOverlayDark` that covers the rest of the page when the modal is open. Clicking on the backdrop dismisses the modal.
 
 
 ## Variants

packages/components/src/components/search-field/Usage.mdx

@@ -4,7 +4,9 @@ import * as SearchFieldStories from './search-field.stories';
 import SearchFieldAnatomy from '../../../public-storybook/images/search-input/search-field-anatomy.png';
 import SearchFieldStates from '../../../public-storybook/images/search-input/search-field-states.png';
 import SearchFieldSizes from '../../../public-storybook/images/search-input/search-field-sizes.png';
-
+import SearchFieldSuggest from '../../../public-storybook/images/search-input/search-suggest-search.png';
+import SearchFieldRecentSuggest from '../../../public-storybook/images/search-input/search-recent-suggest.png';
+
 
 <Meta of={SearchFieldStories} /> 
 
@@ -45,6 +47,15 @@ The clear icon lets users quickly clear the search input field.
 There are two search field sizes: 36px and 40px. This will give you more flexibility in structuring layouts due to e.g. different button heights. It's important to maintain uniform field height while combining form elements on a single page.
 <img src={SearchFieldSizes} alt="Search Field Sizes" />
 
+## Search Extension
+
+### Recent- and Search Suggestions
+<img src={SearchFieldRecentSuggest} alt="Search Field Recent Suggest" />
+The DDS provides a recent- and search suggest feature. If the user clicks on the search field, recently displayed search keywords and/or trend keywords can be displayed. Does the user start typing if possible, only the suggested searches should be visible.
+
+
+<img src={SearchFieldSuggest} alt="Search Field Suggest" />
+
 
 ***
 Check out the Figma component: **[Search Field](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=14251-8185&mode=design&t=donPtR9Uh27HrGsQ-4)**

packages/components/src/components/sidebar/Usage.mdx

@@ -12,9 +12,6 @@ import NavigationBarVariant from '../../../public-storybook/images/navbar/naviga
 # Sidebar
 For dashboards or similar functional application we provide a different and usually common variant of navigation. The sidebar gives users an easy access to different sections.
 
-## Placement of sidebar
-<img src={SidebarSections} alt="Sidebar Sections" />
-
 ## Anatomy of default sidebar
 <img src={SidebarAnatomy} alt="Sidebar Anatomy" />
 
@@ -96,7 +93,8 @@ Crucial functions can be placed here. Please pay attention to the placement by p
 **Border (3)**\
 A 1px border indicates the bottom edge of the navigation bar at anytime.
 
-
+## Areas
+<img src={SidebarSections} alt="Sidebar Areas" />
 
 ***
 Check out the Figma component: **[Sidebar](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=39925-19973&mode=design&t=F2eqm8hE80jZouGN-4)**

packages/components/src/components/table-basic-version/Usage.mdx

@@ -12,6 +12,8 @@ import TableBasicVersionExampleDefault from '../../../public-storybook/images/ta
 import TableBasicVersionHeaderTemplateItems from '../../../public-storybook/images/table-basic-version/table-header-template-items.png';
 import TableBasicVersionHeaderSortingItems from '../../../public-storybook/images/table-basic-version/table-header-sorting-items.png';
 import TableBasicVersionHeaderContentLogic from '../../../public-storybook/images/table-basic-version/table-header-content-logic.png';
+import TableBasicVersionHeaderColumnActionReorder from '../../../public-storybook/images/table-basic-version/table-header-column-action-reorder.png';
+import TableBasicVersionHeaderColumnActionResize from '../../../public-storybook/images/table-basic-version/table-header-column-action-resize.png';
 
 <Meta of={TableBasicVersionStories} />
 
@@ -67,10 +69,18 @@ To display a table generously with more white space, the DDS offers this default
 When it comes to show a lot of data in a table, you can end up with a very long table. In such cases, the compact table variant is the best option.
 <img src={TableBasicVersionExampleCompact} alt="Table Example Compact" />
 
-## Sorting
+## Table Actions
+### Sorting
 Our table component supports sorting columns in ascending or descending order, facilitating quick data analysis. Additionally, users can often filter data directly within the table, enhancing data manipulation capabilities.
 <img src={TableBasicVersionHeaderSortingItems} alt="Table Sorting Items" />
 
+### Reorder
+Users have different preferences and workflows. Allowing them to reorder columns lets them tailor the table layout to suit their specific needs.
+<img src={TableBasicVersionHeaderColumnActionReorder} alt="Table Column Reorder" />
+
+### Resize
+Resizing columns enables users to adjust the width of columns to fit the content they contain. This ensures that data is displayed more clearly and is easier to read, reducing the need for horizontal scrolling.
+<img src={TableBasicVersionHeaderColumnActionResize} alt="Table Column Resize" />
 
 ***
 Check out the Figma component: **[Table](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=16048-11054&mode=design&t=vxTx374xQDtV53ic-4)**