@zohodesk/library-platform 1.1.6 → 1.1.7-exp.2

package/es/cc/table-connected/constants/Events.js

@@ -1,5 +1,6 @@
 export const ERROR_OCCURRED = 'SMART_TABLE#ERROR_OCCURRED';
 export default {
+  REORDER_SUCCESS: 'SMART_TABLE#REORDER_SUCCEED',
   DELETE_RECORDS_SUCCESS: 'SMART_TABLE#RECORD_DELETED',
   UPDATE_RECORDS_SUCCESS: 'SMART_TABLE#RECORD_UPDATED',
   SORT: 'SMART_TABLE#SORT',

package/es/index.js

@@ -10,4 +10,9 @@ export { _Components as Components };
 export { platformSDK } from "./platform/sdk/frameworks/Sdk";
 export { sdkRegistry } from "./platform/sdk/frameworks/SdkRegistry";
 export { validations as defaultFieldValidations } from "./library/behaviours/field-validation/frameworks/utils/FormBasicValidationAdaptor";
-export { getClientActionsAdapter, fetchClientActions } from "./platform/client-actions/components/action-event-mediator/frameworks/ui/ClientActionsAdapter";
+export { getClientActionsAdapter, fetchClientActions } from "./platform/client-actions/components/action-event-mediator/frameworks/ui/ClientActionsAdapter";
+export { renderField } from "./library/dot/components/section/frameworks/ui/RenderField";
+import { FieldSectionEventMappingBehaviourFactory } from "./library/dot/components/section/frameworks/ui/Section";
+export const Behaviours = {
+  FieldSectionEventMappingBehaviourFactory
+};

package/es/library/dot/components/action-location/frameworks/ui/ActionComponentMapping.js

@@ -6,6 +6,8 @@ import TableColumnChooser from "../../../../legacy-to-new-arch/table-column-choo
 import Checkbox from "../../../../legacy-to-new-arch/checkbox/frameworks/ui/Checkbox";
 import TableColumnFilter from "../../../../legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilter";
 import MoreDropdown from "../../../../legacy-to-new-arch/more-dropdown/frameworks/ui/MoreDropdown";
+import Breadcrumb from "../../../../legacy-to-new-arch/breadcrumb/frameworks/ui/Breadcrumb";
+import IconButton from "../../../../legacy-to-new-arch/icon-button/frameworks/ui/IconButton";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
   ['Button']: Button,
@@ -14,6 +16,8 @@ const ActionComponentMapping = {
   ['TableColumnSort']: TableColumnSort,
   ['TableColumnChooser']: TableColumnChooser,
   ['TableSelectAll']: Checkbox,
-  ['TableColumnFilter']: TableColumnFilter
+  ['TableColumnFilter']: TableColumnFilter,
+  ['Breadcrumb']: Breadcrumb,
+  ['IconButton']: IconButton
 };
 export default ActionComponentMapping;

package/es/library/dot/components/action-location/usecases/interactors/PropertiesChangeUseCase.js

@@ -10,7 +10,7 @@ export default class PropertiesChangeUseCase extends AbstractUseCase {
       currentActions,
       previousActions
     } = input;
-    actionLocation.processActionsChange(currentActions, previousActions);
+    actionLocation.processActionsChange(previousActions, currentActions);
     presenter.updateActionLocation(actionLocation.toObject());
   }
 

package/es/library/dot/components/form/adapters/presenter/TransformState.js

@@ -32,14 +32,75 @@ function updateFieldValues(_ref) {
       fields
     };
   });
-}
+} // const footerLeftActions = [{
+//   component: 'Button',
+//   location: 'footer_left_actions',
+//   properties: {
+//     text: 'Submit',
+//     palette: 'primaryFilled'
+//   },
+//   eventMappings: [
+//     {
+//       payloadValueMapping: {},
+//       sourceEvent: "BUTTON#CLICKED",
+//       id: "1234567890",
+//       targetEvent: "FORM#SUBMIT"
+//     }
+//   ]
+// },
+// {
+//   component: 'Button',
+//   location: 'footer_left_actions',
+//   properties: {
+//     text: 'Cancel',
+//     palette: 'secondary'
+//   },
+//   eventMappings: []
+// }];
 
