@artsy/palette 18.7.3 → 18.7.4

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,3 +1,16 @@
1
+ # v18.7.4 (Wed Nov 24 2021)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - fix(clickable): resets margin for safari [#1078](https://github.com/artsy/palette/pull/1078) ([@dzucconi](https://github.com/dzucconi))
6
+ - fix(clickable): resets margin for safari ([@dzucconi](https://github.com/dzucconi))
7
+
8
+ #### Authors: 1
9
+
10
+ - Damon ([@dzucconi](https://github.com/dzucconi))
11
+
12
+ ---
13
+
1
14
  # v18.7.3 (Wed Nov 24 2021)
2
15
 
3
16
  #### 🐛 Bug Fix
@@ -28,7 +28,7 @@ var textDecoration = (0, _styledSystem.system)({
28
28
  var Clickable = _styledComponents.default.button.withConfig({
29
29
  displayName: "Clickable",
30
30
  componentId: "sc-10cr82y-0"
31
- })(["appearance:none;padding:0;border:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;", " &:disabled{cursor:default;}"], (0, _styledSystem.compose)(_Box.boxMixin, cursor, textDecoration));
31
+ })(["appearance:none;padding:0;border:0;margin:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;", " &:disabled{cursor:default;}"], (0, _styledSystem.compose)(_Box.boxMixin, cursor, textDecoration));
32
32
 
33
33
  exports.Clickable = Clickable;
34
34
  Clickable.defaultProps = {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/elements/Clickable/Clickable.tsx"],"names":["cursor","textDecoration","Clickable","styled","button","boxMixin","defaultProps","type"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,0BAAO;AAAEA,EAAAA,MAAM,EAAE;AAAV,CAAP,CAAf;AACA,IAAMC,cAAc,GAAG,0BAAO;AAAEA,EAAAA,cAAc,EAAE;AAAlB,CAAP,CAAvB;AAEA;;AAOA;AACA;AACA;AACA;AACO,IAAMC,SAAS,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,uJASlB,2BAAQC,aAAR,EAAkBL,MAAlB,EAA0BC,cAA1B,CATkB,CAAf;;;AAgBPC,SAAS,CAACI,YAAV,GAAyB;AACvBN,EAAAA,MAAM,EAAE,SADe;AAEvBO,EAAAA,IAAI,EAAE;AAFiB,CAAzB","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst cursor = system({ cursor: true })\nconst textDecoration = system({ textDecoration: true })\n\n/** ClickableProps */\nexport type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n BoxProps & {\n cursor?: ResponsiveValue<string>\n textDecoration?: ResponsiveValue<string>\n }\n\n/**\n * Clickable is a utility component useful for wrapping things like <div>s\n * without having to deal with the requirements to make the <div> accessible.\n */\nexport const Clickable = styled.button<ClickableProps>`\n appearance: none;\n padding: 0;\n border: 0;\n background-color: transparent;\n color: inherit;\n font: inherit;\n text-align: inherit;\n\n ${compose(boxMixin, cursor, textDecoration)}\n\n &:disabled {\n cursor: default;\n }\n`\n\nClickable.defaultProps = {\n cursor: \"pointer\",\n type: \"button\",\n}\n"],"file":"Clickable.js"}
1
+ {"version":3,"sources":["../../../src/elements/Clickable/Clickable.tsx"],"names":["cursor","textDecoration","Clickable","styled","button","boxMixin","defaultProps","type"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,0BAAO;AAAEA,EAAAA,MAAM,EAAE;AAAV,CAAP,CAAf;AACA,IAAMC,cAAc,GAAG,0BAAO;AAAEA,EAAAA,cAAc,EAAE;AAAlB,CAAP,CAAvB;AAEA;;AAOA;AACA;AACA;AACA;AACO,IAAMC,SAAS,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,gKAUlB,2BAAQC,aAAR,EAAkBL,MAAlB,EAA0BC,cAA1B,CAVkB,CAAf;;;AAiBPC,SAAS,CAACI,YAAV,GAAyB;AACvBN,EAAAA,MAAM,EAAE,SADe;AAEvBO,EAAAA,IAAI,EAAE;AAFiB,CAAzB","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst cursor = system({ cursor: true })\nconst textDecoration = system({ textDecoration: true })\n\n/** ClickableProps */\nexport type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n BoxProps & {\n cursor?: ResponsiveValue<string>\n textDecoration?: ResponsiveValue<string>\n }\n\n/**\n * Clickable is a utility component useful for wrapping things like <div>s\n * without having to deal with the requirements to make the <div> accessible.\n */\nexport const Clickable = styled.button<ClickableProps>`\n appearance: none;\n padding: 0;\n border: 0;\n margin: 0;\n background-color: transparent;\n color: inherit;\n font: inherit;\n text-align: inherit;\n\n ${compose(boxMixin, cursor, textDecoration)}\n\n &:disabled {\n cursor: default;\n }\n`\n\nClickable.defaultProps = {\n cursor: \"pointer\",\n type: \"button\",\n}\n"],"file":"Clickable.js"}
@@ -46,6 +46,11 @@ var Default = function Default() {
46
46
  cursor: "default"
47
47
  }, {
48
48
  children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Inherits the page\u2019s", /*#__PURE__*/_react.default.createElement("br", null), "text alignment.")
49
+ }, {
50
+ bg: "red100",
51
+ color: "white100",
52
+ m: 2,
53
+ p: 1
49
54
  }]
50
55
  }, /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
51
56
  onClick: (0, _addonActions.action)("onClick")
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/elements/Clickable/Clickable.story.tsx"],"names":["title","Default","textDecoration","cursor","children","Submit","isSubmitted","setSubmitted","e","preventDefault","setTimeout","story","name"],"mappings":";;;;;;;;;AAAA;;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,EADM,EAEN;AAAEC,MAAAA,cAAc,EAAE;AAAlB,KAFM,EAGN;AAAEC,MAAAA,MAAM,EAAE;AAAV,KAHM,EAIN;AACEC,MAAAA,QAAQ,eACN,qGAEE,wCAFF;AAFJ,KAJM;AADV,kBAgBE,6BAAC,oBAAD;AAAW,IAAA,OAAO,EAAE,0BAAO,SAAP;AAApB,iBAhBF,CADF;AAoBD,CArBM;;;AAAMH,O;;AAuBN,IAAMI,MAAM,GAAG,SAATA,MAAS,GAAM;AAAA,kBACU,qBAAS,KAAT,CADV;AAAA;AAAA,MACnBC,WADmB;AAAA,MACNC,YADM;;AAG1B,sBACE;AACE,IAAA,QAAQ,EAAE,kBAACC,CAAD,EAAO;AACfA,MAAAA,CAAC,CAACC,cAAF;AACAF,MAAAA,YAAY,CAAC,IAAD,CAAZ;AAEAG,MAAAA,UAAU,CAAC,YAAM;AACfH,QAAAA,YAAY,CAAC,KAAD,CAAZ;AACD,OAFS,EAEP,IAFO,CAAV;AAGD;AARH,kBAUE,yDAAiBD,WAAW,GAAG,KAAH,GAAW,IAAvC,CAVF,eAYE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAE;AAAT,kBACE,6BAAC,oBAAD;AAAW,IAAA,MAAM,EAAC,WAAlB;AAA8B,IAAA,CAAC,EAAE,CAAjC;AAAoC,IAAA,IAAI,EAAC,QAAzC;AAAkD,IAAA,EAAE,EAAE;AAAtD,uBADF,eAKE,6BAAC,oBAAD;AAAW,IAAA,MAAM,EAAC,WAAlB;AAA8B,IAAA,CAAC,EAAE,CAAjC;AAAoC,IAAA,IAAI,EAAC;AAAzC,uBALF,CAZF,CADF;AAwBD,CA3BM;;;AAAMD,M;AA6BbA,MAAM,CAACM,KAAP,GAAe;AACbC,EAAAA,IAAI,EAAE;AADO,CAAf","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Clickable, ClickableProps } from \"./Clickable\"\n\nexport default {\n title: \"Components/Clickable\",\n}\n\nexport const Default = () => {\n return (\n <States<ClickableProps>\n states={[\n {},\n { textDecoration: \"underline\" },\n { cursor: \"default\" },\n {\n children: (\n <>\n Inherits the page’s\n <br />\n text alignment.\n </>\n ),\n },\n ]}\n >\n <Clickable onClick={action(\"onClick\")}>Clickable</Clickable>\n </States>\n )\n}\n\nexport const Submit = () => {\n const [isSubmitted, setSubmitted] = useState(false)\n\n return (\n <form\n onSubmit={(e) => {\n e.preventDefault()\n setSubmitted(true)\n\n setTimeout(() => {\n setSubmitted(false)\n }, 1000)\n }}\n >\n <pre>submitted? {isSubmitted ? \"yes\" : \"no\"}</pre>\n\n <Box mt={1}>\n <Clickable border=\"1px solid\" p={2} type=\"button\" mr={1}>\n type=\"button\"\n </Clickable>\n\n <Clickable border=\"1px solid\" p={2} type=\"submit\">\n type=\"submit\"\n </Clickable>\n </Box>\n </form>\n )\n}\n\nSubmit.story = {\n name: \"Does not submit forms by default\",\n}\n"],"file":"Clickable.story.js"}
1
+ {"version":3,"sources":["../../../src/elements/Clickable/Clickable.story.tsx"],"names":["title","Default","textDecoration","cursor","children","bg","color","m","p","Submit","isSubmitted","setSubmitted","e","preventDefault","setTimeout","story","name"],"mappings":";;;;;;;;;AAAA;;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,EADM,EAEN;AAAEC,MAAAA,cAAc,EAAE;AAAlB,KAFM,EAGN;AAAEC,MAAAA,MAAM,EAAE;AAAV,KAHM,EAIN;AACEC,MAAAA,QAAQ,eACN,qGAEE,wCAFF;AAFJ,KAJM,EAaN;AACEC,MAAAA,EAAE,EAAE,QADN;AAEEC,MAAAA,KAAK,EAAE,UAFT;AAGEC,MAAAA,CAAC,EAAE,CAHL;AAIEC,MAAAA,CAAC,EAAE;AAJL,KAbM;AADV,kBAsBE,6BAAC,oBAAD;AAAW,IAAA,OAAO,EAAE,0BAAO,SAAP;AAApB,iBAtBF,CADF;AA0BD,CA3BM;;;AAAMP,O;;AA6BN,IAAMQ,MAAM,GAAG,SAATA,MAAS,GAAM;AAAA,kBACU,qBAAS,KAAT,CADV;AAAA;AAAA,MACnBC,WADmB;AAAA,MACNC,YADM;;AAG1B,sBACE;AACE,IAAA,QAAQ,EAAE,kBAACC,CAAD,EAAO;AACfA,MAAAA,CAAC,CAACC,cAAF;AACAF,MAAAA,YAAY,CAAC,IAAD,CAAZ;AAEAG,MAAAA,UAAU,CAAC,YAAM;AACfH,QAAAA,YAAY,CAAC,KAAD,CAAZ;AACD,OAFS,EAEP,IAFO,CAAV;AAGD;AARH,kBAUE,yDAAiBD,WAAW,GAAG,KAAH,GAAW,IAAvC,CAVF,eAYE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAE;AAAT,kBACE,6BAAC,oBAAD;AAAW,IAAA,MAAM,EAAC,WAAlB;AAA8B,IAAA,CAAC,EAAE,CAAjC;AAAoC,IAAA,IAAI,EAAC,QAAzC;AAAkD,IAAA,EAAE,EAAE;AAAtD,uBADF,eAKE,6BAAC,oBAAD;AAAW,IAAA,MAAM,EAAC,WAAlB;AAA8B,IAAA,CAAC,EAAE,CAAjC;AAAoC,IAAA,IAAI,EAAC;AAAzC,uBALF,CAZF,CADF;AAwBD,CA3BM;;;AAAMD,M;AA6BbA,MAAM,CAACM,KAAP,GAAe;AACbC,EAAAA,IAAI,EAAE;AADO,CAAf","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Clickable, ClickableProps } from \"./Clickable\"\n\nexport default {\n title: \"Components/Clickable\",\n}\n\nexport const Default = () => {\n return (\n <States<ClickableProps>\n states={[\n {},\n { textDecoration: \"underline\" },\n { cursor: \"default\" },\n {\n children: (\n <>\n Inherits the page’s\n <br />\n text alignment.\n </>\n ),\n },\n {\n bg: \"red100\",\n color: \"white100\",\n m: 2,\n p: 1,\n },\n ]}\n >\n <Clickable onClick={action(\"onClick\")}>Clickable</Clickable>\n </States>\n )\n}\n\nexport const Submit = () => {\n const [isSubmitted, setSubmitted] = useState(false)\n\n return (\n <form\n onSubmit={(e) => {\n e.preventDefault()\n setSubmitted(true)\n\n setTimeout(() => {\n setSubmitted(false)\n }, 1000)\n }}\n >\n <pre>submitted? {isSubmitted ? \"yes\" : \"no\"}</pre>\n\n <Box mt={1}>\n <Clickable border=\"1px solid\" p={2} type=\"button\" mr={1}>\n type=\"button\"\n </Clickable>\n\n <Clickable border=\"1px solid\" p={2} type=\"submit\">\n type=\"submit\"\n </Clickable>\n </Box>\n </form>\n )\n}\n\nSubmit.story = {\n name: \"Does not submit forms by default\",\n}\n"],"file":"Clickable.story.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette",
3
- "version": "18.7.3",
3
+ "version": "18.7.4",
4
4
  "description": "Design system library for react components",
5
5
  "main": "dist/index.js",
6
6
  "publishConfig": {
@@ -174,5 +174,5 @@
174
174
  "<rootDir>/www/"
175
175
  ]
176
176
  },
177
- "gitHead": "48865709ecf5fe9fd5853a603d612ba63c92faf5"
177
+ "gitHead": "1e1f87f0c407adf58f5e663e5cc5b380ca9f4b6c"
178
178
  }