Merge branch 'develop' into feature/TextArea_FC

.github/workflows/e2e.yml

@@ -4,6 +4,8 @@ on:
         branches:
             - develop
             - main
+    push:
+        branches: [ develop ]
 
 concurrency:
     group: ${{ github.workflow }}-${{ github.base_ref }}-${{ github.head_ref }}

app/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "start": "craco start",
+    "start": "cross-env PORT=3793 craco start",
     "start-sd": "cross-env isWrapUuiAppInShadowDom=true craco start",
     "build": "craco build",
     "build-dev": "craco build --app-dev",

app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-core';
+import { FlexCell, PickerInput, PickerTogglerTag, PickerTogglerTagProps, Tooltip } from '@epam/uui';
+import { Location } from '@epam/uui-docs';
+
+export default function PickerTogglerTagDemoExample() {
+    const svc = useUuiContext();
+    const [value, onValueChange] = useState<string[]>(['225284', '2747351', '3119841', '3119746']);
+
+    const dataSource = useLazyDataSource<Location, string, DataQueryFilter<Location>>(
+        {
+            api: (request, ctx) => {
+                const { search } = request;
+                // and since parentId is meaningful value, it is required to exclude it from the filter.
+                const filter = search ? {} : { parentId: ctx?.parentId };
+                return svc.api.demo.locations({ ...request, search, filter });
+            },
+            getId: (i) => i.id,
+            getParentId: (i) => i.parentId,
+            getChildCount: (l) => l.childCount,
+        },
+        [],
+    );
+
+    const renderTag = (props: PickerTogglerTagProps<Location, string>) => {
+        if (props.isCollapsed) {
+            // rendering '+ N items selected' Tag
+            return (
+                <PickerTogglerTag { ...props } key="selected" />
+            );
+        } else {
+            // rendering all other Tags with Tooltip
+            return (
+                <Tooltip key={ props.rowProps?.id } content={ `${props.rowProps?.value?.tz}/${props.caption}` }>
+                    <PickerTogglerTag { ...props } />
+                </Tooltip>
+            );
+        }
+    };
+
+    return (
+        <FlexCell width={ 300 }>
+            <PickerInput
+                dataSource={ dataSource }
+                value={ value }
+                onValueChange={ onValueChange }
+                entityName="location"
+                selectionMode="multi"
+                valueType="id"
+                maxItems={ 2 }
+                renderTag={ (props) => renderTag(props) }
+            />
+        </FlexCell>
+    );
+}

app/src/docs/_examples/statusIndicator/WithTable.example.tsx

@@ -42,13 +42,13 @@ const personColumns: DataColumnProps<Person, number>[] = [
         key: 'jobTitle',
         caption: 'Title',
         render: (r) => <Text>{r.jobTitle}</Text>,
-        width: 200,
+        width: 220,
     },
     {
         key: 'productionCategory',
         caption: 'Is Production',
         render: (r) => <Text>{r.productionCategory ? 'Yes' : 'No' }</Text>,
-        width: 100,
+        width: 150,
     },
 ];
 
@@ -70,7 +70,7 @@ export default function WithTableExample() {
     const view = dataSource.useView(tableState, setTableState);
 
     return (
-        <Panel background="surface-main" style={ { height: '400px' } }>
+        <Panel background="surface-main" style={ { height: '400px' } } shadow={ true }>
             <DataTable getRows={ view.getVisibleRows } columns={ personColumns } value={ tableState } onValueChange={ setTableState } { ...view.getListProps() } />
         </Panel>
     );

app/src/docs/pickerInput/PickerInput.doc.tsx

@@ -80,6 +80,7 @@ export class PickerInputDoc extends BaseDocsBlock {
                 <DocExample title="Picker with changed array of items" path="./_examples/pickerInput/PickerWithChangingItemsArray.example.tsx" />
                 <DocExample title="Linked pickers" path="./_examples/pickerInput/LinkedPickers.example.tsx" />
                 <DocExample title="Change portal target and dropdown placement" path="./_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx" />
+                <DocExample title="Custom toggler tag render" path="./_examples/pickerInput/PickerTogglerTagDemo.example.tsx" />
             </>
         );
     }

app/src/docs/rangeDatePicker/rangeDatePickerExamples.module.scss

