@axinom/mosaic-ui 0.35.0-rc.7 → 0.35.0-rc.9

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.scss

@@ -22,6 +22,10 @@
 
   z-index: 1;
 
+  column-gap: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
+
+  padding: 1px 0px 1px 0px;
+
   .column {
     width: 100%;
     height: 100%;
@@ -60,8 +64,6 @@
     justify-items: start;
     align-items: center;
 
-    //opacity: 0.5;
-
     svg {
       stroke: var(--input-disabled-border-color, $input-disabled-border-color);
       rect {

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.spec.tsx

@@ -87,11 +87,12 @@ describe('DynamicListDataEntry', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  it('most styling props, except gridTemplateColumns, should be undefined by default', () => {
+  it('most styling props, except gridTemplateColumns and gridAutoRows, should be undefined by default', () => {
     const wrapper = shallow(
       <DynamicListDataEntry
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
+        rowHeight={defaultProps.rowHeight}
       />,
     );
 
@@ -99,7 +100,10 @@ describe('DynamicListDataEntry', () => {
 
     expect(row.prop('style')).toHaveProperty('gridColumnGap', undefined);
     expect(row.prop('style')).toHaveProperty('alignItems', undefined);
-    expect(row.prop('style')).toHaveProperty('gridAutoRows', undefined);
+    expect(row.prop('style')).toHaveProperty(
+      'gridAutoRows',
+      `minmax(50px, ${defaultProps.rowHeight})`,
+    );
     expect(row.prop('style')).toHaveProperty(
       'gridTemplateColumns',
       defaultProps.columnSizes,
@@ -122,7 +126,7 @@ describe('DynamicListDataEntry', () => {
     );
     expect(row.prop('style')).toHaveProperty(
       'gridAutoRows',
-      defaultProps.rowHeight,
+      `minmax(50px, ${defaultProps.rowHeight})`,
     );
     expect(row.prop('style')).toHaveProperty(
       'gridTemplateColumns',
@@ -153,13 +157,12 @@ describe('DynamicListDataEntry', () => {
     expect(columns).toHaveLength(defaultColumnsLength);
   });
 
-  it(`renders the position column if a 'positionKey' prop is set and 'allowReordering' is set to true`, () => {
+  it(`renders the position column if 'showPositionColumn' is set to true`, () => {
     const wrapper = shallow(
       <DynamicListDataEntry
         columnSizes={''}
         columns={defaultColumns}
-        positionKey={'position'}
-        allowReordering={true}
+        showPositionColumn={true}
       />,
     );
 
@@ -168,27 +171,13 @@ describe('DynamicListDataEntry', () => {
     expect(position.exists()).toBe(true);
   });
 
-  it(`doesn't render the position column if a 'positionKey' isn't set`, () => {
+  it(`doesn't render the position column if a 'showPositionColumn' is set to false`, () => {
     const wrapper = shallow(
       <DynamicListDataEntry
         columnSizes={''}
         columns={defaultColumns}
         allowReordering={true}
-      />,
-    );
-
-    const position = wrapper.find('.position');
-
-    expect(position.exists()).toBe(false);
-  });
-
-  it(`doesn't render the position column if 'allowReordering' is false`, () => {
-    const wrapper = shallow(
-      <DynamicListDataEntry
-        columnSizes={''}
-        columns={defaultColumns}
-        positionKey={'position'}
-        allowReordering={false}
+        showPositionColumn={false}
       />,
     );
 
@@ -205,6 +194,7 @@ describe('DynamicListDataEntry', () => {
         positionKey={'position'}
         allowReordering={true}
         allowDragging={true}
+        showPositionColumn={true}
       />,
     );
 
@@ -221,6 +211,7 @@ describe('DynamicListDataEntry', () => {
         positionKey={'position'}
         allowReordering={true}
         allowDragging={false}
+        showPositionColumn={true}
       />,
     );
 
@@ -229,8 +220,6 @@ describe('DynamicListDataEntry', () => {
     expect(dragIcon.exists()).toBe(false);
   });
 
-  it.todo(`onDrop removes 'draggedAbove' or 'draggedBelow'`);
-
   it(`doesn't display an action button by default`, () => {
     const wrapper = shallow(
       <DynamicListDataEntry
@@ -272,26 +261,6 @@ describe('DynamicListDataEntry', () => {
     expect(button.prop('disabled')).toBe(true);
   });
 
-  it(`input width and height should be the same as the 'rowHeight' prop if its set`, () => {
-    const mockHeight = '70px';
-    const wrapper = mount(
-      <DynamicListDataEntry
-        columns={defaultColumns}
-        columnSizes={defaultProps.columnSizes}
-        allowReordering={true}
-        positionKey={'position'}
-        rowHeight={mockHeight}
-      />,
-    );
-
-    const inputStyles = wrapper
-      .find('input')
-      .prop('style') as React.CSSProperties;
-
-    expect(inputStyles.height).toBe(mockHeight);
-    expect(inputStyles.width).toBe(mockHeight);
-  });
-
   it(`input value should be 'newDataPosition' prop`, () => {
     const mockPosition = 56;
     const wrapper = shallow(
@@ -301,6 +270,7 @@ describe('DynamicListDataEntry', () => {
         positionKey={'position'}
         allowReordering={true}
         newDataPosition={mockPosition}
+        showPositionColumn={true}
       />,
     );
 
@@ -316,6 +286,7 @@ describe('DynamicListDataEntry', () => {
         columnSizes={defaultProps.columnSizes}
         positionKey={'position'}
         allowReordering={true}
+        showPositionColumn={true}
       />,
     );
 
@@ -435,6 +406,7 @@ describe('DynamicListDataEntry', () => {
         positionKey={mockPosKey}
         allowReordering={true}
         newDataPosition={mockNewPos}
+        showPositionColumn={true}
       />,
     );
 
@@ -519,6 +491,7 @@ describe('DynamicListDataEntry', () => {
         positionKey={mockPosKey}
         allowReordering={true}
         newDataPosition={undefined}
+        showPositionColumn={true}
       />,
     );
 

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.tsx

@@ -56,6 +56,8 @@ export interface DynamicListDataEntryProps<T extends Data> {
   sticky?: boolean;
   /** If header is shown */
   showHeader?: boolean;
+  /** If set to true, the position column will be shown (default: false) */
+  showPositionColumn?: boolean;
   /** Emits when the action button is clicked. Data is supplied as a parameter */
   onActionClicked?: (data: T) => void;
   /** override default add button (+) */
@@ -82,11 +84,12 @@ export const DynamicListDataEntry = <T extends Data>({
   className = '',
   sticky = true,
   showHeader,
+  showPositionColumn = false,
   onActionClicked = noop,
   customAddButton,
 }: PropsWithChildren<DynamicListDataEntryProps<T>>): JSX.Element => {
   const customStyles = {
-    gridAutoRows: rowHeight,
+    gridAutoRows: `minmax(50px, ${rowHeight})`,
     gridTemplateColumns: columnSizes,
     gridColumnGap: columnGap,
     justifyItems: horizontalTextAlign,
@@ -188,29 +191,19 @@ export const DynamicListDataEntry = <T extends Data>({
       style={customStyles}
       data-test-id="dynamic-list-data-entry"
     >
-      {allowReordering === true &&
-        // only show position column if allowReordering is true and the positionKey exists
-        positionKey !== undefined && (
-          <div className={clsx(classes.position)}>
-            {allowDragging && (
-              <div className={classes.draggable}>
-                <Icons
-                  icon={IconName.Drag}
-                  className={clsx(classes.dragIcon)}
-                />
-              </div>
-            )}
-
-            <div className={clsx(classes.input)}>
-              <input
-                disabled={true}
-                type="text"
-                value={newDataPosition}
-                style={{ height: rowHeight, width: rowHeight }}
-              />
+      {showPositionColumn && (
+        <div className={clsx(classes.position)}>
+          {allowDragging && (
+            <div className={classes.draggable}>
+              <Icons icon={IconName.Drag} className={clsx(classes.dragIcon)} />
             </div>
+          )}
+
+          <div className={clsx(classes.input)}>
+            <input disabled={true} type="text" value={newDataPosition} />
           </div>
-        )}
+        </div>
+      )}
       {columns.map((column) => (
         <div
           key={column.propertyName as string}

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.scss

@@ -8,6 +8,20 @@
 
   z-index: 1;
 
+  display: grid;
+  padding: 1px 0px 1px 0px;
+  grid-auto-rows: var(--dynamic-list-row-height, $dynamic-list-row-height);
+  column-gap: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
+
+  border-bottom: solid 1px $light-gray;
+
+  justify-items: left;
+  align-items: center;
+
+  &:first-child {
+    padding-left: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
+  }
+
   .column {
     width: 100%;
     height: 100%;
@@ -22,8 +36,7 @@
     }
   }
 
-  .position,
-  .actionButton {
+  .position {
     height: 100%;
     width: 100%;
     display: grid;
@@ -33,14 +46,6 @@
     align-items: center;
   }
 
-  .position {
-    padding-left: 5px;
-  }
-
-  .actionButton {
-    justify-items: end;
-  }
-
   p {
     color: var(--input-color, $input-color);
     font-size: var(--label-font-size, $label-font-size);

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.spec.tsx

@@ -114,13 +114,15 @@ describe('DynamicListHeader', () => {
     });
   });
 
-  it(`renders the position column if a 'positionKey' prop is set and 'allowReordering' is set to true`, () => {
+  it(`renders the position column if 'showPositionColumn' is set to true`, () => {
     const wrapper = shallow(
       <DynamicListHeader
         columnSizes={''}
         columns={defaultColumns}
         positionKey={'position'}
         allowReordering={true}
+        showPositionColumn={true}
+        allowDragging={true}
       />,
     );
 
@@ -140,6 +142,7 @@ describe('DynamicListHeader', () => {
         positionKey={'position'}
         allowReordering={true}
         positionLabel={mockLabel}
+        showPositionColumn={true}
       />,
     );
 

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.tsx

@@ -28,6 +28,10 @@ export interface DynamicListHeaderProps<T extends Data> {
   className?: string;
   /** Whether header should stick to the top (default: true) */
   sticky?: boolean;
+  /** If set to true, the position column will be shown (default: false) */
+  showPositionColumn?: boolean;
+  /** This will be used to determine the label for the position column if a positionLabel is not defined (default: false) */
+  allowDragging?: boolean;
 }
 
 export const DynamicListHeader = <T extends Data>({
@@ -37,11 +41,11 @@ export const DynamicListHeader = <T extends Data>({
   rowHeight,
   horizontalTextAlign,
   verticalTextAlign,
-  allowReordering,
-  positionKey,
   positionLabel,
   className = '',
   sticky = true,
+  showPositionColumn = false,
+  allowDragging = false,
 }: PropsWithChildren<DynamicListHeaderProps<T>>): JSX.Element => {
   const customStyles = {
     gridAutoRows: rowHeight,
@@ -66,18 +70,16 @@ export const DynamicListHeader = <T extends Data>({
       style={customStyles}
       data-test-id="dynamic-list-header"
     >
-      {allowReordering === true &&
-        // only show position column if allowReordering is true and the positionKey exists
-        positionKey !== undefined && (
-          <div
-            className={clsx(classes.column)}
-            data-test-id="dynamic-list-header-cell"
-          >
-            <p className={clsx(classes.position)}>
-              {positionLabel ?? 'Position'}
-            </p>
-          </div>
-        )}
+      {showPositionColumn && (
+        <div
+          className={clsx(classes.column)}
+          data-test-id="dynamic-list-header-cell"
+        >
+          <p className={clsx(classes.position)}>
+            {positionLabel ?? (allowDragging ? 'Position' : 'Pos')}
+          </p>
+        </div>
+      )}
       {columns.map((column) => (
         <div
           key={column.propertyName as string}

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.scss

@@ -4,6 +4,22 @@
   box-sizing: border-box;
 
   position: relative;
+  display: grid;
+  width: 100%;
+
+  display: grid;
+  padding: 1px 0px 1px 0px;
+  grid-auto-rows: var(--dynamic-list-row-height, $dynamic-list-row-height);
+  column-gap: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
+
+  border-bottom: var(--dynamic-list-row-border, $dynamic-list-row-border);
+
+  &.dragging {
+    border-bottom: 0;
+  }
+
+  justify-items: left;
+  align-items: center;
 
   .column {
     max-width: 100%;
@@ -133,30 +149,6 @@
     justify-self: end;
   }
 
-  &.draggedAbove {
-    &:before {
-      content: '';
-      position: absolute;
-      top: -3px;
-      left: 0px;
-      bottom: 0px;
-      right: 0px;
-      border-top: 3px dashed $blue;
-    }
-  }
-
-  &.draggedBelow {
-    &:after {
-      content: '';
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      bottom: -3px;
-      right: 0px;
-      border-bottom: 3px dashed $blue;
-    }
-  }
-
   .dragIcon {
     height: 40px;