Skip to content

Commit

Permalink
feat(density): Add density subsystem to components (material-componen…
Browse files Browse the repository at this point in the history 
…ts#5059)

BREAKING CHANGE: Renamed sass mixins & variables in MDC Data Table - `mdc-data-table-header-row-height` => `mdc-data-table-header-cell-height` & `mdc-data-table-row-height` => `mdc-data-table-cell-height`. Also removed `mdc-button--dense` variant, use button's density mixin instead.
  • Loading branch information
@abhiomkar
abhiomkar authored Sep 10, 2019
1 parent 21ab8ec commit 73a5e4c
Show file tree
Hide file tree
Showing 35 changed files with 812 additions and 1,139 deletions.
1 change: 1 addition & 0 deletions packages/material-components-web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@material/checkbox": "^3.1.0",
"@material/chips": "^3.1.0",
"@material/data-table": "^3.1.1",
"@material/density": "^0.0.0",
"@material/dialog": "^3.1.0",
"@material/dom": "^3.1.0",
"@material/drawer": "^3.1.1",
Expand Down
5 changes: 3 additions & 2 deletions packages/mdc-button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,6 @@ CSS Class | Description
`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.
`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.
`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.
`mdc-button--dense` | Optional. Makes the button text and container slightly smaller.
`mdc-button__label` | Recommended.\* Indicates the element containing the button's text label.
`mdc-button__icon` | Optional. Indicates the element containing the button's icon.

Expand Down Expand Up @@ -198,7 +197,9 @@ Mixin | Description
`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.
`mdc-button-icon-color($color)` | Sets the icon color to the given color.
`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.
`mdc-button-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to button with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).
`mdc-button-height($height)` | Sets custom height of button.
`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.
`mdc-button-outline-color($color)` | Sets the outline color to the given color.
`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.
Expand Down
73 changes: 44 additions & 29 deletions packages/mdc-button/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
@import "@material/typography/mixins";
@import "@material/shape/mixins";
@import "@material/shape/functions";
@import "@material/density/functions";
@import "./variables";

$mdc-button-ripple-target: ".mdc-button__ripple";
Expand All @@ -40,6 +41,12 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
@include mdc-button-ripple($query);
}

@mixin mdc-button-theme-baseline($query: mdc-feature-all()) {
.mdc-button {
@include mdc-button-density($mdc-button-density-default-scale, $query: $query);
}
}

// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
// button styles. It is recommended that most users use `mdc-button-core-styles` instead.
@mixin mdc-button-without-ripple($query: mdc-feature-all()) {
Expand Down Expand Up @@ -116,12 +123,6 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
@include mdc-button-outline-color(primary, $query);
}

.mdc-button--dense {
@include mdc-feature-targets($feat-structure) {
@include mdc-button--dense_;
}
}

.mdc-button--touch {
@include mdc-touch-target-component(
$component-height: $mdc-button-height, $query: $query);
Expand Down Expand Up @@ -227,27 +228,47 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
}
}