+
+const headerLeftActions = [{
+  component: 'Breadcrumb',
+  properties: {
+    items: [{
+      id: 'customization',
+      text: 'Customization',
+      isLink: true
+    }, {
+      id: 'buttons',
+      text: 'Buttons',
+      isLink: true
+    }, {
+      id: 'new-button',
+      text: 'New Button',
+      isActive: true
+    }, {
+      id: 'kakarot',
+      text: 'Kakarot',
+      iconName: 'ZD-GN-department'
+    }]
+  },
+  eventMappings: []
+}];
+const headerRightActions = [{
+  component: 'IconButton',
+  properties: {
+    iconName: 'ZD-GN-infoStroke',
+    title: 'Help'
+  }
+}];
 export function TransformState(state) {
   const {
     sections,
     isLoading,
     values,
-    errorMessages
+    errorMessages,
+    isHeaderEnabled,
+    isFooterEnabled,
+    headerLeftActions,
+    headerRightActions,
+    footerLeftActions,
+    footerRightActions
   } = state.properties; // const { values, errorMessages } = state.behaviours.form;
 
   const updatedSections = updateFieldValues({
@@ -50,8 +111,14 @@ export function TransformState(state) {
   return { ...state,
     // properties: { ...state.properties, sections: updatedSections }
     viewModel: {
+      isHeaderEnabled,
+      isFooterEnabled,
       sections: updatedSections,
-      isLoading
+      isLoading,
+      headerLeftActions,
+      headerRightActions,
+      footerLeftActions,
+      footerRightActions
     }
   };
 }

package/es/library/dot/components/form/frameworks/ui/DefaultComponentRegister.js

@@ -0,0 +1,28 @@
+import { DefaultFormSectionUIType } from "../../../../../../cc/fields/field/FormDefaultUIType";
+import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
+import { TextArea, TextBox, Email, PickList, Currency, MultiSelect, Url, Percentage, Phone, Number, Decimal, Date, DateTime, Checkbox } from "../../../form-fields";
+import EPHITag from "../../../form-fields/ephi-tag/frameworks/ui/EPHITag";
+import InfoIcon from "../../../form-fields/info-icon/frameworks/ui/InfoIcon";
+import Section from "../../../section/frameworks/ui/Section";
+export function registerDefaultComponents() {
+  // Registering components in the ComponentRegistry
+  // NOTE: This is a workaround to avoid dynamic imports
+  // NOTE: register these components in place
+  ComponentRegistry.register('TextBox', TextBox);
+  ComponentRegistry.register('TextArea', TextArea);
+  ComponentRegistry.register('PickList', PickList);
+  ComponentRegistry.register('Email', Email);
+  ComponentRegistry.register('Currency', Currency);
+  ComponentRegistry.register('MultiSelect', MultiSelect);
+  ComponentRegistry.register('Url', Url);
+  ComponentRegistry.register('Percentage', Percentage);
+  ComponentRegistry.register('Phone', Phone);
+  ComponentRegistry.register('Number', Number);
+  ComponentRegistry.register('Decimal', Decimal);
+  ComponentRegistry.register('Date', Date);
+  ComponentRegistry.register('DateTime', DateTime);
+  ComponentRegistry.register('Checkbox', Checkbox);
+  ComponentRegistry.register('EPHITag', EPHITag);
+  ComponentRegistry.register('InfoIcon', InfoIcon);
+  ComponentRegistry.register(DefaultFormSectionUIType, Section);
+}

package/es/library/dot/components/form/frameworks/ui/Form.js

@@ -3,6 +3,8 @@ import FormProperties from "../../../../../../cc/form/Properties";
 import FormView from "./FormView";
 import { TransformState } from "../../adapters/presenter/TransformState";
 import EventHandlersFactory from "./EventHandlerFactory";
+import { registerDefaultComponents } from "./DefaultComponentRegister";
+registerDefaultComponents();
 const Form = createCustomComponent({
   name: 'CustomForm',
   View: FormView,

package/es/library/dot/components/form/frameworks/ui/FormView.js

@@ -1,8 +1,13 @@
 import React from 'react';
 import Loader from '@zohodesk/svg/es/v1/Loader/Loader';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import FormAction, { LeftSide, RightSide } from '@zohodesk/dot/es/FormAction/FormAction';
 import SectionsWrapper from '@zohodesk-private/desk-components/es/form/SectionsWrapper/SectionsWrapper';
+import FormHeader from '@zohodesk-private/desk-components/es/setup/SetupHeader/SetupHeader';
+import MiddleContainer from '@zohodesk-private/desk-components/es/setup/SetupContent/SetupContent';
 import Sections from "./sub-components/Sections";
-import FormConstants from "../../../../../../cc/form/Constants"; // @ts-ignore
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/Form.module.css";
 
@@ -11,36 +16,52 @@ function FormView(_ref, ref) {
     state,
     helpers
   } = _ref;
-  const {
-    dispatch
-  } = helpers;
   const {
     sections,
-    isLoading
+    isLoading,
+    headerLeftActions,
+    headerRightActions,
+    footerLeftActions,
+    footerRightActions,
+    isHeaderEnabled,
+    isFooterEnabled
   } = state.viewModel;
-
-  const handleSubmit = e => {
-    e.preventDefault();
-    dispatch({
-      type: FormConstants.FORM_SUBMIT
-    });
-  };
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: style.formWrapper,
+  return /*#__PURE__*/React.createElement(Flex, {
+    $ui_tagName: "form",
+    $ui_displayMode: "flex",
+    $ui_direction: "column",
+    $flag_fullsize: true,
     ref: ref
-  }, isLoading ?
-  /*#__PURE__*/
-  // Check for loading state
-  React.createElement(Loader, null) : /*#__PURE__*/React.createElement(SectionsWrapper, null, /*#__PURE__*/React.createElement("button", {
-    type: "submit",
-    onClick: handleSubmit
-  }, "Submit"), /*#__PURE__*/React.createElement(Sections, {
+  }, isHeaderEnabled && /*#__PURE__*/React.createElement(FormHeader, {
+    customId: "formHeader",
+    testId: "formHeader",
+    $render_leftElement: headerLeftActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: headerLeftActions,
+      gap: ActionViewGap.MEDIUM
+    }) : null,
+    $render_rightElement: headerRightActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: headerRightActions,
+      gap: ActionViewGap.MEDIUM
+    }) : null
+  }), /*#__PURE__*/React.createElement(MiddleContainer, {
+    $flag_padding: true,
+    $flag_greyBg: true,
+    $flag_childrenWrapper: true
+  }, isLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(SectionsWrapper, null, /*#__PURE__*/React.createElement(Sections, {
     sections: sections
-  }), /*#__PURE__*/React.createElement("button", {
-    type: "submit",
-    onClick: handleSubmit
-  }, "Submit")));
+  }))), isFooterEnabled && /*#__PURE__*/React.createElement(FormAction, {
+    size: "small",
+    paddingLeftSize: "xmedium",
+    paddingRightClass: style.footer
+  }, /*#__PURE__*/React.createElement(LeftSide, null, footerLeftActions.length > 0 && /*#__PURE__*/React.createElement(ActionEventMediator, {
+    testId: "formFooter_leftActions",
+    actions: footerLeftActions,
+    gap: ActionViewGap.LARGE
+  })), /*#__PURE__*/React.createElement(RightSide, null, footerRightActions.length > 0 && /*#__PURE__*/React.createElement(ActionEventMediator, {
+    testId: "formFooter_rightActions",
+    actions: footerRightActions,
+    gap: ActionViewGap.LARGE
+  }))));
 }
 
 export default FormView;

