@onewelcome/react-lib-components 8.11.1 → 8.12.1

package/src/components/Form/Wrapper/InputWrapper/InputWrapper.module.scss

@@ -15,6 +15,7 @@
  */
 
 @use "../../../../mixins.module.scss";
+@use "../../../../functions" as *;
 
 @include mixins.searchInputPointer("search", ".input-wrapper");
 
@@ -25,7 +26,7 @@ input {
 }
 
 .input-wrapper-helper {
-  margin-top: 0.14rem;
+  margin-top: relativeToBaseFontSize(0.14);
 }
 
 .input-wrapper {
@@ -49,15 +50,15 @@ input {
   }
 
   [data-prefix] + input {
-    padding-left: 0.5rem;
+    padding-left: relativeToBaseFontSize(0.5);
   }
 
   [data-suffix] {
-    padding-left: 1.25rem;
+    padding-left: relativeToBaseFontSize(1.25);
   }
 
   input + [data-suffix] {
-    padding-left: 0.5rem;
+    padding-left: relativeToBaseFontSize(0.5);
   }
 
   .disabled {

package/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss

@@ -55,11 +55,7 @@
   }
 }
 
-.textarea-helper-text {
-  margin-top: 0.14rem;
-}
-
-[data-readonlyview="true"] {
+.wrapper[data-readonlyview="true"] {
   & ~ span.error {
     background-color: var(--color-white);
   }
@@ -97,3 +93,7 @@
     }
   }
 }
+
+.textarea-helper-text {
+  margin-top: 0.14rem;
+}

package/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.tsx

@@ -56,6 +56,7 @@ const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
     onMouseLeave,
     disabled,
     success,
+    className,
     ...rest
   }: Props,
   ref
@@ -127,6 +128,7 @@ const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
     <Wrapper
       {...rest}
       ref={ref}
+      className={`${classes["wrapper"]} ${className ?? ""}`}
       disabled={disabled}
       labelProps={{
         id: labelId,

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

@@ -16,6 +16,7 @@
 
 @use "src/mixins.module";
 @use "src/variables";
+@use "src/functions" as *;
 
 .floating-wrapper {
   position: relative;
@@ -26,7 +27,7 @@
     position: absolute;
     z-index: 2;
     top: 1.3125rem;
-    left: variables.$form-element-horizontal-padding-mobile;
+    left: relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile);
     transform-origin: left top;
     pointer-events: none;
     @include mixins.transition(all, 0.2s, ease-in-out);
@@ -46,7 +47,7 @@
   font-size: var(--form-control-font-size);
   line-height: var(--default-line-height);
   color: var(--color-blue-grey900);
-  margin-bottom: 0.25rem;
+  margin-bottom: relativeToBaseFontSize(0.25);
   display: inline-block;
 
   &.disabled {
@@ -56,7 +57,7 @@
 
 .wrapper + fieldset,
 .wrapper + .wrapper {
-  margin-top: 1rem;
+  margin-top: relativeToBaseFontSize(1);
 }
 
 .required {
@@ -66,7 +67,7 @@
   }
 }
 
-[data-readonlyview="true"] {
+.wrapper[data-readonlyview="true"] {
   & label {
     color: var(--read-only-text-color);
   }
@@ -75,7 +76,7 @@
 @media only screen and (min-width: 30em) {
   .floating-wrapper {
     .floating-label {
-      left: variables.$form-element-horizontal-padding-desktop;
+      left: relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile);
     }
   }
 }

package/src/hooks/useUploadFile.tsx

@@ -106,7 +106,7 @@ export const useUploadFile = (
       const updatedList = getUpdatedList(fileName, fileStatus, undefined, error);
       setUpdatedFiles(updatedList);
       const response = { fileList: updatedList, status, responseJson };
-      setUploadingFiles(prevState => prevState.filter(selected => selected.name === fileName));
+      setUploadingFiles(prevState => prevState.filter(selected => selected.name !== fileName));
       onComplete?.(response);
     }
   };

package/src/mixins.module.scss

@@ -16,6 +16,7 @@
 
 @use "./readyclasses.module.scss";
 @use "./variables.scss";
+@use "./functions" as *;
 
 @mixin button($variant: "text", $type: "default") {
   $disabledSelector: if($type == "link", ".disabled", ":disabled");
@@ -140,8 +141,8 @@
     }
 
     position: relative;
-    outline: 2px solid var(--color-focus);
-    outline-offset: 2px;
+    outline: relativeToBaseFontSize(0.125) solid var(--color-focus);
+    outline-offset: relativeToBaseFontSize(0.125);
     z-index: 2;
   }
 
@@ -173,8 +174,8 @@
   font-size: var(--button-font-size);
   line-height: 1;
   margin: 0;
-  padding: 0.5rem 0.75rem;
-  min-height: 2.5rem;
+  padding: relativeToBaseFontSize(0.5) relativeToBaseFontSize(0.75);
+  min-height: relativeToBaseFontSize(2.5);
   cursor: pointer;
 
   font-family: var(--font-family);
@@ -296,8 +297,8 @@
 
 @mixin focusVisibleOutline(
   $color: var(--color-focus),
-  $outlineWidth: 0.125rem,
-  $outlineOffset: 0.125rem,
+  $outlineWidth: relativeToBaseFontSize(0.125),
+  $outlineOffset: relativeToBaseFontSize(0.125),
   $selectors: "&:focus-visible"
 ) {
   @if $selectors {
@@ -317,7 +318,7 @@
   border-style: none none none solid;
   border-width: var(--alert-border-width);
   border-color: $border-color;
-  padding-left: calc(1rem - var(--alert-border-width));
+  padding-left: calc(relativeToBaseFontSize(1) - var(--alert-border-width));
 }
 
 @mixin searchInputPointer($inputType, $selector) {
@@ -342,7 +343,7 @@
   text-transform: none;
   letter-spacing: 0;
   color: var(--default);
-  margin: 0 0 1rem 0;
+  margin: 0 0 relativeToBaseFontSize(1) 0;
 }
 
 @mixin breakpoint($minOrMax, $breakpoint) {

package/src/variables.scss

@@ -14,10 +14,10 @@
  *    limitations under the License.
  */
 
-$form-element-horizontal-padding-mobile: 0.5rem;
-$form-element-horizontal-padding-desktop: 0.5rem;
-$form-element-vertical-padding-mobile: 0.625rem;
-$form-element-vertical-padding-desktop: 0.625rem;
+$form-element-horizontal-padding-ratio-mobile: 0.5;
+$form-element-horizontal-padding-ratio-desktop: 0.5;
+$form-element-vertical-padding-ratio-mobile: 0.625;
+$form-element-vertical-padding-ratio-desktop: 0.625;
 
 $popover-z-index: 100;
 $select-z-index: 11;