@semcore/button 16.0.0-prerelease.2 → 16.0.0-prerelease.20

package/lib/esm/component/ButtonLink/ButtonLink.mjs

@@ -1,78 +1,87 @@
-import a from "@babel/runtime/helpers/esm/objectSpread2";
-import y from "@babel/runtime/helpers/esm/classCallCheck";
-import d from "@babel/runtime/helpers/esm/createClass";
-import h from "@babel/runtime/helpers/esm/inherits";
-import S from "@babel/runtime/helpers/esm/createSuper";
-import r from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as i, createComponent as x, assignProps as v } from "@semcore/core";
-import u from "react";
-import { Box as c } from "@semcore/flex-box";
-import { AbstractButton as p } from "../AbstractButton/AbstractButton.mjs";
-import f from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
-var m = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, assignProps } from "@semcore/core";
+import React from "react";
+import { Box } from "@semcore/flex-box";
+import { AbstractButton } from "../AbstractButton/AbstractButton.mjs";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+/*!__reshadow-styles__:"./buttonLink.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (i.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
     ".___SButton_vy4nu_gg_{display:inline-flex;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;background:0 0;transition:color .15s ease-in-out}.___SButton_vy4nu_gg_,.___SButton_vy4nu_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_vy4nu_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SButton_vy4nu_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_vy4nu_gg_.__active_vy4nu_gg_,.___SButton_vy4nu_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_vy4nu_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_vy4nu_gg_.__active_vy4nu_gg_ .___SText_vy4nu_gg_,.___SButton_vy4nu_gg_:active .___SText_vy4nu_gg_{border-color:currentColor}@media (hover:hover){.___SButton_vy4nu_gg_:hover .___SText_vy4nu_gg_{border-color:currentColor}}.___SButton_vy4nu_gg_.__enableVisited_vy4nu_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_vy4nu_gg_.__enableVisited_vy4nu_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_vy4nu_gg_ .___SText_vy4nu_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_vy4nu_gg_.__disabled_vy4nu_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_.__active_vy4nu_gg_,.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_ .___SText_vy4nu_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_vy4nu_gg_,.___SInner_vy4nu_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_vy4nu_gg_{height:100%;width:100%}.___SAddon_vy4nu_gg_{vertical-align:middle;pointer-events:none}.___SButton_vy4nu_gg_ .___SAddon_vy4nu_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_vy4nu_gg_ .___SAddon_vy4nu_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_vy4nu_gg_.__text-color_vy4nu_gg_{color:var(--text-color_vy4nu)}.___SButton_vy4nu_gg_.__text-color_vy4nu_gg_.__active_vy4nu_gg_,.___SButton_vy4nu_gg_.__text-color_vy4nu_gg_:active{color:var(--text-color_vy4nu);filter:brightness(.8)}@media (hover:hover){.___SButton_vy4nu_gg_.__text-color_vy4nu_gg_:hover{color:var(--text-color_vy4nu);filter:brightness(.8)}}.___SButton_vy4nu_gg_._size_100_vy4nu_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_vy4nu_gg_._size_200_vy4nu_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_vy4nu_gg_._size_300_vy4nu_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_vy4nu_gg_._size_400_vy4nu_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_vy4nu_gg_._size_500_vy4nu_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_vy4nu_gg_._size_600_vy4nu_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_vy4nu_gg_._size_700_vy4nu_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_vy4nu_gg_._size_800_vy4nu_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_vy4nu_gg_,.___SText_vy4nu_gg_{transition:none}}",
+    /*__inner_css_end__*/
     "vy4nu_gg_"
