@artsy/palette 26.1.0 → 26.1.1
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 +13 -0
- package/dist/elements/ModalDialog/ModalDialogContent.js +2 -1
- package/dist/elements/ModalDialog/ModalDialogContent.js.map +1 -1
- package/dist/elements/ModalDialog/ModalDialogContent.story.js +5 -0
- package/dist/elements/ModalDialog/ModalDialogContent.story.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
# v26.1.1 (Thu Nov 17 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- fix(modaldialogcontent): fixes width for shorter content [#1225](https://github.com/artsy/palette/pull/1225) ([@dzucconi](https://github.com/dzucconi))
|
|
6
|
+
- fix(modaldialogcontent): fixes width for shorter content ([@dzucconi](https://github.com/dzucconi))
|
|
7
|
+
|
|
8
|
+
#### Authors: 1
|
|
9
|
+
|
|
10
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
1
14
|
# v26.1.0 (Thu Nov 17 2022)
|
|
2
15
|
|
|
3
16
|
#### 🚀 Enhancement
|
|
@@ -61,7 +61,8 @@ var ModalDialogContent = function ModalDialogContent(_ref) {
|
|
|
61
61
|
}
|
|
62
62
|
}, rest), leftPanel, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
|
|
63
63
|
flexDirection: "column",
|
|
64
|
-
overflow: "hidden"
|
|
64
|
+
overflow: "hidden",
|
|
65
|
+
width: "100%"
|
|
65
66
|
}, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
|
|
66
67
|
alignItems: "flex-start",
|
|
67
68
|
justifyContent: "space-between",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"names":["ModalDialogContent","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","rest","topSentinel","sentinel","isAtTop","isSentinelVisible","bottomSentinel","isAtBottom","boxShadow","DROP_SHADOW","transition","undefined","width","height","WebkitOverflowScrolling"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAcO,IAAMA,kBAAqD,GAAG,SAAxDA,kBAAwD,OAS/D;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,OAMI,QANJA,OAMI;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,IACC;;AACJ,8BAGI,mDAHJ;AAAA,MACYC,WADZ,yBACEC,QADF;AAAA,MAEqBC,OAFrB,yBAEEC,iBAFF;;AAKA,+BAGI,mDAHJ;AAAA,MACYC,cADZ,0BACEH,QADF;AAAA,MAEqBI,UAFrB,0BAEEF,iBAFF;;AAKA,sBACE,6BAAC,UAAD;AAAM,IAAA,EAAE,EAAC,UAAT;AAAoB,IAAA,CAAC,EAAE,CAAvB;AAA0B,IAAA,KAAK,EAAE;AAAEG,MAAAA,SAAS,EAAEC;AAAb;AAAjC,KAAiER,IAAjE,GACGJ,SADH,eAGE,6BAAC,UAAD;AAAM,IAAA,aAAa,EAAC,QAApB;AAA6B,IAAA,QAAQ,EAAC;
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"names":["ModalDialogContent","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","rest","topSentinel","sentinel","isAtTop","isSentinelVisible","bottomSentinel","isAtBottom","boxShadow","DROP_SHADOW","transition","undefined","width","height","WebkitOverflowScrolling"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAcO,IAAMA,kBAAqD,GAAG,SAAxDA,kBAAwD,OAS/D;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,OAMI,QANJA,OAMI;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,IACC;;AACJ,8BAGI,mDAHJ;AAAA,MACYC,WADZ,yBACEC,QADF;AAAA,MAEqBC,OAFrB,yBAEEC,iBAFF;;AAKA,+BAGI,mDAHJ;AAAA,MACYC,cADZ,0BACEH,QADF;AAAA,MAEqBI,UAFrB,0BAEEF,iBAFF;;AAKA,sBACE,6BAAC,UAAD;AAAM,IAAA,EAAE,EAAC,UAAT;AAAoB,IAAA,CAAC,EAAE,CAAvB;AAA0B,IAAA,KAAK,EAAE;AAAEG,MAAAA,SAAS,EAAEC;AAAb;AAAjC,KAAiER,IAAjE,GACGJ,SADH,eAGE,6BAAC,UAAD;AAAM,IAAA,aAAa,EAAC,QAApB;AAA6B,IAAA,QAAQ,EAAC,QAAtC;AAA+C,IAAA,KAAK,EAAC;AAArD,kBACE,6BAAC,UAAD;AACE,IAAA,UAAU,EAAC,YADb;AAEE,IAAA,cAAc,EAAC,eAFjB;AAGE,IAAA,MAAM,EAAE,CAHV;AAIE,IAAA,KAAK,EAAE;AACLa,MAAAA,UAAU,EAAE,kBADP;AAELF,MAAAA,SAAS,EAAEJ,OAAO,GAAGK,mBAAH,GAAiBE;AAF9B;AAJT,KASG,CAACX,KAAK,IAAIJ,OAAV,kBACC,6BAAC,QAAD;AAAK,IAAA,CAAC,EAAE;AAAR,KACGA,OAAO,iBACN,6BAAC,sCAAD;AACE,IAAA,OAAO,EAAC,OADV;AAEE,IAAA,KAAK,EAAE;AAAEgB,MAAAA,KAAK,EAAE,MAAT;AAAiBC,MAAAA,MAAM,EAAE;AAAzB;AAFT,IAFJ,EAQGjB,OAAO,IAAII,KAAX,iBAAoB,6BAAC,cAAD;AAAQ,IAAA,EAAE,EAAE;AAAZ,IARvB,EAUGA,KAAK,iBAAI,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BA,KAA5B,CAVZ,CAVJ,eAwBE,6BAAC,oBAAD;AAAW,IAAA,CAAC,EAAE,CAAd;AAAiB,IAAA,EAAE,EAAC,MAApB;AAA2B,IAAA,OAAO,EAAEF,OAApC;AAA6C,kBAAW;AAAxD,kBACE,6BAAC,oBAAD;AAAW,IAAA,IAAI,EAAC,UAAhB;AAA2B,IAAA,OAAO,EAAC;AAAnC,IADF,CAxBF,CADF,eA8BE,6BAAC,QAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,EAAE,EAAE,CAFN;AAGE,IAAA,IAAI,EAAE,CAHR;AAIE,IAAA,QAAQ,EAAC,MAJX;AAKE,IAAA,KAAK,EAAE;AAAEgB,MAAAA,uBAAuB,EAAE;AAA3B;AALT,KAOGZ,WAPH,EAQGR,QARH,EASGY,cATH,CA9BF,EA0CGX,MAAM,iBACL,6BAAC,QAAD;AACE,IAAA,CAAC,EAAE,CADL;AAEE,IAAA,KAAK,EAAE;AACLe,MAAAA,UAAU,EAAE,kBADP;AAELF,MAAAA,SAAS,EAAED,UAAU,GAAGE,mBAAH,GAAiBE;AAFjC;AAFT,KAOGhB,MAPH,CA3CJ,CAHF,EA0DGI,UA1DH,CADF;AA8DD,CAlFM;;;AAAMN,kB","sourcesContent":["import React from \"react\"\nimport { Clickable } from \"../Clickable\"\nimport { DROP_SHADOW } from \"../../helpers/shadow\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\n\nexport interface ModalDialogContentProps\n extends BoxProps,\n React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode\n footer?: React.ReactNode\n hasLogo?: boolean\n leftPanel?: React.ReactNode\n onClose: () => void\n rightPanel?: React.ReactNode\n title?: string\n}\n\nexport const ModalDialogContent: React.FC<ModalDialogContentProps> = ({\n children,\n footer,\n hasLogo,\n leftPanel,\n onClose,\n rightPanel,\n title,\n ...rest\n}) => {\n const {\n sentinel: topSentinel,\n isSentinelVisible: isAtTop,\n } = useSentinelVisibility()\n\n const {\n sentinel: bottomSentinel,\n isSentinelVisible: isAtBottom,\n } = useSentinelVisibility()\n\n return (\n <Flex bg=\"white100\" m={2} style={{ boxShadow: DROP_SHADOW }} {...rest}>\n {leftPanel}\n\n <Flex flexDirection=\"column\" overflow=\"hidden\" width=\"100%\">\n <Flex\n alignItems=\"flex-start\"\n justifyContent=\"space-between\"\n zIndex={1}\n style={{\n transition: \"box-shadow 250ms\",\n boxShadow: isAtTop ? DROP_SHADOW : undefined,\n }}\n >\n {(title || hasLogo) && (\n <Box m={2}>\n {hasLogo && (\n <ArtsyLogoBlackIcon\n display=\"block\"\n style={{ width: \"75px\", height: \"26px\" }}\n />\n )}\n\n {hasLogo && title && <Spacer mt={2} />}\n\n {title && <Text variant=\"lg-display\">{title}</Text>}\n </Box>\n )}\n\n <Clickable p={2} ml=\"auto\" onClick={onClose} aria-label=\"Close\">\n <CloseIcon fill=\"black100\" display=\"block\" />\n </Clickable>\n </Flex>\n\n <Box\n px={2}\n pb={2}\n flex={1}\n overflow=\"auto\"\n style={{ WebkitOverflowScrolling: \"touch\" }}\n >\n {topSentinel}\n {children}\n {bottomSentinel}\n </Box>\n\n {footer && (\n <Box\n p={2}\n style={{\n transition: \"box-shadow 250ms\",\n boxShadow: isAtBottom ? DROP_SHADOW : undefined,\n }}\n >\n {footer}\n </Box>\n )}\n </Flex>\n\n {rightPanel}\n </Flex>\n )\n}\n"],"file":"ModalDialogContent.js"}
|
|
@@ -33,6 +33,11 @@ exports.default = _default;
|
|
|
33
33
|
var Default = function Default() {
|
|
34
34
|
return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
|
|
35
35
|
states: [{
|
|
36
|
+
children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
37
|
+
variant: "sm",
|
|
38
|
+
bg: "black10"
|
|
39
|
+
}, "Content shorter than width")
|
|
40
|
+
}, {
|
|
36
41
|
children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
37
42
|
variant: "sm"
|
|
38
43
|
}, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur?")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.story.tsx"],"names":["title","Default","children","hasLogo","footer"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AACEC,MAAAA,QAAQ,eACN,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.story.tsx"],"names":["title","Default","children","hasLogo","footer"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AACEC,MAAAA,QAAQ,eACN,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC,IAAd;AAAmB,QAAA,EAAE,EAAC;AAAtB;AAFJ,KADM,EAQN;AACEA,MAAAA,QAAQ,eACN,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd;AAFJ,KARM,EAkBN;AAAEF,MAAAA,KAAK,EAAE;AAAT,KAlBM,EAmBN;AACEA,MAAAA,KAAK,EACH;AAFJ,KAnBM,EAuBN;AAAEG,MAAAA,OAAO,EAAE;AAAX,KAvBM,EAwBN;AAAEH,MAAAA,KAAK,EAAE,aAAT;AAAwBG,MAAAA,OAAO,EAAE;AAAjC,KAxBM,EAyBN;AACED,MAAAA,QAAQ,eACN,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,gPAFJ;AASEE,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AATV,KAzBM,EAoCN;AAAEJ,MAAAA,KAAK,EAAE,aAAT;AAAwBI,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAAhC,KApCM,EAqCN;AACEJ,MAAAA,KAAK,EACH,kFAFJ;AAGEI,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAHV,KArCM,EA0CN;AACEJ,MAAAA,KAAK,EACH,kFAFJ;AAGEG,MAAAA,OAAO,EAAE,IAHX;AAIEC,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAJV,KA1CM;AADV,kBAmDE,6BAAC,sCAAD;AAAoB,IAAA,OAAO,EAAE,0BAAO,SAAP,CAA7B;AAAgD,IAAA,SAAS,EAAE;AAA3D,kBACE,6BAAC,UAAD;AAAM,IAAA,SAAS,eAAE,6BAAC,cAAD;AAAQ,MAAA,EAAE,EAAE;AAAZ;AAAjB,kBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,0xBADF,eAgBE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC,iBAAnB;AAAqC,IAAA,YAAY,EAAC;AAAlD,IAhBF,eAkBE,6BAAC,YAAD;AACE,IAAA,WAAW,EAAC,kBADd;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,YAAY,EAAC;AAHf,IAlBF,eAwBE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,w5DAxBF,CADF,CAnDF,CADF;AAiHD,CAlHM;;;AAAMH,O","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport {\n ModalDialogContent,\n ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\nimport { Input } from \"../Input\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\n\nexport default {\n title: \"Components/ModalDialogContent\",\n}\n\nexport const Default = () => {\n return (\n <States<Partial<ModalDialogContentProps>>\n states={[\n {\n children: (\n <Text variant=\"sm\" bg=\"black10\">\n Content shorter than width\n </Text>\n ),\n },\n {\n children: (\n <Text variant=\"sm\">\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n asperiores iure explicabo itaque accusantium, consectetur aut sit\n maxime culpa ab aliquid consequatur?\n </Text>\n ),\n },\n { title: \"Modal Title\" },\n {\n title:\n \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n },\n { hasLogo: true },\n { title: \"Modal Title\", hasLogo: true },\n {\n children: (\n <Text variant=\"sm\">\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n asperiores iure explicabo itaque accusantium, consectetur aut sit\n maxime culpa ab aliquid consequatur?\n </Text>\n ),\n footer: <Button width=\"100%\">Confirm</Button>,\n },\n { title: \"Modal Title\", footer: <Button width=\"100%\">Confirm</Button> },\n {\n title:\n \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n footer: <Button width=\"100%\">Confirm</Button>,\n },\n {\n title:\n \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n hasLogo: true,\n footer: <Button width=\"100%\">Confirm</Button>,\n },\n ]}\n >\n <ModalDialogContent onClose={action(\"onClose\")} maxHeight={400}>\n <Join separator={<Spacer mt={1} />}>\n <Text variant=\"sm\">\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n asperiores iure explicabo itaque accusantium, consectetur aut sit\n maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet\n consectetur adipisicing elit. Quam enim vel accusamus dolor\n voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae\n nihil minima praesentium, quaerat cupiditate amet dolor similique\n corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae\n eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam\n nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur\n adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam.\n </Text>\n\n <Input placeholder=\"Enter your name\" autoComplete=\"name\" />\n\n <Input\n placeholder=\"Enter your email\"\n type=\"email\"\n autoComplete=\"email\"\n />\n\n <Text variant=\"sm\">\n Assumenda, hic eius asperiores iure explicabo itaque accusantium,\n consectetur aut sit maxime culpa ab aliquid consequatur? Lorem,\n ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel\n accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum\n asperiores quae nihil minima praesentium, quaerat cupiditate amet\n dolor similique corporis? Lorem, ipsum dolor sit amet consectetur\n adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro\n molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur\n vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit\n amet consectetur adipisicing elit. Eaque, neque voluptates!\n Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo\n itaque accusantium, consectetur aut sit maxime culpa ab aliquid\n consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing\n elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta\n blanditiis debitis rerum asperiores quae nihil minima praesentium,\n quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor\n sit amet consectetur adipisicing elit. Quibusdam, eaque placeat\n mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo\n ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore!\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n asperiores iure explicabo itaque accusantium, consectetur aut sit\n maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet\n consectetur adipisicing elit. Quam enim vel accusamus dolor\n voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae\n nihil minima praesentium, quaerat cupiditate amet dolor similique\n corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae\n eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam\n nisi voluptatem inventore!\n </Text>\n </Join>\n </ModalDialogContent>\n </States>\n )\n}\n"],"file":"ModalDialogContent.story.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "26.1.
|
|
3
|
+
"version": "26.1.1",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -176,5 +176,5 @@
|
|
|
176
176
|
"<rootDir>/www/"
|
|
177
177
|
]
|
|
178
178
|
},
|
|
179
|
-
"gitHead": "
|
|
179
|
+
"gitHead": "3d9344392750033cdf2ebf74c862a152d8949eb8"
|
|
180
180
|
}
|