@axinom/mosaic-ui 0.67.0-rc.2 → 0.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.67.0-rc.2",
+  "version": "0.67.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2364d1ad780b65c4974987c3f3ac30e09dfe850e"
+  "gitHead": "b48ca504a563d87a93d0b577c20e52175a90179f"
 }

package/src/components/Accordion/Accordion.scss

@@ -33,7 +33,7 @@
       color: var(--accordion-header-text-color, $accordion-header-text-color);
       font-weight: bold;
 
-      border-bottom: solid 1px color-mix(in srgb, var(--ax-neutral) 85%, white);
+      border-bottom: solid 1px var(--accordion-header-border-color, $accordion-header-border-color);
 
       top: 0;
       position: sticky;

package/src/components/Accordion/AccordionItem/AccordionItem.scss

@@ -4,7 +4,7 @@
   display: grid;
   grid-template-columns: 50px auto;
   align-items: center;
-  background-color: var(--ax-neutral-light);
+  background-color: var(--accordion-item-row-background-color, $accordion-item-row-background-color);
   margin-top: 4px;
   height: 50px;
   cursor: pointer;
@@ -19,7 +19,7 @@
   }
 
   &.rowExpanded {
-    background-color: var(--ax-neutral-lighter);
+    background-color: var(--accordion-item-row-expanded-background-color, $accordion-item-row-expanded-background-color);
   }
 
   &.sticky {

package/src/components/Buttons/Button/Button.scss

@@ -108,10 +108,10 @@
     }
 
     &:disabled {
-      border: 1px solid var(--ax-neutral);
+      border: 1px solid var(--button-context-disabled-border-color, $button-context-disabled-border-color);
 
       svg * {
-        stroke: var(--ax-neutral);
+        stroke: var(--button-context-disabled-stroke-color, $button-context-disabled-stroke-color);
       }
     }
   }
@@ -146,7 +146,7 @@
       background-color: white;
 
       svg * {
-        stroke: var(--ax-primary);
+        stroke: var(--button-icon-active-stroke-color, $button-icon-active-stroke-color);
       }
     }
 
@@ -154,7 +154,7 @@
       border: none;
 
       svg * {
-        stroke: var(--ax-neutral);
+        stroke: var(--button-icon-disabled-stroke-color, $button-icon-disabled-stroke-color);
       }
     }
   }
@@ -193,7 +193,7 @@
     }
 
     &:disabled {
-      background-color: var(--ax-neutral);
+      background-color: var(--button-active-disabled-background-color, $button-active-disabled-background-color);
 
       svg * {
         opacity: 0.5;

package/src/components/Buttons/CompositeButton/CompositeButton.scss

@@ -121,11 +121,11 @@
     }
 
     &:disabled {
-      border: 1px solid var(--ax-neutral);
-      color: var(--ax-neutral);
+      border: 1px solid var(--composite-button-context-disabled-border-color, $composite-button-context-disabled-border-color);
+      color: var(--composite-button-context-disabled-color, $composite-button-context-disabled-color);
 
       svg * {
-        stroke: var(--ax-neutral);
+        stroke: var(--composite-button-context-disabled-color, $composite-button-context-disabled-color);
       }
     }
   }
@@ -146,11 +146,11 @@
 
     &:active {
       background-color: white;
-      color: var(--ax-primary);
+      color: var(--composite-button-active-color, $composite-button-active-color);
     }
 
     &:disabled {
-      background-color: var(--ax-neutral);
+      background-color: var(--composite-button-active-disabled-background-color, $composite-button-active-disabled-background-color);
       color: color-mix(in srgb, white 50%, transparent);
     }
   }

package/src/components/Buttons/TextButton/TextButton.scss

@@ -84,8 +84,8 @@
     }
 
     &:disabled {
-      border: 1px solid var(--ax-neutral);
-      color: var(--ax-neutral);
+      border: 1px solid var(--text-button-context-disabled-border-color, $text-button-context-disabled-border-color);
+      color: var(--text-button-context-disabled-color, $text-button-context-disabled-color);
     }
   }
 