-  ), {
-    __SButton: "___SButton_vy4nu_gg_",
-    _disabled: "__disabled_vy4nu_gg_",
-    __SInner: "___SInner_vy4nu_gg_",
-    __SAddon: "___SAddon_vy4nu_gg_",
-    _size_100: "_size_100_vy4nu_gg_",
-    _size_200: "_size_200_vy4nu_gg_",
-    _size_300: "_size_300_vy4nu_gg_",
-    _size_400: "_size_400_vy4nu_gg_",
-    _size_500: "_size_500_vy4nu_gg_",
-    _size_600: "_size_600_vy4nu_gg_",
-    _size_700: "_size_700_vy4nu_gg_",
-    _size_800: "_size_800_vy4nu_gg_",
-    __SText: "___SText_vy4nu_gg_",
-    _active: "__active_vy4nu_gg_",
-    _enableVisited: "__enableVisited_vy4nu_gg_",
-    _use_secondary: "_use_secondary_vy4nu_gg_",
+  ), /*__reshadow_css_end__*/
+  {
+    "__SButton": "___SButton_vy4nu_gg_",
+    "_disabled": "__disabled_vy4nu_gg_",
+    "__SInner": "___SInner_vy4nu_gg_",
+    "__SAddon": "___SAddon_vy4nu_gg_",
+    "_size_100": "_size_100_vy4nu_gg_",
+    "_size_200": "_size_200_vy4nu_gg_",
+    "_size_300": "_size_300_vy4nu_gg_",
+    "_size_400": "_size_400_vy4nu_gg_",
+    "_size_500": "_size_500_vy4nu_gg_",
+    "_size_600": "_size_600_vy4nu_gg_",
+    "_size_700": "_size_700_vy4nu_gg_",
+    "_size_800": "_size_800_vy4nu_gg_",
+    "__SText": "___SText_vy4nu_gg_",
+    "_active": "__active_vy4nu_gg_",
+    "_enableVisited": "__enableVisited_vy4nu_gg_",
+    "_use_secondary": "_use_secondary_vy4nu_gg_",
     "_text-color": "__text-color_vy4nu_gg_",
     "--text-color": "--text-color_vy4nu"
   })
-), B = {
-  resolveColor: f()
-}, n = /* @__PURE__ */ function(t) {
-  h(_, t);
-  var e = S(_);
-  function _() {
-    return y(this, _), e.apply(this, arguments);
+);
+var enhance = {
+  resolveColor: resolveColorEnhance()
+};
+var RootButtonLink = /* @__PURE__ */ function(_AbstractButton) {
+  _inherits(RootButtonLink2, _AbstractButton);
+  var _super = _createSuper(RootButtonLink2);
+  function RootButtonLink2() {
+    _classCallCheck(this, RootButtonLink2);
+    return _super.apply(this, arguments);
   }
-  return d(_, [{
+  _createClass(RootButtonLink2, [{
     key: "getTextColor",
-    value: function() {
-      var g = this.asProps, l = g.color, s = g.resolveColor;
-      return s(l);
+    value: function getTextColor() {
+      var _ref5 = this.asProps, color = _ref5.color, resolveColor = _ref5.resolveColor;
+      return resolveColor(color);
     }
-  }]), _;
-}(p);
-r(n, "displayName", "ButtonLink");
-r(n, "enhance", Object.values(B));
-r(n, "style", m);
-r(n, "defaultProps", {
+  }]);
+  return RootButtonLink2;
+}(AbstractButton);
+_defineProperty(RootButtonLink, "displayName", "ButtonLink");
+_defineProperty(RootButtonLink, "enhance", Object.values(enhance));
+_defineProperty(RootButtonLink, "style", style);
+_defineProperty(RootButtonLink, "defaultProps", {
   use: "primary"
 });
-function b(t) {
-  var e = arguments[0], _, o = c;
-  return _ = i(t.styles), /* @__PURE__ */ u.createElement(o, _.cn("SText", a({}, v({
-    tag: "span"
-  }, e))));
+function Text(props) {
+  var _ref = arguments[0], _ref3;
+  var SText = Box;
+  return _ref3 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SText, _ref3.cn("SText", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref))));
 }
-function z(t) {
-  var e = arguments[0], _, o = c;
-  return _ = i(t.styles), /* @__PURE__ */ u.createElement(o, _.cn("SAddon", a({}, v({
-    tag: "span"
-  }, e))));
+function Addon(props) {
+  var _ref2 = arguments[0], _ref4;
+  var SAddon = Box;
+  return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref4.cn("SAddon", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref2))));
 }
