@axinom/mosaic-ui 0.66.0-rc.9 → 0.67.0-rc.0

package/src/components/Filters/Filter/Filter.tsx

@@ -1,11 +1,5 @@
 import clsx from 'clsx';
-import React, {
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { PropsWithChildren, ReactNode, useState } from 'react';
 import { assertNever } from '../../../helpers/utils';
 import { Data } from '../../../types/data';
 import { Button, ButtonContext } from '../../Buttons';
@@ -58,18 +52,16 @@ export const Filter = <T extends Data>({
 }: PropsWithChildren<FilterProps<T>>): JSX.Element => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const [hasError, setHasError] = useState<boolean>(false);
-  const [contentHeight, setContentHeight] = useState<number>(0);
   const [stringValue, setStringValue] = useState<string | undefined>();
 
-  const contentRef = useRef<HTMLDivElement>(null);
-  const valueRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    setContentHeight(
-      (contentRef.current?.scrollHeight ?? 0) +
-        (valueRef.current?.scrollHeight ?? 0),
-    );
-  }, [isExpanded, hasError, value]);
+  const inputId = `${String(options.property)}-filter-input`;
+  const labelId = `${String(options.property)}-filter-label`;
+  const inputBasedFilter = [
+    FilterTypes.FreeText,
+    FilterTypes.Numeric,
+    FilterTypes.Date,
+    FilterTypes.DateTime,
+  ];
 
   const onFilterValueChange = (
     prop: keyof T,
@@ -135,6 +127,7 @@ export const Filter = <T extends Data>({
             onError={onError}
             onValidate={onValidate}
             selectOnFocus={selectOnFocus}
+            inputId={inputId}
           />
         );
 
@@ -147,6 +140,7 @@ export const Filter = <T extends Data>({
             }
             onError={onError}
             onValidate={onValidate}
+            inputId={inputId}
           />
         );
 
@@ -158,6 +152,7 @@ export const Filter = <T extends Data>({
             onSelect={(value: FilterValue) =>
               onFilterValueChange(options.property, value)
             }
+            labelId={labelId}
           />
         );
 
@@ -169,6 +164,7 @@ export const Filter = <T extends Data>({
             onSelect={(value: FilterValue) =>
               onFilterValueChange(options.property, value?.toString())
             }
+            labelId={labelId}
           />
         );
       case FilterTypes.SearcheableOptions:
@@ -181,6 +177,8 @@ export const Filter = <T extends Data>({
               onFilterValueChange(options.property, value, stringValue)
             }
             maxItems={options.maxItems}
+            inputId={inputId}
+            labelId={labelId}
           />
         );
 
@@ -194,6 +192,7 @@ export const Filter = <T extends Data>({
             modifyTime={false}
             onError={onError}
             onValidate={onValidate}
+            inputId={inputId}
           />
         );
 
@@ -207,6 +206,7 @@ export const Filter = <T extends Data>({
             modifyTime={true}
             onError={onError}
             onValidate={onValidate}
+            inputId={inputId}
           />
         );
 
@@ -220,6 +220,7 @@ export const Filter = <T extends Data>({
             }}
             onError={onError}
             onValidate={onValidate}
+            labelId={labelId}
           />
         );
 
@@ -229,9 +230,16 @@ export const Filter = <T extends Data>({
     }
   };
 
+  const hasValue = value !== undefined && value !== '';
+
   return (
     <div
-      className={clsx(classes.container, 'filter-container', className)}
+      className={clsx(
+        classes.container,
+        { [classes.hasValue]: hasValue },
+        'filter-container',
+        className,
+      )}
       data-test-id={`filter:${options.property as string}`}
       data-test-type={FilterTypes[options.type]}
       onClick={() => onFilterClicked()}
@@ -241,31 +249,36 @@ export const Filter = <T extends Data>({
           setIsExpanded(!isExpanded);
           setHasError(false);
         }}
-        className={clsx(
-          classes.title,
-          { [classes.expanded]: isExpanded && isActive },
-          hasError && classes.hasError,
-          !!value && classes.active,
-        )}
+        className={clsx(classes.title, {
+          [classes.hasValue]: hasValue,
+          [classes.active]: isActive && isExpanded,
+          [classes.hasError]: hasError,
+        })}
         data-test-id="filter-button-toggle"
       >
-        <span data-test-id="filter-label">{options.label}</span>
+        <label
+          id={labelId}
+          {...(inputBasedFilter.includes(options.type)
+            ? {}
+            : { htmlFor: inputId })}
+          data-test-id="filter-label"
+        >
+          {options.label}
+        </label>
         <Button
-          icon={IconName.ChevronDown}
-          className={clsx(classes.button)}
+          icon={IconName.ChevronRight}
+          className={clsx(classes.button, {
+            [classes.rotated]: isExpanded || hasValue,
+          })}
           buttonContext={ButtonContext.None}
         />
       </div>
       <div
-        className={clsx(classes.content)}
-        style={{
-          maxHeight: contentHeight,
-        }}
+        className={clsx(classes.content, { [classes.expanded]: isExpanded })}
       >
-        {value !== undefined && !isExpanded && (
+        {hasValue && !isExpanded && (
           <div
             className={clsx(classes.selectedValue)}
-            ref={valueRef}
             onClick={() => {
               setIsExpanded(!isExpanded);
             }}
@@ -285,7 +298,6 @@ export const Filter = <T extends Data>({
         )}
         {isExpanded && (
           <div
-            ref={contentRef}
             data-test-id="filter-content"
             className={clsx({ [classes.active]: isActive })}
           >

package/src/components/Filters/Filters.model.ts

@@ -78,6 +78,12 @@ export interface CustomFilterProps {
   /** Wether or not the filter is active (default: false) */
   active?: boolean;
 
+  /**
+   * Optional id for the label element.
+   * Assign to the label's `id` and reference from the input or group via `aria-labelledby`.
+   */
+  labelId?: string;
+
   /** Callback triggered when a new filter value is selected */
   onSelect: (
     value: FilterValue,

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

@@ -31,6 +31,9 @@ export interface DateTimeFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
@@ -40,6 +43,7 @@ export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
   onError = noop,
   onValidate: customValidate,
   className = '',
+  inputId,
 }) => {
   const container = useRef<HTMLDivElement>(null);
   const [showPicker, setShowPicker] = useState(false);
@@ -111,6 +115,7 @@ export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
           ref={container}
         >
           <input
+            id={inputId}
             autoFocus
             className={clsx(classes.inputValue)}
             onKeyDown={handleKeyDown}

package/src/components/Filters/SelectionTypes/FreeTextFilter/FreeTextFilter.tsx

@@ -19,6 +19,8 @@ export interface FreeTextFilterProps {
   className?: string;
   /** Select text on focus if true (default: true) */
   selectOnFocus?: boolean;
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
@@ -28,6 +30,7 @@ export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
   onValidate: customValidate,
   className = '',
   selectOnFocus = true,
+  inputId,
 }) => {
   const [errorMsg, setErrorMsg] = useState<string>();
   const ENTER_KEY = 'Enter';
@@ -68,6 +71,7 @@ export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
       )}
     >
       <input
+        id={inputId}
         ref={inputRef}
         autoFocus
         className={clsx(classes.inputValue, errorMsg && classes.hasError)}

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

@@ -13,7 +13,7 @@
     input {
       border-color: var(
         --multi-option-checbox-border,
-        $multi-option-checbox-border
+        $multi-option-checkbox-border
       );
     }
     &:hover {

package/src/components/Filters/SelectionTypes/MultiOptionFilter/MultiOptionFilter.tsx

@@ -17,19 +17,27 @@ export interface MultiOptionFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** ID for the label */
+  labelId?: string;
 }
 
 export const MultiOptionsFilter: React.FC<MultiOptionFilterProps> = ({
   value,
   options,
   onSelect,
+  labelId,
 }) => {
   const [selectedOptionList, setSelectedOptionList] = useState<string[]>(
     value ? value.split(',') : [],
   );
 
   return (
-    <div className={clsx(classes.multiFilterContainer)}>
+    <div
+      className={classes.multiFilterContainer}
+      role="group"
+      aria-labelledby={labelId}
+    >
       {options?.map((option: Option) => (
         <Checkbox
           className={clsx(

package/src/components/Filters/SelectionTypes/NumericTextFilter/NumericTextFilter.tsx

@@ -18,6 +18,9 @@ export interface NumericTextFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const NumericTextFilter: React.FC<NumericTextFilterProps> = ({
@@ -26,6 +29,7 @@ export const NumericTextFilter: React.FC<NumericTextFilterProps> = ({
   onError = noop,
   onValidate: customValidate,
   className = '',
+  inputId,
 }) => {
   const [errorMsg, setErrorMsg] = useState<string>();
   const ENTER_KEY = 'Enter';
@@ -64,6 +68,7 @@ export const NumericTextFilter: React.FC<NumericTextFilterProps> = ({
       )}
     >
       <input
+        id={inputId}
         autoFocus
         value={valueLocal}
         className={clsx(classes.inputValue, errorMsg && classes.hasError)}

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

@@ -4,11 +4,7 @@
   @include boxSizing;
 
   display: grid;
-  grid-auto-rows: 50px;
-  background-color: var(
-    --filter-controller-background-color,
-    $filter-controller-background-color
-  );
+  grid-auto-rows: 40px;
   gap: 1px;
   border-top: unset;
 
@@ -18,7 +14,7 @@
 
     span {
       font-size: var(--filter-font-size, $filter-font-size);
-      color: var(--filter-title-color, $filter-title-color);
+      color: var(--popper-text-color, $popper-text-color);
       display: grid;
       place-items: center left;
       padding: 0 20px;
@@ -27,15 +23,15 @@
 
       &:hover {
         background-color: var(
-          --filter-background-selected-color,
-          $filter-background-selected-color
+          --popper-item-hover-color,
+          $popper-item-hover-color
         );
       }
 
       &.selected {
         background-color: var(
-          --filter-background-selected-color,
-          $filter-background-selected-color
+          --popper-background-selected-color,
+          $popper-background-selected-color
         );
       }
     }

package/src/components/Filters/SelectionTypes/OptionsFilter/OptionsFilter.tsx

@@ -14,6 +14,9 @@ export interface OptionFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** Optional id for the label element */
+  labelId?: string;
 }
 
 export const OptionsFilter: React.FC<OptionFilterProps> = ({
@@ -21,9 +24,12 @@ export const OptionsFilter: React.FC<OptionFilterProps> = ({
   options,
   onSelect,
   className = '',
+  labelId,
 }) => {
   return (
     <div
+      role="radiogroup"
+      aria-labelledby={labelId}
       className={clsx(classes.container, 'options-filter-container', className)}
     >
       {options?.map((option: Option) => (
@@ -32,6 +38,8 @@ export const OptionsFilter: React.FC<OptionFilterProps> = ({
           onClick={() => onSelect(option.value)}
           key={option.label}
           data-test-value={option.value as string}
+          role="radio"
+          aria-checked={value === option.value}
         >
           <span
             className={clsx(value === option.value && classes.selected)}

package/src/components/Filters/SelectionTypes/SearcheableOptionsFilter/SearcheableOptionsFilter.tsx

@@ -14,6 +14,9 @@ interface SearcheableOptionFilterProps
   searchInputPlaceholder?: string;
   maxItems?: number;
   onSelect: (value: string, stringValue?: string) => void;
+
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const SearcheableOptionsFilter: React.FC<
@@ -24,6 +27,7 @@ export const SearcheableOptionsFilter: React.FC<
   maxItems = 10,
   onSelect,
   className,
+  inputId,
   ...rest
 }) => {
   const [options, setOptions] = useState<Option[]>([]);
@@ -56,9 +60,10 @@ export const SearcheableOptionsFilter: React.FC<
         )}
       >
         <input
+          id={inputId}
           autoFocus
           onChange={debounce(onChangeHandler, 500)}
-          className={clsx(classes.inputValue, '' && classes.hasError)}
+          className={classes.inputValue}
           placeholder={searchInputPlaceholder}
         />
       </div>

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

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

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

@@ -145,7 +145,7 @@
         &.hasError {
           background-color: white;
           svg * {
-            stroke: rgba($gray, 0.5);
+            stroke: color-mix(in srgb, var(--ax-neutral) 50%, transparent);
           }
         }
 

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

@@ -19,7 +19,7 @@
 
       margin-left: -50px;
       border: none;
-      background-color: $blue;
+      background-color: var(--ax-primary);
 
       transition: box-shadow 0.15s ease-in-out 0s;
 
@@ -35,16 +35,16 @@
 
       &:hover {
         border: none;
-        background-color: rgba($blue, 0.75);
+        background-color: color-mix(in srgb, var(--ax-primary) 75%, transparent);
       }
 
       &.disabled {
         border: none;
-        background-color: $gray;
+        background-color: var(--ax-neutral);
         cursor: default;
 
         svg * {
-          stroke: rgba(white, 0.5);
+          stroke: color-mix(in srgb, white 50%, transparent);
         }
       }
     }

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

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

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

@@ -5,6 +5,7 @@ import {
   ConfirmationConfig,
   ConfirmationMode,
 } from '../../ConfirmDialog';
+import { SvgElement } from '../../VisualElements/SvgElement';
 import { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './Radio.scss';
@@ -42,7 +43,7 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
   confirmValue,
   disabled = false,
 }) => (
-  <svg
+  <SvgElement
     className={clsx(classes.buttonContainer, {
       [classes.checked]: checked,
       [classes.hasError]: hasError,
@@ -59,7 +60,7 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
   >
     <circle className={classes.radioOutline} cx="17" cy="17" r="15" />
     <circle className={classes.radioDot} cx="17" cy="17" r="7.5" />
-  </svg>
+  </SvgElement>
 );
 
 /**

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

@@ -94,7 +94,7 @@
   ul {
     display: grid;
     row-gap: 1px;
-    background-color: var(--popper-background-color, $popper-background-color);
+    background-color: white;
     padding: 0px;
     margin-top: 1px;
     margin-bottom: 1px;
@@ -105,7 +105,7 @@
     li {
       display: grid;
       place-items: center left;
-      height: 50px;
+      height: 40px;
       font-size: var(--popper-item-font-size, $popper-item-font-size);
       color: var(--popper-text-color, $popper-text-color);
       background-color: white;
@@ -116,18 +116,23 @@
       &:hover {
         cursor: pointer;
         background-color: var(
-          --popper-background-selected-color,
-          $popper-background-selected-color
+          --popper-item-hover-color,
+          $popper-item-hover-color
         );
       }
 
-      &[aria-selected='true'],
-      &[class='Mui-focused Mui-focusVisible'] {
+      &[aria-selected='true'] {
         background-color: var(
           --popper-background-selected-color,
           $popper-background-selected-color
         );
       }
+      &[class='Mui-focused Mui-focusVisible'] {
+        background-color: var(
+          --popper-item-selected-color,
+          $popper-item-selected-color
+        );
+      }
     }
   }
 }

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

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