package/es/library/dot/components/form/frameworks/ui/css/Form.module.css

@@ -1,7 +1,3 @@
-.formWrapper {
-    height: 100% ;
-}
-
 .fieldWrapper {
     position: relative
 }
@@ -30,4 +26,12 @@
 }
 .cursor_default {
     cursor: default
+}
+
+[dir=ltr] .footer {
+    padding-right: var(--zd_size32) 
+}
+
+[dir=rtl] .footer {
+    padding-left: var(--zd_size32) 
 }

package/es/library/dot/components/form/frameworks/ui/sub-components/Sections.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import DefaultSection from "../../../../section/frameworks/ui/Section";
 import ComponentRegistry from "../../../../../../custom-component/frameworks/ui/ComponentRegistry";
 export default function Sections(_ref) {
   let {
@@ -8,25 +7,26 @@ export default function Sections(_ref) {
   return sections.map(section => {
     const {
       id,
+      name,
       title,
       description,
+      isCollapsed,
       isVisible,
       fields,
-      type
+      type,
+      additionalDetails
     } = section;
+    const Section = ComponentRegistry.get(type);
     if (isVisible === false) return null;
-    let Section = DefaultSection;
-
-    if (type) {
-      Section = ComponentRegistry.get(type);
-    }
-
     return /*#__PURE__*/React.createElement(Section, {
       key: id,
       id: id,
+      name: name,
       title: title,
       description: description,
-      fields: fields
+      fields: fields,
+      isCollapsed: isCollapsed,
+      additionalDetails: additionalDetails
     });
   });
 }

package/es/library/dot/components/section/frameworks/ui/RenderField.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
+export function renderField(field, key) {
+  const {
+    type,
+    ...properties
+  } = field;
+  const Component = ComponentRegistry.get(type);
+
+  if (!Component) {
+    console.warn(`Component for type "${type}" not found.`);
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Component, {
+    key: key,
+    ...properties
+  });
+}

package/es/library/dot/components/section/frameworks/ui/Section.js

@@ -2,14 +2,23 @@
 import { createCustomComponent } from "../../../../../custom-component";
 import { SectionProperties } from "../../../../../../cc/section";
 import SectionView from "./SectionView";
-import TransFormState from "../../adapters/presenter/TransFormState";
 import EventHandlersFactory from "./EventHandlerFactory";
+export class FieldSectionEventMappingBehaviourFactory {
+  static create() {
+    return {
+      name: 'fieldSectionEventMapping',
+      setInitialState: () => ({}),
+      properties: {},
+      eventHandlers: EventHandlersFactory.create()
+    };
+  }
+
+}
 let WrapSection = createCustomComponent({
   name: 'Section',
   View: SectionView,
   properties: SectionProperties,
-  transformState: TransFormState,
-  eventHandlers: EventHandlersFactory.create(),
-  behaviours: []
+  eventHandlers: {},
+  behaviours: [FieldSectionEventMappingBehaviourFactory.create()]
 });
 export default WrapSection;

package/es/library/dot/components/section/frameworks/ui/SectionView.js

@@ -1,51 +1,30 @@
 import React from 'react';
-import ConvertSlotToComponent from "../../../../../slot/frameworks/ui/ConvertSlotToComponent";
 import Section from '@zohodesk-private/desk-components/es/setup/SetupFormBox/SetupFormBox';
 import FieldsLayout from '@zohodesk-private/desk-components/es/form/FieldsLayout/FieldsLayout';
-import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
-import { TextArea, TextBox, Email, PickList, Currency, MultiSelect, Url, Percentage, Phone, Number, Decimal, Date, DateTime, Checkbox } from "../../../form-fields";
-import EPHITag from "../../../form-fields/ephi-tag/frameworks/ui/EPHITag";
-import InfoIcon from "../../../form-fields/info-icon/frameworks/ui/InfoIcon"; // NOTE: This is a workaround to avoid dynamic imports
-// NOTE: register these components in place
-
-ComponentRegistry.register('TextBox', TextBox);
-ComponentRegistry.register('TextArea', TextArea);
-ComponentRegistry.register('PickList', PickList);
-ComponentRegistry.register('Email', Email);
-ComponentRegistry.register('Currency', Currency);
-ComponentRegistry.register('MultiSelect', MultiSelect);
-ComponentRegistry.register('Url', Url);
-ComponentRegistry.register('Percentage', Percentage);
-ComponentRegistry.register('Phone', Phone);
-ComponentRegistry.register('Number', Number);
-ComponentRegistry.register('Decimal', Decimal);
-ComponentRegistry.register('Date', Date);
-ComponentRegistry.register('DateTime', DateTime);
-ComponentRegistry.register('Checkbox', Checkbox);
-ComponentRegistry.register('EPHITag', EPHITag);
-ComponentRegistry.register('InfoIcon', InfoIcon);
+import { renderField } from "./RenderField";
 
 function SectionView(_ref, ref) {
   let {
     state
   } = _ref;
   const {
-    id,
+    name,
     title,
     description,
+    isCollapsed,
     fields
   } = state.properties;
   return /*#__PURE__*/React.createElement(Section, {
     $i18n_heading: title,
     $i18n_description: description,
-    testId: id,
-    customId: id,
+    testId: name,
+    customId: name,
     $tagAttributes_container: {
       ref
     }
-  }, /*#__PURE__*/React.createElement(FieldsLayout, {
+  }, !isCollapsed && /*#__PURE__*/React.createElement(FieldsLayout, {
     $flag_topSpace: !!title || !!description
-  }, ConvertSlotToComponent(fields)));
+  }, fields.filter(field => field.isVisible).map(field => renderField(field, field.name || field.apiName))));
 }
 
 export default SectionView;

