@onewelcome/react-lib-components 9.6.2 → 9.7.0

package/src/components/Form/Checkbox/Checkbox.module.scss

@@ -212,3 +212,10 @@
     }
   }
 }
+
+.required {
+  &:after {
+    content: " *";
+    color: var(--error);
+  }
+}

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -37,6 +37,7 @@ const isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.[
 export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector, "success"> {
   label?: string | React.ReactNode;
   indeterminate?: boolean;
+  required?: boolean;
   helperProps?: FormHelperTextProps;
   formSelectorWrapperProps?: FormSelectorWrapperProps;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -59,6 +60,7 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     error,
     checked = false,
     formSelectorWrapperProps,
+    required,
     onChange,
     ...rest
   }: Props,
@@ -183,7 +185,12 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       {!checked && !indeterminate && (
         <Icon className={`${iconClasses.join(" ")} ${classes["square"]}`} icon={Icons.Square} />
       )}
-      <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>
+      <label
+        className={`${required ? classes["required"] : ""}`}
+        htmlFor={`${identifier}-checkbox`}
+      >
+        {determineLabel()}
+      </label>
     </FormSelectorWrapper>
   );
 };

package/src/components/Form/Input/Input.module.scss

@@ -26,7 +26,7 @@
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
   padding: 0 relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile);
-  @include mixins.transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(background-color, 0.2s, ease-in-out);
 
   // General autofill styles
   input:-webkit-autofill,
@@ -107,10 +107,6 @@
       color: var(--read-only-text-color);
       border-color: var(--read-only-border-color);
       background-color: var(--color-white);
-
-      &.focus {
-        border-color: var(--read-only-border-color);
-      }
     }
 
     &:hover {
@@ -121,6 +117,22 @@
       }
     }
   }
+
+  & [data-prefix],
+  & [data-suffix] {
+    display: block;
+    z-index: 1;
+
+    @include mixins.transition(all, 0.2s, ease-in-out);
+  }
+
+  &.focus:not(.disabled):not([data-readonlyview="true"]),
+  &[data-readonlyview="true"]:focus:not(.disabled),
+  &[data-readonlyview="true"]:focus-visible:not(.disabled) {
+    position: relative;
+    z-index: 2;
+    @include mixins.focusVisibleOutline($selectors: null);
+  }
 }
 
 .input {
@@ -167,14 +179,6 @@
   padding-right: relativeToBaseFontSize(1.25);
 }
 
-.input-wrapper [data-prefix],
-.input-wrapper [data-suffix] {
-  display: block;
-  z-index: 1;
-
-  @include mixins.transition(all, 0.2s, ease-in-out);
-}
-
 @media only screen and (min-width: 30em) {
   .input-wrapper {
     padding: 0 relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-desktop);

package/src/components/Form/Select/MultiSelect/MultiSelect.module.scss

@@ -28,7 +28,7 @@ $listItemHeight: 2.5rem;
   background-color: var(--input-background-color);
   font-size: var(--form-control-font-size);
 
-  @include mixins.transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(background-color, 0.2s, ease-in-out);
 
   [data-display] {
     color: var(--color-default);
@@ -42,12 +42,19 @@ $listItemHeight: 2.5rem;
   }
 
   &:not(.expanded) {
+    &:has(button:focus) {
+      position: relative;
+      z-index: 2;
+      @include mixins.focusVisibleOutline($selectors: null);
+    }
+
     .custom-select:focus:not(.error) {
-      border: var(--input-border-width-focus) solid var(--color-focus);
+      border-color: var(--input-border-color);
+      border-width: var(--input-border-width);
       padding: 0
         calc(
           relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile) - var(
-              --input-border-width-focus
+              --input-border-width
             )
         );
     }
@@ -78,10 +85,11 @@ $listItemHeight: 2.5rem;
     border-radius: var(--input-border-radius);
     font-size: var(--form-control-font-size);
 
-    @include mixins.transition(all, 0.2s, ease-in-out);
+    @include mixins.transition((background-color, border-color), 0.2s, ease-in-out);
 
+    &:focus-visible,
     &:focus {
-      outline: 0;
+      outline: none;
     }
 
     &.error {
@@ -89,7 +97,7 @@ $listItemHeight: 2.5rem;
     }
 
     &.error:focus {
-      border-width: var(--input-border-width-focus);
+      border-width: var(--input-border-width);
     }
 
     &.disabled {
@@ -270,7 +278,7 @@ $listItemHeight: 2.5rem;
         padding: 0
           calc(
             relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-desktop) - var(
-                --input-border-width-focus
+                --input-border-width
               )
           );
       }

package/src/components/Form/Select/MultiSelect/SelectButton.module.scss

@@ -24,4 +24,5 @@
   padding: 0;
   background: none;
   cursor: pointer;
+  outline: 0;
 }

package/src/components/Form/Select/SingleSelect/Select.module.scss

@@ -28,7 +28,7 @@ $listItemHeight: 2.5rem;
   background-color: var(--input-background-color);
   font-size: var(--form-control-font-size);
 
-  @include mixins.transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(background-color, 0.2s, ease-in-out);
 
   [data-display] {
     color: var(--color-default);
@@ -42,12 +42,19 @@ $listItemHeight: 2.5rem;
   }
 
   &:not(.expanded) {
+    &:has(button:focus) {
+      position: relative;
+      z-index: 2;
+      @include mixins.focusVisibleOutline($selectors: null);
+    }
+
     button:focus:not(.error) {
-      border: var(--input-border-width-focus) solid var(--color-focus);
+      border-color: var(--input-border-color);
+      border-width: var(--input-border-width);
       padding: 0
         calc(
           relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile) - var(
-              --input-border-width-focus
+              --input-border-width
             )
         );
     }
@@ -78,7 +85,7 @@ $listItemHeight: 2.5rem;
     border-radius: var(--input-border-radius);
     font-size: var(--form-control-font-size);
     cursor: pointer;
-    @include mixins.transition(all, 0.2s, ease-in-out);
+    @include mixins.transition((background-color, border-color), 0.2s, ease-in-out);
 
     &:focus {
       outline: 0;
@@ -90,7 +97,7 @@ $listItemHeight: 2.5rem;
     }
 
     &.error:focus {
-      border-width: var(--input-border-width-focus);
+      border-width: var(--input-border-width);
     }
 
     &.disabled {
@@ -294,7 +301,7 @@ $listItemHeight: 2.5rem;
         padding: 0
           calc(
             relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-desktop) - var(
-                --input-border-width-focus
+                --input-border-width
               )
           );
       }

package/src/components/Form/Textarea/Textarea.module.scss

@@ -50,6 +50,17 @@
 
   @include mixins.outlineStates();
 
+  &:has(div[data-readonlyview="true"]:focus) {
+    position: relative;
+    z-index: 2;
+    @include mixins.focusVisibleOutline($selectors: null);
+  }
+
+  &:has(div[data-readonlyview="true"]:focus) .outline {
+    border-width: var(--input-border-width);
+    border-color: var(--input-border-color);
+  }
+
   div[data-readonlyview="true"] {
     min-height: 4rem;
     border: 1px solid var(--color-blue-grey100);
@@ -61,6 +72,10 @@
     position: relative;
     border-radius: 0.125rem;
 
+    &:focus {
+      outline: none;
+    }
+
     & ~ span.outline {
       display: none;
     }
@@ -69,6 +84,21 @@
       padding-right: 2.5rem;
     }
   }
+
+  & .outline {
+    @include mixins.transition((background-color, border-color), 0.2s, ease-in-out);
+  }
+
+  &:not(.disabled):has(textarea:focus) {
+    position: relative;
+    z-index: 2;
+    @include mixins.focusVisibleOutline($selectors: null);
+  }
+
+  &:not(.disabled):has(textarea:focus) .outline {
+    border-width: var(--input-border-width);
+    border-color: var(--input-border-color);
+  }
 }
 
 .textarea {

package/src/components/Pagination/Pagination.module.scss

@@ -73,6 +73,7 @@
   .per-page {
     display: none;
     align-items: center;
+    gap: 0.5rem;
 
     label {
       font-size: var(--font-size-data-grid);
@@ -108,10 +109,8 @@
   }
 
   .page-size-select {
-    margin: 0 0.25rem;
-
     button {
-      min-width: relativeToBaseFontSize(3.75);
+      min-width: relativeToBaseFontSize(4.25);
       padding: 0;
 
       div[data-display] {

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -344,7 +344,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     alertErrorBackgroundColor: "var(--color-red50)",
     alertErrorInvertedColor: "var(--color-red500)",
     alertWarningBackgroundColor: "var(--color-orange50)",
-    alertWarningInvertedColor: "var(--color-orange500)",
+    alertWarningInvertedColor: "var(--color-orange600)",
     alertBorderWidth: "4px",
     alertBorderRadius: "2px",
 

package/src/mixins.module.scss

@@ -226,14 +226,6 @@
   .outline.error {
     border-color: var(--error);
   }
-
-  .outline.focus {
-    border-width: var(--input-border-width-focus);
-  }
-
-  .outline.focus:not(.error) {
-    border-color: var(--color-focus);
-  }
 }
 
 @mixin browserOutlineDisabled {