@artsy/palette 18.6.1 → 18.7.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# v18.7.0 (Thu Nov 11 2021)
+
+#### 🚀  Enhancement
+
+- feat(button): improves support for icon buttons [#1071](https://github.com/artsy/palette/pull/1071) ([@dzucconi](https://github.com/dzucconi))
+
+#### 🐛  Bug Fix
+
+- fix(button): fixes alignment for icons ([@dzucconi](https://github.com/dzucconi))
+- fix(color): supports currentColor ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v18.6.1 (Thu Nov 11 2021)
 
 #### 🐛  Bug Fix

package/dist/elements/Button/Button.story.d.ts

@@ -25,3 +25,4 @@ export declare const WithBoxProps: {
 };
 export declare const Loading: () => JSX.Element;
 export declare const As: () => JSX.Element;
+export declare const WithIcon: () => JSX.Element;

package/dist/elements/Button/Button.story.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.As = exports.Loading = exports.WithBoxProps = exports.NativeButtonProps = exports.Variants = exports.Sizes = exports._States = exports.default = void 0;
+exports.WithIcon = exports.As = exports.Loading = exports.WithBoxProps = exports.NativeButtonProps = exports.Variants = exports.Sizes = exports._States = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -13,6 +13,8 @@ var _storybookStates = require("storybook-states");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _ = require("../..");
+
 var _Box = require("../Box");
 
 var _Flex = require("../Flex");
@@ -205,4 +207,30 @@ var As = function As() {
 
 exports.As = As;
 As.displayName = "As";
+
+var WithIcon = function WithIcon() {
+  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+    states: [{}, {
+      focus: true
+    }, {
+      hover: true
+    }, {
+      loading: true
+    }, {
+      disabled: true
+    }, {
+      loading: true,
+      disabled: true
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
+    variant: "secondaryOutline",
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement(_.BellIcon, {
+    fill: "currentColor",
+    mr: 0.5
+  }), "Create an Alert"));
+};
+
+exports.WithIcon = WithIcon;
+WithIcon.displayName = "WithIcon";
 //# sourceMappingURL=Button.story.js.map

package/dist/elements/Button/Button.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/Button.story.tsx"],"names":["title","_States","focus","hover","loading","disabled","story","name","Sizes","BUTTON_SIZE_NAMES","map","size","_Demo","Flex","displayName","Variants","BUTTON_VARIANT_NAMES","variant","props","NativeButtonProps","autoFocus","children","tabIndex","onClick","event","preventDefault","WithBoxProps","Loading","setLoading","handleClick","setTimeout","As","as"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { ButtonProps } from \"./Button\"\nimport { Button, BUTTON_SIZE_NAMES, BUTTON_VARIANT_NAMES } from \"./index\"\n\nexport default { title: \"Components/Button\" }\n\nexport const _States = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\n_States.story = {\n  name: \"States\",\n}\n\nexport const Sizes = () => {\n  return (\n    <States<ButtonProps> states={BUTTON_SIZE_NAMES.map((size) => ({ size }))}>\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nconst _Demo = styled(Flex)``\n_Demo.displayName = \"Button\"\n\nexport const Variants = () => {\n  return (\n    <States<ButtonProps>\n      states={BUTTON_VARIANT_NAMES.map((variant) => ({ variant }))}\n    >\n      {(props) => (\n        <_Demo>\n          <Button {...props}>Label</Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} focus>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} hover>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} loading>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} disabled>\n            Label\n          </Button>\n        </_Demo>\n      )}\n    </States>\n  )\n}\n\nexport const NativeButtonProps = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        { autoFocus: true, children: \"autofocused\" },\n        { tabIndex: -1, children: \"not focusable with keyboard\" },\n        {\n          onClick: (event) => {\n            event.preventDefault()\n          },\n          children: \"correctly typed click event\",\n        },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nNativeButtonProps.story = {\n  name: \"Native button tag props\",\n}\n\nexport const WithBoxProps = () => {\n  return (\n    <States>\n      <Box border=\"1px dotted\" borderColor=\"black100\">\n        <Button display=\"block\" width=\"100%\" my={2}>\n          full width\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          with collapsing\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          margins\n        </Button>\n      </Box>\n    </States>\n  )\n}\n\nWithBoxProps.story = {\n  name: \"with BoxProps\",\n}\n\nexport const Loading = () => {\n  const [loading, setLoading] = useState(false)\n\n  const handleClick = () => {\n    if (loading) return\n    setLoading(true)\n    setTimeout(() => {\n      setLoading(false)\n    }, 1000)\n  }\n  return (\n    <States>\n      <Button loading={loading} onClick={handleClick}>\n        click to load\n      </Button>\n    </States>\n  )\n}\n\nexport const As = () => {\n  return (\n    <States states={[{}, { as: \"div\", children: \"This is a div\" }]}>\n      {/* @ts-ignore */}\n      <Button as=\"a\" href=\"#example\">\n        This is an anchor tag with an href\n      </Button>\n    </States>\n  )\n}\n"],"file":"Button.story.js"}
+{"version":3,"sources":["../../../src/elements/Button/Button.story.tsx"],"names":["title","_States","focus","hover","loading","disabled","story","name","Sizes","BUTTON_SIZE_NAMES","map","size","_Demo","Flex","displayName","Variants","BUTTON_VARIANT_NAMES","variant","props","NativeButtonProps","autoFocus","children","tabIndex","onClick","event","preventDefault","WithBoxProps","Loading","setLoading","handleClick","setTimeout","As","as","WithIcon"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { BellIcon } from \"../..\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { ButtonProps } from \"./Button\"\nimport { Button, BUTTON_SIZE_NAMES, BUTTON_VARIANT_NAMES } from \"./index\"\n\nexport default { title: \"Components/Button\" }\n\nexport const _States = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\n_States.story = {\n  name: \"States\",\n}\n\nexport const Sizes = () => {\n  return (\n    <States<ButtonProps> states={BUTTON_SIZE_NAMES.map((size) => ({ size }))}>\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nconst _Demo = styled(Flex)``\n_Demo.displayName = \"Button\"\n\nexport const Variants = () => {\n  return (\n    <States<ButtonProps>\n      states={BUTTON_VARIANT_NAMES.map((variant) => ({ variant }))}\n    >\n      {(props) => (\n        <_Demo>\n          <Button {...props}>Label</Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} focus>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} hover>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} loading>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} disabled>\n            Label\n          </Button>\n        </_Demo>\n      )}\n    </States>\n  )\n}\n\nexport const NativeButtonProps = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        { autoFocus: true, children: \"autofocused\" },\n        { tabIndex: -1, children: \"not focusable with keyboard\" },\n        {\n          onClick: (event) => {\n            event.preventDefault()\n          },\n          children: \"correctly typed click event\",\n        },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nNativeButtonProps.story = {\n  name: \"Native button tag props\",\n}\n\nexport const WithBoxProps = () => {\n  return (\n    <States>\n      <Box border=\"1px dotted\" borderColor=\"black100\">\n        <Button display=\"block\" width=\"100%\" my={2}>\n          full width\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          with collapsing\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          margins\n        </Button>\n      </Box>\n    </States>\n  )\n}\n\nWithBoxProps.story = {\n  name: \"with BoxProps\",\n}\n\nexport const Loading = () => {\n  const [loading, setLoading] = useState(false)\n\n  const handleClick = () => {\n    if (loading) return\n    setLoading(true)\n    setTimeout(() => {\n      setLoading(false)\n    }, 1000)\n  }\n  return (\n    <States>\n      <Button loading={loading} onClick={handleClick}>\n        click to load\n      </Button>\n    </States>\n  )\n}\n\nexport const As = () => {\n  return (\n    <States states={[{}, { as: \"div\", children: \"This is a div\" }]}>\n      {/* @ts-ignore */}\n      <Button as=\"a\" href=\"#example\">\n        This is an anchor tag with an href\n      </Button>\n    </States>\n  )\n}\n\nexport const WithIcon = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button variant=\"secondaryOutline\" size=\"small\">\n        <BellIcon fill=\"currentColor\" mr={0.5} />\n        Create an Alert\n      </Button>\n    </States>\n  )\n}\n"],"file":"Button.story.js"}

package/dist/elements/Button/v3/Button.js

@@ -70,11 +70,15 @@ var ButtonV3 = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedR
   }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
     lineHeight: 1,
     variant: _tokens.BUTTON_TEXT_SIZES[size],
-    opacity: loading ? 0 : 1
+    opacity: loading ? 0 : 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
   }, children));
 });
 
 exports.ButtonV3 = ButtonV3;
