@react-md/typography - npm Package Compare versions

Comparing version 2.0.0-alpha.14 to 2.0.0-alpha.15

CHANGELOG.md

@@ -1,1 +0,139 @@
-# v2.0.0-alpha.0
+# v2.0.0
+
+The typography package is kind of new for the v2 release since there weren't any
+components beforehand for typography. This package exports three components:
+`Text`, `TextContainer`, and `SrOnly`. The `Text` component can be used to
+render any of the typography styles. The `TextContainer` component is used to
+create a centered block of text that uses the recommended line-width for
+legibility on different device sizes. Finally, the `SrOnly` component allows for
+text to only be visible to screen readers.
+
+In addition, the naming for the different typography styles have been renamed
+for the updated Material Design guidelines for typography.
+
+All the default typography styles can be configured by declaring global
+variables that will be merged with the recommended values:
+
+- `$rmd-typography-headline-1`
+- `$rmd-typography-headline-2`
+- `$rmd-typography-headline-3`
+- `$rmd-typography-headline-4`
+- `$rmd-typography-headline-5`
+- `$rmd-typography-headline-6`
+- `$rmd-typography-subtitle-1`
+- `$rmd-typography-subtitle-2`
+- `$rmd-typography-body-1`
+- `$rmd-typography-body-2`
+- `$rmd-typography-button`
+- `$rmd-typography-caption`
+- `$rmd-typography-overline`
+
+## New Behavior and Features
+
+- typography will never modify the default tags by default
+- all typography styles are configurable in a SCSS Map
+- persistent typography across all device sizes
+- switched from `px` to `rem` and `em` for typography
+- removed the default `transition-timing-function` that was applied to all
+  elements and pseudo elements
+- removed the default `min-width` and `font-size` on the `html`
+- added a simpler "css reset" for the `html` and `body` that is in the
+  [@react-md/utils] package now
+
+## Breaking Changes
+
+- removed the `react-md-typography-utilities` mixin
+- removed all the SCSS placeholders
+- every SCSS variable, function, and mixin has been renamed or removed
+
+### New SCSS Variables, Functions, and Mixins
+
+- `$rmd-typography-text-container-breakpoint: 37.5rem !default` - breakpoint to
+  use for switching the typography max line-length from mobile to desktop
+- `$rmd-typography-font-weights` - a map of all the available font weights which
+  can be overridden
+- `$rmd-typography-default-font-weights: light regular medium bold !default` all
+  the default available font weights
+- `$rmd-typography-thin: 100 default` - the thin font weight value
+- `$rmd-typography-black: 900 !default` - the darkest font weight value
+- `@function rmd-typography-theme` - gets one of the theme values and validates
+  that the theme name is valid
+- `@function rmd-typography-theme-var` - gets one of the theme values as a css
+  variable with a fallback value and validates that the theme name is valid
+- `@function rmd-typography-value` - most likely mostly internal, but allows you
+  to get one of the typography values based on the type
+- `@mixin rmd-typography-theme` - applies one of the theme values to a css
+  property as a css variable
+- `@mixin rmd-typography-theme-update-var` - updates one of the theme values as
+  a css variable
+- `@mixin rmd-typography-value` - applies the specifified typography type to an
+  element with an optional list of properties to use
+- `@mixin rmd-typography-base` - applies the base typography to an element
+- `@mixin rmd-typography` - the inverse of `rmd-typography-value` that will
+  default to apply all styles to an element
+- `@mixin rmd-text-container-base` - the default styles for creating a text
+  container
+- `@mixin rmd-text-container-auto`- generally used with the
+  `rmd-text-container-base` mixin to automatically update the max line-width
+  based on media size
+- `@mixin rmd-text-overflow-ellispis` - updates a class name or selector so that
+  long text will be overflown with an ellipsis
+
+### Renamed SCSS Variables, Functions, and Mixins
+
+- `$md-font-family` was renamed to `$rmd-typography-font-family` but keeps the
+  same default value of `Roboto, sans-serif`
+- `$md-typography-max-line-length` was renamed and split into
+  `$rmd-typography-mobile-max-line-length` and
+  `$rmd-typography-desktop-max-line-length` with defaults of `17em` and `40em`
+  respectively
+- `$md-font-light` was renamed to `$rmd-typography-light`
+- `$md-font-regular` was renamed to `$rmd-typography-regular`
+- `$md-font-medium` was renamed to `$rmd-typography-medium`
+- `$md-font-bold` was renamed to `$rmd-typography-bold`
+- `$md-font-semibold` was renamed to `$rmd-typography-semi-bold` and changed the
+  default value from `600` to `800`
+- `host-google-font` was renamed to `rmd-typography-host-google-font`
+- `host-material-icons` was renamed to `rmd-icon-host-google-icons` but is now
+  part of the [@react-md/icon] package
+
+### Removed SCSS Variables and Mixins
+
+- removed `$md-typography-extended` since global namespace is no longer touched
+- removed `$md-typography-include-text-container` since it is always created now
+  for the `TextContainer` component
+- removed `$md-typography-include-utilities` since there are no longer any
+  utilities
+- removed the `$md-font-name` variable
+- removed the `$md-html-min-width` variable
+- removed all the old typography variables for the new naming conventions:
+  - `$md-display-4-font-size`
+  - `$md-display-4-line-height`
+  - `$md-display-3-font-size`
+  - `$md-display-3-line-height`
+  - `$md-display-2-font-size`
+  - `$md-display-2-line-height`
+  - `$md-display-1-font-size`
+  - `$md-display-1-line-height`
+  - `$md-headline-font-size`
+  - `$md-headline-line-height`
+  - `$md-title-font-size`
+  - `$md-title-line-height`
+  - `$md-subheading-mobile-font-size`
+  - `$md-subheading-desktop-font-size:`
+  - `$md-subheading-2-line-height`
+  - `$md-subheading-1-line-height`
+  - `$md-body-mobile-font-size`
+  - `$md-body-desktop-font-size`
+  - `$md-body-2-line-height`
+  - `$md-body-1-line-height`
+  - `$md-caption-font-size`
+- removed `$md-font-size-base` and `$md-line-height` variables
+- removed the `react-md-typography-mobile`, `react-md-typography-desktop`, and
+  `react-md-typography-media` mixins since the typography no longer changes
+  based on device size
+- removed the `react-md-theme-typography` mixin
+
+[@react-md/icon]: https://github.com/mlaursen/react-md/tree/master/packages/icon
+[@react-md/utils]:
+  https://github.com/mlaursen/react-md/tree/master/packages/utils

