feat: Size of button icons is dependent of the button size (#1323)

feat: Size of button icons is dependent of the button size
cozy · Dec 20, 2019 · 14f3fa6 · 14f3fa6
2 parents c9f7d20 + 567b237
commit 14f3fa6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/react/Button/Readme.md b/react/Button/Readme.md
@@ -156,10 +156,10 @@ Subtle buttons are buttons without background and borders, wich look "inverted"
 import Button from 'cozy-ui/transpiled/react/Button';
 <div>
   <p>
-    <Button subtle size='tiny' label='Tiny text' onClick={() => alert('Clicked on Tiny text')} />
-    <Button subtle size='small' label='Small text' onClick={() => alert('Clicked on Small text')} />
-    <Button subtle label='Regular text' onClick={() => alert('Clicked on Regular text')} />
-    <Button subtle size='large' label='Large text' onClick={() => alert('Clicked on Large text')} />
+    <Button subtle icon='plus' size='tiny' label='Tiny text' onClick={() => alert('Clicked on Tiny text')} />
+    <Button subtle icon='plus' size='small' label='Small text' onClick={() => alert('Clicked on Small text')} />
+    <Button subtle icon='plus' label='Regular text' onClick={() => alert('Clicked on Regular text')} />
+    <Button subtle icon='plus' size='large' label='Large text' onClick={() => alert('Clicked on Large text')} />
   </p>
   <p>
     <Button subtle theme='secondary' label='Secondary theme' onClick={() => alert('Clicked on Secondary theme')} />

diff --git a/react/Button/index.jsx b/react/Button/index.jsx
@@ -43,6 +43,12 @@ const tagToTransformProps = {
 
 const identity = x => x
 
+const sizeToIconSize = {
+  tiny: 8,
+  small: 12,
+  large: 18
+}
+
 const BaseButton = props => {
   const {
     children,
@@ -81,7 +87,12 @@ const BaseButton = props => {
     >
       <span>
         {Icon.isProperIcon(icon) ? (
-          <Icon icon={icon} aria-hidden focusable="false" />
+          <Icon
+            size={sizeToIconSize[size]}
+            icon={icon}
+            aria-hidden
+            focusable="false"
+          />
         ) : (
           icon
         )}
@@ -90,6 +101,7 @@ const BaseButton = props => {
         {extraRight && <span className="u-ml-auto">{extraRight}</span>}
         {restProps.busy && (
           <Icon
+            size={sizeToIconSize[size]}
             icon="spinner"
             spin
             className="u-ml-half"

diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -235,7 +235,7 @@ exports[`Button should render examples: Button 12`] = `
 exports[`Button should render examples: Button 13`] = `
 "<div>
   <div>
-    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--tiny___1pFv6 styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Tiny text</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--small___3ArkI styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Small text</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Regular text</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--large___2gatN styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Large text</span></span></button></p>
+    <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--tiny___1pFv6 styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"8\\" height=\\"8\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#plus\\"></use></svg><span>Tiny text</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--small___3ArkI styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#plus\\"></use></svg><span>Small text</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#plus\\"></use></svg><span>Regular text</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--large___2gatN styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"18\\" height=\\"18\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#plus\\"></use></svg><span>Large text</span></span></button></p>
     <p><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Secondary theme</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--highlight___2jRfu styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Highlight theme</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>DANGER theme</span></span></button></p>
     <p><button type=\\"submit\\" aria-disabled=\\"true\\" disabled=\\"\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Disabled</span></span></button></p>
     <p><button type=\\"submit\\" aria-busy=\\"true\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Busy</span><svg class=\\"u-ml-half styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\">