@@ -5,7 +5,6 @@
     justify-content: center;
     align-items: center;
     border-top: 1px solid var(--uui-control-border);
-    background-color: var(--white);
 }
 
 .dot {

app/src/docs/themes/implementation/TokensPageConfig.ts

@@ -3,9 +3,9 @@ import { TTokensDocGroupCfg } from './types';
 export const TOKENS_DOC_CONFIG: TTokensDocGroupCfg[] = [
     {
         title: 'Semantic',
-        description: 'The theme default semantic palette tokens. These tokens reuses in all components and can be used for custom content, following their roles.',
+        description: 'Defines semantic palette. These tokens are used widely in many UUI components, to apply colors according their role. These tokens can also be utilized directly in application code, in accordance with their designated roles.',
         subgroupsHeader: [
-            'light highlights and backgrounds mostly',
+            'light highlights and backgrounds',
             'light component backgrounds',
             'light component backgrounds hover',
             'solid component backgrounds, active states and borders',
@@ -15,50 +15,50 @@ export const TOKENS_DOC_CONFIG: TTokensDocGroupCfg[] = [
         subgroups: [
             {
                 title: 'Primary',
-                description: 'Uses for primary actions and component states. It\'s primary theme color.',
+                description: 'For primary actions and component states. It\'s a primary theme color.',
                 items: ('core/semantic/primary-'),
             },
             {
                 title: 'Secondary',
-                description: 'Uses for secondary actions, component states, that are should not attract user attention.',
+                description: 'For secondary actions, component states, that should not attract user attention.',
                 items: ('core/semantic/secondary-'),
             },
             {
                 title: 'Accent',
-                description: 'Use for accents, call to actions in addition to primary color. Can be used instead of primary.',
+                description: 'For accents, call to actions, in addition to primary color. Can be used in place of primary.',
                 items: ('core/semantic/accent-'),
             },
             {
                 title: 'Info',
-                description: 'Uses in components to deliver information in a calm, normal way. Can be the same as primary.',
+                description: 'Used to deliver information in a calm, normal way.',
                 items: ('core/semantic/info-'),
             },
             {
                 title: 'Success',
-                description: 'Uses in components to deliver success message, give positive feedback.',
+                description: 'Used to deliver success message, or give positive feedback.',
                 items: ('core/semantic/success-'),
             },
             {
                 title: 'Warning',
-                description: 'Uses in components to deliver middle critical message, draw user attention from the system.',
+                description: 'Used to deliver non-critical message, draw user attention.',
                 items: ('core/semantic/warning-'),
             },
             {
                 title: 'Error',
-                description: 'Uses in components to deliver highly critical message, barrier or error, draw user attention from the system.',
+                description: 'Used to deliver critical message, barrier or error, draw user attention.',
                 items: ('core/semantic/error-'),
             },
             {
                 title: 'Critical',
-                description: 'Uses in components for destructive, critical actions or deliver critically important information.',
+                description: 'Used for destructive, critical actions or deliver critically important information.',
                 items: ('core/semantic/critical-'),
             },
 
         ],
     },
     {
         title: 'Neutral',
-        description: 'The greyscale, uses most often to define different levels of surfaces, text colors and some components.',
+        description: 'Grey scale palette. Used for different levels of surfaces, text colors, borders, neutral-colored component\'s parts',
         items: ('core/neutral/'),
     },
     {
@@ -88,7 +88,7 @@ export const TOKENS_DOC_CONFIG: TTokensDocGroupCfg[] = [
     },
     {
         title: 'Controls',
-        description: 'Tokens for control components, like TextInput, PickerInput, Checkboxes and etc.',
+        description: 'Defines common part of controls like Input borders.',
         items: ('core/controls/'),
     },
 ];

app/src/preview/componentPreview/utils/previewLinkUtils.ts

@@ -37,7 +37,13 @@ export function buildPreviewRef(params: TBuildPreviewLinkParams): TPreviewRef {
                     });
                 }
             } else {
-                console.error(`Unable to find example of property=${name} by exampleId=${exampleId}. The property will be ignored.`);
+                const msg = `[buildPreviewRef] Unable to find example of property=${name} by exampleId=${exampleId}. The property will be ignored.`;
+                if (name === 'onValueChange') {
+                    // TODO: need find a way to convert such callback-based examples to plain array
+                    // console.debug(msg);
+                } else {
+                    console.error(msg);
+                }
             }
         } else if (value !== undefined) {
             if (['string', 'boolean', 'number'].indexOf(typeof value) !== -1) {

changelog.md

@@ -1,5 +1,10 @@
 # 5.7.1 - 29.03.2024
 
+**What's New**
+* [PickerInput]: added property `renderTag` it's a callback for rendering custom Tags in selectionMode: `multi`.
+* [PickerTogglerTag]: it's a new component, and we recommend it to use in the `renderTag` callback in the PickerInput.
+
+
 **What's Fixed**
 
 * [TabButton, VerticalTabButton]: set 18 icon size for all button sizes according to design

package.json

@@ -35,6 +35,9 @@
     "test-report": "yarn test --collectCoverage",
     "test-typecheck": "tsc --project ./tsconfig.test.json",
     "test-update": "yarn test --updateSnapshot",
+    "test-e2e": "yarn --cwd uui-e2e-tests test-e2e",
+    "test-e2e-update": "yarn --cwd uui-e2e-tests test-e2e-update",
+    "test-e2e-report": "yarn --cwd uui-e2e-tests test-e2e-report",
     "track-bundle-size": "yarn --cwd uui-build track-bundle-size",
     "track-bundle-size-override": "yarn track-bundle-size --override-baseline"
   },

public/docs/content/Tokens-intro.json

@@ -3,7 +3,7 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "Core tokens is a required part of each theme, this tokens is a foundation for low-level components variable and color classes."
+        "text": "Tokens are reusable variables that can represent design properties like colors, fonts, or spacing. In CSS, tokens are represented with CSS Custom Properties (aka CSS Variables)."
       }
     ],
     "data": {}
