@atom-learning/components 1.17.0 → 1.17.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
## [1.17.2](https://github.com/Atom-Learning/components/compare/v1.17.1...v1.17.2) (2022-06-30)
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
###
|
|
4
|
+
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* dialog content - handle case where child can be null ([30c1746](https://github.com/Atom-Learning/components/commit/30c1746084312577b220c381a4ace17fb6e11e6f))
|
|
7
7
|
|
|
8
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
9
9
|
|
|
@@ -7,7 +7,7 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
|
|
|
7
7
|
appearance?: "outline" | "solid" | undefined;
|
|
8
8
|
size?: "sm" | "md" | "lg" | undefined;
|
|
9
9
|
isLoading?: boolean | "true" | undefined;
|
|
10
|
-
fullWidth?: boolean | "true" | undefined;
|
|
10
|
+
fullWidth?: boolean | "true" | "false" | undefined;
|
|
11
11
|
isRounded?: boolean | "true" | undefined;
|
|
12
12
|
}, {
|
|
13
13
|
sm: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{darken as i,opacify as s}from"color2k";import{forwardRef as f,createElement as n,Children as w,cloneElement as k,Fragment as v}from"react";import{Box as D}from"../box/Box.js";import{Icon as S}from"../icon/Icon.js";import{Loader as x}from"../loader/Loader.js";import{styled as C,theme as c}from"../../stitches.js";const p=(e,r,o)=>({border:"1px solid",borderColor:"currentColor",color:e,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:r},"&:not([disabled]):active":{color:o}}),a=(e,r,o,t="white")=>({bg:e,color:t,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:r,color:t},"&:not([disabled]):active":{bg:o}}),d=C("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4"},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5"},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5"}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{true:{width:"100%"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:a("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:a("$primaryDark",i(c.colors.primaryDark.value,.1),i(c.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:a("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:a("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:a("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:a("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:p("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:p("$primaryDark",i(c.colors.primaryDark.value,.1),i(c.colors.primaryDark.value,.15))}]}),B=({isLoading:e,children:r})=>n(v,null,n(x,{css:{opacity:e?1:0,position:"absolute",transition:"opacity 150ms"}}),n(D,{as:"span",css:e?{opacity:0,transition:"opacity 150ms"}:{}},r)),M=e=>{switch(e){case"lg":return 22;case"md":return 20;case"sm":default:return 16}},m=(e,r)=>w.map(e,(o,t)=>(o==null?void 0:o.type)===S?k(o,{css:{[t===0?"mr":"ml"]:r==="sm"?"$2":"$3",size:M(r),...o.props.css?o.props.css:{}}}):o),u=f(({children:e,isLoading:r,onClick:o,href:t,appearance:$="solid",size:l="md",theme:y="primary",type:h="button",...g},b)=>n(d,{isLoading:r||!1,onClick:r?void 0:o,appearance:$,size:l,theme:y,...g,...t?{as:"a",href:t,onClick:void 0}:{},...t?{}:{type:h},ref:b},typeof r=="boolean"?n(B,{isLoading:r},m(e,l)):m(e,l)));u.displayName="Button";export{u as Button,d as StyledButton};
|
|
1
|
+
import{darken as i,opacify as s}from"color2k";import{forwardRef as f,createElement as n,Children as w,cloneElement as k,Fragment as v}from"react";import{Box as D}from"../box/Box.js";import{Icon as S}from"../icon/Icon.js";import{Loader as x}from"../loader/Loader.js";import{styled as C,theme as c}from"../../stitches.js";const p=(e,r,o)=>({border:"1px solid",borderColor:"currentColor",color:e,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:r},"&:not([disabled]):active":{color:o}}),a=(e,r,o,t="white")=>({bg:e,color:t,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:r,color:t},"&:not([disabled]):active":{bg:o}}),d=C("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4"},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5"},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5"}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{false:{width:"auto"},true:{width:"100%"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:a("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:a("$primaryDark",i(c.colors.primaryDark.value,.1),i(c.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:a("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:a("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:a("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:a("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:p("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:p("$primaryDark",i(c.colors.primaryDark.value,.1),i(c.colors.primaryDark.value,.15))}]}),B=({isLoading:e,children:r})=>n(v,null,n(x,{css:{opacity:e?1:0,position:"absolute",transition:"opacity 150ms"}}),n(D,{as:"span",css:e?{opacity:0,transition:"opacity 150ms"}:{}},r)),M=e=>{switch(e){case"lg":return 22;case"md":return 20;case"sm":default:return 16}},m=(e,r)=>w.map(e,(o,t)=>(o==null?void 0:o.type)===S?k(o,{css:{[t===0?"mr":"ml"]:r==="sm"?"$2":"$3",size:M(r),...o.props.css?o.props.css:{}}}):o),u=f(({children:e,isLoading:r,onClick:o,href:t,appearance:$="solid",size:l="md",theme:y="primary",type:h="button",...g},b)=>n(d,{isLoading:r||!1,onClick:r?void 0:o,appearance:$,size:l,theme:y,...g,...t?{as:"a",href:t,onClick:void 0}:{},...t?{}:{type:h},ref:b},typeof r=="boolean"?n(B,{isLoading:r},m(e,l)):m(e,l)));u.displayName="Button";export{u as Button,d as StyledButton};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Close as g}from"@atom-learning/icons";import{Overlay as b,Content as
|
|
1
|
+
import{Close as g}from"@atom-learning/icons";import{Overlay as b,Content as v,Portal as w,Close as $}from"@radix-ui/react-dialog";import{createElement as t,Children as i}from"react";import{DIALOG_Z_INDEX as r}from"../../constants/dialog.js";import{keyframes as s,styled as l}from"../../stitches.js";import{ActionIcon as h}from"../action-icon/ActionIcon.js";import{Icon as y}from"../icon/Icon.js";import{DialogBackground as m}from"./DialogBackground.js";import{fadeIn as C,fadeOut as D}from"../../utilities/style/keyframe-animations.js";const e="translate3d(-50%, -50%, 0)",d="translate3d(-50%, 50vh, 0)",p="modal_overlay",I=s({"0%":{transform:d},"100%":{transform:e}}),O=s({"0%":{transform:e},"100%":{transform:d}}),z=l(b,{backgroundColor:"$alpha600",inset:0,position:"fixed",overflowY:"auto",zIndex:r,"@allowMotion":{'&[data-state="open"]':{animation:`${C} 250ms ease-out`},'&[data-state="closed"]':{animation:`${D} 550ms ease-out`}}}),S=l(v,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:e,zIndex:r,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${I} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${O} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),k=({size:f="sm",children:a,closeDialogText:c="Close dialog",showCloseButton:u=!0,...x})=>t(w,null,t(z,{id:p},i.map(a,o=>(o==null?void 0:o.type)===m&&o),t(S,{size:f,"aria-label":"Dialog",onPointerDownOutside:o=>{const n=o.target;(n==null?void 0:n.id)!==p&&o.preventDefault()},...x},u&&t(h,{as:$,css:{position:"absolute",right:"$4",top:"$4"},label:c,size:"lg",theme:"neutral"},t(y,{is:g})),i.map(a,o=>(o==null?void 0:o.type)!==m&&o))));export{k as DialogContent};
|