Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

fix(fab): Separate mixins for regular FAB and Extended FAB #4082

Merged
merged 6 commits into from
Nov 14, 2018

Conversation

abhiomkar
Copy link
Collaborator

BREAKING CHANGE: Fab now has 2 separate mixins - mdc-fab-shape-radius for regular & mini Fab variants & mdc-fab-extended-shape-radius for Extended FAB variant.

Before:

mdc-fab-shape-radius(50%) => border-radius: 28px;

After:

mdc-fab-shape-radius(50%) => border-radius: 50%;

Where, mdc-fab-shape-radius doesn't resolve percentage to absolute value.

  • mdc-fab-shape-radius sets rounded shape to regular & mini FAB.
  • mdc-fab-extended-shape-radiussets rounded shape to only Extended FAB.

Fixes #3989


@mixin mdc-fab-extended-shape-radius($radius, $rtl-reflexive: false) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the &.mdc-fab--extended selector now redundant since this is only expected to be used within that context?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense.

Also, added not() selector for regular/mini fab variant so extended variant don't get extra styles.

<html lang="en">
<head>
<meta charset="utf-8">
<title>extended-padding FAB Mixin - MDC Web Screenshot Test</title>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update titles in new screenshot test pages

Copy link
Contributor

@kfranqueiro kfranqueiro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mdc-web-bot
Copy link
Collaborator

@abhiomkar abhiomkar merged commit 003e95f into master Nov 14, 2018
@abhiomkar abhiomkar deleted the fab-radius-perc branch November 14, 2018 16:25
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for customizing FAB dimensions
4 participants