refactor: apply blur from overlay

abelflopes · Jul 21, 2024 · d5142dc · d5142dc
1 parent 3d33fd4
commit d5142dc
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/packages/components/_provisional/src/overlay-spinner/styles/index.module.scss b/packages/components/_provisional/src/overlay-spinner/styles/index.module.scss
@@ -6,11 +6,10 @@
 }
 
 .overlay {
-  backdrop-filter: blur(5px);
+  z-index: map-get-strict(elevation.$elevation, "overlay");
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease-in-out;
-  z-index: map-get-strict(elevation.$elevation, "overlay");
 
   &__active {
     opacity: 1;

diff --git a/packages/components/overlay/src/index.tsx b/packages/components/overlay/src/index.tsx
@@ -5,6 +5,8 @@ import classNames from "classnames";
 export interface OverlayProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Specifies the visual style of the overlay  */
   skin?: "light" | "dark";
+  /** If set to true, will blur background */
+  blur?: boolean;
 }
 
 /**
@@ -16,8 +18,12 @@ export interface OverlayProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const Overlay = ({
   skin = "dark",
+  blur = true,
   className,
   ...otherProps
 }: Readonly<OverlayProps>): React.ReactElement => (
-  <div className={classNames(styles.root, styles[skin], className)} {...otherProps} />
+  <div
+    className={classNames(styles.root, styles[skin], blur && styles.blur, className)}
+    {...otherProps}
+  />
 );
diff --git a/packages/components/overlay/src/styles/index.module.scss b/packages/components/overlay/src/styles/index.module.scss
@@ -13,6 +13,10 @@
   background-color: get-css-var(overlay, color);
 }
 
+.blur {
+  backdrop-filter: blur(5px);
+}
+
 @each $variation in (dark, light) {
   .#{$variation} {
     @include define-css-var(overlay, color, get-color("overlay-#{$variation}"));