dist/scssVariables.d.ts

@@ -39,2 +39,3 @@ declare const _default: {
     "rmd-typography-transforms": string[];
+    "rmd-typography-font-styles": string[];
     "rmd-typography-google-font-weight-suffixes": {
@@ -41,0 +42,0 @@ thin: string;

dist/scssVariables.js

@@ -42,2 +42,3 @@ "use strict";
     "rmd-typography-transforms": ["capitalize", "uppercase", "lowercase"],
+    "rmd-typography-font-styles": ["normal", "italic", "oblique"],
     "rmd-typography-google-font-weight-suffixes": {
@@ -44,0 +45,0 @@ thin: '"-Thin"',

es/Text.js

@@ -85,3 +85,3 @@ var __assign = (this && this.__assign) || function () {
     var _b;
-    var propClassName = _a.className, children = _a.children, _c = _a.type, type = _c === void 0 ? "body-1" : _c, _d = _a.component, component = _d === void 0 ? null : _d, _e = _a.align, align = _e === void 0 ? "" : _e, _f = _a.color, color = _f === void 0 ? "" : _f, _g = _a.decoration, decoration = _g === void 0 ? "" : _g, _h = _a.transform, transform = _h === void 0 ? "" : _h, _j = _a.weight, weight = _j === void 0 ? "" : _j, _k = _a.margin, margin = _k === void 0 ? "initial" : _k, props = __rest(_a, ["className", "children", "type", "component", "align", "color", "decoration", "transform", "weight", "margin"]);
+    var propClassName = _a.className, children = _a.children, _c = _a.type, type = _c === void 0 ? "body-1" : _c, _d = _a.component, component = _d === void 0 ? null : _d, align = _a.align, color = _a.color, decoration = _a.decoration, transform = _a.transform, weight = _a.weight, fontStyle = _a.fontStyle, _e = _a.margin, margin = _e === void 0 ? "initial" : _e, props = __rest(_a, ["className", "children", "type", "component", "align", "color", "decoration", "transform", "weight", "fontStyle", "margin"]);
     var className = cn(block((_b = {},
@@ -92,9 +92,10 @@ _b[type] = true,
         _b["no-margin-bottom"] = margin === "top",
-        _b[align] = align,
-        _b[decoration] = decoration && decoration !== "overline",
-        _b[color] = color,
+        _b[align || ""] = align,
+        _b[decoration || ""] = decoration && decoration !== "overline",
+        _b[color || ""] = color,
         // only because "overline" is technically one of the valid material design types :/
         _b["overline-decoration"] = decoration === "overline",
-        _b[transform] = transform,
-        _b[weight] = weight,
+        _b[transform || ""] = transform,
+        _b[weight || ""] = weight,
+        _b[fontStyle || ""] = fontStyle,
         _b)), propClassName);
@@ -134,10 +135,4 @@ if (typeof children === "function") {
             align: PropTypes.oneOf(["", "left", "center", "right"]),
-            decoration: PropTypes.oneOf([
-                "",
-                "underline",
-                "overline",
-                "line-through",
-            ]),
+            decoration: PropTypes.oneOf(["underline", "overline", "line-through"]),
             weight: PropTypes.oneOf([
-                "",
                 "thin",
@@ -153,3 +148,2 @@ "light",
             color: PropTypes.oneOf([
-                "",
                 "secondary",
@@ -163,2 +157,3 @@ "hint",
             margin: PropTypes.oneOf(["initial", "none", "top", "bottom"]),
+            fontStyle: PropTypes.oneOf(["normal", "italic", "oblique"]),
         };
@@ -165,0 +160,0 @@ }

lib/Text.js

@@ -90,3 +90,3 @@ "use strict";
     var _b;
-    var propClassName = _a.className, children = _a.children, _c = _a.type, type = _c === void 0 ? "body-1" : _c, _d = _a.component, component = _d === void 0 ? null : _d, _e = _a.align, align = _e === void 0 ? "" : _e, _f = _a.color, color = _f === void 0 ? "" : _f, _g = _a.decoration, decoration = _g === void 0 ? "" : _g, _h = _a.transform, transform = _h === void 0 ? "" : _h, _j = _a.weight, weight = _j === void 0 ? "" : _j, _k = _a.margin, margin = _k === void 0 ? "initial" : _k, props = __rest(_a, ["className", "children", "type", "component", "align", "color", "decoration", "transform", "weight", "margin"]);
+    var propClassName = _a.className, children = _a.children, _c = _a.type, type = _c === void 0 ? "body-1" : _c, _d = _a.component, component = _d === void 0 ? null : _d, align = _a.align, color = _a.color, decoration = _a.decoration, transform = _a.transform, weight = _a.weight, fontStyle = _a.fontStyle, _e = _a.margin, margin = _e === void 0 ? "initial" : _e, props = __rest(_a, ["className", "children", "type", "component", "align", "color", "decoration", "transform", "weight", "fontStyle", "margin"]);
     var className = classnames_1.default(block((_b = {},
@@ -97,9 +97,10 @@ _b[type] = true,
         _b["no-margin-bottom"] = margin === "top",
-        _b[align] = align,
-        _b[decoration] = decoration && decoration !== "overline",
-        _b[color] = color,
+        _b[align || ""] = align,
+        _b[decoration || ""] = decoration && decoration !== "overline",
+        _b[color || ""] = color,
         // only because "overline" is technically one of the valid material design types :/
         _b["overline-decoration"] = decoration === "overline",
-        _b[transform] = transform,
-        _b[weight] = weight,
+        _b[transform || ""] = transform,
+        _b[weight || ""] = weight,
+        _b[fontStyle || ""] = fontStyle,
         _b)), propClassName);
@@ -139,10 +140,4 @@ if (typeof children === "function") {
             align: PropTypes.oneOf(["", "left", "center", "right"]),
-            decoration: PropTypes.oneOf([
-                "",
-                "underline",
-                "overline",
-                "line-through",
-            ]),
+            decoration: PropTypes.oneOf(["underline", "overline", "line-through"]),
             weight: PropTypes.oneOf([
-                "",
                 "thin",
@@ -158,3 +153,2 @@ "light",
             color: PropTypes.oneOf([
-                "",
                 "secondary",
@@ -168,2 +162,3 @@ "hint",
             margin: PropTypes.oneOf(["initial", "none", "top", "bottom"]),
+            fontStyle: PropTypes.oneOf(["normal", "italic", "oblique"]),
         };
@@ -170,0 +165,0 @@ }

package.json

 {
   "name": "@react-md/typography",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.15",
   "description": "The base package for including typography for react-md.",
@@ -38,4 +38,4 @@ "scripts": {
   "dependencies": {
-    "@react-md/theme": "^2.0.0-alpha.14",
-    "@react-md/utils": "^2.0.0-alpha.14",
+    "@react-md/theme": "^2.0.0-alpha.15",
+    "@react-md/utils": "^2.0.0-alpha.15",
     "classnames": "^2.2.6"
@@ -52,3 +52,3 @@ },
   },
-  "gitHead": "2c22440705bce3fb3cfc5876011e7b3df8be1c03"
+  "gitHead": "c20671308497530c59f6563eafd1914b55122b8c"
 }

README.md

@@ -9,3 +9,5 @@ # @react-md/typography
 throughout your app, but it also exposes `Text` and `TextContainer` components
-to help add typography throughout your app.
+to help add typography throughout your app. There is also an accessibility
+helper component named `SrOnly` that allows you to display text to screen
+readers only.
 
@@ -23,4 +25,5 @@ ## Installation
 You should check out the
-[full documentation](https://react-md.dev/packages/typography) for live examples
-and more customization information, but an example usage is shown below.
+[full documentation](https://react-md.dev/packages/typography/demos) for live
+examples and more customization information, but an example usage is shown
+below.
 
@@ -27,0 +30,0 @@ <!-- DOCS_REMOVE_END -->

src/scssVariables.ts

@@ -40,2 +40,3 @@ /** this is an auto-generated file from @react-md/dev-utils */
   "rmd-typography-transforms": ["capitalize", "uppercase", "lowercase"],
+  "rmd-typography-font-styles": ["normal", "italic", "oblique"],
   "rmd-typography-google-font-weight-suffixes": {
@@ -42,0 +43,0 @@ thin: '"-Thin"',

types/Text.d.ts

@@ -8,7 +8,8 @@ import { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
 export declare type TextTypes = "headline-1" | "headline-2" | "headline-3" | "headline-4" | "headline-5" | "headline-6" | "subtitle-1" | "subtitle-2" | "body-1" | "body-2" | "caption" | "overline" | "button";
-export declare type TextAlign = "" | "left" | "center" | "right";
-export declare type TextDecoration = "" | "underline" | "overline" | "line-through";
-export declare type TextTransform = "" | "capitalize" | "uppercase" | "lowercase";
-export declare type TextWeight = "" | "thin" | "light" | "regular" | "medium" | "bold" | "semi-bold" | "black";
-export declare type TextColor = "" | "secondary" | "hint" | "theme-primary" | "theme-secondary" | "theme-warning" | "theme-error";
+export declare type TextAlign = "left" | "center" | "right";
+export declare type TextDecoration = "underline" | "overline" | "line-through";
+export declare type TextTransform = "capitalize" | "uppercase" | "lowercase";
+export declare type TextWeight = "thin" | "light" | "regular" | "medium" | "bold" | "semi-bold" | "black";
+export declare type TextColor = "secondary" | "hint" | "theme-primary" | "theme-secondary" | "theme-warning" | "theme-error";
+export declare type FontStyle = "italic" | "oblique" | "normal";
 /**
@@ -84,2 +85,6 @@ * A union of the default supported elements that the `Text` component can be
     /**
+     * An optional font-style to apply.
+     */
+    fontStyle?: FontStyle;
+    /**
      * Since the typography within react-md tries to not modify base elements, the
@@ -86,0 +91,0 @@ * default margin applied to heading tags (h1-h6) and paragraph (p) might have

types/TextContainer.d.ts

@@ -42,3 +42,3 @@ import React, { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
 }
-declare const ForwardedTextContainer: React.ForwardRefExoticComponent<TextContainerProps & React.RefAttributes<"symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | HTMLDivElement | "menuitem" | "keygen" | "noindex" | "webview" | "animate" | "animateMotion" | "animateTransform" | "feDropShadow" | "mpath" | React.ComponentClass<any, any> | React.FunctionComponent<any>>>;
+declare const ForwardedTextContainer: React.ForwardRefExoticComponent<TextContainerProps & React.RefAttributes<"symbol" | "object" | HTMLDivElement | "meter" | "textarea" | "button" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any>>>;
 export default ForwardedTextContainer;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

52

increased by4%

Lines of code

2157

increased by8.28%

Number of lines in readme file

58

increased by5.45%

Worsened metrics

Total package byte prevSize

201063

decreased by-60.68%

Dependency changes

• Updated@react-md/theme@^2.0.0-alpha.15

• Updated@react-md/utils@^2.0.0-alpha.15