[base-trigger,button,link] refactoring components, based on link

Author: ilyabrower

pnpm-lock.yaml

@@ -20,7 +20,8 @@
     "@semcore/counter": "16.0.11",
     "@semcore/spin": "16.0.11",
     "@semcore/tooltip": "16.0.11",
-    "@semcore/typography": "16.3.2"
+    "@semcore/typography": "16.3.2",
+    "@semcore/button": "16.0.12"
   },
   "peerDependencies": {
     "@semcore/base-components": "^17.0.0 || ^17.0.0-0",

semcore/base-trigger/package.json

@@ -1,91 +1,51 @@
-import { Box } from '@semcore/base-components';
-import { createComponent, Component, Root, sstyled } from '@semcore/core';
+import { ButtonLink } from '@semcore/button';
+import { createComponent, Component, Root } from '@semcore/core';
 import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
-import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import ChevronDown from '@semcore/icon/ChevronDown/m';
 import Spin from '@semcore/spin';
-import { Text as TextKit } from '@semcore/typography';
 import React from 'react';
 
-import style from './style/link-trigger.shadow.css';
-
 class RootLinkTrigger extends Component {
   static displayName = 'LinkTrigger';
-  static style = style;
   static defaultProps = {
     size: 'm',
   };
 
-  static enhance = [resolveColorEnhance()];
-
-  triggerRef = React.createRef();
-
-  getTextProps() {
+  getTextProps(props) {
     const { placeholder, empty } = this.asProps;
+    const content = empty ? placeholder : props.children;
+
     return {
-      placeholder,
+      'use:children': content,
       empty,
-      triggerRef: this.triggerRef,
     };
   }
 
   render() {
     const SLinkTrigger = Root;
     const SLinkAddon = LinkTrigger.Addon;
-    const { Children, loading, styles, empty, color: providedColor, resolveColor } = this.asProps;
-
-    const color = resolveColor(providedColor);
+    const { Children, loading, empty, size } = this.asProps;
 
-    return sstyled(styles)(
+    return (
       <SLinkTrigger
-        render={Box}
-        tag='button'
-        type='button'
+        render={ButtonLink}
         tabIndex={loading ? -1 : 0}
-        ref={this.triggerRef}
-        use:color={color}
+        use:size={size === 'l' ? 300 : 200}
       >
         {addonTextChildren(Children, LinkTrigger.Text, LinkTrigger.Addon, empty)}
         <SLinkAddon>
           {loading ? <Spin size='xs' theme='currentColor' /> : <ChevronDown />}
         </SLinkAddon>
-      </SLinkTrigger>,
+      </SLinkTrigger>
     );
   }
 }
 
-function Text(props) {
-  const SText = Root;
-  const textRef = React.useRef();
-  const { children, styles, empty, placeholder, triggerRef, ellipsis = false, hintProps } = props;
-  const content = empty ? placeholder : children;
-
-  return sstyled(styles)(
-    <>
-      <SText
-        render={TextKit}
-        display-placeholder={empty}
-        ref={textRef}
-        ellipsis={ellipsis}
-        hintProps={{
-          ...hintProps,
-          triggerRef,
-        }}
-      >
-        {content}
-      </SText>
-    </>,
-  );
-}
-
-function Addon(props) {
-  const SAddon = Root;
-  return sstyled(props.styles)(<SAddon render={Box} />);
-}
-
 const LinkTrigger = createComponent(RootLinkTrigger, {
-  Text,
-  Addon,
+  Text: ButtonLink.Text,
+  Addon: ButtonLink.Addon,
+}, {
+  parent: ButtonLink,
 });
 
 export default LinkTrigger;

semcore/base-trigger/src/LinkTrigger.jsx

@@ -18,7 +18,8 @@
   },
   "dependencies": {
     "@semcore/spin": "16.0.11",
-    "@semcore/typography": "16.3.2"
+    "@semcore/typography": "16.3.2",
+    "@semcore/link": "16.0.11"
   },
   "peerDependencies": {
     "@semcore/base-components": "^17.0.0 || ^17.0.0-0"

semcore/base-trigger/src/style/link-trigger.shadow.css

@@ -1,42 +1,35 @@
-import { Box } from '@semcore/base-components';
-import { createComponent, sstyled, Root } from '@semcore/core';
-import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
-import { Text } from '@semcore/typography';
+import { createComponent, sstyled, Root, Component } from '@semcore/core';
+import Link from '@semcore/link';
 import React from 'react';
 
 import style from './buttonLink.shadow.css';
-import type { ButtonLinkAddonProps, ButtonLinkComponent, ButtonLinkTextProps } from './ButtonLink.type';
-import { AbstractButton } from '../AbstractButton/AbstractButton';
+import type { ButtonLinkComponent, ButtonLinkProps } from './ButtonLink.type';
 
-const enhance = {
-  resolveColor: resolveColorEnhance(),
-};
-
-class RootButtonLink extends AbstractButton {
+class RootButtonLink extends Component<ButtonLinkProps> {
   static displayName = 'ButtonLink';
-  static enhance = Object.values(enhance);
   static style = style;
   static defaultProps = {
     use: 'primary',
+    size: 200,
   };
 
-  protected getTextColor(): string | undefined {
-    const { color, resolveColor } = this.asProps as any;
-    return resolveColor(color);
-  }
-}
-
-function LinkText(props: ButtonLinkTextProps) {
-  const SText = Root;
-  return sstyled(props.styles)(<SText render={Text} />);
-}
+  render(): React.ReactNode {
+    const SButtonLink = Root;
 
-function Addon(props: ButtonLinkAddonProps) {
-  const SAddon = Root;
-  return sstyled(props.styles)(<SAddon render={Box} tag='span' />);
+    return sstyled(style)(
+      <SButtonLink
+        render={Link}
+        tag='button'
+        role='button'
+        type='button'
+      />,
+    );
+  }
 }
 
 export const ButtonLink = createComponent(RootButtonLink, {
-  Text: LinkText,
-  Addon,
+  Text: Link.Text,
+  Addon: Link.Addon,
+}, {
+  parent: Link,
 }) as ButtonLinkComponent;