-var R = x(n, {
-  Text: b,
-  Addon: z
+var ButtonLink = createComponent(RootButtonLink, {
+  Text,
+  Addon
 });
 export {
-  R as ButtonLink
+  ButtonLink
 };

package/lib/esm/component/ButtonLink/buttonLink.shadow.css

@@ -0,0 +1,159 @@
+SButton {
+  display: inline-flex;
+  font-family: inherit;
+  font-size: var(--intergalactic-fs-200, 14px);
+  color: var(--intergalactic-text-link, #006dca);
+  line-height: normal;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+  -webkit-tap-highlight-color: transparent;
+  background: none;
+  transition: color 0.15s ease-in-out;
+
+  &:active,
+  &:hover {
+    text-decoration: none;
+  }
+
+  &::-moz-focus-inner {
+    border: none;
+    padding: 0;
+  }
+
+  &[active],
+  &:hover,
+  &:active {
+    color: var(--intergalactic-text-link-hover-active, #044792);
+
+    & SText {
+      border-color: currentColor;
+    }
+  }
+
+  &[enableVisited]:visited,
+  &[enableVisited]:visited:hover {
+    color: var(--intergalactic-text-link-visited, #8649e1);
+  }
+
+  SText {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: transparent;
+    transition: border-bottom-color 0.15s ease-in-out;
+  }
+}
+
+SButton[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  cursor: default;
+  /* Disable link interactions */
+  pointer-events: none;
+}
+
+SButton[use='secondary'] {
+  color: var(--intergalactic-text-hint, #6c6e79);
+
+  &[active],
+  &:active,
+  &:hover {
+    color: var(--intergalactic-text-hint-hover-active, #484a54);
+  }
+
+  SText {
+    border-bottom-width: 1px;
+    border-bottom-style: dashed;
+    border-color: currentColor;
+  }
+}
+
+SInner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+SAddon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+SButton SAddon {
+  &:not(:only-child):first-child {
+    margin-right: var(--intergalactic-spacing-1x, 4px);
+  }
+
+  &:not(:only-child):last-child {
+    margin-left: var(--intergalactic-spacing-1x, 4px);
+  }
+}
+
+SButton[text-color] {
+  color: var(--text-color);
+
+  &[active],
+  &:hover,
+  &:active {
+    color: var(--text-color);
+    filter: brightness(0.8);
+  }
+}
+
+SButton[size='100'] {
+  font-size: var(--intergalactic-fs-100, 12px);
+  line-height: var(--intergalactic-lh-100, 133%);
+}
+
+SButton[size='200'] {
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+}
+
+SButton[size='300'] {
+  font-size: var(--intergalactic-fs-300, 16px);
+  line-height: var(--intergalactic-lh-300, 150%);
+}
+
+SButton[size='400'] {
+  font-size: var(--intergalactic-fs-400, 20px);
+  line-height: var(--intergalactic-lh-400, 120%);
+}
+
+SButton[size='500'] {
+  font-size: var(--intergalactic-fs-500, 24px);
+  line-height: var(--intergalactic-lh-500, 117%);
+}
+
+SButton[size='600'] {
+  font-size: var(--intergalactic-fs-600, 32px);
+  line-height: var(--intergalactic-lh-600, 125%);
+}
+
+SButton[size='700'] {
+  font-size: var(--intergalactic-fs-700, 36px);
+  line-height: var(--intergalactic-lh-700, 110%);
+}
+
+SButton[size='800'] {
+  font-size: var(--intergalactic-fs-800, 48px);
+  line-height: var(--intergalactic-lh-800, 117%);
+}
+
+@media (prefers-reduced-motion) {
+  SButton {
+    transition: none;
+  }
+
+  SText {
+    transition: none;
+  }
+}

package/lib/esm/index.mjs

@@ -1,8 +1,8 @@
-import { default as t } from "./component/Button/Button.mjs";
-import { ButtonLink as f } from "./component/ButtonLink/ButtonLink.mjs";
-import { MAP_USE_DEFAULT_THEME as m } from "./component/AbstractButton/AbstractButton.mjs";
+import { default as default2 } from "./component/Button/Button.mjs";
+import { ButtonLink } from "./component/ButtonLink/ButtonLink.mjs";
+import { MAP_USE_DEFAULT_THEME } from "./component/AbstractButton/AbstractButton.mjs";
 export {
-  f as ButtonLink,
-  m as MAP_USE_DEFAULT_THEME,
-  t as default
+  ButtonLink,
+  MAP_USE_DEFAULT_THEME,
+  default2 as default
 };

package/lib/types/component/AbstractButton/AbstractButton.type.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import { PropGetterFn } from '@semcore/core';
-import { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import { BoxProps } from '@semcore/flex-box';
 import { NeighborItemProps } from '@semcore/neighbor-location';
 import { TooltipHintProps } from '@semcore/tooltip';
-export type AbstractButtonProps<S, U, T> = BoxProps & NeighborItemProps & KeyboardFocusProps & {
+export type AbstractButtonProps<S, U, T> = BoxProps & NeighborItemProps & {
     /** Button activity state */
     active?: boolean;
     /** Disabled button state */

package/lib/types/component/Button/Button.type.d.ts

@@ -10,12 +10,16 @@ export type ButtonSize = 'l' | 'm';
  * @default secondary
  */
 type Use = 'primary' | 'secondary' | 'tertiary';
+/**
+ * @deprecated don't use it. use `danger` for incorrect or danger behavior and `brand` for the orange one.
+ */
+type DeprecatedTheme = 'warning';
 /** Button theme */
-type Theme = 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';
+type Theme = 'info' | 'success' | 'brand' | 'danger' | 'muted' | 'invert';
 /** @deprecated */
 export interface IButtonProps extends ButtonProps, UnknownProperties {
 }
-export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme>;
+export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme | DeprecatedTheme>;
 /** @deprecated */
 export interface IButtonTextProps extends ButtonTextProps, UnknownProperties {
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/button",
   "description": "Semrush Button Component",
-  "version": "16.0.0-prerelease.2",
+  "version": "16.0.0-prerelease.20",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,13 +14,13 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "16.0.0-prerelease.2",
-    "@semcore/neighbor-location": "16.0.0-prerelease.2",
-    "@semcore/spin": "16.0.0-prerelease.2",
-    "@semcore/tooltip": "16.0.0-prerelease.2"
+    "@semcore/flex-box": "16.0.0-prerelease.20",
+    "@semcore/neighbor-location": "16.0.0-prerelease.20",
+    "@semcore/spin": "16.0.0-prerelease.20",
+    "@semcore/tooltip": "16.0.0-prerelease.20"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.2"
+    "@semcore/base-components": "^16.0.0-prerelease.20"
   },
   "repository": {
     "type": "git",

package/src/component/AbstractButton/AbstractButton.tsx

@@ -50,6 +50,12 @@ export abstract class AbstractButton extends Component<Props, {}, {}> {
         `'title' or 'aria-label' or 'aria-labelledby' are required props for buttons without text content`,
         this.asProps['data-ui-name'] || AbstractButton.displayName,
       );
+
+      logger.warn(
+        this.asProps.theme === 'warning',
+        'Warning theme is deprecated and will be removed in the next major release.',
+        this.asProps['data-ui-name'] || AbstractButton.displayName,
+      );
     }
 
     const ariaLabelledby = this.asProps['aria-labelledby'];
@@ -79,7 +85,7 @@ export abstract class AbstractButton extends Component<Props, {}, {}> {
     const SButton = Root;
 
     return sstyled(styles)(
-      <SButton render={Hint} {...buttonProps} {...hintProps}>
+      <SButton render={Hint} {...buttonProps} {...hintProps} ignorePortalsStacking>
         {children}
       </SButton>,
     );

package/src/component/AbstractButton/AbstractButton.type.ts

@@ -1,13 +1,11 @@
 import React from 'react';
 import { PropGetterFn } from '@semcore/core';
-import { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import { BoxProps } from '@semcore/flex-box';
 import { NeighborItemProps } from '@semcore/neighbor-location';
 import { TooltipHintProps } from '@semcore/tooltip';
 
 export type AbstractButtonProps<S, U, T> = BoxProps &
-  NeighborItemProps &
-  KeyboardFocusProps & {
+  NeighborItemProps & {
     /** Button activity state */
     active?: boolean;
     /** Disabled button state */

package/src/component/Button/Button.type.ts

@@ -18,12 +18,17 @@ export type ButtonSize = 'l' | 'm';
  */
 type Use = 'primary' | 'secondary' | 'tertiary';
 
+/**
+ * @deprecated don't use it. use `danger` for incorrect or danger behavior and `brand` for the orange one.
+ */
+type DeprecatedTheme = 'warning';
+
 /** Button theme */
-type Theme = 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';
+type Theme = 'info' | 'success' | 'brand' | 'danger' | 'muted' | 'invert';
 
 /** @deprecated */
 export interface IButtonProps extends ButtonProps, UnknownProperties {}
-export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme>;
+export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme | DeprecatedTheme>;
 
 /** @deprecated */
 export interface IButtonTextProps extends ButtonTextProps, UnknownProperties {}

package/src/component/Button/button.shadow.css

@@ -92,6 +92,22 @@ SButton[theme='primary-success'] {
   }
 }
 
+SButton[theme='primary-brand'] {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+  background-color: var(--intergalactic-control-primary-brand, #ff642d);
+
+  &:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-primary-brand-hover, #c33909);
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-primary-brand-active, #8b1500);
+  }
+}
+
 SButton[theme='primary-warning'] {
   color: var(--intergalactic-text-primary-invert, #ffffff);
   background-color: var(--intergalactic-control-primary-brand, #ff642d);
@@ -104,7 +120,7 @@ SButton[theme='primary-warning'] {
   &:active,
   &[active] {
     color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-brand-active, #c33909);
+    background-color: var(--intergalactic-control-primary-brand-active, #8b1500);
   }
 }