@artsy/palette 36.3.1 → 36.3.2

package/dist/elements/Button/Button.js

@@ -71,10 +71,12 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedRef
   }, !success && Icon && /*#__PURE__*/_react.default.createElement(Icon, {
     fill: "currentColor",
     mr: 0.5,
+    ml: -0.5,
     "aria-hidden": "true"
   }), success && /*#__PURE__*/_react.default.createElement(_CheckmarkIcon.default, {
     fill: "currentColor",
     mr: 0.5,
+    ml: -0.5,
     "aria-hidden": "true"
   }), children));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["_composeReactRefs","_interopRequireDefault","require","_react","_interopRequireWildcard","_styledComponents","_styledSystem","_CheckmarkIcon","_themes","_Box","_Spinner","_Text","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Button","React","forwardRef","_ref","forwardedRef","children","loading","success","_ref$size","size","onClick","_ref$alignItems","alignItems","_ref$justifyContent","justifyContent","Icon","rest","ref","useRef","handleClick","event","useEffect","current","_ref$current","blur","createElement","Container","composeRefs","tabIndex","display","Spinner","color","Text","lineHeight","variant","getTextVariant","opacity","width","fill","mr","exports","displayName","defaultProps","buttonMixin","css","styled","button","withConfig","componentId","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","active","focus","disabled","THEME","mediaQueries","boxMixin","BUTTON_TEXT_SIZES","Array","isArray","map","s","large"],"sources":["../../../src/elements/Button/Button.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { THEME } from \"../../themes\"\nimport { boxMixin, BoxProps } from \"../Box\"\nimport { Spinner } from \"../Spinner\"\nimport { Text, TextProps } from \"../Text\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\nimport { ButtonSize, ButtonVariant } from \"./types\"\n\nexport interface ButtonProps\n  extends BoxProps,\n    React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * @description\n   * The theme of the button. It's possible to pass an array that\n   * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n   * @example\n   * \"primaryBlack\"\n   * \"primaryWhite\"\n   * [\"primaryGray\", \"secondaryBlack\"]\n   * @see {@link ButtonVariant}\n   */\n  variant?: ResponsiveValue<ButtonVariant>\n  /** Size of the button */\n  size?: ResponsiveValue<ButtonSize>\n  /** Displays a loader in the button */\n  loading?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces active state */\n  active?: boolean\n  /** Forces success state */\n  success?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<BoxProps & { fill?: ResponsiveValue<string> }>\n}\n\nexport const Button: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\n      Icon,\n      ...rest\n    },\n    forwardedRef\n  ) => {\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        success={success}\n        tabIndex={loading ? -1 : 0}\n        display=\"inline-flex\"\n        alignItems={alignItems}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={getTextVariant(size)}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems={alignItems}\n          justifyContent={justifyContent}\n          width=\"100%\"\n        >\n          {!success && Icon && (\n            <Icon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckmarkIcon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\nButton.defaultProps = {\n  size: \"large\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"loading\" | \"size\" | \"success\"\n>\n\nexport const buttonMixin = css`\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n  border: 1px solid;\n  text-decoration: none;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n`\n\nconst Container = styled.button<ContainerProps & ButtonProps>`\n  ${buttonMixin};\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.active) {\n      return variant({ variants: BUTTON_VARIANTS.active })\n    }\n\n    if (props.success) {\n      return variant({ variants: BUTTON_VARIANTS.success })\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.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      &:active {\n        ${variant({ variants: BUTTON_VARIANTS.active })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n\n  ${boxMixin};\n`\n\nconst getTextVariant = (\n  size: ResponsiveValue<ButtonSize>\n): TextProps[\"variant\"] => {\n  if (typeof size === \"string\") {\n    return BUTTON_TEXT_SIZES[size]\n  }\n\n  if (Array.isArray(size)) {\n    return size.map((s) => BUTTON_TEXT_SIZES[s!] as TextVariant)\n  }\n\n  return BUTTON_TEXT_SIZES.large\n}\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["_composeReactRefs","_interopRequireDefault","require","_react","_interopRequireWildcard","_styledComponents","_styledSystem","_CheckmarkIcon","_themes","_Box","_Spinner","_Text","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Button","React","forwardRef","_ref","forwardedRef","children","loading","success","_ref$size","size","onClick","_ref$alignItems","alignItems","_ref$justifyContent","justifyContent","Icon","rest","ref","useRef","handleClick","event","useEffect","current","_ref$current","blur","createElement","Container","composeRefs","tabIndex","display","Spinner","color","Text","lineHeight","variant","getTextVariant","opacity","width","fill","mr","ml","exports","displayName","defaultProps","buttonMixin","css","styled","button","withConfig","componentId","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","active","focus","disabled","THEME","mediaQueries","boxMixin","BUTTON_TEXT_SIZES","Array","isArray","map","s","large"],"sources":["../../../src/elements/Button/Button.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { THEME } from \"../../themes\"\nimport { boxMixin, BoxProps } from \"../Box\"\nimport { Spinner } from \"../Spinner\"\nimport { Text, TextProps } from \"../Text\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\nimport { ButtonSize, ButtonVariant } from \"./types\"\n\nexport interface ButtonProps\n  extends BoxProps,\n    React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * @description\n   * The theme of the button. It's possible to pass an array that\n   * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n   * @example\n   * \"primaryBlack\"\n   * \"primaryWhite\"\n   * [\"primaryGray\", \"secondaryBlack\"]\n   * @see {@link ButtonVariant}\n   */\n  variant?: ResponsiveValue<ButtonVariant>\n  /** Size of the button */\n  size?: ResponsiveValue<ButtonSize>\n  /** Displays a loader in the button */\n  loading?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces active state */\n  active?: boolean\n  /** Forces success state */\n  success?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<BoxProps & { fill?: ResponsiveValue<string> }>\n}\n\nexport const Button: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\n      Icon,\n      ...rest\n    },\n    forwardedRef\n  ) => {\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        success={success}\n        tabIndex={loading ? -1 : 0}\n        display=\"inline-flex\"\n        alignItems={alignItems}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={getTextVariant(size)}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems={alignItems}\n          justifyContent={justifyContent}\n          width=\"100%\"\n        >\n          {!success && Icon && (\n            <Icon fill=\"currentColor\" mr={0.5} ml={-0.5} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckmarkIcon\n              fill=\"currentColor\"\n              mr={0.5}\n              ml={-0.5}\n              aria-hidden=\"true\"\n            />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\nButton.defaultProps = {\n  size: \"large\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"loading\" | \"size\" | \"success\"\n>\n\nexport const buttonMixin = css`\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n  border: 1px solid;\n  text-decoration: none;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n`\n\nconst Container = styled.button<ContainerProps & ButtonProps>`\n  ${buttonMixin};\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.active) {\n      return variant({ variants: BUTTON_VARIANTS.active })\n    }\n\n    if (props.success) {\n      return variant({ variants: BUTTON_VARIANTS.success })\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.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      &:active {\n        ${variant({ variants: BUTTON_VARIANTS.active })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n\n  ${boxMixin};\n`\n\nconst getTextVariant = (\n  size: ResponsiveValue<ButtonSize>\n): TextProps[\"variant\"] => {\n  if (typeof size === \"string\") {\n    return BUTTON_TEXT_SIZES[size]\n  }\n\n  if (Array.isArray(size)) {\n    return size.map((s) => BUTTON_TEXT_SIZES[s!] as TextVariant)\n  }\n\n  return BUTTON_TEXT_SIZES.large\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "36.3.1",
+  "version": "36.3.2",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -182,5 +182,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "10b3223699b0057a4b48b4b215ccd057e7778e5e"
+  "gitHead": "fce53cd1b97825713c4d02ce8f58d22b9014a726"
 }