Merge pull request #1359 from dxc-technology/aida-fix-1358

Fixed margins between elements in paginator

Author: marcialfps

docs/src/pages/themeBuilder/themes/AdvancedTheme.json

@@ -498,10 +498,10 @@
     "marginRight": "40px",
     "marginLeft": "20px",
     "itemsPerPageSelectorMarginLeft": "0px",
-    "itemsPerPageSelectorMarginRight": "30px",
+    "itemsPerPageSelectorMarginRight": "0.5rem",
     "pageSelectorMarginRight": "30px",
     "pageSelectorMarginLeft": "0px",
-    "totalItemsContainerMarginRight": "30px",
+    "totalItemsContainerMarginRight": "2.5rem",
     "totalItemsContainerMarginLeft": "0px"
   },
   "progressBar": {

lib/src/common/variables.js

@@ -192,13 +192,13 @@ export const componentTokens = {
     titleLabelFontWeight: globalTokens.type_regular,
     titleLabelFontStyle: globalTokens.type_normal,
     titleLabelFontColor: globalTokens.hal_black,
-    disabledTitleLabelFontColor: globalTokens.hal_grey_l_60, 
-    titleLabelPaddingTop: "0px", 
-    titleLabelPaddingBottom: "0px", 
-    titleLabelPaddingLeft: "0px", 
-    titleLabelPaddingRight: "16px", 
-    focusBorderColor: globalTokens.hal_blue_l_50, 
-    focusBorderStyle: "solid", 
+    disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
+    titleLabelPaddingTop: "0px",
+    titleLabelPaddingBottom: "0px",
+    titleLabelPaddingLeft: "0px",
+    titleLabelPaddingRight: "16px",
+    focusBorderColor: globalTokens.hal_blue_l_50,
+    focusBorderStyle: "solid",
     focusBorderThickness: "2px",
     borderRadius: "4px",
     boxShadowOffsetX: "0px",
@@ -781,13 +781,13 @@ export const componentTokens = {
     fontTextTransform: "none",
     verticalPadding: "0.75rem",
     horizontalPadding: "2rem",
-    marginRight: "2rem",
-    marginLeft: "2rem",
+    marginRight: "40px",
+    marginLeft: "20px",
     itemsPerPageSelectorMarginLeft: "0px",
-    itemsPerPageSelectorMarginRight: "1rem",
+    itemsPerPageSelectorMarginRight: "0.5rem",
     pageSelectorMarginRight: "30px",
     pageSelectorMarginLeft: "0px",
-    totalItemsContainerMarginRight: "3rem",
+    totalItemsContainerMarginRight: "2.5rem",
     totalItemsContainerMarginLeft: "0px",
   },
   progressBar: {
@@ -1470,7 +1470,7 @@ export const defaultTranslatedComponentLabels = {
     incrementValueTitle: "Increment value",
   },
   paginator: {
-    itemsPerPageText: "Items per page ",
+    itemsPerPageText: "Items per page: ",
     minToMaxOfText: (minNumberOfItems, maxNumberOfItems, totalItems) =>
       `${minNumberOfItems} to ${maxNumberOfItems} of ${totalItems}`,
     goToPageText: "Go to page:",

lib/src/paginator/Paginator.test.js

@@ -35,7 +35,7 @@ describe("Paginator component tests", () => {
     const { getByText } = render(
       <DxcPaginator currentPage={1} itemsPerPage={10} itemsPerPageOptions={[10, 15]} totalItems={20}></DxcPaginator>
     );
-    expect(getByText("Items per page")).toBeTruthy();
+    expect(getByText("Items per page:")).toBeTruthy();
   });
 
   test("Paginator renders with itemsPerPageOptions", () => {

lib/src/paginator/Paginator.tsx

@@ -174,7 +174,7 @@ const ItemsLabel = styled.span`
 
 const GoToLabel = styled.span`
   margin-right: 0.5rem;
-  margin-left: 1rem;
+  margin-left: 0.5rem;
 `;
 
 const TotalItemsContainer = styled.span`
@@ -193,6 +193,7 @@ const LabelsContainer = styled.div`
 const PageToSelectContainer = styled.span`
   display: flex;
   align-items: center;
+  margin-right: 0.5rem;
 
   label {
     height: 0px;