+ButtonV3.displayName = "Button";
 ButtonV3.defaultProps = {
   size: "medium",
   variant: "primaryBlack"

package/dist/elements/Button/v3/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Button/v3/Button.tsx"],"names":["ButtonV3","React","forwardRef","forwardedRef","children","loading","color","size","onClick","rest","ref","handleClick","event","current","blur","BUTTON_TEXT_SIZES","defaultProps","variant","Container","styled","button","boxMixin","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","focus","css","disabled","default","THEME_V3","mediaQueries"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { THEME_V3 } from \"../../../themes\"\nimport { boxMixin } from \"../../Box\"\nimport { Spinner } from \"../../Spinner\"\nimport { Text } from \"../../Text\"\nimport { ButtonProps } from \"../Button\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\n\nexport const ButtonV3: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  ({ children, loading, color, size, onClick, ...rest }, forwardedRef) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current!.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        loading={loading}\n        tabIndex={loading ? -1 : 0}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={BUTTON_TEXT_SIZES[size!]}\n          opacity={loading ? 0 : 1}\n        >\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButtonV3.defaultProps = {\n  size: \"medium\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"size\" | \"inline\" | \"loading\" | \"hover\" | \"focus\" | \"disabled\"\n>\n\nconst Container = styled.button<ContainerProps>`\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-decoration: none;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  border: 1px solid;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${boxMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME_V3.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n`\n"],"file":"Button.js"}
+{"version":3,"sources":["../../../../src/elements/Button/v3/Button.tsx"],"names":["ButtonV3","React","forwardRef","forwardedRef","children","loading","color","size","onClick","rest","ref","handleClick","event","current","blur","BUTTON_TEXT_SIZES","displayName","defaultProps","variant","Container","styled","button","boxMixin","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","focus","css","disabled","default","THEME_V3","mediaQueries"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { THEME_V3 } from \"../../../themes\"\nimport { boxMixin } from \"../../Box\"\nimport { Spinner } from \"../../Spinner\"\nimport { Text } from \"../../Text\"\nimport { ButtonProps } from \"../Button\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\n\nexport const ButtonV3: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  ({ children, loading, color, size, onClick, ...rest }, forwardedRef) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current!.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        loading={loading}\n        tabIndex={loading ? -1 : 0}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={BUTTON_TEXT_SIZES[size!]}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n        >\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButtonV3.displayName = \"Button\"\n\nButtonV3.defaultProps = {\n  size: \"medium\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"size\" | \"inline\" | \"loading\" | \"hover\" | \"focus\" | \"disabled\"\n>\n\nconst Container = styled.button<ContainerProps>`\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-decoration: none;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  border: 1px solid;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${boxMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME_V3.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n`\n"],"file":"Button.js"}

