fix(plugin-basic-ui): add maxWidth option in <Modal /> (daangn#537)

contentstech-com · Nov 19, 2024 · eb4578f · eb4578f
1 parent eb9ed7c
commit eb4578f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/.changeset/rare-dingos-explode.md b/.changeset/rare-dingos-explode.md
@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-basic-ui": patch
+---
+
+fix(plugin-basic-ui): add `maxWidth` option in <Modal />
diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts
@@ -31,7 +31,8 @@ const GLOBAL_VARS = {
     borderRadius: "bottom-sheet-border-radius",
   },
   modal: {
-    borderRadius: "bottom-sheet-border-radius",
+    borderRadius: "modal-border-radius",
+    maxWidth: "modal-max-width",
   },
 };
 
@@ -68,6 +69,7 @@ const androidValues: GlobalVars = {
   },
   modal: {
     borderRadius: "1rem",
+    maxWidth: "100%",
   },
 };
 

diff --git a/extensions/plugin-basic-ui/src/components/Modal.css.ts b/extensions/plugin-basic-ui/src/components/Modal.css.ts
@@ -62,6 +62,7 @@ export const paper = style([
   {
     backgroundColor: globalVars.backgroundColor,
     width: "100%",
+    maxWidth: globalVars.modal.maxWidth,
     margin: "0 2.5rem",
     boxShadow:
       "0px 0.625rem 2.375rem rgba(0, 0, 0, 0.15), 0px .5625rem 2.875rem rgba(0, 0, 0, 0.12), 0px .3125rem .9375rem rgba(0, 0, 0, 0.1)",

diff --git a/extensions/plugin-basic-ui/src/components/Modal.tsx b/extensions/plugin-basic-ui/src/components/Modal.tsx
@@ -24,6 +24,7 @@ const Modal: React.FC<ModalProps> = ({
   backgroundColor,
   dimBackgroundColor,
   borderRadius = "1rem",
+  maxWidth,
   onOutsideClick,
   children,
 }) => {
@@ -78,9 +79,10 @@ const Modal: React.FC<ModalProps> = ({
       ref={containerRef}
       style={assignInlineVars(
         compactMap({
-          [globalVars.bottomSheet.borderRadius]: borderRadius,
           [globalVars.backgroundColor]: backgroundColor,
           [globalVars.dimBackgroundColor]: dimBackgroundColor,
+          [globalVars.modal.borderRadius]: borderRadius,
+          [globalVars.modal.maxWidth]: maxWidth,
           [css.vars.zIndexes.dim]: `${zIndexBase}`,
           [css.vars.zIndexes.paper]: `${zIndexPaper}`,
           [css.vars.transitionDuration]: