fix: [IconButton] size

alibaba · Mar 4, 2022 · f506f7e · f506f7e
1 parent 615a8e1
commit f506f7e
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 26 deletions.
diff --git a/demo/src/index.less b/demo/src/index.less
@@ -1,6 +1,6 @@
-:root {
-  font-size: (16 * 100vw / 375);
-}
+// :root {
+//   font-size: (16 * 100vw / 375);
+// }
 
 body {
   margin: 0;

diff --git a/src/components/Bubble/index.tsx b/src/components/Bubble/index.tsx
@@ -5,7 +5,7 @@ export interface BubbleProps extends React.HTMLAttributes<HTMLDivElement> {
   content?: React.ReactNode;
 }
 
-export const Bubble: React.FC<BubbleProps> = (props) => {
+export const Bubble = (props: BubbleProps) => {
   const { type = 'text', content, children, ...other } = props;
   return (
     <div className={`Bubble ${type}`} data-type={type} {...other}>

diff --git a/src/components/Composer/style.less b/src/components/Composer/style.less
@@ -15,7 +15,6 @@
 
   .IconBtn {
     margin: 0 -@icon-button-lg-padding;
-    font-size: @composer-icon-size;
   }
 }
 
@@ -39,6 +38,7 @@
   border: @composer-input-border;
   border-radius: @composer-input-border-radius;
   background: @composer-input-bg;
+  line-height: (20 / 14);
   word-break: break-all;
   caret-color: @composer-input-caret-color;
   transition: @composer-input-transition;

diff --git a/src/components/IconButton/style.less b/src/components/IconButton/style.less
@@ -4,6 +4,7 @@
   border-radius: @icon-button-border-radius;
   background: @icon-button-bg;
   color: @icon-button-color;
+  font-size: @icon-button-size;
 
   &.Btn--primary {
     color: @icon-button-primary-color;

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -14,7 +14,7 @@ export const Navbar: React.FC<NavbarProps> = (props) => {
   const { className, title, logo, leftContent, rightContent = [] } = props;
   return (
     <header className={clsx('Navbar', className)}>
-      <div className="Navbar-left">{leftContent && <IconButton size="lg" {...leftContent} />}</div>
+      <div className="Navbar-left">{leftContent && <IconButton {...leftContent} />}</div>
       <div className="Navbar-main">
         {logo ? (
           <img className="Navbar-logo" src={logo} alt={title} />
@@ -24,7 +24,7 @@ export const Navbar: React.FC<NavbarProps> = (props) => {
       </div>
       <div className="Navbar-right">
         {rightContent.map((item) => (
-          <IconButton size="lg" {...item} key={item.icon} />
+          <IconButton {...item} key={item.icon} />
         ))}
       </div>
     </header>

diff --git a/src/components/Navbar/style.less b/src/components/Navbar/style.less
@@ -17,13 +17,11 @@
   }
   &-left,
   &-right {
-    @padding-width: @navbar-icon-padding * 2;
-    width: 100px;
-    width: ~'calc((@{icon-button-lg-size} + @{padding-width}) * 2)';
-    padding: 2px 0;
+    width: 58px;
   }
   &-right {
     text-align: right;
+    white-space: nowrap;
   }
   &-title {
     margin: 0;
@@ -35,8 +33,7 @@
     width: auto;
     height: @navbar-logo-height;
   }
-  .IconBtn {
-    padding: @navbar-icon-padding;
-    color: @navbar-icon-color;
+  .IconBtn + .IconBtn {
+    margin-left: 9px;
   }
 }
diff --git a/src/styles/var.less b/src/styles/var.less
@@ -121,11 +121,9 @@
 // Composer
 @composer-padding: 9px var(--gutter);
 
-@composer-icon-size: 28px;
-
 @composer-input-max-height: 132px;
 @composer-input-min-height: 36px;
-@composer-input-padding: 6px 12px;
+@composer-input-padding: 8px 12px;
 @composer-input-border: 0;
 @composer-input-bg: var(--white);
 @composer-input-border-radius: 9px;
@@ -165,17 +163,14 @@
 
 // Navbar
 @navbar-height: 44px;
-@navbar-padding: 0 12px;
+@navbar-padding: 0 var(--gutter);
 @navbar-bg: var(--gray-6);
 @navbar-border-color: var(--gray-5);
 
 @navbar-color: var(--gray-1);
 @navbar-font-size: @font-size-lg;
 @navbar-logo-height: @navbar-height - 8px;
 
-@navbar-icon-padding: 6px;
-@navbar-icon-color: var(--gray-2);
-
 // Notice
 @notice-padding: @gutter;
 @notice-border-radius: 12px;
@@ -268,19 +263,20 @@
 @carousel-dot-transition: 0.3s;
 
 // Icon
-@icon-size-lg: 1rem * (24px / @font-size-root);
+@icon-size-lg: 30px;
 
 // IconButton
-@icon-button-padding: 0;
+@icon-button-padding: 3px;
 @icon-button-border: 0;
-@icon-button-border-radius: 4px;
+@icon-button-border-radius: 6px;
 @icon-button-bg: transparent;
 @icon-button-color: var(--gray-2);
+@icon-button-size: 18px;
 
 @icon-button-primary-color: var(--brand-2);
 
-@icon-button-lg-padding: 4px;
-@icon-button-lg-border-radius: 12px;
+@icon-button-lg-padding: 3px;
+@icon-button-lg-border-radius: 9px;
 @icon-button-lg-size: @icon-size-lg;
 
 @icon-button-disabled-border-color: var(--gray-6);