@os-design/core 1.0.229 → 1.0.230

package/src/LinkButton/index.tsx

@@ -1,94 +1,51 @@
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { resetButtonStyles, sizeStyles, WithSize } from '@os-design/styles';
+import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
 import React, { forwardRef } from 'react';
-import { ButtonProps, StyledButton } from '../Button';
-import ButtonContent from '../Button/ButtonContent';
-import useButtonColors from '../Button/utils/useButtonColors';
-import { LinkProps, ReactRouterLinkProps } from '../Link';
+import { underlineAlwaysStyles, underlineHoverStyles } from '../Link';
 
-type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;
-export type LinkButtonProps = JsxAProps &
-  ReactRouterLinkProps &
-  Pick<LinkProps, 'as'> &
-  ButtonProps;
+type JsxButtonProps = Omit<JSX.IntrinsicElements['button'], 'ref'>;
 
-const disabledStyles = (p) =>
-  p.disabled &&
-  css`
-    pointer-events: none;
-  `;
+export interface LinkButtonProps extends JsxButtonProps, WithSize {
+  /**
+   * Type of the underline styles.
+   * @default hover
+   */
+  underline?: 'hover' | 'always' | 'never';
+}
 
-const StyledLinkButton = styled(
-  StyledButton.withComponent('a'),
-  omitEmotionProps('as', 'disabled')
-)`
-  text-decoration: none;
-  display: inline-flex;
-  ${disabledStyles};
+const StyledButton = styled(
+  'button',
+  omitEmotionProps('size', 'underline')
+)<LinkButtonProps>`
+  ${resetButtonStyles};
+
+  cursor: pointer;
+  text-align: left;
+  line-height: 1.2;
+  color: ${(p) => clr(p.theme.linkColor)};
+
+  ${underlineHoverStyles};
+  ${underlineAlwaysStyles};
+  ${sizeStyles};
 `;
 
 /**
- * The button that is rendered as the a tag.
+ * The link component that is rendered as a button.
  */
-const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
-  (
-    {
-      type = 'primary',
-      danger = false,
-      left,
-      right,
-      wide = 'default',
-      loading = false,
-      disabled = false,
-      size,
-      as,
-      onMouseDown = () => {},
-      onKeyDown = () => {},
-      children,
-      ...rest
-    },
-    ref
-  ) => {
-    const { buttonColors, loadingColors } = useButtonColors({
-      type,
-      danger,
-      disabled,
-    });
-
-    return (
-      <StyledLinkButton
-        btnType={type}
-        colors={buttonColors}
-        wide={wide}
-        loading={loading}
-        disabled={disabled || loading}
-        size={size}
-        as={as}
-        onMouseDown={(e) => {
-          onMouseDown(e);
-          e.preventDefault();
-        }}
-        onKeyDown={(e) => {
-          onKeyDown(e);
-          if (disabled || loading) e.preventDefault();
-        }}
-        aria-disabled={disabled || loading}
-        aria-busy={loading}
-        {...rest}
-        ref={ref}
-      >
-        <ButtonContent
-          left={left}
-          right={right}
-          loading={loading}
-          loadingColors={loadingColors}
-        >
-          {children}
-        </ButtonContent>
-      </StyledLinkButton>
-    );
-  }
+const LinkButton = forwardRef<HTMLButtonElement, LinkButtonProps>(
+  ({ underline = 'hover', onMouseDown = () => {}, ...rest }, ref) => (
+    <StyledButton
+      underline={underline}
+      onMouseDown={(e) => {
+        onMouseDown(e);
+        e.preventDefault();
+      }}
+      {...rest}
+      ref={ref}
+    />
+  )
 );
 
 LinkButton.displayName = 'LinkButton';

package/src/Select/index.tsx

@@ -331,7 +331,7 @@ export const Placeholder = styled.span`
   ${ellipsisStyles};
 `;
 
-const titleUnborderedTitleStyles = (p) =>
+const titleUnborderedStyles = (p) =>
   p.unbordered &&
   css`
     font-weight: 500;
@@ -350,7 +350,7 @@ export const Title = styled(
   omitEmotionProps('disabled', 'unbordered')
 )<TitleProps>`
   color: ${(p) => clr(p.theme.colorText)};
-  ${titleUnborderedTitleStyles};
+  ${titleUnborderedStyles};
   ${titleDisabledStyles};
   ${ellipsisStyles};
 `;

package/src/index.ts

@@ -4,6 +4,7 @@ export { default as AvatarSkeleton } from './AvatarSkeleton';
 export { default as Breadcrumb } from './Breadcrumb';
 export { default as BreadcrumbItem } from './BreadcrumbItem';
 export { default as Button } from './Button';
+export { default as ButtonLink } from './ButtonLink';
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxSkeleton } from './CheckboxSkeleton';
 export { default as DatePicker } from './DatePicker';
@@ -68,6 +69,7 @@ export * from './AvatarSkeleton';
 export * from './Breadcrumb';
 export * from './BreadcrumbItem';
 export * from './Button';
+export * from './ButtonLink';
 export * from './Checkbox';
 export * from './CheckboxSkeleton';
 export * from './DatePicker';