From 4fec42765339fecc0dc61486527f9698fcab8640 Mon Sep 17 00:00:00 2001 From: akeneo Date: Thu, 14 Nov 2024 08:21:01 +0000 Subject: [PATCH] Extract from d6975535845cf4903655e4496bdea395ce8af51d --- lib/components/Modal/Modal.js | 38 +++++++++++++++++++--------------- package-lock.json | 4 ++-- package.json | 2 +- src/components/Modal/Modal.tsx | 4 ++++ 4 files changed, 28 insertions(+), 20 deletions(-) diff --git a/lib/components/Modal/Modal.js b/lib/components/Modal/Modal.js index 2bf516b4..923c2c04 100644 --- a/lib/components/Modal/Modal.js +++ b/lib/components/Modal/Modal.js @@ -1,11 +1,11 @@ -"use strict";var j=Object.defineProperty,T=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var x=(t,e,o)=>e in t?j(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,m=(t,e)=>{for(var o in e||(e={}))g.call(e,o)&&x(t,o,e[o]);if(a)for(var o of a(e))v.call(e,o)&&x(t,o,e[o]);return t},h=(t,e)=>T(t,I(e));var y=(t,e)=>{var o={};for(var n in t)g.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&a)for(var n of a(t))e.indexOf(n)<0&&v.call(t,n)&&(o[n]=t[n]);return o};var i=require("react/jsx-runtime"),u=require("react"),R=require("react-dom"),S=require("styled-components"),d=require("../../theme/theme.js"),_=require("../../theme/common.js"),$=require("../IconButton/IconButton.js"),w=require("../../icons/CloseIcon.js"),E=require("../../hooks/useShortcut.js"),k=require("../../shared/key.js"),C=require("./ModalContext.js");function b(t){return t&&t.__esModule?t:{default:t}}var P=b(u),r=b(S);const z=r.default.div` +"use strict";var j=Object.defineProperty,T=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var x=(t,e,o)=>e in t?j(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,v=(t,e)=>{for(var o in e||(e={}))g.call(e,o)&&x(t,o,e[o]);if(a)for(var o of a(e))m.call(e,o)&&x(t,o,e[o]);return t},h=(t,e)=>T(t,I(e));var y=(t,e)=>{var o={};for(var n in t)g.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&a)for(var n of a(t))e.indexOf(n)<0&&m.call(t,n)&&(o[n]=t[n]);return o};var r=require("react/jsx-runtime"),u=require("react"),R=require("react-dom"),S=require("styled-components"),l=require("../../theme/theme.js"),_=require("../../theme/common.js"),$=require("../IconButton/IconButton.js"),w=require("../../icons/CloseIcon.js"),E=require("../../hooks/useShortcut.js"),k=require("../../shared/key.js"),C=require("./ModalContext.js");function b(t){return t&&t.__esModule?t:{default:t}}var P=b(u),i=b(S);const z=i.default.div` ${_.CommonStyle} position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; - background-color: ${d.getColor("white")}; + background-color: ${l.getColor("white")}; display: flex; flex-direction: column; align-items: center; @@ -14,47 +14,51 @@ overflow: hidden; padding: 20px 80px; box-sizing: border-box; -`,D=r.default($.IconButton)` +`,D=i.default($.IconButton)` position: fixed; top: 40px; left: 40px; -`,F=r.default.div` +`,F=i.default.div` display: grid; grid-template-columns: 1fr 2fr; -`,L=r.default.div` + height: 100%; + align-items: center; +`,L=i.default.div` display: flex; flex-direction: column; padding: 20px 40px; min-width: 480px; - border-left: 1px solid ${d.getColor("brand",100)}; -`,A=r.default.div` + border-left: 1px solid ${l.getColor("brand",100)}; + max-height: 100%; + overflow: auto; +`,A=i.default.div` display: flex; justify-content: flex-end; padding-right: 40px; -`,K=r.default.div` +`,K=i.default.div` height: 20px; - color: ${({color:t})=>d.getColor(t!=null?t:"grey",120)}; - font-size: ${({size:t})=>d.getFontSize(t!=null?t:"default")}; + color: ${({color:t})=>l.getColor(t!=null?t:"grey",120)}; + font-size: ${({size:t})=>l.getFontSize(t!=null?t:"default")}; text-transform: uppercase; -`,N=r.default.div` +`,N=i.default.div` display: flex; align-items: center; height: 40px; - color: ${d.getColor("grey",140)}; - font-size: ${d.getFontSize("title")}; + color: ${l.getColor("grey",140)}; + font-size: ${l.getFontSize("title")}; margin-bottom: 10px; -`,c=r.default.div` +`,c=i.default.div` display: flex; gap: 10px; margin-top: 20px; -`,G=r.default(c)` +`,G=i.default(c)` position: fixed; top: 40px; right: 40px; margin: 0; -`,H=r.default(c)` +`,H=i.default(c)` position: fixed; top: 40px; left: 82px; margin: 0; -`,l=J=>{var p=J,{onClose:t,illustration:e,closeTitle:o,children:n}=p,q=y(p,["onClose","illustration","closeTitle","children"]);const f=document.createElement("div");f.setAttribute("id","modal-root");const s=u.useRef(f);E.useShortcut(k.Key.Escape,t),u.useEffect(()=>(document.body.appendChild(s.current),()=>{document.body.removeChild(s.current)}),[]);const B=M=>{M.stopPropagation()};return R.createPortal(i.jsx(C.ModalContext.Provider,{value:!0,children:i.jsxs(z,h(m({onClick:B,role:"dialog"},q),{children:[i.jsx(D,{title:o,level:"tertiary",ghost:"borderless",icon:i.jsx(w.CloseIcon,{}),onClick:t}),e===void 0?n:i.jsxs(F,{children:[i.jsx(A,{children:P.default.cloneElement(e,{size:220})}),i.jsx(L,{children:n})]})]}))}),s.current)};l.BottomButtons=c;l.TopRightButtons=G;l.TopLeftButtons=H;l.Title=N;l.SectionTitle=K;exports.useInModal=C.useInModal;exports.Modal=l; +`,d=J=>{var p=J,{onClose:t,illustration:e,closeTitle:o,children:n}=p,q=y(p,["onClose","illustration","closeTitle","children"]);const f=document.createElement("div");f.setAttribute("id","modal-root");const s=u.useRef(f);E.useShortcut(k.Key.Escape,t),u.useEffect(()=>(document.body.appendChild(s.current),()=>{document.body.removeChild(s.current)}),[]);const B=M=>{M.stopPropagation()};return R.createPortal(r.jsx(C.ModalContext.Provider,{value:!0,children:r.jsxs(z,h(v({onClick:B,role:"dialog"},q),{children:[r.jsx(D,{title:o,level:"tertiary",ghost:"borderless",icon:r.jsx(w.CloseIcon,{}),onClick:t}),e===void 0?n:r.jsxs(F,{children:[r.jsx(A,{children:P.default.cloneElement(e,{size:220})}),r.jsx(L,{children:n})]})]}))}),s.current)};d.BottomButtons=c;d.TopRightButtons=G;d.TopLeftButtons=H;d.Title=N;d.SectionTitle=K;exports.useInModal=C.useInModal;exports.Modal=d; diff --git a/package-lock.json b/package-lock.json index b1d24db6..d0d9000c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "akeneo-design-system", - "version": "2.0.4", + "version": "2.0.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "akeneo-design-system", - "version": "2.0.4", + "version": "2.0.5", "license": "OSL-3.0", "dependencies": { "draft-js": "^0.11.0", diff --git a/package.json b/package.json index a579b670..7f93719e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "akeneo-design-system", - "version": "2.0.4", + "version": "2.0.5", "description": "Akeneo design system", "files": [ "lib" diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 20723a63..489b62b3 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -38,6 +38,8 @@ const ModalCloseButton = styled(IconButton)` const ModalContent = styled.div` display: grid; grid-template-columns: 1fr 2fr; + height: 100%; + align-items: center; `; const ModalChildren = styled.div` @@ -46,6 +48,8 @@ const ModalChildren = styled.div` padding: 20px 40px; min-width: 480px; border-left: 1px solid ${getColor('brand', 100)}; + max-height: 100%; + overflow: auto; `; const IconContainer = styled.div`