@os-design/core 1.0.229 → 1.0.231

package/src/Link/index.tsx

@@ -22,6 +22,11 @@ export interface LinkProps extends JsxAProps, ReactRouterLinkProps, WithSize {
    * @default hover
    */
   underline?: 'hover' | 'always' | 'never';
+  /**
+   * Whether the link is disabled.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * The custom link component.
    * For example, the Link from react-router-dom.
@@ -30,9 +35,6 @@ export interface LinkProps extends JsxAProps, ReactRouterLinkProps, WithSize {
   as?: React.ElementType;
 }
 
-/**
- * Sets base underline styles.
- */
 const underlineBaseStyles = (p) => css`
   position: relative;
   display: inline-block;
@@ -48,10 +50,7 @@ const underlineBaseStyles = (p) => css`
   }
 `;
 
-/**
- * Sets underline styles on hover.
- */
-const underlineHoverStyles = (p) =>
+export const underlineHoverStyles = (p) =>
   p.underline === 'hover' &&
   css`
     @media (hover: hover) {
@@ -71,10 +70,7 @@ const underlineHoverStyles = (p) =>
     }
   `;
 
-/**
- * Sets underline styles always.
- */
-const underlineAlwaysStyles = (p) =>
+export const underlineAlwaysStyles = (p) =>
   p.underline === 'always' &&
   css`
     ${underlineBaseStyles(p)};
@@ -85,9 +81,26 @@ const underlineAlwaysStyles = (p) =>
     }
   `;
 
+const disabledStyles = (p) =>
+  p.disabled &&
+  css`
+    pointer-events: none;
+
+    &,
+    &:active,
+    &:focus {
+      color: ${clr(p.theme.inputColorPlaceholder)};
+    }
+  `;
+
+export const DisabledWrapper = styled.div`
+  display: inline-block;
+  cursor: not-allowed;
+`;
+
 const StyledLink = styled(
   'a',
-  omitEmotionProps('size', 'underline', 'as')
+  omitEmotionProps('size', 'underline', 'disabled', 'as')
 )<LinkProps>`
   ${resetFocusStyles};
 
@@ -103,6 +116,7 @@ const StyledLink = styled(
 
   ${underlineHoverStyles};
   ${underlineAlwaysStyles};
+  ${disabledStyles};
   ${sizeStyles};
 `;
 
@@ -110,18 +124,37 @@ const StyledLink = styled(
  * The link component to navigate between pages.
  */
 const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ underline = 'hover', as, onMouseDown = () => {}, ...rest }, ref) => (
-    <StyledLink
-      underline={underline}
-      as={as}
-      onMouseDown={(e) => {
-        onMouseDown(e);
-        e.preventDefault();
-      }}
-      {...rest}
-      ref={ref}
-    />
-  )
+  (
+    {
+      underline = 'hover',
+      disabled = false,
+      as,
+      onMouseDown = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    if (disabled) {
+      return (
+        <DisabledWrapper>
+          <StyledLink disabled {...rest} ref={ref} />
+        </DisabledWrapper>
+      );
+    }
+
+    return (
+      <StyledLink
+        underline={underline}
+        as={as}
+        onMouseDown={(e) => {
+          onMouseDown(e);
+          e.preventDefault();
+        }}
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
 );
 
 Link.displayName = 'Link';

package/src/LinkButton/index.tsx

@@ -1,92 +1,80 @@
 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 {
+  DisabledWrapper,
+  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'>;
+
+export interface LinkButtonProps extends JsxButtonProps, WithSize {
+  /**
+   * Type of the underline styles.
+   * @default hover
+   */
+  underline?: 'hover' | 'always' | 'never';
+  /**
+   * Whether the link is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+}
 
 const disabledStyles = (p) =>
   p.disabled &&
   css`
-    pointer-events: none;
+    cursor: inherit;
+    color: ${clr(p.theme.inputColorPlaceholder)};
   `;
 
-const StyledLinkButton = styled(
-  StyledButton.withComponent('a'),
-  omitEmotionProps('as', 'disabled')
-)`
-  text-decoration: none;
-  display: inline-flex;
+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};
   ${disabledStyles};
+  ${sizeStyles};
 `;
 
 /**
- * The button that is rendered as the a tag.
+ * The link component that is rendered as a button.
  */
-const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
+const LinkButton = forwardRef<HTMLButtonElement, LinkButtonProps>(
   (
-    {
-      type = 'primary',
-      danger = false,
-      left,
-      right,
-      wide = 'default',
-      loading = false,
-      disabled = false,
-      size,
-      as,
-      onMouseDown = () => {},
-      onKeyDown = () => {},
-      children,
-      ...rest
-    },
+    { underline = 'hover', disabled = false, onMouseDown = () => {}, ...rest },
     ref
   ) => {
-    const { buttonColors, loadingColors } = useButtonColors({
-      type,
-      danger,
-      disabled,
-    });
+    if (disabled) {
+      return (
+        <DisabledWrapper>
+          <StyledButton disabled {...rest} ref={ref} />
+        </DisabledWrapper>
+      );
+    }
 
     return (
-      <StyledLinkButton
-        btnType={type}
-        colors={buttonColors}
-        wide={wide}
-        loading={loading}
-        disabled={disabled || loading}
-        size={size}
-        as={as}
+      <StyledButton
+        underline={underline}
         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>
+      />
     );
   }
 );

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