@@ -105,11 +105,11 @@
 
     &:active {
       background-color: white;
-      color: var(--ax-primary);
+      color: var(--text-button-active-color, $text-button-active-color);
     }
 
     &:disabled {
-      background-color: var(--ax-neutral);
+      background-color: var(--text-button-active-disabled-background-color, $text-button-active-disabled-background-color);
       color: color-mix(in srgb, white 50%, transparent);
     }
   }

package/src/components/ConfirmDialog/ConfirmDialog.scss

@@ -32,7 +32,7 @@ $pop-up-horizontal-arrow: 47%;
 
       padding: 5px;
 
-      color: var(--ax-neutral-dark);
+      color: var(--confirm-dialog-body-text-color, $confirm-dialog-body-text-color);
       font-size: 14px;
 
       .defaultText {

package/src/components/DateTime/DatePicker/DatePicker.scss

@@ -36,7 +36,7 @@
     cursor: pointer;
   }
   :global(.react-calendar__navigation) button[disabled] {
-    background-color: var(--ax-neutral-lighter);
+    background-color: var(--datepicker-navigation-button-disabled-bg, $datepicker-navigation-button-disabled-bg);
   }
   :global(.react-calendar__month-view__weekdays) {
     text-align: center;
@@ -59,7 +59,7 @@
     padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
   }
   :global(.react-calendar__month-view__days__day--neighboringMonth) {
-    color: var(--ax-neutral);
+    color: var(--datepicker-neighbor-month-color, $datepicker-neighbor-month-color);
   }
   :global(.react-calendar__year-view) :global(.react-calendar__tile),
   :global(.react-calendar__decade-view) :global(.react-calendar__tile),
@@ -74,37 +74,37 @@
     background: none;
   }
   :global(.react-calendar__tile):disabled {
-    background-color: var(--ax-neutral-lighter);
+    background-color: var(--datepicker-tile-disabled-bg, $datepicker-tile-disabled-bg);
   }
   :global(.react-calendar__tile):enabled:hover {
-    background-color: var(--ax-neutral-light);
+    background-color: var(--datepicker-tile-hover-bg, $datepicker-tile-hover-bg);
   }
   :global(.react-calendar__tile--hasActive) {
-    background: var(--ax-primary-light);
+    background: var(--datepicker-tile-has-active-bg, $datepicker-tile-has-active-bg);
   }
   :global(.react-calendar__tile--hasActive):enabled:hover,
   :global(.react-calendar__tile--hasActive):enabled:focus {
-    background: color-mix(in srgb, var(--ax-primary-light), white 30%);
+    background: var(--datepicker-tile-has-active-hover-bg, $datepicker-tile-has-active-hover-bg);
   }
   :global(.react-calendar__tile--active) {
-    background: var(--ax-primary-dark);
+    background: var(--datepicker-tile-active-bg, $datepicker-tile-active-bg);
     color: white;
   }
   :global(.react-calendar__tile--active):enabled:hover,
   :global(.react-calendar__tile--active):enabled:focus {
-    background: var(--ax-primary);
+    background: var(--datepicker-tile-active-hover-bg, $datepicker-tile-active-hover-bg);
   }
   :global(.react-calendar--selectRange) :global(.react-calendar__tile--hover) {
-    background-color: var(--ax-neutral-light);
+    background-color: var(--datepicker-select-range-hover-bg, $datepicker-select-range-hover-bg);
   }
 
   :global(.react-calendar__tile) {
     transition: background-color 0.15s ease-in-out 0s;
 
-    color: var(--ax-neutral-dark);
+    color: var(--datepicker-tile-text-color, $datepicker-tile-text-color);
 
     * {
-      color: var(--ax-neutral-dark);
+      color: var(--datepicker-tile-text-color, $datepicker-tile-text-color);
     }
 
     &:hover {
@@ -171,7 +171,7 @@
   }
 
   :global(.react-calendar__month-view__days__day--neighboringMonth) * {
-    color: var(--ax-neutral-light);
+    color: var(--datepicker-neighbor-month-light-color, $datepicker-neighbor-month-light-color);
   }
 
   :global(.react-calendar__tile--active),

package/src/components/DateTime/TimePicker/ScrollColumn/ScrollColumn.scss

@@ -13,7 +13,7 @@
 .inactive-title {
   display: grid;
   font-size: 12px;
-  color: var(--ax-neutral);
+  color: var(--timepicker-inactive-title-color, $timepicker-inactive-title-color);
   text-align: center;
   align-items: center;
 }
@@ -23,7 +23,7 @@
 
   display: grid;
   font-size: 18px;
-  color: var(--ax-neutral-dark);
+  color: var(--timepicker-item-color, $timepicker-item-color);
   text-align: center;
   align-items: center;
 
@@ -35,10 +35,10 @@
 
   &.active {
     visibility: visible;
-    background-color: color-mix(in srgb, var(--ax-primary) 15%, transparent);
+    background-color: var(--timepicker-item-active-bg, $timepicker-item-active-bg);
 
     &.selected {
-      background-color: var(--ax-primary);
+      background-color: var(--timepicker-item-selected-bg, $timepicker-item-selected-bg);
       color: white;
     }
   }
@@ -46,11 +46,11 @@
   &.selected {
     visibility: visible;
 
-    border: 1px solid var(--ax-primary);
+    border: 1px solid var(--timepicker-item-selected-border, $timepicker-item-selected-border);
   }
 
   &:hover {
-    background-color: color-mix(in srgb, var(--ax-primary) 15%, transparent);
+    background-color: var(--timepicker-item-hover-bg, $timepicker-item-hover-bg);
   }
 }
 
