Merge branch 'develop' into 2534-size-tokens-des-dev-tag

GitVersion.yml

@@ -8,7 +8,7 @@ branches:
     regex: ^main$
     mode: ContinuousDelivery
     tag: ''
-    increment: Minor
+    increment: Patch
     prevent-increment-of-merged-branch-version: false
     track-merge-target: true
     is-release-branch: true

app/src/data/apiDefinition.ts

@@ -41,16 +41,16 @@ export function getApi({
         form: {
             validateForm: <FormState>(formState: FormState) =>
                 processRequestLocal(
-                    origin.concat('api/form/validate-form'),
+                    origin.concat('/api/form/validate-form'),
                     'POST',
                     formState,
                 ),
         },
         errors: {
-            status: (status: number) => processRequestLocal(origin.concat(`api/error/status/${status}`), 'POST'),
-            setServerStatus: (status: number) => processRequestLocal(origin.concat(`api//error/set-server-status/${status}`), "'POST'"),
-            mock: () => processRequestLocal(origin.concat('api/error/mock'), 'GET'),
-            authLost: () => processRequestLocal(origin.concat('api/error/auth-lost'), 'POST'),
+            status: (status: number) => processRequestLocal(origin.concat(`/api/error/status/${status}`), 'POST'),
+            setServerStatus: (status: number) => processRequestLocal(origin.concat(`/api//error/set-server-status/${status}`), "'POST'"),
+            mock: () => processRequestLocal(origin.concat('/api/error/mock'), 'GET'),
+            authLost: () => processRequestLocal(origin.concat('/api/error/auth-lost'), 'POST'),
         },
         getChangelog() {
             return processRequestLocal(origin.concat('/api/get-changelog'), 'GET');

changelog.md

@@ -1,8 +1,15 @@
-# 5.*.* - **.**.****
+# 5.*.* - **.**.2024
 
 **What's New**
+* [TabButton][VerticalTabButton]: decreased paddings, added gaps `3px` between internal items for all sizes according to design
 * [Tag]: changed layout - added gaps between internal items, changed padding
 
+
+# 5.10.2 - xx.xx.2024
+
+**What's Fixed**
+* [Text]: fixed bug when passed rawProps override Text internal styles
+
 # 5.10.1 - 16.10.2024
 
 **What's Fixed**
@@ -22,13 +29,10 @@
   * `renderNotFonud` prop is deprecated, please use `renderEmpty` instead
 * Sass updated to the last version, warnings 'Mixed Declarations' fixed https://sass-lang.com/documentation/breaking-changes/mixed-decls/
 * [Modals]: for mobile view (width is up to 720px) by default the modal position is fixed at the bottom edge of the screen
-* [TabButton][VerticalTabButton]: decreased paddings & gaps for all sizes according to the design
 
 **What's Fixed**
 * [Form]: fixed bug when `beforeLeave` modal appears in case of redirect in `onSuccess` callback
 * [VirtualList]: fixed offsets counting if rows have different height
-* [TabButton][VerticalTabButton]: aligned with design, paddings & gaps decreased
-
 
 # 5.9.5 - 09.10.2024
 

uui/components/buttons/TabButton.module.scss

@@ -54,6 +54,7 @@
         border-bottom: var(--uui-tab-line-width) solid transparent;
         height: var(--uui-tab_btn-height);
         min-width: var(--uui-tab_btn-min-width);
+        column-gap: var(--uui-tab_btn-gap);
     }
 
     @include tab-button-color(var(--uui-tab_btn-text), var(--uui-tab_btn-text-active), transparent);
@@ -98,12 +99,4 @@
             border-radius: 50%;
         }
     }
-
-    :global(.uui-icon) + :global(.uui-count_indicator) {
-        margin-inline-start: var(--uui-tab_btn-gap);
-    }
-
-    :global(.uui-count_indicator):not(:last-child) {
-        margin-inline-end: var(--uui-tab_btn-gap);
-    }
 }

uui/components/filters/__tests__/__snapshots__/filtersPanel.test.tsx.snap

