update button style

glassonion1 · Oct 26, 2023 · f2a4791 · f2a4791
1 parent fc0fdef
commit f2a4791
Show file tree

Hide file tree

Showing 10 changed files with 196 additions and 119 deletions.
diff --git a/examples/src/App.tsx b/examples/src/App.tsx
@@ -19,8 +19,8 @@ import {
   Faq,
   Question,
   Answer
-} from '@sakura-ui/core'
-// from '../../packages/core/src'
+} from '../../packages/core/src'
+// from '@sakura-ui/core'
 import {
   Checkbox,
   CheckboxGroup,
@@ -64,6 +64,14 @@ const App = () => {
       <p>
         External link: <Link href="https://google.com">link text here</Link>
       </p>
+      <div>
+        List
+        <Ul>
+          <li>
+            External link: <Link href="https://google.com">link text here</Link>
+          </li>
+        </Ul>
+      </div>
       <div className="w-1/3 my-4">
         <Card>
           <CardBody>
@@ -192,6 +200,39 @@ const App = () => {
         </IconButton>
         <IconButton className="mr-2" icon="keyboard_arrow_down" />
         <IconButton className="mr-2" icon="face" variant="secondary" />
+      </div>
+      <div className="my-4">
+        <Button
+          className="mr-2"
+          size="md"
+          onClick={() => setCount((count: number) => count + 1)}
+        >
+          Primary button(md)
+        </Button>
+        <Button
+          className="mr-2"
+          size="sm"
+          variant="secondary"
+          onClick={() => setCount((count: number) => count + 1)}
+        >
+          Secondary Button(sm)
+        </Button>
+        <Button
+          className="mr-2"
+          size="xs"
+          variant="secondary"
+          onClick={() => setCount((count: number) => count + 1)}
+        >
+          Secondary Button(xs)
+        </Button>
+        <IconButton className="mr-2" size="md" icon="face">
+          Icon button(md)
+        </IconButton>
+        <IconButton className="mr-2" variant="secondary" size="sm" icon="face">
+          Icon button(sm)
+        </IconButton>
+      </div>
+      <div className="my-4">
         <Button
           className="mr-2"
           onClick={() => setCount((count: number) => count + 1)}

diff --git a/packages/config/package.json b/packages/config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/config",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
   "exports": {

diff --git a/packages/config/src/index.ts b/packages/config/src/index.ts
@@ -155,6 +155,14 @@ const sakuraPlugin = plugin(
               fontWeight: '700'
             }
           ],
+          'button-sm': [
+            '14px',
+            {
+              lineHeight: '100%',
+              letterSpacing: '0.04em',
+              fontWeight: '700'
+            }
+          ],
           label: [
             '14px',
             {

diff --git a/packages/core/src/components/#ButtonProps.tsx# b/packages/core/src/components/#ButtonProps.tsx#
@@ -0,0 +1,7 @@
+import React from 'react';
+
+
+export interface ButtonProps extends React.ComponentPropsWithRef<'button'> {
+    variant?: 'primary' | 'secondary';
+    size?: 'lg' | 'md' | 'sm' | 'xs';
+}
diff --git a/packages/core/src/components/Button.tsx b/packages/core/src/components/Button.tsx
@@ -1,65 +1,23 @@
 import React from 'react'
 import { cx } from '../utils/class'
+import { base, getVariantStyle, getSizeStyle } from './buttonStyle'
 
 export interface ButtonProps extends React.ComponentPropsWithRef<'button'> {
   variant?: 'primary' | 'secondary'
-  textAlign?: 'left' | 'right' | 'center'
+  size?: 'lg' | 'md' | 'sm' | 'xs'
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
     // Make sure that there is no problem even if className is specified on the side that uses the component
-    const { className, children, textAlign, variant, ...restProps } = props
+    const { className, children, variant, size, ...restProps } = props
 
-    const align = textAlign ?? 'center'
-
-    const style = `
-    select-none
-    inline-block
-    p-4
-    text-button
-    text-${align}
-    rounded-lg
-    cursor-pointer
-    whitespace-nowrap
-    border
-    border-solid
-    border-sea-800
-    active:enabled:border-sea-800/[.8]
-    hover:enabled:border-sea-800/[.85]
-    focus:outline
-    focus:outline-2
-    focus:outline-wood-600
-    disabled:border-sumi-500
-    disabled:cursor-not-allowed
-  `
-
-    const primary = `
-    text-white-1000
-    bg-sea-800
-    active:enabled:bg-sea-800/[.8]
-    hover:enabled:bg-sea-800/[.85]
-    disabled:bg-sumi-500
-    disabled:text-white-1000
-  `
-    const secondary = `
-    text-sea-800
-    bg-transparent
-    active:enabled:bg-sea-50/[.60]
-    hover:enabled:bg-sea-50
-    active:enabled:text-sea-800/[.85]
-    hover:enabled:text-sea-800/[.85]
-    disabled:text-sumi-500
-  `
-
-    const styles = {
-      primary: primary,
-      secondary: secondary
-    }
+    const v = variant ?? 'primary'
+    const s = size ?? 'lg'
 
     return (
       <button
-        className={cx(style, styles[variant ?? 'primary'], className)}
+        className={cx(base, getVariantStyle(v), getSizeStyle(s), className)}
         {...restProps}
         ref={ref}
       >

diff --git a/packages/core/src/components/ButtonProps.tsx b/packages/core/src/components/ButtonProps.tsx
diff --git a/packages/core/src/components/IconButton.tsx b/packages/core/src/components/IconButton.tsx
@@ -1,11 +1,13 @@
 import React from 'react'
 import { cx } from '../utils/class'
+import { base, getVariantStyle, getSizeStyle } from './buttonStyle'
 
 export interface IconButtonProps extends React.ComponentPropsWithRef<'button'> {
   variant?: 'primary' | 'secondary'
+  size?: 'lg' | 'md' | 'sm' | 'xs'
   iconLayout?: 'left' | 'right'
-  rounded?: string
   icon: string
+  rounded?: string
 }
 
 export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
@@ -14,88 +16,55 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
       className,
       children,
       variant,
-      icon,
+      size,
       iconLayout,
+      icon,
       rounded,
       ...restProps
     } = props
 
     const layout = iconLayout ?? 'left'
+    const v = variant ?? 'primary'
+    const s = size ?? 'lg'
 
-    const align = 'center'
+    const styleIcon = `
+      inline-block
+      align-middle
+      font-icon
+      text-2xl
+      font-light
+      leading-4
+      antialiased
+      mb-1
+    `
 
-    const style = `
-    ${rounded === 'full' ? 'aspect-square' : ''}
-    inline-block
-    p-4
-    text-button
-    text-${align}
-    rounded-${rounded ? rounded : 'lg'}
-    cursor-pointer
-    whitespace-nowrap
-    border
-    border-solid
-    border-sea-800
-    active:enabled:border-sea-800/[.8]
-    hover:enabled:border-sea-800/[.85]
-    focus:outline
-    focus:outline-2
-    focus:outline-wood-600
-    disabled:border-sumi-500
-    disabled:cursor-not-allowed
-  `
-
-    const primary = `
-    text-white-1000
-    bg-sea-800
-    active:enabled:bg-sea-800/[.8]
-    hover:enabled:bg-sea-800/[.85]
-    disabled:bg-sumi-500
-    disabled:text-white-1000
-  `
-    const secondary = `
-    text-sea-800
-    bg-transparent
-    active:enabled:bg-sea-50/[.60]
-    hover:enabled:bg-sea-50
-    active:enabled:text-sea-800/[.85]
-    hover:enabled:text-sea-800/[.85]
-    disabled:text-sumi-500
-  `
-
-    const styles = {
-      primary: primary,
-      secondary: secondary
-    }
-
-    const iconStyle = `
-    inline-block
-    align-middle
-    font-icon
-    text-2xl
-    font-light
-    leading-4
-    antialiased
-    mb-1
-  `
+    const styleRounded = `
+      ${rounded ? `aspect-square !rounded-full` : ''}
+    `
 
     // When text is specified on a button, set the 'aria-hidden' attribute of the icon to true.
     const ariaHidden = children ? true : false
 
     return (
       <button
-        className={cx(style, styles[variant ?? 'primary'], className)}
+        className={cx(
+          base,
+          getVariantStyle(v),
+          getSizeStyle(s),
+          styleRounded,
+          className
+        )}
         {...restProps}
         ref={ref}
       >
         {layout == 'left' && (
-          <span className={cx(iconStyle)} aria-hidden={ariaHidden}>
+          <span className={cx(styleIcon)} aria-hidden={ariaHidden}>
             {icon}
           </span>
         )}
         {children && <span className="mx-1 inline-block">{children}</span>}
         {layout == 'right' && (
-          <span className={cx(iconStyle)} aria-hidden={ariaHidden}>
+          <span className={cx(styleIcon)} aria-hidden={ariaHidden}>
             {icon}
           </span>
         )}

diff --git a/packages/core/src/components/Link.tsx b/packages/core/src/components/Link.tsx
@@ -8,12 +8,15 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
     const { className, children, ...restProps } = props
     const href = props.href ?? ''
 
+    const styleUnderLine = `
+      underline
+      underline-offset-[0.125em]
+    `
+
     const style = `
       rounded-sm
       cursor-pointer
       text-sea-600
-      underline
-      underline-offset-[0.125em]
       hover:text-sea-800
       active:text-sea-800
       visited:text-sea-900
@@ -23,8 +26,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       disabled:border-sumi-500
     `
 
-    const iconStyle = `
-      inline-block
+    const styleIcon = `
       align-middle
       ml-0.5
       text-sumi-700
@@ -44,15 +46,20 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           {...restProps}
           ref={ref}
         >
-          {children}
-          <span className={cx(iconStyle)} aria-hidden="true">
+          <span className={styleUnderLine}>{children}</span>
+          <span className={cx(styleIcon)} aria-label="新規タブで開きます">
             open_in_new
           </span>
         </a>
       )
     }
     return (
-      <a className={cx(style, className)} href={href} {...restProps} ref={ref}>
+      <a
+        className={cx(style, styleUnderLine, className)}
+        href={href}
+        {...restProps}
+        ref={ref}
+      >
         {children}
       </a>
     )