feat(shred/button): add fit size

wanted-fork-fork · Jul 18, 2024 · 2a3b237 · 2a3b237
1 parent fb3ad29
commit 2a3b237
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 deletions.
diff --git a/src/processes/shortcut/Shortcut.module.css b/src/processes/shortcut/Shortcut.module.css
@@ -16,7 +16,7 @@
 .Header {
     display: flex;
     width:  100%;
-    padding: 12px 4px 0;
+    padding: 20px 20px 0;
 }
 
 .CloseButton {

diff --git a/src/processes/shortcut/Shortcut.tsx b/src/processes/shortcut/Shortcut.tsx
@@ -45,7 +45,13 @@ export const Shortcut = () => {
         <Sheet.Container>
           <Sheet.Header className={styles.Header}>
             {selectedKey && (
-              <Button variant={'ghost'} color={'neutral'} widthType={'hug'} onClick={() => setSelectedKey(null)}>
+              <Button
+                variant={'ghost'}
+                color={'neutral'}
+                widthType={'hug'}
+                size={'fit'}
+                onClick={() => setSelectedKey(null)}
+              >
                 <ArrowLeft width={24} />
               </Button>
             )}
@@ -54,6 +60,7 @@ export const Shortcut = () => {
               variant={'ghost'}
               color={'neutral'}
               widthType={'hug'}
+              size={'fit'}
               onClick={onClose}
             >
               <Close width={24} />

diff --git a/src/shared/ui/Button/Button.module.css b/src/shared/ui/Button/Button.module.css
@@ -50,6 +50,9 @@
     border-radius: 40px;
     padding: 8px 12px;
 }
+.Button[data-size='fit'] {
+}
+
 
 .Button[data-width-type='fill'] {
     width: 100%;

diff --git a/src/shared/ui/Button/Button.tsx b/src/shared/ui/Button/Button.tsx
@@ -8,7 +8,7 @@ type ButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HT
   suffixSlot?: ReactNode;
   prefixSlot?: ReactNode;
   textAlign?: 'left' | 'center' | 'right';
-  size?: 'S' | 'M';
+  size?: 'fit' | 'S' | 'M';
 };
 
 export const Button = ({

diff --git a/src/shared/ui/InputBottomSheet/InputBottomSheet.tsx b/src/shared/ui/InputBottomSheet/InputBottomSheet.tsx
@@ -33,8 +33,12 @@ export const InputBottomSheet = ({
     <Sheet detent={'content-height'} isOpen={open} onClose={onClose}>
       <Sheet.Container>
         <Sheet.Header className={styles.Header}>
-          <ArrowLeft width={24} />
-          <Close width={24} />
+          <Button variant={'ghost'} color={'neutral'} widthType={'hug'} size={'fit'} onClick={onClose}>
+            <ArrowLeft width={24} />
+          </Button>
+          <Button variant={'ghost'} color={'neutral'} widthType={'hug'} size={'fit'} onClick={onClose}>
+            <Close width={24} />
+          </Button>
         </Sheet.Header>
         <Sheet.Content className={styles.Content}>
           <h2>{title}</h2>