Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@material/density

Package Overview
Dependencies
Maintainers
17
Versions
1643
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/density - npm Package Compare versions

Comparing version 4.0.0-canary.79d881baf.0 to 4.0.0-canary.8e36b3b7.0

212

CHANGELOG.md

@@ -6,212 +6,4 @@ # Change Log

# [4.0.0-canary.79d881baf.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.79d881baf.0) (2019-09-13)
# 4.0.0-canary.8e36b3b7.0 (2019-11-01)
### Features
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** 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.
# [4.0.0-canary.79d881baf.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.79d881baf.0) (2019-09-13)
### Features
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** 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.
# [4.0.0-canary.79d881baf.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.79d881baf.0) (2019-09-13)
### Features
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** 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.
# [4.0.0-canary.eab7903af.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.eab7903af.0) (2019-09-13)
### Features
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** 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.
# [4.0.0-canary.eab7903af.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0-canary.eab7903af.0) (2019-09-13)
### Features
* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))
### BREAKING CHANGES
* **density:** 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.
# [4.0.0-edc72a4d7.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-edc72a4d7.0) (2019-09-09)
### Bug Fixes
* **button:** Replace density sets with min & max scales ([#5015](https://github.com/material-components/material-components-web/issues/5015)) ([38fb436](https://github.com/material-components/material-components-web/commit/38fb436))
* **density:** Fixed density error message for incorrect value ([#5031](https://github.com/material-components/material-components-web/issues/5031)) ([3d9cf0e](https://github.com/material-components/material-components-web/commit/3d9cf0e))
### Features
* **density:** Add density utility component. ([#4951](https://github.com/material-components/material-components-web/issues/4951)) ([50b18d6](https://github.com/material-components/material-components-web/commit/50b18d6))
# [4.0.0-canary.1](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.1) (2019-09-09)
### Bug Fixes
* **button:** Replace density sets with min & max scales ([#5015](https://github.com/material-components/material-components-web/issues/5015)) ([38fb436](https://github.com/material-components/material-components-web/commit/38fb436))
* **density:** Fixed density error message for incorrect value ([#5031](https://github.com/material-components/material-components-web/issues/5031)) ([3d9cf0e](https://github.com/material-components/material-components-web/commit/3d9cf0e))
### Features
* **density:** Add density utility component. ([#4951](https://github.com/material-components/material-components-web/issues/4951)) ([50b18d6](https://github.com/material-components/material-components-web/commit/50b18d6))
# [4.0.0-canary.1](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.1) (2019-09-09)
### Bug Fixes
* **button:** Replace density sets with min & max scales ([#5015](https://github.com/material-components/material-components-web/issues/5015)) ([38fb436](https://github.com/material-components/material-components-web/commit/38fb436))
* **density:** Fixed density error message for incorrect value ([#5031](https://github.com/material-components/material-components-web/issues/5031)) ([3d9cf0e](https://github.com/material-components/material-components-web/commit/3d9cf0e))
### Features
* **density:** Add density utility component. ([#4951](https://github.com/material-components/material-components-web/issues/4951)) ([50b18d6](https://github.com/material-components/material-components-web/commit/50b18d6))
# [4.0.0-canary.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.0) (2019-09-05)
### Bug Fixes
* **button:** Replace density sets with min & max scales ([#5015](https://github.com/material-components/material-components-web/issues/5015)) ([38fb436](https://github.com/material-components/material-components-web/commit/38fb436))
* **density:** Fixed density error message for incorrect value ([#5031](https://github.com/material-components/material-components-web/issues/5031)) ([3d9cf0e](https://github.com/material-components/material-components-web/commit/3d9cf0e))
### Features
* **density:** Add density utility component. ([#4951](https://github.com/material-components/material-components-web/issues/4951)) ([50b18d6](https://github.com/material-components/material-components-web/commit/50b18d6))
# [4.0.0-canary.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.0) (2019-09-05)
### Bug Fixes
* **button:** Replace density sets with min & max scales ([#5015](https://github.com/material-components/material-components-web/issues/5015)) ([38fb436](https://github.com/material-components/material-components-web/commit/38fb436))
* **density:** Fixed density error message for incorrect value ([#5031](https://github.com/material-components/material-components-web/issues/5031)) ([3d9cf0e](https://github.com/material-components/material-components-web/commit/3d9cf0e))
### Features
* **density:** Add density utility component. ([#4951](https://github.com/material-components/material-components-web/issues/4951)) ([50b18d6](https://github.com/material-components/material-components-web/commit/50b18d6))
# [4.0.0-canary.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-canary.0) (2019-09-05)
### Bug Fixes
* **button:** Replace density sets with min & max scales ([#5015](https://github.com/material-components/material-components-web/issues/5015)) ([38fb436](https://github.com/material-components/material-components-web/commit/38fb436))
* **density:** Fixed density error message for incorrect value ([#5031](https://github.com/material-components/material-components-web/issues/5031)) ([3d9cf0e](https://github.com/material-components/material-components-web/commit/3d9cf0e))
### Features
* **density:** Add density utility component. ([#4951](https://github.com/material-components/material-components-web/issues/4951)) ([50b18d6](https://github.com/material-components/material-components-web/commit/50b18d6))
# [4.0.0-a9e694931.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-a9e694931.0) (2019-09-05)
### Bug Fixes
* **button:** Replace density sets with min & max scales ([#5015](https://github.com/material-components/material-components-web/issues/5015)) ([38fb436](https://github.com/material-components/material-components-web/commit/38fb436))
* **density:** Fixed density error message for incorrect value ([#5031](https://github.com/material-components/material-components-web/issues/5031)) ([3d9cf0e](https://github.com/material-components/material-components-web/commit/3d9cf0e))
### Features
* **density:** Add density utility component. ([#4951](https://github.com/material-components/material-components-web/issues/4951)) ([50b18d6](https://github.com/material-components/material-components-web/commit/50b18d6))
# [4.0.0-snapshot.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v4.0.0-snapshot.0) (2019-09-05)
### Bug Fixes
* **button:** Replace density sets with min & max scales ([#5015](https://github.com/material-components/material-components-web/issues/5015)) ([38fb436](https://github.com/material-components/material-components-web/commit/38fb436))
* **density:** Fixed density error message for incorrect value ([#5031](https://github.com/material-components/material-components-web/issues/5031)) ([3d9cf0e](https://github.com/material-components/material-components-web/commit/3d9cf0e))
### Features
* **density:** Add density utility component. ([#4951](https://github.com/material-components/material-components-web/issues/4951)) ([50b18d6](https://github.com/material-components/material-components-web/commit/50b18d6))
**Note:** Version bump only for package @material/density

4

package.json
{
"name": "@material/density",
"description": "Density utilities for Material Components for the web",
"version": "4.0.0-canary.79d881baf.0",
"version": "4.0.0-canary.8e36b3b7.0",
"license": "MIT",

@@ -20,3 +20,3 @@ "keywords": [

},
"gitHead": "756806a2389389441b5b3c130de02948130d96b9"
"gitHead": "62f51968b94685823af7942f779c63658f2b0350"
}

@@ -11,3 +11,3 @@ <!--docs:

Density subsystem provides adaptive layout to components.
Density subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.

@@ -20,9 +20,6 @@ ## Installation

> NOTE: You do not need to directly depend on `@material/density`, Use component provided density Sass mixins instead.
## Basic Usage
### Styles
This package is used as utility for other components' density mixins. Mixin provided by this package is not intended to
be consumed directly by developers, use component's density mixin instead.
The styles for applying density to button component instance looks like this:

@@ -34,2 +31,3 @@

.my-custom-button {
// Sets button density scale to `-3`, i.e. button height to `24px`.
@include mdc-button-density(-3);

@@ -44,4 +42,26 @@ }

## Density Mixins
Components that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).
Currently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.
The height or size of a component is calculated with the following formula:
```scss
$height: $mdc-button-height + $mdc-density-interval * $density-scale
/// @example 36px + 4px * (-3) => 24px
```
The density interval is set to 4px for visual consistency.
It is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.
NOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.
## Style Customization
This package is used as utility for other components' density mixins. Customizations provided by this package is not intended to
be consumed directly by developers, use component's density mixin instead.
### Sass Variables

@@ -48,0 +68,0 @@

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc