Merge pull request #574 from grmlin/master

icon alignment fixes for floating action button links
mui · Apr 24, 2015 · 79484b2 · 79484b2
2 parents a360242 + 8b4bc83
commit 79484b2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx
@@ -45,6 +45,7 @@ var ButtonPage = React.createClass({
       '<FloatingActionButton iconClassName="muidocs-icon-action-grade" />\n' +
       '<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} />\n' +
       '<FloatingActionButton iconClassName="muidocs-icon-action-grade" disabled={true} />\n' +
+      '<FloatingActionButton iconClassName="muidocs-icon-custom-github" linkButton={true} href="https://github.com/callemall/material-ui" mini={true} secondary={true}/>' +
       '<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} disabled={true} />\n' +
       '<FloatingActionButton iconClassName="muidocs-icon-action-grade" secondary={true} />\n' +
       '<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} secondary={true} />';
@@ -126,7 +127,7 @@ var ButtonPage = React.createClass({
             type: 'string',
             header: 'optional',
             desc: 'This is the classname of the icon to display inside the button. This only applies to ' +
-              'floating action buttons. An alternative to adding an icon would be to insert a custom svg ' + 
+              'floating action buttons. An alternative to adding an icon would be to insert a custom svg ' +
               'component or FontIcon as a child.'
           },
           {
@@ -224,6 +225,9 @@ var ButtonPage = React.createClass({
             <div className="button-example-container">
               <FloatingActionButton iconClassName="muidocs-icon-action-grade" disabled={true} />
             </div>
+            <div className="button-example-container">
+              <FloatingActionButton iconClassName="muidocs-icon-custom-github" linkButton={true} href="https://github.com/callemall/material-ui" mini={true} secondary={true}/>
+            </div>
             <div className="button-example-container">
               <FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} disabled={true} />
             </div>

diff --git a/src/less/components/floating-action-button.less b/src/less/components/floating-action-button.less
@@ -12,6 +12,8 @@
     overflow: hidden; 
     background-color: @floating-action-button-color;
     border-radius: 50%;
+    text-align: center;
+    vertical-align: bottom;
 
     //This is need so that ripples do not bleed
     //past border radius.