@axinom/mosaic-ui 0.33.0-rc.8 → 0.33.0

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

@@ -32,7 +32,7 @@ export const createInputRenderer = ({
         name={name}
         type={type}
         disabled={disabled}
-        placeholder={placeholder}
+        placeholder={disabled ? undefined : placeholder}
         onChange={onChangeHandler}
         inlineMode={true}
         error={error}

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

@@ -1,5 +1,9 @@
 @import '../../../../../styles/common.scss';
 
+@function svg-arrow-glyph($color) {
+  @return url('data:image/svg+xml;utf8,<svg stroke="' + $color + '" version="1.1" xmlns="http://www.w3.org/2000/svg" width="40px" height="20px" viewBox="0 0 40 40"><path vector-effect="non-scaling-stroke" fill="none" stroke-width="2" d="M38.5,9.5L20,30.5L1.5,9.5" /></svg>');
+}
+
 .container {
   height: 100%;
   width: 100%;
@@ -26,7 +30,10 @@
     border: 1px solid var(--input-border-color, $input-border-color);
     outline: none;
 
-    background-image: url('data:image/svg+xml;utf8,<svg stroke="%231478af" version="1.1" xmlns="http://www.w3.org/2000/svg" width="40px" height="20px" viewBox="0 0 40 40"><path vector-effect="non-scaling-stroke" fill="none" stroke-width="2" d="M38.5,9.5L20,30.5L1.5,9.5" /></svg>');
+    background-image: svg-arrow-glyph(
+      var(--select-arrow-color, encodecolor($select-arrow-color))
+    );
+    //background-image: url('data:image/svg+xml;utf8,<svg stroke="%231478af" version="1.1" xmlns="http://www.w3.org/2000/svg" width="40px" height="20px" viewBox="0 0 40 40"><path vector-effect="non-scaling-stroke" fill="none" stroke-width="2" d="M38.5,9.5L20,30.5L1.5,9.5" /></svg>');
     background-repeat: no-repeat;
     background-position: center;
     background-position-x: 100%;
@@ -39,18 +46,28 @@
       border: 1px solid
         var(--input-invalid-border-color, $input-invalid-border-color);
     }
-  }
 
-  select,
-  option {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+    &:disabled {
+      border-color: var(
+        --input-disabled-border-color,
+        $input-disabled-border-color
+      );
+
+      cursor: default;
 
-  select:hover {
-    border: 1px solid var(--input-hover-color, $input-hover-color);
-    box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
+      background-image: svg-arrow-glyph(
+        var(--select-arrow-color, encodecolor($select-disabled-arrow-color))
+      );
+      background-color: var(
+        --input-disabled-background-color,
+        $input-disabled-background-color
+      );
+    }
+
+    &:not(:disabled):hover {
+      border: 1px solid var(--input-hover-color, $input-hover-color);
+      box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
+    }
 
     &.hasError {
       border: 1px solid
@@ -60,7 +77,14 @@
     }
   }
 
-  > small {
+  select,
+  option {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  select > small {
     padding: 6px 0;
     white-space: normal;
     color: var(--input-invalid-color, $input-invalid-color);

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

@@ -42,7 +42,7 @@ export const createSelectRenderer = ({
         <select
           id={id}
           name={name}
-          placeholder={placeholder}
+          placeholder={disabled ? undefined : placeholder}
           value={(currentValue as string) ?? ''}
           onChange={onChangeHandler}
           className={clsx({ [classes.hasError]: error !== undefined })}
@@ -50,7 +50,7 @@ export const createSelectRenderer = ({
         >
           {placeholder && (
             <option value="" disabled>
-              {placeholder}
+              {disabled ? '' : placeholder}
             </option>
           )}
           {options.map((option) => (

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

@@ -33,6 +33,22 @@
     );
   }
 
+  &.disabled {
+    .position {
+      .draggable {
+        cursor: default;
+      }
+    }
+
+    .dragIcon {
+      stroke: $light-gray;
+
+      rect {
+        fill: $light-gray;
+      }
+    }
+  }
+
   .position {
     display: grid;
     grid-template-rows: 1fr;
@@ -58,6 +74,16 @@
       border: 1px solid var(--input-border-color, $input-border-color);
 
       transition: box-shadow 0.15s ease-in-out 0s;
+
+      &:disabled {
+        background-color: var(
+          --input-disabled-background-color,
+          $input-disabled-background-color
+        );
+        border: 1px solid
+          var(--input-disabled-border-color, $input-disabled-border-color);
+        color: var(--input-disabled-font-color, $input-disabled-font-color);
+      }
     }
 
     input:hover:enabled,

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.tsx

@@ -42,6 +42,8 @@ export interface DynamicListRowProps<T extends Data> {
   allowDragging?: boolean;
   /** Determines if there is currently an on-going drag event (default: undefined) */
   dragging?: boolean;
+  /** Whether or not the DDL is disabled (default: false) */
+  disabled?: boolean;
   /** Emits when row dragging event starts. Event and current position are supplied as parameters */
   onDragStart?: (e: React.DragEvent<HTMLDivElement>, position: number) => void;
   /** Emits when the row has dropped. Event and new position target are supplied as parameters */
@@ -80,6 +82,7 @@ export const DynamicListRow = <T extends Data>({
   positionKey,
   allowDragging,
   dragging,
+  disabled,
   onDragStart = noop,
   onDrop = noop,
   onDragEnd = noop,
@@ -194,13 +197,14 @@ export const DynamicListRow = <T extends Data>({
           [classes.draggedAbove]: draggedOver === 'above',
           [classes.draggedBelow]: draggedOver === 'below',
           [classes.dragging]: dragging,
+          [classes.disabled]: disabled,
         },
         'dynamic-list-row-container',
         className,
         rowClassNameProvider ? rowClassNameProvider(data) : '',
       )}
       style={customStyles}
-      draggable={Boolean(allowDragging && allowReordering)}
+      draggable={Boolean(!disabled && allowDragging && allowReordering)}
       onDragStart={onDragStartHandler}
       onDragEnter={onDragEnterHandler}
       onDragOver={onDragOverHandler}
@@ -232,6 +236,7 @@ export const DynamicListRow = <T extends Data>({
                   }
                 }}
                 value={position}
+                disabled={disabled}
                 onKeyDown={(event) =>
                   event.key === 'Enter' &&
                   onPositionInputChangedHandler(
@@ -284,6 +289,7 @@ export const DynamicListRow = <T extends Data>({
               buttonContext={ButtonContext.Icon}
               height={actionSize}
               width={actionSize}
+              disabled={disabled}
               onButtonClicked={() => {
                 onActionClicked(data);
               }}

package/src/components/Filters/Filter/Filter.scss

@@ -56,7 +56,10 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
       }
 
       svg * {
-        stroke: $blue;
+        stroke: var(
+          --filter-context-button-color,
+          $filter-context-button-color
+        );
       }
     }
 
@@ -80,7 +83,10 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
       }
 
       svg * {
-        stroke: $blue;
+        stroke: var(
+          --filter-context-button-color,
+          $filter-context-button-color
+        );
       }
     }
 

package/src/components/Filters/SelectionTypes/DateTimeFilter/DateTimeFilter.scss

@@ -33,7 +33,10 @@
       }
 
       svg * {
-        stroke: $blue;
+        stroke: var(
+          --filter-context-button-color,
+          $filter-context-button-color
+        );
       }
     }
 

package/src/components/FormElements/Checkbox/Checkbox.scss

@@ -37,6 +37,16 @@
     &:enabled {
       cursor: pointer;
     }
+
+    &:disabled {
+      background-color: var(
+        --input-disabled-background-color,
+        $input-disabled-background-color
+      );
+      color: var(--input-disabled-font-color, $input-disabled-font-color);
+      border: 1px solid
+        var(--input-disabled-border-color, $input-disabled-border-color);
+    }
   }
 
   input:hover:enabled {
@@ -69,6 +79,13 @@
         $input-invalid-border-color
       );
     }
+
+    &:disabled {
+      background-color: var(
+        --input-disabled-background-color,
+        $input-disabled-background-color
+      );
+    }
   }
 
   input:checked:after {
@@ -80,6 +97,9 @@
     align-content: center;
     color: #ffffff;
   }
+  input:checked:disabled:after {
+    color: var(--input-disabled-border-color, $input-disabled-border-color);
+  }
 
   .confirmDialog {
     @include confirmDialogFadeIn;

package/src/components/FormElements/CustomTags/CustomTags.scss

@@ -21,6 +21,10 @@
         font-size: var(--label-font-size, $label-font-size);
         color: $tag-font-color;
       }
+
+      &.disabled span {
+        color: var(--input-disabled-font-color, $input-disabled-font-color);
+      }
     }
 
     .inputWrapper {
@@ -29,6 +33,13 @@
       width: 320px;
       position: relative;
 
+      input:disabled + .plusButton:disabled {
+        background-color: var(
+          --input-disabled-background-color,
+          $input-disabled-background-color
+        );
+      }
+
       input {
         height: 50px;
         width: 100%;
@@ -41,6 +52,18 @@
         border: 1px solid var(--input-border-color, $input-border-color);
         transition: box-shadow 0.15s ease-in-out 0s;
 
+        &:disabled {
+          border-color: var(
+            --input-disabled-border-color,
+            $input-disabled-border-color
+          );
+
+          background-color: var(
+            --input-disabled-background-color,
+            $input-disabled-background-color
+          );
+        }
+
         &.hasError {
           border: 1px solid
             var(--input-invalid-border-color, $input-invalid-border-color);
@@ -120,6 +143,7 @@
             stroke: rgba($gray, 0.5);
           }
         }
+
         &:enabled {
           &:hover {
             border: 1px solid $blue;

package/src/components/FormElements/CustomTags/CustomTags.tsx

@@ -308,7 +308,7 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
             value={val}
             type={type}
             disabled={disabled}
-            placeholder={placeholder}
+            placeholder={disabled ? undefined : placeholder}
             autoFocus={autoFocus}
             autoComplete={'off'}
             onChange={(e) => setVal(e.currentTarget.value)}
@@ -361,7 +361,13 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
                 setShouldAnimate(false);
               }}
             >
-              <span className={clsx(classes.selectedItem)} data-test-id="tag">
+              <span
+                className={clsx({
+                  [classes.selectedItem]: true,
+                  [classes.disabled]: disabled,
+                })}
+                data-test-id="tag"
+              >
                 <span>{tag}</span>
                 <Button
                   type="button"

package/src/components/FormElements/DateTimeField/DateTimeText.spec.tsx

@@ -72,7 +72,7 @@ describe('DateTimeTextField', () => {
       autoComplete: 'on',
       autoFocus: true,
       className: '',
-      disabled: true,
+      disabled: false,
       id: 'test-id',
       name: 'test-name',
       placeholder: 'test-placeholder',

package/src/components/FormElements/DateTimeField/DateTimeText.tsx

@@ -98,7 +98,7 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
           type={'text'}
           value={display}
           disabled={disabled}
-          placeholder={placeholder}
+          placeholder={disabled ? undefined : placeholder}
           autoFocus={autoFocus}
           autoComplete={autoComplete}
           onChange={(e) => setDisplay(e.target.value)}

package/src/components/FormElements/FileUploadControl/FileUploadControl.scss

@@ -38,11 +38,13 @@
         background-color: rgba($blue, 0.75);
       }
 
-      &:disabled {
+      &.disabled {
         border: none;
+        background-color: $gray;
+        cursor: default;
 
         svg * {
-          stroke: rgba($blue, 0.75);
+          stroke: rgba(white, 0.5);
         }
       }
     }

package/src/components/FormElements/FileUploadControl/FileUploadControl.tsx

@@ -38,6 +38,7 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
   value,
   accept,
   className = '',
+  disabled,
   ...rest
 }) => {
   const [fileName, setFileName] = useState<string>(value?.file.name ?? '');
@@ -135,7 +136,7 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
       dataTestFieldType="FileUpload"
     >
       <div className={clsx(classes.content)}>
-        {dragging ? (
+        {dragging && !disabled ? (
           <div className={clsx(classes.dropTarget)} onDrop={handleDrop}>
             DROP YOUR FILE HERE!
           </div>
@@ -148,15 +149,23 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
               })}
               value={fileName}
               onChange={noop}
-              placeholder={placeholder}
+              placeholder={disabled ? undefined : placeholder}
+              disabled={true}
             />
-            <label className={clsx(classes.fileuploadbutton)} htmlFor={id}>
+            <label
+              className={clsx({
+                [classes.fileuploadbutton]: true,
+                [classes.disabled]: disabled,
+              })}
+              htmlFor={id}
+            >
               <Icons icon={IconName.File} />
             </label>
             <input
               id={id}
               type="file"
               accept={accept}
+              disabled={disabled}
               onChange={(event) => {
                 const file = event.target.files?.item(0);
                 file && fileSelected(file);

package/src/components/FormElements/Radio/Radio.scss

@@ -16,6 +16,10 @@
       label,
       input {
         cursor: pointer;
+
+        &.disabled {
+          cursor: default;
+        }
       }
 
       label {
@@ -32,7 +36,15 @@
         user-select: none;
 
         &.disabled {
-          cursor: default;
+          .radioOutline {
+            fill: $light-gray-2;
+          }
+
+          .checked {
+            .radioDot {
+              fill: $light-gray;
+            }
+          }
         }
       }
 
@@ -58,15 +70,18 @@
 
     &:hover:not(.unSelectable):not(.hasConfirm) {
       .radioOutline {
-        stroke: $blue;
+        stroke: var(--radio-hover-stroke-color, $radio-hover-stroke-color);
         stroke-width: 3;
         transition: stroke-width 0.15s ease-in-out 0s;
       }
     }
 
     &.checked {
+      .radioOutline {
+        fill: var(--radio-checked-fill-color, $radio-checked-fill-color);
+      }
       .radioDot {
-        fill: $blue;
+        fill: white;
       }
     }
 

package/src/components/FormElements/Radio/Radio.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import {
+  ConfirmDialog,
   ConfirmationConfig,
   ConfirmationMode,
-  ConfirmDialog,
 } from '../../ConfirmDialog';
 import { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
@@ -58,7 +58,7 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
     viewBox="0 0 34 34"
   >
     <circle className={classes.radioOutline} cx="17" cy="17" r="15" />
-    <circle className={classes.radioDot} cx="17" cy="17" r="10" />
+    <circle className={classes.radioDot} cx="17" cy="17" r="7.5" />
   </svg>
 );
 

package/src/components/FormElements/Select/Select.scss

@@ -39,10 +39,20 @@
     }
 
     &:disabled {
+      border-color: var(
+        --input-disabled-border-color,
+        $input-disabled-border-color
+      );
+
       cursor: default;
+
       background-image: svg-arrow-glyph(
         var(--select-arrow-color, encodecolor($select-disabled-arrow-color))
       );
+      background-color: var(
+        --input-disabled-background-color,
+        $input-disabled-background-color
+      );
     }
   }
 

package/src/components/FormElements/SingleLineText/SingleLineText.spec.tsx

@@ -2,7 +2,7 @@ import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { SingleLineText } from './SingleLineText';
 
-describe('TextField', () => {
+describe('SingleLineText', () => {
   it('renders the component without crashing', () => {
     const wrapper = shallow(<SingleLineText name={'test-name'} />);
 
@@ -43,7 +43,7 @@ describe('TextField', () => {
       autoComplete: 'on',
       autoFocus: true,
       className: '',
-      disabled: true,
+      disabled: false,
       id: 'test-id',
       name: 'test-name',
       placeholder: 'test-placeholder',

package/src/components/FormElements/SingleLineText/SingleLineText.tsx

@@ -102,7 +102,7 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
         value={value}
         defaultValue={defaultValue}
         disabled={disabled}
-        placeholder={placeholder}
+        placeholder={disabled ? undefined : placeholder}
         autoFocus={autoFocus}
         autoComplete={autoComplete}
         onChange={onChange}

package/src/components/FormElements/Tags/Tags.scss

@@ -25,6 +25,10 @@
         color: $tag-font-color;
       }
 
+      &.disabled span {
+        color: var(--input-disabled-font-color, $input-disabled-font-color);
+      }
+
       span.required {
         border: 1px solid var(--tag-border-color-1, $tag-border-color-1);
       }
@@ -74,10 +78,20 @@
       }
 
       &:disabled {
+        border-color: var(
+          --input-disabled-border-color,
+          $input-disabled-border-color
+        );
+
         cursor: default;
+
         background-image: svg-arrow-glyph(
           var(--select-arrow-color, encodecolor($select-disabled-arrow-color))
         );
+        background-color: var(
+          --input-disabled-background-color,
+          $input-disabled-background-color
+        );
       }
     }
 

package/src/components/FormElements/Tags/Tags.tsx

@@ -189,7 +189,10 @@ export const Tags = <T,>({
             >
               <span
                 key={tag}
-                className={clsx(classes.selectedItem)}
+                className={clsx({
+                  [classes.selectedItem]: true,
+                  [classes.disabled]: disabled,
+                })}
                 data-test-id="tag"
               >
                 <span>{getDisplayValue(tag)}</span>
@@ -200,6 +203,7 @@ export const Tags = <T,>({
                     e.persist();
                     removeTag(idx, e);
                   }}
+                  disabled={disabled}
                   buttonContext={ButtonContext.Icon}
                   dataTestId="tags-delete"
                 ></Button>

package/src/components/FormElements/TextArea/TextArea.spec.tsx

@@ -2,7 +2,7 @@ import { shallow } from 'enzyme';
 import React from 'react';
 import { TextArea } from './TextArea';
 
-describe('TextField', () => {
+describe('TextArea', () => {
   it('renders the component without crashing', () => {
     const wrapper = shallow(<TextArea name={'test-name'} />);
 
@@ -40,7 +40,7 @@ describe('TextField', () => {
     const mockProps = {
       autoFocus: true,
       className: '',
-      disabled: true,
+      disabled: false,
       id: 'test-id',
       name: 'test-name',
       onBlur: () => null,

package/src/components/FormElements/TextArea/TextArea.tsx

@@ -56,7 +56,7 @@ export const TextArea: React.FC<TextAreaProps> = ({
         name={name}
         value={value ?? ''}
         disabled={disabled}
-        placeholder={placeholder}
+        placeholder={disabled ? undefined : placeholder}
         rows={rows}
         autoFocus={autoFocus}
         onChange={onChange}