package/dist/helpers/color.d.ts

@@ -5,4 +5,4 @@ import { Color } from "../Theme";
  *
  * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`
  */
-export declare const color: (colorKey: Color) => string;
+export declare const color: (colorKey: Color | "currentColor") => any;

package/dist/helpers/color.js

@@ -14,7 +14,9 @@ var _Theme = require("../Theme");
  * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`
  */
 var color = function color(colorKey) {
-  return _Theme.themeProps.colors[colorKey];
+  var _themeProps$colors$co;
+
+  return (_themeProps$colors$co = _Theme.themeProps.colors[colorKey]) !== null && _themeProps$colors$co !== void 0 ? _themeProps$colors$co : colorKey;
 };
 
 exports.color = color;

package/dist/helpers/color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/helpers/color.ts"],"names":["color","colorKey","themeProps","colors"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAQ,CAACC,QAAD;AAAA,SAAqBC,kBAAWC,MAAX,CAAkBF,QAAlB,CAArB;AAAA,CAAd","sourcesContent":["import { Color, themeProps } from \"../Theme\"\n\n/**\n * A helper to easily access colors when not in a styled-components or\n * styled-systems context.\n *\n * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`\n */\nexport const color = (colorKey: Color) => themeProps.colors[colorKey]\n"],"file":"color.js"}
+{"version":3,"sources":["../../src/helpers/color.ts"],"names":["color","colorKey","themeProps","colors"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAQ,CAACC,QAAD;AAAA;;AAAA,kCACnBC,kBAAWC,MAAX,CAAkBF,QAAlB,CADmB,yEACYA,QADZ;AAAA,CAAd","sourcesContent":["import { Color, themeProps } from \"../Theme\"\n\n/**\n * A helper to easily access colors when not in a styled-components or\n * styled-systems context.\n *\n * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`\n */\nexport const color = (colorKey: Color | \"currentColor\") =>\n  themeProps.colors[colorKey] ?? colorKey\n"],"file":"color.js"}