@@ -70,7 +70,7 @@
     }
 
     svg * {
-      stroke: var(--ax-primary);
+      stroke: var(--timepicker-button-stroke-color, $timepicker-button-stroke-color);
     }
 
     &.hidden {

package/src/components/DateTime/TimePicker/TimePicker.scss

@@ -12,7 +12,7 @@
   display: grid;
   grid-column: 1 / 5;
   font-size: 20px;
-  color: var(--ax-neutral-dark);
+  color: var(--timepicker-title-color, $timepicker-title-color);
   text-align: center;
   height: 40px;
   align-items: center;

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

@@ -13,7 +13,7 @@
   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 var(--ax-neutral-light);
+  border-bottom: solid 1px var(--dynamic-list-header-border-color, $dynamic-list-header-border-color);
 
   justify-items: left;
   align-items: center;
@@ -36,7 +36,7 @@
       height: 100%;
 
       z-index: 1;
-      border-right: var(--explorer-list-row-border, 1px solid var(--ax-neutral-light));
+      border-right: var(--explorer-list-row-border, 1px solid var(--dynamic-list-header-resize-border-color, $dynamic-list-header-resize-border-color));
       position: absolute;
       right: 0;
 

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

@@ -79,10 +79,10 @@
     }
 
     .dragIcon {
-      stroke: var(--ax-neutral-light);
+      stroke: var(--dynamic-list-row-disabled-drag-icon-color, $dynamic-list-row-disabled-drag-icon-color);
 
       rect {
-        fill: var(--ax-neutral-light);
+        fill: var(--dynamic-list-row-disabled-drag-icon-color, $dynamic-list-row-disabled-drag-icon-color);
       }
     }
   }

package/src/components/Explorer/Explorer.tsx

@@ -476,7 +476,9 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
             textWrap={textWrap}
             keyProperty={keyProperty}
             showActionButton={
-              Boolean(generateItemLink) || Boolean(onItemClicked)
+              Boolean(generateItemLink) ||
+              Boolean(onItemClicked) ||
+              listSelectionMode !== ListSelectMode.None
             } // or hard code to `true`?
             selectionMode={listSelectionMode}
             enableSelectAll={enableSelectAll}

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

@@ -94,6 +94,7 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
     .button {
       height: 40px;
       width: 40px;
+      transition: background-color 120ms linear, color 120ms linear;
 
       svg * {
         stroke: var(
@@ -101,8 +102,15 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
           $filter-context-button-color
         );
       }
-    }
 
+      &:hover {
+        background-color: var(--input-hover-color, $input-hover-color);
+
+        svg * {
+          stroke: white; /* white foreground */
+        }
+      }
+    }
     span {
       padding-left: 30px;
     }

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

@@ -43,17 +43,31 @@
         height: 60%;
       }
 
+      /* default icon colors */
       svg * {
         stroke: var(
           --filter-context-button-color,
           $filter-context-button-color
         );
       }
-    }
 