@mixin mdc-button-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
@include mdc-shape-radius(
mdc-shape-resolve-percentage-radius($mdc-button-height, $radius),
$rtl-reflexive,
$query: $query
///
/// Sets density scale for button.
///
/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-3`,
/// `-2`, `-1`, `0`.
///
@mixin mdc-button-density($density-scale, $query: mdc-feature-all()) {

$height: mdc-density-prop-value(
$density-config: $mdc-button-density-config,
$density-scale: $density-scale,
$property-name: height,
);

#{$mdc-button-ripple-target} {
@include mdc-shape-radius(
mdc-shape-resolve-percentage-radius($mdc-button-height, $radius),
$rtl-reflexive,
$query: $query
);
@include mdc-button-height($height, $query: $query);
}

@mixin mdc-button-height($height, $query: $query) {
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-feature-targets($feat-structure) {
height: $height;
}
}

@mixin mdc-button-shape-radius($radius,
$rtl-reflexive: false,
$density-scale: $mdc-button-density-default-scale,
$query: mdc-feature-all()) {

&.mdc-button--dense {
@include mdc-shape-radius(
mdc-shape-resolve-percentage-radius($mdc-dense-button-height, $radius),
$rtl-reflexive,
$query: $query
);
$height: mdc-density-prop-value(
$density-config: $mdc-button-density-config,
$density-scale: $density-scale,
$property-name: height,
);
$resolved-radius: mdc-shape-resolve-percentage-radius($height, $radius);

@include mdc-shape-radius($resolved-radius, $rtl-reflexive, $query: $query);

#{$mdc-button-ripple-target} {
@include mdc-shape-radius($resolved-radius, $rtl-reflexive, $query: $query);
}
}

Expand Down Expand Up @@ -298,7 +319,6 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
justify-content: center;
box-sizing: border-box;
min-width: 64px;
height: $mdc-button-height;
border: none;
outline: none;
/* @alternate */
Expand Down Expand Up @@ -423,8 +443,3 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
transition: mdc-elevation-transition-value();
}
}

@mixin mdc-button--dense_() {
height: $mdc-dense-button-height;
font-size: .8125rem; // 13sp
}
15 changes: 14 additions & 1 deletion packages/mdc-button/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,25 @@
// THE SOFTWARE.
//

@import "@material/density/variables";
@import "@material/theme/variables"; // for mdc-theme-prop-value

$mdc-button-height: 36px !default;
$mdc-button-horizontal-padding: 8px !default;
$mdc-button-contained-horizontal-padding: 16px !default;
$mdc-dense-button-height: 32px !default;

$mdc-button-minimum-height: 24px !default;
$mdc-button-maximum-height: $mdc-button-height !default;
$mdc-button-density-default-scale: $mdc-density-default-scale !default;
$mdc-button-density-config: (
height: (
default: $mdc-button-height,
maximum: $mdc-button-maximum-height,
minimum: $mdc-button-minimum-height,
),
) !default;

$mdc-button-outlined-border-width: 1px !default;
$mdc-button-shape-radius: small !default;

$mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
1 change: 1 addition & 0 deletions packages/mdc-button/mdc-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,4 @@

@import "./mixins";
@include mdc-button-core-styles;
@include mdc-button-theme-baseline;
1 change: 1 addition & 0 deletions packages/mdc-button/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"directory": "packages/mdc-button"
},
"dependencies": {
"@material/density": "^0.0.0",
"@material/elevation": "^3.1.0",
"@material/feature-targeting": "^3.1.0",
"@material/ripple": "^3.1.0",
Expand Down
1 change: 1 addition & 0 deletions packages/mdc-checkbox/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ Mixin | Description
`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons
`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.
`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.
`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, e.g. `$density-scale: -3`.

The ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.

Expand Down
40 changes: 33 additions & 7 deletions packages/mdc-checkbox/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
//

@import "@material/animation/functions";
@import "@material/density/functions";
@import "@material/feature-targeting/functions";
@import "@material/feature-targeting/mixins";
@import "@material/ripple/mixins";
Expand Down Expand Up @@ -60,11 +61,11 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
}

@include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color, $query: $query);
@include mdc-checkbox-density($mdc-checkbox-density-default-scale, $query: $query);
}

@include mdc-checkbox-container-colors($query: $query);
@include mdc-checkbox-ink-color($mdc-checkbox-mark-color, $query);
@include mdc-checkbox-touch-target($mdc-checkbox-ripple-size, $query);

@include mdc-feature-targets($feat-color) {
@include mdc-checkbox-disabled-container-color_;
Expand Down Expand Up @@ -146,8 +147,6 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
@include mdc-checkbox__native-control_;
}

@include mdc-checkbox-touch-target($mdc-checkbox-ripple-size, $query);

&:disabled {
@include mdc-feature-targets($feat-structure) {
@include mdc-checkbox--disabled_;
Expand All @@ -160,7 +159,7 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
$component-height: $mdc-checkbox-ripple-size,
$component-width: $mdc-checkbox-ripple-size,
$query: $query);
@include mdc-checkbox-touch-target($mdc-touch-target-height, $query);
@include mdc-checkbox-touch-target($mdc-touch-target-height, $query: $query);
}

.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {
Expand Down Expand Up @@ -201,7 +200,6 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
@include mdc-ripple-surface($query: $query, $ripple-target: $mdc-checkbox-ripple-target);
@include mdc-states($color: on-surface, $query: $query, $ripple-target: $mdc-checkbox-ripple-target);
@include mdc-ripple-radius-unbounded($query: $query, $ripple-target: $mdc-checkbox-ripple-target);
@include mdc-checkbox-ripple-size($mdc-checkbox-ripple-size, $query: $query);
}

#{$mdc-checkbox-ripple-target} {
Expand All @@ -215,6 +213,22 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
}
}

///
/// Sets density scale for checkbox.
///
/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values
/// `-3`, `-2`, `-1`, `0`.
///
@mixin mdc-checkbox-density($density-scale, $query: mdc-feature-all()) {
$size: mdc-density-prop-value(
$density-config: $mdc-checkbox-density-config,
$density-scale: $density-scale,
$property-name: size,
);

@include mdc-checkbox-ripple-size($size, $query: $query);
}

@mixin mdc-checkbox-ripple-size($ripple-size, $query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);
$checkbox-padding: ($ripple-size - $mdc-checkbox-icon-size) / 2;
Expand All @@ -239,6 +253,8 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
height: $ripple-size;
}
}

@include mdc-checkbox-touch-target($ripple-size, $ripple-size: $ripple-size, $query: $query);
}

@mixin mdc-checkbox-container-colors(
Expand Down Expand Up @@ -341,9 +357,19 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
}
}

@mixin mdc-checkbox-touch-target($size: $mdc-checkbox-ripple-size, $query: mdc-feature-all()) {
///
/// Sets checkbox touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom
/// ripple size.
///
/// @param {Number} $size Size of touch target (Native input) in `px`.
/// @param {Number} $ripple-size Size of ripple in `px`. Required only for custom ripple size.
///
@mixin mdc-checkbox-touch-target(
$size: $mdc-checkbox-ripple-size,
$ripple-size: $mdc-checkbox-ripple-size,
$query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);
$offset: ($mdc-checkbox-ripple-size - $size) / 2;
$offset: ($ripple-size - $size) / 2;

@include mdc-feature-targets($feat-structure) {
.mdc-checkbox__native-control {
Expand Down
12 changes: 12 additions & 0 deletions packages/mdc-checkbox/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@

@import "@material/ripple/variables";
@import "@material/theme/variables";
@import "@material/density/variables";

$mdc-checkbox-mark-color: mdc-theme-prop-value(on-primary) !default;
$mdc-checkbox-border-color: rgba(mdc-theme-prop-value(on-surface), .54) !default;
Expand All @@ -36,6 +37,17 @@ $mdc-checkbox-transition-duration: 90ms !default;
$mdc-checkbox-item-spacing: 4px !default;
$mdc-checkbox-focus-indicator-opacity: map-get($mdc-ripple-dark-ink-opacities, focus) !default;

$mdc-checkbox-minimum-size: 28px !default;
$mdc-checkbox-maximum-size: $mdc-checkbox-ripple-size !default;
$mdc-checkbox-density-default-scale: $mdc-density-default-scale !default;
$mdc-checkbox-density-config: (
size: (
minimum: $mdc-checkbox-minimum-size,
default: $mdc-checkbox-ripple-size,
maximum: $mdc-checkbox-maximum-size,
),
) !default;

// Manual calculation done on SVG
$mdc-checkbox-mark-path-length_: 29.7833385 !default;
$mdc-checkbox-indeterminate-checked-easing-function_: cubic-bezier(.14, 0, 0, 1) !default;
1 change: 1 addition & 0 deletions packages/mdc-checkbox/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"dependencies": {
"@material/animation": "^3.1.0",
"@material/base": "^3.1.0",
"@material/density": "^0.0.0",
"@material/dom": "^3.1.0",
"@material/feature-targeting": "^3.1.0",
"@material/ripple": "^3.1.0",
Expand Down
5 changes: 3 additions & 2 deletions packages/mdc-data-table/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,10 +238,11 @@ Mixin | Description
`mdc-data-table-shape-radius($radius)` | Sets the rounded shape with given radius size. `$radius` can be single radius or list radius values up to 4 list size.
`mdc-data-table-stroke-size($size)` | Sets the border size of data-table.
`mdc-data-table-stroke-color($color)` | Sets the border color of data-table.
`mdc-data-table-header-row-height($height)` | Sets the header row height.
`mdc-data-table-row-height($height)` | Sets row height.
`mdc-data-table-header-cell-height($height)` | Sets table header cell height.
`mdc-data-table-cell-height($height)` | Sets table cell height.
`mdc-data-table-cell-padding($leading-padding, $trailing-padding)` | Sets leading & trailing padding for all cells.
`mdc-data-table-column-widths($width-list)` | Sets the custom widths for each table column.
`mdc-data-table-density($density-scale)` | Sets density scale to data table. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`. Use corresponding density mixins of child components (such as Checkbox) to apply density scales which will be rendered inside data table as content.

## Accessibility

Expand Down
Loading

0 comments on commit 73a5e4c

Please sign in to comment.