package/es/library/dot/components/table-list/frameworks/ui/css/TableList.module.css

@@ -1,45 +1,60 @@
 /* Default: no special styles */
 .tableListRow {
-    /*  */
+    /*  Variable:Ignore  */
+    --local-tableList-row-paddingLeft: var(--zd_size24);
 }
 
 /* Keyboard + Reorder + Selection */
 .tableListRow-kbdReorderSelection {
-    --local-tableList-selectionColumn-width: 56px;
-    --local-tableList-selectionColumn-left: 24px;
-    --local-tableList-reorder-left: 8px;
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-width: var(--zd_size56);
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-left: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-reorder-left: var(--zd_size8);
 }
 
 /* Keyboard + Reorder, no Selection */
 .tableListRow-kbdReorder {
-    --local-tableList-reorder-left: 8px;
+    /*  Variable:Ignore  */
+    --local-tableList-reorder-left: var(--zd_size8);
 }
 
 /* Keyboard + Selection, no Reorder */
 .tableListRow-kbdSelection {
-    --local-tableList-row-paddingLeft: 8px;
-    --local-tableList-selectionColumn-width: 72px;
-    --local-tableList-selectionColumn-left: 8px;
-    --local-tableList-selectionColumn-paddingRight: 8px;
+    /*  Variable:Ignore  */
+    --local-tableList-row-paddingLeft: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-width: var(--zd_size72);
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-left: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-paddingRight: var(--zd_size8);
     --local-tableList-selectionColumn-justifyContent: center;
 }
 
 /* Keyboard only */
 .tableListRow-kbd {
-    /*  */
+    /*  Variable:Ignore  */
+    --local-tableList-row-paddingLeft: var(--zd_size24);
 }
 
 /* Reorder + Selection, no Keyboard */
 .tableListRow-reorderSelection {
-    --local-tableList-selectionColumn-width: 56px;
-    --local-tableList-selectionColumn-left: 24px;
-    --local-tableList-selectionColumn-paddingRight: 16px;
-    --local-tableList-reorder-paddingLeft: 8px;
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-width: var(--zd_size56);
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-left: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-paddingRight: var(--zd_size16);
+    /*  Variable:Ignore  */
+    --local-tableList-reorder-paddingLeft: var(--zd_size8);
 }
 
 /* Reorder only */
 .tableListRow-reorder {
-    --local-tableList-reorder-paddingLeft: 8px;
+    /*  Variable:Ignore  */
+    --local-tableList-reorder-paddingLeft: var(--zd_size8);
 }
 
 /* Selection only */
