feat(fab): Initial Implementation #4598

Garbee · 2016-07-26T16:07:50Z

No description provided.

traviskaufman · 2016-07-26T16:10:50Z

traviskaufman · 2016-07-26T19:43:59Z

demos/fab.html

+      }
+
+      fieldset .mdl-fab {
+          margin: 16px;


supernit: I think this is indented by one too many?

Yea, looks off by two spaces. We need linting in the demo files...

traviskaufman · 2016-07-27T20:06:20Z

demos/fab.html

+        <fieldset>
+          <legend>Normal FABs</legend>
+          <button class="mdl-fab">
+            <i class="material-icons mdl-fab__icon">favorite_border</i>


Do we need this wrapper element if we just put the material-icons class on the button and then using

.mdl-fab { align-items: center; justify-content: center; }

to position the text?

Also, perhaps we should put an aria-label attribute on the button element for accessibility purposes, since the fab only displays an icon.

The problem with making material-icons stuff forced is what if they are using another icon set? Whether or not it is "MD". We need to be able to let developers swap out anything icon-wise, like say you wanted to use an SVG version instead.

+1 to aria-label in the examples to help encourage using it.

what if they are using another icon set?

Then they could just swap out the class for that icon set right?

<button class="mdl-fab material-icons" aria-label="download">file_download</button>  <button class="mdl-fab fa fa-download" aria-label="download"> <span class="sr-only">download</span> </button>

Oh, you meant literally move it up. Yea, that can work.

I thought you meant like, implementing the font stack right within the fab class.

traviskaufman · 2016-07-29T19:25:20Z

demos/fab.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>


it may be good to have one example in the demo of a FAB positioned in the bottom-left corner, to show how easy it is to customize the behavior that way, and because it's such a common pattern in material

Done, added an "edit" icon that also uses SVG to test that out. Had to add fill: currentColor to the block to handle giving them the proper color. 😉

traviskaufman · 2016-07-29T19:44:39Z

@Garbee did another pass on the styles. PTAL

traviskaufman · 2016-07-29T19:47:47Z

packages/mdl-fab/mdl-fab.scss

+  overflow: hidden;
+  user-select: none;
+  box-sizing: border-box;
+  -webkit-appearance: none;


I think we also might want to add some font rules as well:

font-weight: 500; font-size: 24px;

as per the spec's guidelines

Garbee · 2016-07-29T20:17:17Z

Codpen of the current state as well. Shadow update is already TODO'ed in the variable file, so I'm not going to duplicate the comment again.

With the typography stuff, let's also hold off just a bit until after the next sprint when we have the theme base done, as the typography should end up being more theme-bound then typography-bound. Unless we are now saying typography will be a big inter-linked dependency (which in this case would be a pretty needless one overall.)

I just need to add a README and this should be good for another pass.

traviskaufman · 2016-08-01T20:16:47Z

packages/mdl-fab/README.md

+  Modify to fit your designs requirements.
+-->
+<style>
+.app-fab--absolute.app-fab--absolute {


I think there's a repeated selector here...did you mean .mdl-fab.app-fab--absolute? And in that case, is the compound class needed? Or is it just there for demonstrative purposes?

Since the generated scripts will be injected after this, the double-class hack is to increase specificity to make sure these rules take place without !important. Otherwise the position would get overridden and it would never get moved.

I'm not sure I understand that exactly...but either way because this is documentation, that implicit knowledge might confuse some people. It may be more straightforward just to use an ID

#my-fab { position: absolute; bottom: 1rem; right: 1rem; }

Agree with @traviskaufman's suggestion.

@traviskaufman: for a bit of extra context, repeating the class name is a nice hack to increase specificity of a CSS rule, without having to use !important or hunt around for other things to append to the rule, like parent classes. Every repetition of the class name increments the specificity.

traviskaufman · 2016-08-01T20:24:28Z

FABs are still missing box shadows:

Resting/default shadow (6dp):

box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
              0px 6px 10px 0px rgba(0, 0, 0, 0.14),
              0px 1px 18px 0px rgba(0, 0, 0, 0.12);

Active shadow (12dp):

 box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
              0px 12px 17px 2px rgba(0, 0, 0, 0.14),
              0px 5px 22px 4px rgba(0, 0, 0, 0.12);

Garbee · 2016-08-01T21:29:39Z

Just pushed the updated code and the codepen is updated with its output.

Removed the ::before psueudo element and just made it all work on ::after. Not sure why we were using both when only one is required.

traviskaufman · 2016-08-02T15:30:14Z

@Garbee you want to shift that back to ::before given #4628 ?

Garbee · 2016-08-02T22:55:12Z

Waiting on that PR to land before updating this one, that way we are good on the direction. Yea, should have removed the PTAL tag.

sgomes · 2016-08-08T10:58:08Z

packages/mdl-fab/README.md

+<!-- You may also use SVG icons instead of an icon font. -->
+<button class="mdl-fab app-fab--absolute" aria-label="Edit">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>


Does this default to currentColor or should that be added in?

It does default. That is the fill CSS rule on the block.

sgomes · 2016-08-08T11:02:09Z

LGTM other than the nits @traviskaufman and I pointed out. Thanks, @Garbee!

Garbee added this to the V2 Alpha milestone Jul 26, 2016

googlebot added the cla: yes label Jul 26, 2016

traviskaufman self-assigned this Jul 26, 2016

Garbee force-pushed the garbee/fabs branch from a8294e8 to e8bf6cb Compare July 26, 2016 19:31

traviskaufman reviewed Jul 26, 2016
View reviewed changes

Garbee force-pushed the garbee/fabs branch 2 times, most recently from b833a3e to b77fb33 Compare July 26, 2016 20:34

traviskaufman changed the title ~~chore(feat): Add FAB Component~~ feat(fab): Initial Implementation Jul 26, 2016

Garbee force-pushed the garbee/fabs branch from b77fb33 to 8084ee1 Compare July 27, 2016 14:51

traviskaufman reviewed Jul 27, 2016
View reviewed changes

Garbee force-pushed the garbee/fabs branch 2 times, most recently from 4ef64f3 to 2bc638b Compare July 29, 2016 17:41

traviskaufman reviewed Jul 29, 2016
View reviewed changes

Garbee force-pushed the garbee/fabs branch from 2bc638b to 1bb9b87 Compare July 29, 2016 20:10

Garbee force-pushed the garbee/fabs branch 4 times, most recently from 0814b05 to 03b65f9 Compare August 1, 2016 16:27

traviskaufman reviewed Aug 1, 2016
View reviewed changes

Garbee force-pushed the garbee/fabs branch 2 times, most recently from ed7b71b to 4fb9d7b Compare August 1, 2016 21:28

Garbee added the PTAL label Aug 1, 2016

traviskaufman removed the PTAL label Aug 2, 2016

Garbee force-pushed the garbee/fabs branch from 4fb9d7b to 1c73958 Compare August 6, 2016 13:11

Garbee added the PTAL label Aug 6, 2016

Garbee force-pushed the garbee/fabs branch from 1c73958 to 4d33b02 Compare August 6, 2016 13:13

sgomes reviewed Aug 8, 2016
View reviewed changes

feat(fab): Initial Implementation

b5e8911

Garbee force-pushed the garbee/fabs branch from 4d33b02 to b5e8911 Compare August 8, 2016 14:39

traviskaufman removed the PTAL label Aug 8, 2016

Garbee merged commit 1df786a into master Aug 8, 2016

Garbee deleted the garbee/fabs branch August 8, 2016 14:56

traviskaufman mentioned this pull request Aug 15, 2016

Implement FAB v2 Component #4469

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(fab): Initial Implementation #4598

feat(fab): Initial Implementation #4598

Garbee commented Jul 26, 2016

traviskaufman commented Jul 26, 2016

traviskaufman Jul 26, 2016

Garbee Jul 26, 2016

traviskaufman Jul 27, 2016

Garbee Jul 28, 2016

traviskaufman Jul 29, 2016

Garbee Jul 29, 2016

traviskaufman Jul 29, 2016 •

edited

Loading

Garbee Jul 29, 2016 •

edited

Loading

traviskaufman commented Jul 29, 2016

traviskaufman Jul 29, 2016

Garbee commented Jul 29, 2016

traviskaufman Aug 1, 2016

Garbee Aug 1, 2016

traviskaufman Aug 2, 2016

sgomes Aug 8, 2016 •

edited

Loading

traviskaufman commented Aug 1, 2016

Garbee commented Aug 1, 2016

traviskaufman commented Aug 2, 2016

Garbee commented Aug 2, 2016

sgomes Aug 8, 2016

Garbee Aug 8, 2016

sgomes commented Aug 8, 2016

feat(fab): Initial Implementation #4598

feat(fab): Initial Implementation #4598

Conversation

Garbee commented Jul 26, 2016

traviskaufman commented Jul 26, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

traviskaufman Jul 29, 2016 • edited Loading

Choose a reason for hiding this comment

Garbee Jul 29, 2016 • edited Loading

Choose a reason for hiding this comment

traviskaufman commented Jul 29, 2016

Choose a reason for hiding this comment

Garbee commented Jul 29, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sgomes Aug 8, 2016 • edited Loading

Choose a reason for hiding this comment

traviskaufman commented Aug 1, 2016

Garbee commented Aug 1, 2016

traviskaufman commented Aug 2, 2016

Garbee commented Aug 2, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sgomes commented Aug 8, 2016

traviskaufman Jul 29, 2016 •

edited

Loading

Garbee Jul 29, 2016 •

edited

Loading

sgomes Aug 8, 2016 •

edited

Loading