@semcore/button 16.0.12 → 16.0.13-prerelease.9

package/src/component/AbstractButton/AbstractButton.tsx

@@ -1,10 +1,8 @@
+import { NeighborLocation, Box, Hint } from '@semcore/base-components';
 import { Component, CORE_INSTANCE, Root, sstyled } from '@semcore/core';
 import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
 import hasLabels from '@semcore/core/lib/utils/hasLabels';
 import logger from '@semcore/core/lib/utils/logger';
-import { Box } from '@semcore/flex-box';
-import NeighborLocation from '@semcore/neighbor-location';
-import { Hint } from '@semcore/tooltip';
 import React from 'react';
 
 import type { AbstractButtonProps } from './AbstractButton.type';
@@ -18,12 +16,16 @@ export const MAP_USE_DEFAULT_THEME: Record<string, string> = {
 
 type Props = AbstractButtonProps<any, any, any>;
 
-export abstract class AbstractButton extends Component<Props, {}, {}> {
+type State = {
+  ariaLabelledByContent: null | string;
+};
+
+export abstract class AbstractButton extends Component<Props, [], never, {}, State> {
   static displayName = 'AbstractButton';
 
   containerRef = React.createRef<HTMLButtonElement>();
 
-  state = {
+  state: State = {
     ariaLabelledByContent: null,
   };
 
@@ -70,28 +72,6 @@ export abstract class AbstractButton extends Component<Props, {}, {}> {
     }
   }
 
-  renderButton({ buttonProps, children }: any) {
-    const { styles, theme } = this.asProps;
-    const SButton = Root;
-
-    return sstyled(styles)(
-      <SButton render={Box} invertOutline={theme === 'invert'} {...buttonProps}>
-        {children}
-      </SButton>,
-    );
-  }
-
-  renderButtonWithHint({ buttonProps, children, hintProps }: any) {
-    const { styles, theme } = this.asProps;
-    const SButton = Root;
-
-    return sstyled(styles)(
-      <SButton render={Hint} invertOutline={theme === 'invert'} {...buttonProps} {...hintProps} ignorePortalsStacking>
-        {children}
-      </SButton>,
-    );
-  }
-
   render() {
     const {
       styles,
@@ -101,7 +81,7 @@ export abstract class AbstractButton extends Component<Props, {}, {}> {
       disabled = loading,
       size,
       neighborLocation,
-      children: hasChildren,
+      children,
       title,
       ['aria-label']: ariaLabel,
       Children,
@@ -109,6 +89,7 @@ export abstract class AbstractButton extends Component<Props, {}, {}> {
       addonRight: AddonRight,
       hintPlacement,
     } = this.asProps;
+    const SButton = Root;
     // @ts-ignore
     const Button = this[CORE_INSTANCE];
     const useTheme = use && theme ? `${use}-${theme}` : false;
@@ -116,63 +97,63 @@ export abstract class AbstractButton extends Component<Props, {}, {}> {
     const SSpin = Box;
     const buttonAriaLabel = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';
 
-    const buttonProps: Record<string, any> = {
-      'type': 'button',
-      'tag': 'button',
-      disabled,
-      'use:theme': useTheme,
-      'ref': this.containerRef,
-      'text-color': this.getTextColor(),
-      'aria-busy': loading,
-      '__excludeProps': ['title'],
-      'tabIndex': 0,
-    };
-
-    const hintProps = {
-      title: buttonAriaLabel,
-      timeout: [250, 50],
-      placement: hintPlacement,
-      theme: theme === 'invert' ? 'invert' : undefined,
-      __excludeProps: [],
-    };
+    const showHint = (children === undefined || title);
 
     return (
       <NeighborLocation.Detect neighborLocation={neighborLocation}>
         {(neighborLocation) => {
-          const children = sstyled(styles)(
+          return sstyled(styles)(
             <>
-              {/* @ts-ignore */}
-              <SInner tag='span' loading={loading} data-ui-name={`${this.asProps['data-ui-name']}.InnerWrapper`}>
-                {AddonLeft
-                  ? (
-                      <Button.Addon>
-                        <AddonLeft />
-                      </Button.Addon>
-                    )
-                  : null}
-                {addonTextChildren(Children, Button.Text, Button.Addon)}
-                {AddonRight
-                  ? (
-                      <Button.Addon>
-                        <AddonRight />
-                      </Button.Addon>
-                    )
-                  : null}
-              </SInner>
-              {loading && (
-                <SSpin tag='span'>
-                  <SpinButton centered size={size} theme={useTheme} />
-                </SSpin>
+              <SButton
+                render={Box}
+                invertOutline={theme === 'invert'}
+                type='button'
+                tag='button'
+                tabIndex={0}
+                disabled={disabled}
+                use:theme={useTheme}
+                ref={this.containerRef}
+                text-color={this.getTextColor()}
+                aria-busy={loading}
+                __excludeProps={['title']}
+                aria-label={showHint ? buttonAriaLabel : undefined}
+                neighborLocation={neighborLocation}
+              >
+                {/* @ts-ignore */}
+                <SInner tag='span' loading={loading} data-ui-name={`${this.asProps['data-ui-name']}.InnerWrapper`}>
+                  {AddonLeft
+                    ? (
+                        <Button.Addon>
+                          <AddonLeft />
+                        </Button.Addon>
+                      )
+                    : null}
+                  {addonTextChildren(Children, Button.Text, Button.Addon)}
+                  {AddonRight
+                    ? (
+                        <Button.Addon>
+                          <AddonRight />
+                        </Button.Addon>
+                      )
+                    : null}
+                </SInner>
+                {loading && (
+                  <SSpin tag='span'>
+                    <SpinButton centered size={size} theme={useTheme} />
+                  </SSpin>
+                )}
+              </SButton>
+              {showHint && (
+                <Hint
+                  triggerRef={this.containerRef}
+                  timeout={[250, 50]}
+                  placement={hintPlacement}
+                >
+                  {buttonAriaLabel}
+                </Hint>
               )}
             </>,
           );
-          buttonProps.neighborLocation = neighborLocation;
-
-          if (hasChildren === undefined || title) {
-            return this.renderButtonWithHint({ buttonProps, hintProps, children });
-          }
-
-          return this.renderButton({ buttonProps, children });
         }}
       </NeighborLocation.Detect>
     );

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

@@ -1,7 +1,5 @@
+import type { BoxProps, NeighborItemProps, SimpleHintPopperProps } from '@semcore/base-components';
 import type { PropGetterFn } from '@semcore/core';
-import type { BoxProps } from '@semcore/flex-box';
-import type { NeighborItemProps } from '@semcore/neighbor-location';
-import type { TooltipHintProps } from '@semcore/tooltip';
 import type React from 'react';
 
 export type AbstractButtonProps<S, U, T> = BoxProps &
@@ -20,7 +18,7 @@ export type AbstractButtonProps<S, U, T> = BoxProps &
      * Placement for hint
      * @default top
      */
-    hintPlacement?: TooltipHintProps['placement'];
+    hintPlacement?: SimpleHintPopperProps['placement'];
 
     /** Button size. Defined in Button.type or ButtonLink.type */
     size?: S;

package/src/component/Button/Button.tsx

@@ -1,5 +1,5 @@
+import { Box } from '@semcore/base-components';
 import { createComponent, sstyled, Root } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
 import React from 'react';
 
 import style from './button.shadow.css';

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

@@ -18,28 +18,15 @@ 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' | 'brand' | 'danger' | 'muted' | 'invert';
 
-/** @deprecated */
-export interface IButtonProps extends ButtonProps, UnknownProperties {}
-export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme | DeprecatedTheme>;
+export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme>;
 
-/** @deprecated */
-export interface IButtonTextProps extends ButtonTextProps, UnknownProperties {}
 export type ButtonTextProps = AbstractButtonTextProps<ButtonSize>;
 
-/** @deprecated */
-export interface IButtonAddonProps extends ButtonAddonProps, UnknownProperties {}
 export type ButtonAddonProps = AbstractButtonAddonProps<ButtonSize>;
 
-/** @deprecated */
-export interface IButtonContext extends ButtonContext, UnknownProperties {}
 export type ButtonContext = AbstractButtonContext;
 
 export type ButtonChildren = {

package/src/component/ButtonLink/ButtonLink.tsx

@@ -1,6 +1,6 @@
+import { Box } from '@semcore/base-components';
 import { createComponent, sstyled, Root } from '@semcore/core';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
-import { Box } from '@semcore/flex-box';
 import React from 'react';
 
 import style from './buttonLink.shadow.css';

package/src/component/ButtonLink/buttonLink.shadow.css

@@ -31,7 +31,7 @@ SButton {
     color: var(--intergalactic-text-link-hover-active, #044792);
 
     & SText {
-      border-color: currentColor;
+      box-shadow: 0 1px 0 0 currentColor;
     }
   }
 
@@ -41,10 +41,8 @@ SButton {
   }
 
   SText {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-color: transparent;
-    transition: border-bottom-color 0.15s ease-in-out;
+    box-shadow: 0 1px 0 0 transparent;
+    transition: box-shadow 0.15s ease-in-out;
   }
 }
 
@@ -65,6 +63,7 @@ SButton[use='secondary'] {
   }
 
   SText {
+    box-shadow: none;
     border-bottom-width: 1px;
     border-bottom-style: dashed;
     border-color: currentColor;
@@ -73,7 +72,7 @@ SButton[use='secondary'] {
 
 SInner {
   display: inline-flex;
-  align-items: center;
+  align-items: baseline;
   justify-content: center;
   height: 100%;
   width: 100%;
@@ -82,9 +81,10 @@ SInner {
 SAddon {
   display: inline-flex;
   justify-content: center;
-  align-items: center;
+  align-items: baseline;
   vertical-align: middle;
   pointer-events: none;
+  align-self: center;
 }
 
 SButton SAddon {