package/dist/svgs/Icon.d.ts

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import { PositionProps, SpaceProps } from "styled-system";
 import { Color } from "../Theme";
 export interface IconProps extends React.SVGProps<any>, SpaceProps, PositionProps {
-    fill?: Color;
+    fill?: Color | "currentColor";
     title?: string;
 }
 /** Wrapper for icons to include space */

package/dist/svgs/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/svgs/Icon.tsx"],"names":["iconMixin","space","position","Icon","styled","svg","defaultProps","fill","height","width","Path","props","Title","G","Circle","Rect"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAiBA,IAAMA,SAAS,GAAG,2BAAQC,mBAAR,EAAeC,sBAAf,CAAlB;AAEA;;AACO,IAAMC,IAAI,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,+BAEbL,SAFa,CAAV;;;AAKPG,IAAI,CAACG,YAAL,GAAoB;AAClBC,EAAAA,IAAI,EAAE,UADY;AAElBC,EAAAA,MAAM,EAAE,MAFU;AAGlBC,EAAAA,KAAK,EAAE;AAHW,CAApB;AAKA;;AACO,IAAMC,IAAuC,GAAG,SAA1CA,IAA0C,OAAkB;AAAA,MAAZC,KAAY;;AACvE,sBAAO,qCAAUA,KAAV,CAAP;AACD,CAFM;;;AAAMD,I;;AAIb;AACO,IAAME,KAAyC,GAAG,SAA5CA,KAA4C,QAAkB;AAAA,MAAZD,KAAY;;AACzE,sBAAO,sCAAWA,KAAX,CAAP;AACD,CAFM;;;AAAMC,K;;AAIb;AACO,IAAMC,CAAiC,GAAG,SAApCA,CAAoC,QAAkB;AAAA,MAAZF,KAAY;;AACjE,sBAAO,kCAAOA,KAAP,CAAP;AACD,CAFM;;;AAAME,C;;AAIb;AACO,IAAMC,MAA2C,GAAG,SAA9CA,MAA8C,QAAkB;AAAA,MAAZH,KAAY;;AAC3E,sBAAO,uCAAYA,KAAZ,CAAP;AACD,CAFM;;;AAAMG,M;;AAIb;AACO,IAAMC,IAAuC,GAAG,SAA1CA,IAA0C,QAAkB;AAAA,MAAZJ,KAAY;;AACvE,sBAAO,qCAAUA,KAAV,CAAP;AACD,CAFM;;;AAAMI,I","sourcesContent":["import React, { FC } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  compose,\n  position,\n  PositionProps,\n  space,\n  SpaceProps,\n} from \"styled-system\"\nimport { Color } from \"../Theme\"\n\nexport interface IconProps\n  extends React.SVGProps<any>,\n    SpaceProps,\n    PositionProps {\n  fill?: Color\n  title?: string\n}\n\nconst iconMixin = compose(space, position)\n\n/** Wrapper for icons to include space */\nexport const Icon = styled.svg<IconProps>`\n  position: relative;\n  ${iconMixin}\n`\n\nIcon.defaultProps = {\n  fill: \"black100\",\n  height: \"18px\",\n  width: \"18px\",\n}\n/** Compatibility component used to normalize paths between react dom and react native */\nexport const Path: FC<JSX.IntrinsicElements[\"path\"]> = ({ ...props }) => {\n  return <path {...props} />\n}\n\n/** Compatibility component used to normalize titles between react dom and react native */\nexport const Title: FC<JSX.IntrinsicElements[\"title\"]> = ({ ...props }) => {\n  return <title {...props} />\n}\n\n/** Compatibility component used to normalize svg groups between react dom and react native */\nexport const G: FC<JSX.IntrinsicElements[\"g\"]> = ({ ...props }) => {\n  return <g {...props} />\n}\n\n/** Compatibility component used to normalize svg circles between react dom and react native */\nexport const Circle: FC<JSX.IntrinsicElements[\"circle\"]> = ({ ...props }) => {\n  return <circle {...props} />\n}\n\n/** Compatibility component used to normalize svg rects between react dom and react native */\nexport const Rect: FC<JSX.IntrinsicElements[\"rect\"]> = ({ ...props }) => {\n  return <rect {...props} />\n}\n"],"file":"Icon.js"}
+{"version":3,"sources":["../../src/svgs/Icon.tsx"],"names":["iconMixin","space","position","Icon","styled","svg","defaultProps","fill","height","width","Path","props","Title","G","Circle","Rect"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAiBA,IAAMA,SAAS,GAAG,2BAAQC,mBAAR,EAAeC,sBAAf,CAAlB;AAEA;;AACO,IAAMC,IAAI,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,+BAEbL,SAFa,CAAV;;;AAKPG,IAAI,CAACG,YAAL,GAAoB;AAClBC,EAAAA,IAAI,EAAE,UADY;AAElBC,EAAAA,MAAM,EAAE,MAFU;AAGlBC,EAAAA,KAAK,EAAE;AAHW,CAApB;AAKA;;AACO,IAAMC,IAAuC,GAAG,SAA1CA,IAA0C,OAAkB;AAAA,MAAZC,KAAY;;AACvE,sBAAO,qCAAUA,KAAV,CAAP;AACD,CAFM;;;AAAMD,I;;AAIb;AACO,IAAME,KAAyC,GAAG,SAA5CA,KAA4C,QAAkB;AAAA,MAAZD,KAAY;;AACzE,sBAAO,sCAAWA,KAAX,CAAP;AACD,CAFM;;;AAAMC,K;;AAIb;AACO,IAAMC,CAAiC,GAAG,SAApCA,CAAoC,QAAkB;AAAA,MAAZF,KAAY;;AACjE,sBAAO,kCAAOA,KAAP,CAAP;AACD,CAFM;;;AAAME,C;;AAIb;AACO,IAAMC,MAA2C,GAAG,SAA9CA,MAA8C,QAAkB;AAAA,MAAZH,KAAY;;AAC3E,sBAAO,uCAAYA,KAAZ,CAAP;AACD,CAFM;;;AAAMG,M;;AAIb;AACO,IAAMC,IAAuC,GAAG,SAA1CA,IAA0C,QAAkB;AAAA,MAAZJ,KAAY;;AACvE,sBAAO,qCAAUA,KAAV,CAAP;AACD,CAFM;;;AAAMI,I","sourcesContent":["import React, { FC } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  compose,\n  position,\n  PositionProps,\n  space,\n  SpaceProps,\n} from \"styled-system\"\nimport { Color } from \"../Theme\"\n\nexport interface IconProps\n  extends React.SVGProps<any>,\n    SpaceProps,\n    PositionProps {\n  fill?: Color | \"currentColor\"\n  title?: string\n}\n\nconst iconMixin = compose(space, position)\n\n/** Wrapper for icons to include space */\nexport const Icon = styled.svg<IconProps>`\n  position: relative;\n  ${iconMixin}\n`\n\nIcon.defaultProps = {\n  fill: \"black100\",\n  height: \"18px\",\n  width: \"18px\",\n}\n/** Compatibility component used to normalize paths between react dom and react native */\nexport const Path: FC<JSX.IntrinsicElements[\"path\"]> = ({ ...props }) => {\n  return <path {...props} />\n}\n\n/** Compatibility component used to normalize titles between react dom and react native */\nexport const Title: FC<JSX.IntrinsicElements[\"title\"]> = ({ ...props }) => {\n  return <title {...props} />\n}\n\n/** Compatibility component used to normalize svg groups between react dom and react native */\nexport const G: FC<JSX.IntrinsicElements[\"g\"]> = ({ ...props }) => {\n  return <g {...props} />\n}\n\n/** Compatibility component used to normalize svg circles between react dom and react native */\nexport const Circle: FC<JSX.IntrinsicElements[\"circle\"]> = ({ ...props }) => {\n  return <circle {...props} />\n}\n\n/** Compatibility component used to normalize svg rects between react dom and react native */\nexport const Rect: FC<JSX.IntrinsicElements[\"rect\"]> = ({ ...props }) => {\n  return <rect {...props} />\n}\n"],"file":"Icon.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "18.6.1",
+  "version": "18.7.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -175,5 +175,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "159fc5907eb42e45bb9b42c6a851220b01d672fd"
+  "gitHead": "66385b473665b7e92a4bde7233c94eb462d13595"
 }