-    &.hasError {
-      border: 3px solid
-        var(--input-invalid-border-color, $input-invalid-border-color);
+      &:hover,
+      &:focus,
+      &:focus-visible {
+        background-color: var(
+          --filter-context-button-color,
+          $filter-context-button-color
+        );
+
+        svg * {
+          stroke: #ffffff;
+        }
+      }
+
+      &.hasError {
+        border: 3px solid
+          var(--input-invalid-border-color, $input-invalid-border-color);
+      }
     }
   }
 

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

@@ -26,7 +26,7 @@
     // transition: background-color 0.15s ease-in-out 0s;
 
     &.hasConfirm {
-      border: 1px solid var(--ax-warning);
+      border: 1px solid var(--checkbox-warning-border-color, $checkbox-warning-border-color);
     }
 
     &.hasError {
@@ -54,8 +54,8 @@
     box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
 
     &.hasConfirm {
-      border: 1px solid var(--ax-warning);
-      box-shadow: 0 0 0 2px var(--ax-warning);
+      border: 1px solid var(--checkbox-warning-hover-border-color, $checkbox-warning-hover-border-color);
+      box-shadow: 0 0 0 2px var(--checkbox-warning-hover-border-color, $checkbox-warning-hover-border-color);
     }
 
     &.hasError {
@@ -70,7 +70,7 @@
     background-color: var(--input-hover-color, $input-hover-color);
 
     &.hasConfirm {
-      background-color: var(--ax-warning);
+      background-color: var(--checkbox-warning-checked-bg-color, $checkbox-warning-checked-bg-color);
     }
 
     &.hasError {

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

@@ -9,17 +9,20 @@
     .selectedItem {
       width: max-content;
       display: grid;
+      align-items: center;
       grid-template-columns: auto 50px;
       background-color: var(--tag-background-color, $tag-background-color);
 
       span {
         border: none;
-        border-right: none;
-        display: grid;
-        align-items: center;
         padding: 10px 5px 10px 15px;
         font-size: var(--label-font-size, $label-font-size);
         color: $tag-font-color;
+
+        max-width: 300px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       &.disabled span {
@@ -145,7 +148,10 @@
         &.hasError {
           background-color: white;
           svg * {
-            stroke: color-mix(in srgb, var(--ax-neutral) 50%, transparent);
+            stroke: var(
+              --custom-tags-disabled-button-stroke-color,
+              $custom-tags-disabled-button-stroke-color
+            );
           }
         }
 

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

@@ -371,7 +371,7 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
                 })}
                 data-test-id="tag"
               >
-                <span>{tag}</span>
+                <span title={tag}>{tag}</span>
                 <Button
                   type="button"
                   icon={IconName.X}

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

@@ -74,12 +74,6 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
           padding: 8,
         },
       },
-      {
-        name: 'offset',
-        options: {
-          offset: [0, 4],
-        },
-      },
     ],
   });
 

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

@@ -19,7 +19,7 @@
 
       margin-left: -50px;
       border: none;
-      background-color: var(--ax-primary);
+      background-color: var(--file-upload-button-bg-color, $file-upload-button-bg-color);
 
       transition: box-shadow 0.15s ease-in-out 0s;
 