@@ -40,6 +40,7 @@ Array [
       >
         <div
           className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography title container"
+          style={Object {}}
         >
           Status:
         </div>
@@ -48,6 +49,7 @@ Array [
         >
           <div
             className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography selection container"
+            style={Object {}}
           >
             Unknown
           </div>
@@ -101,6 +103,7 @@ Array [
       >
         <div
           className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography title container"
+          style={Object {}}
         >
           Position
         </div>
@@ -153,6 +156,7 @@ Array [
       >
         <div
           className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography title container"
+          style={Object {}}
         >
           Age
         </div>
@@ -205,6 +209,7 @@ Array [
       >
         <div
           className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography title container"
+          style={Object {}}
         >
           Hire Date
         </div>
@@ -257,6 +262,7 @@ Array [
       >
         <div
           className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography title container"
+          style={Object {}}
         >
           Exit Date
         </div>

uui/components/pickers/DataPickerFooter.tsx

@@ -31,17 +31,17 @@ function DataPickerFooterImpl<TItem, TId>(props: PropsWithChildren<DataPickerFoo
     const size = isMobile() ? settings.sizes.pickerInput.body.mobile.footer.linkButton as LinkButtonProps['size'] : props.size;
     const hasSelection = view.getSelectedRowsCount() > 0;
     const rowsCount = view.getListProps().rowsCount;
-    const isEmptyRowsAndHasNoSelection = (rowsCount === 0 && !hasSelection);
 
     const isSinglePicker = selectionMode === 'single';
 
     const clearAllText = i18n.pickerInput.clearSelectionButton;
     const clearSingleText = i18n.pickerInput.clearSelectionButtonSingle;
     const selectAllText = i18n.pickerInput.selectAllButton;
 
-    // show always for multi picker and for single only in case if search not disabled and doesn't searching.
-    const isSearching = search && search?.length;
-    const hideFooter = isSearchTooShort || rowsCount === 0 || (isSinglePicker ? (isSearching && props.disableClear) : isSearching);
+    const isSearching = search?.length;
+    const hideFooter = isSearchTooShort || rowsCount === 0 || isSearching || (isSinglePicker && props.disableClear);
+
+    const showClear = !props.disableClear && (isSinglePicker ? true : (!view.selectAll || hasSelection));
 
     return !hideFooter && (
         <FlexRow cx={ css.footer }>
@@ -58,26 +58,19 @@ function DataPickerFooterImpl<TItem, TId>(props: PropsWithChildren<DataPickerFoo
             <FlexSpacer />
 
             <FlexCell width="auto" alignSelf="center">
-                {view.selectAll && (
+                {view.selectAll && !hasSelection && (
                     <LinkButton
                         size={ size }
-                        caption={ hasSelection ? clearAllText : selectAllText }
-                        onClick={ hasSelection ? clearSelection : () => view.selectAll.onValueChange(true) }
-                        rawProps={ {
-                            'aria-label': hasSelection ? clearAllText : selectAllText,
-                        } }
-                        isDisabled={ isEmptyRowsAndHasNoSelection }
+                        caption={ selectAllText }
+                        onClick={ () => view.selectAll.onValueChange(true) }
                     />
                 )}
-                {!view.selectAll && (
+                { showClear && (
                     <LinkButton
-                        isDisabled={ !hasSelection }
                         size={ size }
                         caption={ isSinglePicker ? clearSingleText : clearAllText }
                         onClick={ clearSelection }
-                        rawProps={ {
-                            'aria-label': isSinglePicker ? clearSingleText : clearAllText,
-                        } }
+                        isDisabled={ !hasSelection }
                     />
                 )}
             </FlexCell>

uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap

@@ -215,7 +215,6 @@ exports[`PickerInput should open body 1`] = `
         >
           <button
             aria-disabled="true"
-            aria-label="CLEAR"
             class="uui-button-box uui-disabled uui-link_button root uui-size-36 uui-no-left-icon uui-no-right-icon uui-color-primary"
             tabindex="-1"
             type="button"

uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap

@@ -261,6 +261,7 @@ exports[`PickerModal should be rendered correctly 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               Elementary
                             </div>
@@ -346,6 +347,7 @@ exports[`PickerModal should be rendered correctly 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               Elementary+
                             </div>
@@ -746,6 +748,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               C2
                             </div>
@@ -846,6 +849,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               C1+
                             </div>
@@ -946,6 +950,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               C1
                             </div>
@@ -1046,6 +1051,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               B2+
                             </div>
@@ -1146,6 +1152,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               B2
                             </div>
@@ -1246,6 +1253,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               B1+
                             </div>
@@ -1346,6 +1354,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               B1
                             </div>
@@ -1446,6 +1455,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               A2+
                             </div>
@@ -1546,6 +1556,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               A2
                             </div>
@@ -1646,6 +1657,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               A1+
                             </div>
@@ -1746,6 +1758,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
                           >
                             <div
                               className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography text container"
+                              style={Object {}}
                             >
                               A1
                             </div>

uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap

@@ -174,6 +174,7 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
           >
             <div
               className="root uui-text uui-size-none uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography groupTitle container"
+              style={Object {}}
             >
               Displayed in table
             </div>
@@ -220,6 +221,7 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
                   </div>
                   <div
                     className="root uui-text uui-size-none uui-color-tertiary uui-font-weight-400 uui-font-style-normal uui-typography subgroupTitle container"
+                    style={Object {}}
                   >
                     Pinned to the left
                   </div>
@@ -370,6 +372,7 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
                   </div>
                   <div
                     className="root uui-text uui-size-none uui-color-tertiary uui-font-weight-400 uui-font-style-normal uui-typography subgroupTitle container"
+                    style={Object {}}
                   >
                     Not pinned
                   </div>

uui/components/typography/Text.tsx

@@ -60,19 +60,16 @@ export const Text = withMods<uuiComponents.TextProps, TextProps>(
     uuiComponents.Text,
     applyTextMods,
     (props) => {
-        if (props.fontSize || props.lineHeight) {
-            const style: any = {};
-            props.fontSize && (style['--uui-text-font-size'] = `${props.fontSize}px`);
-            props.lineHeight && (style['--uui-text-line-height'] = `${props.lineHeight}px`);
-            return {
-                rawProps: {
-                    style: {
-                        ...style,
-                        ...props?.rawProps?.style,
-                    },
-                    ...props?.rawProps,
-                },
-            };
-        }
+        const style: any = props?.rawProps?.style || {};
+
+        props.fontSize && (style['--uui-text-font-size'] = `${props.fontSize}px`);
+        props.lineHeight && (style['--uui-text-line-height'] = `${props.lineHeight}px`);
+
+        return {
+            rawProps: {
+                ...props?.rawProps,
+                style: style,
+            },
+        };
     },
 );

uui/components/typography/__tests__/Text.test.tsx

@@ -8,10 +8,10 @@ describe('Text', () => {
         expect(tree).toMatchSnapshot();
     });
 
-    it('should be rendered correctly', () => {
+    it('should be rendered correctly with props', () => {
         const tree = renderer
             .create(
-                <Text color="primary" size="48" fontSize="24" lineHeight="30" onClick={ jest.fn }>
+                <Text color="primary" size="48" fontSize="24" lineHeight="30" onClick={ jest.fn } rawProps={ { style: { marginRight: '12' } } }>
                     Test
                 </Text>,
             )

uui/components/typography/__tests__/__snapshots__/Text.test.tsx.snap

@@ -3,19 +3,21 @@
 exports[`Text should be rendered correctly 1`] = `
 <div
   className="root uui-text uui-size-36 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography container"
+  style={Object {}}
 >
   Test
 </div>
 `;
 
-exports[`Text should be rendered correctly 2`] = `
+exports[`Text should be rendered correctly with props 1`] = `
 <div
   className="root uui-text uui-size-48 lineHeight fontSize uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography container"
   onClick={[Function]}
   style={
     Object {
       "--uui-text-font-size": "24px",
       "--uui-text-line-height": "30px",
+      "marginRight": "12",
     }
   }
 >