@semcore/button 5.42.1 → 5.43.0-prerelease.2

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": "5.42.1",
+  "version": "5.43.0-prerelease.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",

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'];

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

@@ -100,6 +100,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);
@@ -112,7 +128,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);
   }
 }