@limetech/mdc-p2-density
Advanced tools
Changelog
4.0.0 (2019-11-02)
overflow: visible to button. (#4973) (905e84e)checkbox: mdc-checkbox-ink-color mixin now only applies to enabled checkboxes
chips: Chips markup, adapters, foundations, and events have changed.
select: In MDCMenu and MDCMenuSurface, hoistMenuToBody adapter method removed. In MDCSelect, HTML structure changed: the select anchor is now wrapped in a parent element, and the anchor's sibling is the select menu. Support for native select removed. Support added for select with no label. MDCSelectAdapter methods removed: getValue, setValue, isMenuOpen, setSelectedIndex, checkValidity, setValid, toggleClassAtIndex. MDCSelectAdapter methods added: hasLabel, getSelectedMenuItem, setSelectedText, isSelectedTextFocused, get/setSelectedTextAttr, getAnchorElement, setMenuAnchorElement, setMenuAnchorCorner, setMenuWrapFocus, set/removeAttributeAtIndex, focusMenuItemAtIndex, getMenuItemValues, getMenuItemCount, getMenuItemCount, getMenuItemAttr, getMenuItemTextAtIndex, add/removeClassAtIndex. MDCSelectFoundation setValue method removed; getDisabled, handleMenuItemAction, getSelectedIndex, get/setRequired, init added.
radio: In Checkbox, Renamed sass variables $mdc-radio-touch-area => $mdc-radio-ripple-size & $mdc-radio-ui-size => $mdc-radio-icon-size to be consistent with checkbox. Also, removed $mdc-radio-ui-pct sass variable.
switch: Renames switch variables $mdc-switch-tap-target-size => $mdc-switch-ripple-size, removes $mdc-switch-tap-target-initial-position and $mdc-switch-native-control-width.
list: New adapter method listItemAtIndexHasClass
list: Renamed mixin mdc-list-item-shape-radius() => mdc-list-single-line-shape-radius()
linear-progress: MDCLinearProgressAdapter adapter has new forceLayout method
text-field: Removed sass variable in notched outline - $mdc-notched-outline-transition-duration.
mdc-fab: This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
NEW
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
radio: Ripple has been moved to a child element. See readme for updates.
slider: remove adapter methods appendTrackMarkers, removeTrackMarkers , setLastTrackMarkersStyleProperty , and add adapter method setTrackMarkers.
button: This changes the structure of the button element by moving the ripple from the outer <button> element to an inner mdc-button__ripple element.
OLD
<button class="mdc-button">
<span class="mdc-button__label">Hello World</span>
</button>
NEW
<button class="mdc-button">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Hello World</span>
</button>
chips: MDCChipSetAdapter#removeChip has been replaced with MDCChipSetAdapter#removeChipAtIndex. MDCChipSetAdapter#setSelected has been replaced with MDCChipSetAdapter#selectChipAtIndex
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.
Readme
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.
npm install @limetech/mdc-p2-density
NOTE: You do not need to directly depend on
@limetech/mdc-p2-density, use component provided density Sass mixins instead.
The styles for applying density to button component instance looks like this:
@import "@limetech/mdc-p2-button/mixins";
.my-custom-button {
// Sets button density scale to `-3`, i.e. button height to `1.5rem`.
@include mdc-button-density(-3);
}
This would apply -3 (high density) to button component instance.
You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate component height.
Here are the components that do provide density Sass 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:
$height: $mdc-button-height + $mdc-density-interval * $density-scale
/// @example 2.25rem + 0.25rem * (-3) => 1.5rem
The density interval is set to 0.25rem 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.
Components that has different variants may have their own density mixin.
For example, Tab Bar has two density mixins:
mdc-tab-bar-density(): Density mixin for standard tab bar.mdc-tab-bar-stacked-density(): Density mixin for tab bar that has icon stacked on top of label.Similarly, text field provides 3 different density mixins based on its variant.
Material component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.
For example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.
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.
| Variable | Description |
|---|---|
$mdc-density-interval | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height. |
$mdc-density-minimum-scale | Minimum scale supported by density subsystem. This scale always maps to highest dense scale. |
$mdc-density-maximum-scale | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale. |
$mdc-density-supported-scales | Supported density scale when density literal is used (For example, minimum). |
| Function | Description |
|---|---|
mdc-density-prop-value($density-config, $density-scale, $property-name) | Returns component property value based on given density config and density scale. |
FAQs
Density utilities for Material Components for the web
The npm package @limetech/mdc-p2-density receives a total of 1 weekly downloads. As such, @limetech/mdc-p2-density popularity was classified as not popular.
We found that @limetech/mdc-p2-density demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an unprecedented surge, May 2024 saw the publication of over 5,000 CVEs, marking a historic milestone in cybersecurity with an average of 164 CVEs per day, nearly double the 2023 daily average.
Security News
The White House is addressing fragmented cybersecurity regulations as CISOs report spending up to 50% of their time on compliance, aiming to harmonize requirements and improve cybersecurity outcomes.
Security News
Research
The Socket Research Team has identified a malicious Python package that is typosquatting the popular crytic-compile utility, frequently used in popular toolkits and development environments for smart contracts and crypto applications.