@@ -13,7 +13,25 @@
     "data": {},
     "children": [
       {
-        "text": "This part of tokens assumed as a stable theme API, so you can use them for styling your app parts and components."
+        "text": "UUI visuals are based on a set of tokens, named \"Core Tokens\", described below."
+      }
+    ]
+  },
+  {
+    "type": "paragraph",
+    "data": {},
+    "children": [
+      {
+        "text": "Each Theme defines its own values for all Core Tokens."
+      }
+    ]
+  },
+  {
+    "type": "paragraph",
+    "data": {},
+    "children": [
+      {
+        "text": "Core Tokens are not just for customizing UUI - we recommend apps built on UUI to utilize these tokens for styling their own components. This practice facilitates support for multiple themes, aids in crafting more readable and semantic CSS code, and enables quick reaction to changes in brand guidelines."
       }
     ]
   }

public/docs/content/adaptivePanel-descriptions.json

@@ -1,21 +1,11 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "An adaptive panel component is used to layout items inside some adaptive panel. It measures the item's width and tries to fit them inside a container. If some items can't fit, they will be hidden according to their priorities. Hidden items can then be shown inside a drop-down menu, or other container.",
-            "marks": []
-          }
-        ]
+        "text": "An adaptive panel component adjusts the set of its children according to its width. It measures each item's width and tries to fit as many items as possible. If some items can't fit, they will be hidden according to their priorities. Hidden items can then be collapsed to a drop-down menu, or other container."
       }
     ]
   }
-}
+]

public/docs/content/coreConcepts.json

@@ -800,7 +800,7 @@
                 ]
               },
               {
-                "text": " / svc.uuiApi — makes API calls gently, handling common HTTP errors, can re-login user if session is lost w/o loosing his work."
+                "text": " / svc.uuiApi — makes API calls gently, handling common HTTP errors, can re-login user if session is lost w/o losing his work."
               }
             ]
           }

public/docs/content/countIndicator-descriptions.json

@@ -3,7 +3,7 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "The count indicator notifies users about the number of unread messages, notifications, or updates they have. They help users be aware of new activities or events within an application. Count indicators are also used to represent the number of items. Use the Count Indicator when you want to provide users with specific, quantifiable information about updates or changes. Displaying the number can help users quickly understand how many important updates they have missed:"
+        "text": "The count indicator notifies users about the number of unread messages, notifications, or updates they have. They help users be aware of new activities or events within an application. Count indicators are also used to represent the number of items. Use the Count Indicator when you want to provide users with specific, quantifiable information about updates or changes. Displaying the number can help users quickly understand how many important updates they have missed."
       }
     ]
   }