@@ -49,52 +64,71 @@
 
 /* Default: no special styles */
 .tableListHeader {
-    /*  */
+    /*  Variable:Ignore  */
+    --local-tableList-header-paddingLeft: var(--zd_size24);
 }
 
 /* Keyboard + Reorder + Selection */
 .tableListHeader-kbdReorderSelection {
-    --local-tableList-reorderHeader-paddingRight: 8px;
-    --local-tableList-massActionHeader-left: 24px;
-    --local-tableList-reorderHeader-left: 8px;
-    --local-tableList-reorderHeader-width: 16px;
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-paddingRight: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-left: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-left: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-width: var(--zd_size16);
 
-    --local-tableList-massActionHeader-left: 24px;
-    --local-tableList-massActionHeader-paddingRight: 24px;
-    --local-tableList-massActionHeader-width: 56px;
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-paddingRight: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-width: var(--zd_size56);
 }
 
 /* Keyboard + Reorder, no Selection */
 .tableListHeader-kbdReorder {
-    --local-tableList-reorderHeader-left: 8px;
-    --local-tableList-reorderHeader-paddingRight: 8px;
-    --local-tableList-reorderHeader-width: 16px;
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-left: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-paddingRight: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-width: var(--zd_size16);
 }
 
 /* Reorder only */
 .tableListHeader-reorder {
-    --local-tableList-reorderHeader-width: 24px;
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-width: var(--zd_size24);
 }
 
 /* Keyboard + Selection, no Reorder */
 .tableListHeader-kbdSelection {
-    --local-tableList-header-paddingLeft: 8px;
-    --local-tableList-massActionHeader-left: 8px;
-    --local-tableList-massActionHeader-paddingRight: 8px;
-    --local-tableList-massActionHeader-width: 72px;
+    /*  Variable:Ignore  */
+    --local-tableList-header-paddingLeft: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-left: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-paddingRight: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-width: var(--zd_size72);
 }
 
 /* Keyboard only */
 .tableListHeader-kbd {
-    --local-tableList-header-paddingLeft: 24px;
+    /*  Variable:Ignore  */
+    --local-tableList-header-paddingLeft: var(--zd_size24);
 }
 
 /* Reorder + Selection, no Keyboard */
 .tableListHeader-reorderSelection {
-    --local-tableList-reorderHeader-width: 24px;
-    --local-tableList-massActionHeader-left: 24px;
-    --local-tableList-massActionHeader-paddingRight: 24px;
-    --local-tableList-massActionHeader-width: 56px;
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-width: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-left: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-paddingRight: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-width: var(--zd_size56);
 }
 
 /* Selection only */
