Merge pull request #227 from dhis2/small-button-icon-padding

fix(button): reduce small button icon only padding
dhis2 · Aug 10, 2020 · acec160 · acec160
2 parents 6d83fd7 + 92d7058
commit acec160
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/packages/core/src/Button/Button.stories.js b/packages/core/src/Button/Button.stories.js
@@ -73,13 +73,31 @@ export const Icon = () => (
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
             >
-                <g fill="inherit">
-                    <path d="m12 9.60799979c-.9675646-.00040429-1.8400814.58213131-2.2106327 1.47592831-.37055125.8937971-.1661488 1.9228029.5178797 2.6071174.6840285.6843146 1.7129487.8891473 2.6069007.5189699.8939519-.3701775 1.4768525-1.2424507 1.4768525-2.2100154.0002651-.6343059-.251526-1.242723-.6999542-1.6913388-.4484283-.44861578-1.0567401-.70066141-1.691046-.70066141z" />
-                    <path d="m18.211 17.043c1.530261-1.8932708 2.1220857-4.3770963 1.61-6.757-.1126661-.54068677-.6423132-.88766609-1.183-.775s-.8876661.6423132-.775 1.183c.3898211 1.7898853-.0513388 3.6600356-1.2 5.087-1.4414282 1.768531-3.7611624 2.5665104-5.9855392 2.0590019-2.22437678-.5075086-3.96843636-2.2326735-4.50014359-4.4513903-.53170722-2.2187169.24095736-4.54700536 1.99368279-6.0076116 1.3912546-1.14691232 3.2210302-1.61461938 4.992-1.276.3545773.07323804.7210476-.05090452.958113-.32456278.2370655-.27365826.3076938-.65408362.1846532-.99459778s-.4205297-.58792486-.7777662-.64683944c-3.84356843-.74431466-7.66116508 1.40235088-9.02206289 5.0731791-1.3608978 3.6708282.13474987 7.7872897 3.53463936 9.7283652 3.39988953 1.9410755 7.70509613 1.1364558 10.17442353-1.9015443z" />
-                    <path d="m12 0c-3.95379389.00225999-7.65300716 1.95100316-9.89088463 5.21051166-2.23787747 3.25950849-2.72748958 7.41186434-1.30911537 11.10248834.1122293.3537208.41110962.616205.77636092.6818197.36525129.0656147.73680252-.0764314.96512827-.368974.22832575-.2925425.27587445-.6874685.12351081-1.0258457-1.7193753-4.4606539-.03866238-9.51427549 4.00976702-12.05669632 4.04842938-2.54242084 9.33048788-1.86143198 12.60169038 1.62467166 3.2712025 3.48610365 3.6151863 8.80075906.8206607 12.67945876-2.7945256 3.8786996-7.9447296 5.2349025-12.2871181 3.2355659-.32457579-.1500516-.70454775-.1155458-.99678411.0905193s-.45233946.5523834-.42000001.9085c.03233945.3561167.25220832.6679292.57678412.8179807 1.57620727.729626 3.2931184 1.1050937 5.03 1.1000511 6.6274169 0 11.9999998-5.3726342 11.9999998-12.0000511 0-6.62741693-5.3725829-12-11.9999998-12z" />
-                    <path d="m18.217 7.217c0-.58049429-.349735-1.10381052-.8860805-1.32586253-.5363455-.22205202-1.153643-.09909611-1.5639713.31151839-.4103284.41061449-.532854 1.02799752-.3104281 1.56418813.2224258.5361906.7459857.88556054 1.3264799.88515636.7921381-.00055236 1.434-.64286209 1.434-1.43500035z" />
-                    <circle cx="3.87" cy="19.652" r="1.435" />
-                </g>
+                <path
+                    d="m10.7071068 13.2928932c.3604839.360484.3882135.927715.0831886 1.3200062l-.0831886.0942074-5.2921068 5.2918932 2.585.001c.51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211c0 .5128358-.38604019.9355072-.88337887.9932723l-.11662113.0067277h-5l-.0193545-.0001861c-.02332655-.0004488-.04664039-.0017089-.06989557-.0037803l.08925007.0039664c-.05062028 0-.10036209-.0037612-.14896122-.0110193-.01698779-.0026088-.03441404-.0056829-.05176454-.0092208-.02202032-.0043997-.04371072-.0095935-.06511385-.0154809-.01562367-.0043767-.03101173-.0090077-.04630291-.0140171-.01965516-.0063844-.03943668-.0135776-.058916-.0213659-.01773713-.0070924-.03503998-.014575-.05216303-.0225694-.02066985-.0097032-.0410724-.0201205-.0610554-.0312024-.01211749-.006623-.02433616-.0137311-.0364318-.0211197-.0255662-.0157232-.05042194-.0324946-.07445055-.050318-.00744374-.0054399-.01468311-.010971-.02186305-.0166142-.0631594-.049624-.12042594-.1068905-.17019169-.1703222l.08010726.0903567c-.03539405-.0353941-.06758027-.0727812-.09655864-.1118002-.01784449-.0241759-.03461588-.0490316-.05026715-.0746464-.00746051-.0120471-.0145686-.0242658-.02139626-.0365981-.01087725-.0197682-.02129453-.0401707-.03101739-.060963-.00797473-.0170006-.01545736-.0343035-.02242829-.0517631-.00790975-.0197568-.015103-.0395383-.02167881-.0595996-.00481796-.0148851-.00944895-.0302731-.01370154-.0457434-.00601151-.0215565-.01120534-.0432469-.01567999-.0651989-.00346298-.0174188-.00653707-.0348451-.00914735-.0523272-.00160026-.010231-.00303174-.021012-.00429007-.0318458l-.00276132-.027371c-.00207143-.0232552-.00333152-.0465691-.00378026-.0698956l-.00018615-.0193545v-5c0-.5522847.44771525-1 1-1 .51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211v2.584l5.29289322-5.2911068c.39052429-.3905243 1.02368928-.3905243 1.41421358 0zm9.2928932-3.2928932v10h-10v-2h8v-8zm-6-6v2h-8v7h-2v-9zm7-2 .0193545.00018615c.0233265.00044874.0466404.00170883.0698956.00378026l-.0892501-.00396641c.0506203 0 .1003621.00376119.1489612.01101934.0169878.00260874.0344141.00568283.0517646.00922073.0220203.00439973.0437107.00959356.0651138.0154809.0156237.00437676.0310117.00900775.0463029.01401712.0196552.0063844.0394367.01357765.058916.02136587.0177371.00709246.03504.01457509.052163.0225694.0206699.00970328.0410724.02012056.0610555.03120241.0121174.00662306.0243361.01373115.0364318.02111968.0255662.01572325.0504219.03249464.0744505.05031806.0074437.00543993.0146831.01097097.021863.01661418.0631595.04962402.120426.10689056.1701917.17032223l-.0801072-.0903567c.035394.03539405.0675802.0727812.0965586.11180017.0178445.02417592.0346159.04903166.0502672.07464642.0074605.01204708.0145686.02426575.0213962.03659809.0108773.01976815.0212946.0401707.0310174.06096295.0079748.01700065.0154574.0343035.0224283.05176313.0079098.01975682.015103.03953834.0216788.05959961.004818.01488507.009449.03027313.0137016.04574344.0060115.02155649.0112053.04324689.0156799.06519887.003463.01741884.0065371.03484509.0091474.05232723.0016003.01023098.0030317.02101195.0042901.03184574l.0030256.03039033c.0015457.01796531.0026074.03596443.003185.05397618l.0005171.03225462v5c0 .55228475-.4477153 1-1 1-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113v-2.586l-5.2928932 5.2931068c-.3905243.3905243-1.0236893.3905243-1.4142136 0-.3604839-.360484-.3882135-.92771504-.0831886-1.32000624l.0831886-.09420734 5.2911068-5.29289322h-2.584c-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113c0-.51283584.3860402-.93550716.8833789-.99327227l.1166211-.00672773z"
+                    fill="#6e7a8a"
+                />
+            </svg>
+        }
+    />
+)
+export const IconSmall = () => (
+    <Button
+        name="Icon small button"
+        value="default"
+        onClick={logger}
+        small
+        icon={
+            <svg
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="m10.7071068 13.2928932c.3604839.360484.3882135.927715.0831886 1.3200062l-.0831886.0942074-5.2921068 5.2918932 2.585.001c.51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211c0 .5128358-.38604019.9355072-.88337887.9932723l-.11662113.0067277h-5l-.0193545-.0001861c-.02332655-.0004488-.04664039-.0017089-.06989557-.0037803l.08925007.0039664c-.05062028 0-.10036209-.0037612-.14896122-.0110193-.01698779-.0026088-.03441404-.0056829-.05176454-.0092208-.02202032-.0043997-.04371072-.0095935-.06511385-.0154809-.01562367-.0043767-.03101173-.0090077-.04630291-.0140171-.01965516-.0063844-.03943668-.0135776-.058916-.0213659-.01773713-.0070924-.03503998-.014575-.05216303-.0225694-.02066985-.0097032-.0410724-.0201205-.0610554-.0312024-.01211749-.006623-.02433616-.0137311-.0364318-.0211197-.0255662-.0157232-.05042194-.0324946-.07445055-.050318-.00744374-.0054399-.01468311-.010971-.02186305-.0166142-.0631594-.049624-.12042594-.1068905-.17019169-.1703222l.08010726.0903567c-.03539405-.0353941-.06758027-.0727812-.09655864-.1118002-.01784449-.0241759-.03461588-.0490316-.05026715-.0746464-.00746051-.0120471-.0145686-.0242658-.02139626-.0365981-.01087725-.0197682-.02129453-.0401707-.03101739-.060963-.00797473-.0170006-.01545736-.0343035-.02242829-.0517631-.00790975-.0197568-.015103-.0395383-.02167881-.0595996-.00481796-.0148851-.00944895-.0302731-.01370154-.0457434-.00601151-.0215565-.01120534-.0432469-.01567999-.0651989-.00346298-.0174188-.00653707-.0348451-.00914735-.0523272-.00160026-.010231-.00303174-.021012-.00429007-.0318458l-.00276132-.027371c-.00207143-.0232552-.00333152-.0465691-.00378026-.0698956l-.00018615-.0193545v-5c0-.5522847.44771525-1 1-1 .51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211v2.584l5.29289322-5.2911068c.39052429-.3905243 1.02368928-.3905243 1.41421358 0zm9.2928932-3.2928932v10h-10v-2h8v-8zm-6-6v2h-8v7h-2v-9zm7-2 .0193545.00018615c.0233265.00044874.0466404.00170883.0698956.00378026l-.0892501-.00396641c.0506203 0 .1003621.00376119.1489612.01101934.0169878.00260874.0344141.00568283.0517646.00922073.0220203.00439973.0437107.00959356.0651138.0154809.0156237.00437676.0310117.00900775.0463029.01401712.0196552.0063844.0394367.01357765.058916.02136587.0177371.00709246.03504.01457509.052163.0225694.0206699.00970328.0410724.02012056.0610555.03120241.0121174.00662306.0243361.01373115.0364318.02111968.0255662.01572325.0504219.03249464.0744505.05031806.0074437.00543993.0146831.01097097.021863.01661418.0631595.04962402.120426.10689056.1701917.17032223l-.0801072-.0903567c.035394.03539405.0675802.0727812.0965586.11180017.0178445.02417592.0346159.04903166.0502672.07464642.0074605.01204708.0145686.02426575.0213962.03659809.0108773.01976815.0212946.0401707.0310174.06096295.0079748.01700065.0154574.0343035.0224283.05176313.0079098.01975682.015103.03953834.0216788.05959961.004818.01488507.009449.03027313.0137016.04574344.0060115.02155649.0112053.04324689.0156799.06519887.003463.01741884.0065371.03484509.0091474.05232723.0016003.01023098.0030317.02101195.0042901.03184574l.0030256.03039033c.0015457.01796531.0026074.03596443.003185.05397618l.0005171.03225462v5c0 .55228475-.4477153 1-1 1-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113v-2.586l-5.2928932 5.2931068c-.3905243.3905243-1.0236893.3905243-1.4142136 0-.3604839-.360484-.3882135-.92771504-.0831886-1.32000624l.0831886-.09420734 5.2911068-5.29289322h-2.584c-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113c0-.51283584.3860402-.93550716.8833789-.99327227l.1166211-.00672773z"
+                    fill="#6e7a8a"
+                />
             </svg>
         }
     />

diff --git a/packages/core/src/Button/Button.styles.js b/packages/core/src/Button/Button.styles.js
@@ -233,4 +233,12 @@ export default css`
         vertical-align: middle;
         pointer-events: none;
     }
+
+    .small.icon-only {
+        padding: 0 0 0 2px;
+    }
+
+    .small .button-icon {
+        margin-right: 2px;
+    }
 `