ADCIO-3400) fix: fix small styles for text, select, tab (#58)

* fix: fix text input * fix: fix select input font to B7 * fix: fix tab width * fix: fix tab story
corca-ai · May 21, 2024 · 5526e42 · 5526e42
1 parent a94201c
commit 5526e42
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 22 deletions.
diff --git a/src/components/Input/TextInput.tsx b/src/components/Input/TextInput.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { BaseInput, type InputBaseProps, InputContainer } from './InputContainer';
+import { BaseInput, InputBaseProps, InputContainer } from './InputContainer';
 
 export type TextInputProps = Omit<InputBaseProps, 'children'>;
 
@@ -18,6 +18,8 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       defaultValue,
       required = false,
       width,
+      leftSection,
+      rightSection,
       ...props
     },
     ref,
@@ -29,6 +31,8 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
         required={required}
         error={error}
         width={width}
+        leftSection={leftSection}
+        rightSection={rightSection}
         {...props}
       >
         <BaseInput
@@ -39,8 +43,8 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
           defaultValue={defaultValue}
           disabled={disabled}
           error={error}
-          {...props}
           ref={ref}
+          {...props}
         />
       </InputContainer>
     );

diff --git a/src/components/Select/SelectInput.tsx b/src/components/Select/SelectInput.tsx
@@ -1,10 +1,10 @@
-import { type InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
 
 import styled from '@emotion/styled';
 
 import Icon from '../Icon';
-import { B1, B3, B5 } from '../Text';
-import { Tooltip, type TooltipProps } from '../Tooltip';
+import { B3, B5, B7 } from '../Text';
+import { Tooltip, TooltipProps } from '../Tooltip';
 import { color, typography } from '../styles';
 
 type SelectInputTooltipProps = Omit<TooltipProps, 'children'>;
@@ -39,10 +39,10 @@ export function SelectInput({
     <SelectInputWrapper width={width} onClick={onClick}>
       {label && (
         <LabelContainer>
-          <B1>
+          <B7>
             {label} {required && <Star> *</Star>}
-          </B1>
-          {tooltip != null && (
+          </B7>
+          {tooltip && (
             <Tooltip
               content={tooltip.content}
               direction={tooltip.direction}
@@ -129,7 +129,7 @@ const BaseSelectInput = styled.input<{
   font-weight: 500;
   font-size: ${typography.size.xs}px;
   color: ${color['grey-80']};
-  background: ${color.white};
+  background: ${color['white']};
   border-radius: 8px;
   height: 34px;
   cursor: ${({ cursor }) => cursor ?? 'auto'};

diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
@@ -3,17 +3,13 @@ import styled from '@emotion/styled';
 import { B3 } from '../Text';
 import { color } from '../styles';
 
-const TAB_WIDTH = 74;
-
 const Container = styled.div`
   display: inline-block;
-  width: ${TAB_WIDTH * 5}px;
   overflow-x: auto;
 `;
 
 const Contents = styled.div`
   width: fit-content;
-  min-width: ${TAB_WIDTH * 5}px;
   display: flex;
   align-items: flex-end;
   border-bottom: 2px solid ${color['grey-50']};
@@ -22,7 +18,6 @@ const Contents = styled.div`
 const Item = styled.div`
   display: flex;
   border-radius: 4px 4px 0px 0px;
-  width: ${TAB_WIDTH}px;
   padding: 11px 12px;
   justify-content: center;
   align-items: center;
@@ -50,12 +45,14 @@ interface Props {
   onChange: (v: string) => void;
   selectedTab: string;
   items: TabItem[];
+  tabWidth?: number;
+  tabFullWidth?: boolean;
 }
 
-export function Tabs({ items, onChange, selectedTab }: Props) {
+export function Tabs({ items, onChange, selectedTab, tabWidth = 74, tabFullWidth }: Props) {
   return (
-    <Container>
-      <Contents>
+    <Container style={{ width: '100%' }}>
+      <Contents style={{ minWidth: '100%' }}>
         {items.map((tab, i) => {
           const selected = tab.value === selectedTab;
           const Component = selected ? SelectedTab : NotSelectedTab;
@@ -67,6 +64,9 @@ export function Tabs({ items, onChange, selectedTab }: Props) {
               }}
               key={i}
               aria-selected={selected ? 'true' : 'false'}
+              style={{
+                width: tabFullWidth ? `${100 / items.length}%` : tabWidth,
+              }}
             >
               <B3 ellipsis={true} c={color}>
                 {tab.label}

diff --git a/src/stories/Tabs.stories.tsx b/src/stories/Tabs.stories.tsx
@@ -1,9 +1,9 @@
+import { ComponentMeta, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import styled from '@emotion/styled';
 
 import { Tabs } from '../components';
-import type { Meta, StoryFn } from '@storybook/react';
 
 export default {
   title: 'Components/Tabs',
@@ -27,7 +27,7 @@ export default {
       },
     },
   },
-} as Meta<typeof Tabs>;
+} as ComponentMeta<typeof Tabs>;
 
 export function Default() {
   const [selected, setSelected] = React.useState('1');
@@ -49,9 +49,7 @@ export function Default() {
         },
       ]}
       selectedTab={selected}
-      onChange={value => {
-        setSelected(value);
-      }}
+      onChange={value => setSelected(value)}
     />
   );
 }
@@ -74,6 +72,32 @@ export const Scroll = () => {
   return <Tabs items={tabItems} selectedTab={selected} onChange={setSelected} />;
 };
 
+export function FullWidth() {
+  const [selected, setSelected] = React.useState('1');
+
+  return (
+    <Tabs
+      items={[
+        {
+          label: 'Label 1',
+          value: '1',
+        },
+        {
+          label: 'Label 2',
+          value: '2',
+        },
+        {
+          label: 'Very long Label',
+          value: '3',
+        },
+      ]}
+      selectedTab={selected}
+      onChange={value => setSelected(value)}
+      tabFullWidth
+    />
+  );
+}
+
 const Container = styled.div`
   display: flex;
   align-items: center;