Skip to content

Commit

Permalink
refactor(button): Remove primary and accent modifier (#1270)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Remove support of `mdc-button--primary` and `mdc-button--accent` modifier classes. For custom and theme button implementation, use button mixins instead. See `demos.scss` for details.
  • Loading branch information
@yeelan0319
yeelan0319 authored Sep 11, 2017
1 parent 08b5a32 commit 3e3c869
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 112 deletions.
98 changes: 33 additions & 65 deletions packages/mdc-button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,47 +41,30 @@ npm install --save @material/button

## Usage

### Button type

> Note: Examples and documents use generic `<button>`, but users can also apply
`mdc-button` to `<a class="mdc-button">Link Button</a>` in cases where it is
semantically correct.

#### Text Button

### HTML Structure
```html
<button class="mdc-button">
Text button
Button
</button>
```

#### Raised Button

```html
<button class="mdc-button mdc-button--raised">
Raised button
</button>
```

#### Unelevated Button

```html
<button class="mdc-button mdc-button--unelevated">
Unelevated button
</button>
```
> Note: Examples and documents use generic `<button>`, but users can also apply
`mdc-button` to `<a class="mdc-button">Link Button</a>` in cases where it is
semantically correct.

#### Stroked Button
### CSS Classes

```html
<button class="mdc-button mdc-button--stroked">
Stroked button
</button>
```
| Class | Description |
| --------------------- | ------------------------------------------------------- |
| `mdc-button` | Mandatory, defaults to a text button that is flush with the surface.|
| `mdc-button--raised` | Optional, a contained button that is elevated upon the surface. |
| `mdc-button--unelevated` | Optional, a contained button that is flush with the surface. |
| `mdc-button--stroked` | Optional, a contained button that is flush with the surface and has a visible border. |
| `mdc-button--dense` | Optional, compresses the button text to make it slightly smaller. |
| `mdc-button--compact` | Optional, reduces the amount of horizontal padding in the button. |

### Button state

#### Disabled
### Disabled Button

Users can add `disabled` directly to the button element or set the fieldset containing
the button to `disabled` to disable a button. Disabled buttons cannot be interacted
Expand All @@ -93,23 +76,7 @@ with and have no visual interaction effect.
</button>
```

### Colored

MDC Buttons have a default baseline color, but it is also possible to adopt the
application's primary or secondary color by adding the `mdc-button--primary` or
`mdc-button--accent` modifier.

> Note: "Secondary" was previously called "accent" in the Material spec. See
[mdc-theme](https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme)
for details.

```html
<button class="mdc-button mdc-button--accent">
Colored button
</button>
```

### Adding ripples to buttons
### Adding MDC Ripple

To add the ink ripple effect to a button, attach a [ripple](../mdc-ripple) instance to the
button element.
Expand All @@ -128,26 +95,27 @@ You can also do this declaratively when using the [material-components-web](../m

Buttons are fully aware of ripple styles, so no DOM or CSS changes are required to use them.

## Classes
### Sass Mixins

### Block
By default an MDC Button will inherit its color from the theme and align with [Material Design button requirements](https://material.io/guidelines/components/buttons.html). To customize a Button's color and properties, you can use the following mixins.

The block class is `mdc-button`. This defines the top-level button element.
#### `mdc-button-filled-accessible($container-fill-color)`

### Element
This mixin is provided for customizing a *raised* or *unelevated* button's color. It changes the Button's
container color to the given color, and updates the Button's ink and ripple color to meet accessibility standards.

The button component has no inner elements.
### Advanced Sass Mixins

### Modifier
> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, stroke or ripple. You can use all of them if you want to completely customize a Button. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, stroke and ripple colors that work together, and meet accessibility standards.**
The provided modifiers are:

| Class | Description |
| Mixin | Description |
| --------------------- | ------------------------------------------------------- |
| `mdc-button--raised` | A contained button that is elevated upon the surface. |
| `mdc-button--unelevated` | A contained button that is flush with the surface. |
| `mdc-button--stroked` | A contained button that is flush with the surface and has a visible border. |
| `mdc-button--dense` | Compresses the button text to make it slightly smaller. |
| `mdc-button--compact` | Reduces the amount of horizontal padding in the button. |
| `mdc-button--primary` | Colors the button with the primary color. |
| `mdc-button--accent` | Colors the button with the secondary color. |
| `mdc-button-container-fill-color` | Sets the container color to the given color |
| `mdc-button-ink-color` | Sets the ink color to the given color |
| `mdc-button-stroke-color` | Sets the stroke color to the given color |
| `mdc-button-ripple` | Sets the ripple to the given [ripple configuration](https://github.com/material-components/material-components-web/blob/master/packages/mdc-ripple/README.md) |
| `mdc-button-corner-radius` | Sets the corner radius to the given number (defaults to 4px) |
| `mdc-button-stroke-width` | Sets the stroke width to the given number (defaults to 2px) |
| `mdc-button-stroke-style` | Sets the stroke style to the given style (defaults to solid line) |


47 changes: 0 additions & 47 deletions packages/mdc-button/mdc-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,51 +67,4 @@
.mdc-button--dense {
@include mdc-button--dense_;
}

@each $theme-style in (primary, secondary) {
// Needed for backward compatibility. Theme uses the term "secondary", but button still calls it "accent" for now.
$modifier: if($theme-style == "secondary", "accent", $theme-style);

// postcss-bem-linter: ignore
.mdc-button--#{$modifier} {
$theme-value: map-get($mdc-theme-property-values, $theme-style);

&:not(:disabled) {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
@include mdc-theme-prop(color, $theme-style);

@include mdc-theme-dark(".mdc-button") {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
@include mdc-theme-prop(color, $theme-style);
}
}
// postcss-bem-linter: ignore
&.mdc-button--raised,
&.mdc-button--unelevated {
$theme-value: map-get($mdc-theme-property-values, text-primary-on-#{$theme-style});

&:not(:disabled) {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .32));
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .32));
@include mdc-theme-prop(background-color, $theme-style);
@include mdc-theme-prop(color, text-primary-on-#{$theme-style});
}
}
// postcss-bem-linter: ignore
&.mdc-button--stroked {
&:not(:disabled) {
@include mdc-theme-prop(border-color, $theme-style);

@include mdc-theme-dark(".mdc-button") {
@include mdc-theme-prop(border-color, $theme-style);
}
}
}
}
}
// postcss-bem-linter: end

3 comments on commit 3e3c869

@jamesmfriedman
Copy link
Contributor

Choose a reason for hiding this comment

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

Looks like I'm a little late to chime in on this one, just offering an opinion.

I love the simplicity of using the library, and the ability to override things with plain CSS. Since primary and accent buttons are part of the Material Design and heavily used in lots of applications, I don't understand the reason for removing this.

The changelog says the solution is to now use the SASS mixin, but thats only helpful if my company is using SASS (which we're not). Would love to see this change reverted in the name of keeping the SASS portion of this library optional. Just by looking at the code that was removed, it's not hard to reason that replicating a properly colored button without the SASS mixin would be very difficult.

-- Side note, I've wrapped the whole thing in React so I'm reasonably well versed with the lib at this point :) https://github.com/jamesmfriedman/rmwc

Thanks!
James

@aeon0
Copy link
Contributor

@aeon0 aeon0 commented on 3e3c869 Oct 23, 2017

Choose a reason for hiding this comment

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

@jamesmfriedman instead you can use this class now -> className="mdc-theme--secondary-bg"

@jamesmfriedman
Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks @j-o-d-o. Yeah I figured that was the direction you guys were leaning towards internally and had updated my docs already to support it. A little more verbose, but highly composable in the long run. Thanks for the reply!

https://jamesmfriedman.github.io/rmwc/buttons

Please sign in to comment.