@@ -35,12 +35,12 @@
 
       &:hover {
         border: none;
-        background-color: color-mix(in srgb, var(--ax-primary) 75%, transparent);
+        background-color: var(--file-upload-button-hover-bg-color, $file-upload-button-hover-bg-color);
       }
 
       &.disabled {
         border: none;
-        background-color: var(--ax-neutral);
+        background-color: var(--file-upload-button-disabled-bg-color, $file-upload-button-disabled-bg-color);
         cursor: default;
 
         svg * {

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

@@ -27,7 +27,7 @@
         grid: 1fr / 30px 1fr;
         column-gap: 8px;
 
-        color: var(--ax-neutral-dark);
+        color: var(--radio-label-color, $radio-label-color);
         font-size: 16px;
         font-weight: unset;
 
@@ -37,12 +37,12 @@
 
         &.disabled {
           .radioOutline {
-            fill: var(--ax-neutral-lighter);
+            fill: var(--radio-disabled-outline-color, $radio-disabled-outline-color);
           }
 
           .checked {
             .radioDot {
-              fill: var(--ax-neutral-light);
+              fill: var(--radio-disabled-dot-color, $radio-disabled-dot-color);
             }
           }
         }
@@ -60,7 +60,7 @@
 
     .radioOutline {
       fill: none;
-      stroke: var(--ax-neutral);
+      stroke: var(--radio-outline-stroke-color, $radio-outline-stroke-color);
       stroke-width: 1;
     }
 
@@ -87,7 +87,7 @@
 
     &.hasConfirm {
       .radioOutline {
-        stroke: var(--ax-warning);
+        stroke: var(--radio-warning-stroke-color, $radio-warning-stroke-color);
         stroke-width: 3;
       }
     }

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

@@ -31,14 +31,18 @@
       display: grid;
       grid-template-columns: auto 50px;
       background-color: var(--tag-background-color, $tag-background-color);
+      align-items: center;
 
       span {
         border-right: none;
-        display: grid;
-        align-items: center;
         padding: 10px 5px 10px 15px;
         font-size: var(--label-font-size, $label-font-size);
         color: $tag-font-color;
+
+        max-width: 300px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       &.disabled span {

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

@@ -188,7 +188,7 @@ export const Tags = <T,>({
                 })}
                 data-test-id="tag"
               >
-                <span>{getDisplayValue(tag)}</span>
+                <span title={getDisplayValue(tag)}>{getDisplayValue(tag)}</span>
                 <Button
                   type="button"
                   icon={IconName.X}

package/src/components/FormElements/ToggleButton/ToggleButton.scss

@@ -94,13 +94,13 @@
           }
         }
         &.off {
-          border-top: 1px solid var(--ax-warning);
-          border-bottom: 1px solid var(--ax-warning);
-          border-left: 1px solid var(--ax-warning);
+          border-top: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
+          border-bottom: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
+          border-left: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
           transition: border $confirmation-transition linear;
         }
         &.on {
-          border: 1px solid var(--ax-warning);
+          border: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
           transition: border $confirmation-transition linear;
         }
       }
@@ -108,19 +108,19 @@
       div.active.off {
         svg {
           .svgText {
-            fill: var(--ax-warning);
+            fill: var(--toggle-button-warning-text-color, $toggle-button-warning-text-color);
             transition: fill $confirmation-transition linear;
           }
         }
       }
 
       div.active.on {
-        background-color: var(--ax-warning) !important;
+        background-color: var(--toggle-button-warning-bg-color, $toggle-button-warning-bg-color) !important;
         transition: background-color $confirmation-transition linear;
       }
 
       &:hover {
-        box-shadow: 0 0 0 2px var(--ax-warning);
+        box-shadow: 0 0 0 2px var(--toggle-button-warning-hover-shadow-color, $toggle-button-warning-hover-shadow-color);
         transition: box-shadow $confirmation-transition linear;
       }
     }

package/src/components/List/List.scss

@@ -42,10 +42,10 @@
     p {
       margin-left: 10px;
 
-      color: var(--ax-neutral-dark);
+      color: var(--list-no-data-text-color, $list-no-data-text-color);
     }
 
-    background-color: var(--ax-neutral-light) !important;
+    background-color: var(--list-no-data-bg-color, $list-no-data-bg-color) !important;
   }
 
   .error {
@@ -56,9 +56,9 @@
     p {
       margin: 10px 0px 10px 10px;
 
-      color: var(--ax-error);
+      color: var(--list-error-text-color, $list-error-text-color);
     }
 
-    background-color: color-mix(in srgb, var(--ax-error) 15%, transparent) !important;
+    background-color: var(--list-error-bg-color, $list-error-bg-color) !important;
   }
 }

package/src/components/List/ListHeader/ListHeader.scss

@@ -12,7 +12,7 @@
   );
 
   box-sizing: border-box;
-  border-bottom: solid 1px var(--ax-neutral-light);
+  border-bottom: solid 1px var(--list-header-border-color, $list-header-border-color);
 
   .columnLabel {
     box-sizing: border-box;
@@ -28,7 +28,7 @@
       height: 100%;
 
       z-index: 1;
-      border-right: var(--explorer-list-row-border, 1px solid var(--ax-neutral-light));
+      border-right: var(--explorer-list-row-border, 1px solid var(--list-header-resize-handle-border-color, $list-header-resize-handle-border-color));
       position: absolute;
       right: 0;