@axinom/mosaic-ui 0.35.0-rc.0 → 0.35.0-rc.10

package/src/components/List/ListRow/ListRow.tsx

@@ -249,58 +249,64 @@ export const ListRow = <T extends Data>({
           {generateCells}
         </div>
       )}
-      <div className={classes.actions}>
-        {inlineMenuActions &&
-          inlineActionMenuData &&
-          inlineActionMenuData.length > 0 && (
-            <InlineMenu
-              actions={inlineActionMenuData}
-              showArrow={false}
-              placement="bottom-end"
-            />
+      {(inlineMenuActions ||
+        showActionButton ||
+        showCheckMark ||
+        showItemCheckbox) && (
+        <div className={classes.actions}>
+          {inlineMenuActions &&
+            inlineActionMenuData &&
+            inlineActionMenuData.length > 0 && (
+              <InlineMenu
+                actions={inlineActionMenuData}
+                showArrow={false}
+                placement="bottom-end"
+              />
+            )}
+          {showActionButton && selectionMode === ListSelectMode.None && (
+            <>
+              {showActionButton &&
+                (typeof onItemClicked !== 'function' ? (
+                  <Button
+                    icon={IconName.ChevronRight}
+                    height={actionSize}
+                    width={actionSize}
+                    path={onItemClicked}
+                    dataTestId="list-entry-action"
+                  />
+                ) : (
+                  <Button
+                    icon={IconName.ChevronRight}
+                    height={actionSize}
+                    width={actionSize}
+                    onButtonClicked={() => onItemClickedHandler(data)}
+                    dataTestId="list-entry-action"
+                  />
+                ))}
+            </>
           )}
-        {showActionButton && selectionMode === ListSelectMode.None && (
-          <>
-            {showActionButton &&
-              (typeof onItemClicked !== 'function' ? (
-                <Button
-                  icon={IconName.ChevronRight}
-                  height={actionSize}
-                  width={actionSize}
-                  path={onItemClicked}
-                  dataTestId="list-entry-action"
-                />
-              ) : (
-                <Button
-                  icon={IconName.ChevronRight}
-                  height={actionSize}
-                  width={actionSize}
-                  dataTestId="list-entry-action"
-                />
-              ))}
-          </>
-        )}
 
-        {showCheckMark && (
-          <Button
-            icon={IconName.Checkmark}
-            height={actionSize}
-            width={actionSize}
-            dataTestId="list-entry-select-button"
-            className={classes.selectionCheckMark}
-            onButtonClicked={() => onItemClickedHandler(data)}
-          />
-        )}
-        {showItemCheckbox && (
-          <ListCheckBox
-            height={actionSize}
-            width={actionSize}
-            onCheckBoxToggled={() => onItemClickedHandler(data)}
-            isChecked={itemSelected}
-            isDisabled={isRowDisabled}
-          />
-        )}
-      </div>
+          {showCheckMark && (
+            <Button
+              icon={IconName.Checkmark}
+              height={actionSize}
+              width={actionSize}
+              dataTestId="list-entry-select-button"
+              className={classes.selectionCheckMark}
+              onButtonClicked={() => onItemClickedHandler(data)}
+            />
+          )}
+          {showItemCheckbox && (
+            <ListCheckBox
+              height={actionSize}
+              width={actionSize}
+              onCheckBoxToggled={() => onItemClickedHandler(data)}
+              isChecked={itemSelected}
+              isDisabled={isRowDisabled}
+            />
+          )}
+        </div>
+      )}
     </div>
   );
 

package/src/components/List/ListRow/Renderers/BooleanDotRenderer/BooleanDotRenderer.scss

@@ -1,17 +1,14 @@
 @import '../../../../../styles/common.scss';
 
 .circle {
-  height: var(--boolean-dot-size, $boolean-dot-size);
-  width: var(--boolean-dot-size, $boolean-dot-size);
-  min-width: var(--boolean-dot-size, $boolean-dot-size);
-  min-height: var(--boolean-dot-size, $boolean-dot-size);
-  border-radius: 100%;
+  height: 20px;
+  width: 20px;
 
-  &.green {
-    background-color: var(--boolean-dot-true-color, $boolean-dot-true-color);
+  &.true {
+    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath vector-effect='non-scaling-stroke' fill='none' stroke='%23707070' stroke-width='2' d='M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M29,13.5 L17.8,26.3L11,19.1'/%3E%3C/svg%3E%0A");
   }
 
-  &.red {
-    background-color: var(--boolean-dot-false-color, $boolean-dot-false-color);
+  &.false {
+    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath vector-effect='non-scaling-stroke' fill='none' stroke='%23B7B7B7' stroke-width='2' d='M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M11,20h18'/%3E%3C/svg%3E");
   }
 }

package/src/components/List/ListRow/Renderers/BooleanDotRenderer/BooleanDotRenderer.spec.tsx

@@ -29,13 +29,13 @@ describe('BooleanDotRenderer', () => {
     const wrapper = shallow(
       <RendererWrapper {...defaultProps} value={false} />,
     );
-    const dot = wrapper.find('.red');
+    const dot = wrapper.find('.false');
     expect(dot).toHaveLength(1);
   });
 
   it('renders the green dot when true is passed', () => {
     const wrapper = shallow(<RendererWrapper {...defaultProps} value={true} />);
-    const dot = wrapper.find('.green');
+    const dot = wrapper.find('.true');
     expect(dot).toHaveLength(1);
   });
 });

package/src/components/List/ListRow/Renderers/BooleanDotRenderer/BooleanDotRenderer.tsx

@@ -17,6 +17,6 @@ import classes from './BooleanDotRenderer.scss';
  */
 export const BooleanDotRenderer = (val: unknown): JSX.Element => (
   <div
-    className={clsx(classes.circle, val ? [classes.green] : [classes.red])}
+    className={clsx(classes.circle, val ? [classes.true] : [classes.false])}
   ></div>
 );

package/src/components/List/useColumnsSize.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { SetStateAction, useEffect, useState } from 'react';
 import { Data } from '../../types';
 import { Column, ListSelectMode } from './List.model';
 
@@ -73,6 +73,8 @@ export const useColumnsSize = <T extends Data>(
   setColumnSizes: React.Dispatch<React.SetStateAction<string>>;
   hasActionColumn: boolean;
 } => {
+  const [isResized, setIsResized] = useState<boolean>(false);
+
   const [orgColumnSizes, setOrgColumnSizes] = useState<string>(
     getColumnsSizeDefinition(
       columns,
@@ -81,6 +83,7 @@ export const useColumnsSize = <T extends Data>(
       showInlineMenu,
     ),
   );
+
   const [columnSizes, setColumnSizes] = useState<string>(orgColumnSizes);
 
   useEffect(() => {
@@ -92,16 +95,30 @@ export const useColumnsSize = <T extends Data>(
         showInlineMenu,
       ),
     );
-  }, [columns, selectMode, showActionButton, showInlineMenu]);
+    if (!isResized) {
+      setColumnSizes(orgColumnSizes);
+    }
+  }, [
+    columns,
+    isResized,
+    orgColumnSizes,
+    selectMode,
+    showActionButton,
+    showInlineMenu,
+  ]);
 
   const resetColumnSizes = (): void => {
     setColumnSizes(orgColumnSizes);
+    setIsResized(false);
   };
 
   return {
     columnSizes,
     resetColumnSizes,
-    setColumnSizes,
+    setColumnSizes: (newColumnSizes: SetStateAction<string>) => {
+      setIsResized(true);
+      setColumnSizes(newColumnSizes);
+    },
     hasActionColumn: hasActionColumn(
       selectMode,
       showActionButton,

package/src/styles/variables.scss

@@ -248,11 +248,6 @@ $actions-border-color: white;
 $background: #ccc;
 $fallback-image-bg-color: #efefef;
 
-/* ListRow Renderers */
-$boolean-dot-true-color: $green;
-$boolean-dot-false-color: $red;
-$boolean-dot-size: 20px;
-
 /* Modal */
 $modal-back-drop-color: rgba(169, 169, 169, 0.75);
 $modal-back-drop-color-hidden: rgba(169, 169, 169, 0);