@@ -206,12 +240,12 @@
 
 [dir=ltr] .dragHandleWrapper {
     left: var(--local-tableList-reorder-left, 0);
-    padding: 0 var(--local-tableList-reorder-paddingRight, 0) 0 var(--local-tableList-reorder-paddingLeft, 0);
+    padding: 0 0 0 var(--local-tableList-reorder-paddingLeft, 0);
 }
 
 [dir=rtl] .dragHandleWrapper {
     right: var(--local-tableList-reorder-left, 0);
-    padding: 0 var(--local-tableList-reorder-paddingLeft, 0) 0 var(--local-tableList-reorder-paddingRight, 0);
+    padding: 0 var(--local-tableList-reorder-paddingLeft, 0) 0 0;
 }
 
 .rowDropIndicator {
@@ -242,13 +276,11 @@
 
 [dir=ltr] .tableListSelectContainer {
     left: var(--local-tableList-selectionColumn-left, 0);
-    padding-left: var(--local-tableList-selectionColumn-paddingLeft, 0);
     padding-right: var(--local-tableList-selectionColumn-paddingRight, 0);
 }
 
 [dir=rtl] .tableListSelectContainer {
     right: var(--local-tableList-selectionColumn-left, 0);
-    padding-right: var(--local-tableList-selectionColumn-paddingLeft, 0);
     padding-left: var(--local-tableList-selectionColumn-paddingRight, 0);
 }