Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@react-md/icon
Advanced tools
@react-md/icon - npm Package Compare versions
Comparing version 2.0.0-alpha.14 to 2.0.0-alpha.15
218
CHANGELOG.md
@@ -1,155 +0,83 @@ | ||
| # v2.0.0-alpha.0 | ||
| # v2.0.0 | ||
| ## New Behavior and Features | ||
| - all refs are now forwarded to the DOM elements | ||
| - new theme API that allows for customizing the size and color of icons a lot | ||
| easier with exported `mixin`s | ||
| - built-in support for right-to-left languages when spacing text with icons | ||
| - added an `IconRotator` component to be able to animate a rotation for an icon | ||
| > This is a new component implementation for the | ||
| > `.md-collapser`/`getCollapserStyles` that existed in v1 but wasn't really | ||
| > documented | ||
| - the `TextIconSpacing` component now requires a parent element with | ||
| `display: flex` to work since it renders as a `<Fragment>` instead of a | ||
| `<div>` | ||
| - the spacing is now handled with `margin` instead of `padding` with the | ||
| `TextIconSpacing` component | ||
| - the icon is now placed before the `children` instead of after by default for | ||
| the `TextIconSpacing` component | ||
| - added a new `forceIconWrap` prop to the `TextIconSpacing` component to help | ||
| with custom components that don't accept a `className` prop being cloned in | ||
| for the spacing styles | ||
| - added additional props to the `TextIconSpacing` for additional customization | ||
| for the spacing behavior | ||
| - simplified svg style precedence to be easier to override (`.rmd-icon--svg` | ||
| instead of `svg.md-icon`) | ||
| - changing the size for font icons and svg icons is now the same since they use | ||
| css variables | ||
| ## Breaking Changes | ||
| - all icons were updated to have `aria-hidden="true"` by default. | ||
| - all icons no longer support applying theme colors with the `primary`, | ||
| `secondary`, `disabled`, `error`, and `inherit` props and requires custom css | ||
| instead | ||
| - the `IconSeparator` has been renamed to `TextIconSpacing` and now renders the | ||
| `children` as the `label` and requires an `icon` prop (the reverse of v1) | ||
| - the `SVGIcon` no longer has the `titleAttr`, `title`, and `desc` props since | ||
| they aren't actually helpful with accessibility out of the box since | ||
| `aria-label`/`aria-labelledby` is preferred | ||
| - the `SVGIcon` changed the default `role` from `"img"` to `"presentation"` | ||
| ## Theming | ||
| ### New SCSS Variables, Functions, and Mixins | ||
| One of the biggest new features in the v2 branch is that all theming can be done | ||
| with css variables for supported browsers. If you still need to support browsers | ||
| that don't support css variables yet, there are fallbacks in place but it'll | ||
| make dynamic theming changes a bit harder. | ||
| - `$rmd-icon-material-icons-font: false !default` - boolean if you are using the | ||
| `material-icons` font icon library and automatically fix the dense spec | ||
| - `$rmd-icon-use-font-icons: true !default` - boolean if you want to include the | ||
| styles for font icons. You can maybe save a few bytes by disabling this | ||
| variable if you only use svg icons | ||
| - `$rmd-icon-use-svg-icons: true !default` - boolean if you want to include the | ||
| styles for svg icons. You can maybe save a few bytes by disabling this | ||
| variable if you only use font icons | ||
| - `@function rmd-icon-theme` - gets one of the icon's theme values | ||
| - `@function rmd-icon-theme-var` - gets one of the icon's theme values as a css | ||
| variable | ||
| - `@mixin rmd-icon-theme` - applies one of the icon's theme values as a css | ||
| property | ||
| - `@mixin rmd-icon-theme-update-var` - updates one of the icon's theme css | ||
| variables | ||
| - `@mixin rmd-icon-text-spacing` - a mixin that allows you to separate two | ||
| elements | ||
| The new css variables and icon "theme" include: | ||
| ### Renamed SCSS Variables, Functions, and Mixins | ||
| - `--rmd-icon-color` | ||
| - `--rmd-icon-size` | ||
| - `--rmd-icon-dense-size` | ||
| - `--rmd-icon-text-spacing` | ||
| - `--rmd-icon-rotate-to` | ||
| - `--rmd-icon-rotate-from` | ||
| - renamed `$md-font-icon-include-dense` to `$rmd-icon-include-dense` | ||
| - renamed `$md-font-icon-size` to `$rmd-icon-size` and changed the default value | ||
| from `24px` to `$1.5rem` | ||
| - renamed `$md-font-icon-dense-size` to `$rmd-icon-dense-size` and changed the | ||
| default value from `20px` to `1.25rem` | ||
| - renamed `$md-font-icon-separator-padding` to `$rmd-icon-spacing-with-text` and | ||
| changed the default value from `16px` to `0.5rem` | ||
| - renamed `@mixin react-md-icons-dense` to `rmd-icon-dense-theme` | ||
| All of these default values are available from the new `$rmd-icon-theme-values` | ||
| map. There are also a few new helper functions/mixins to set and get these css | ||
| variable values: | ||
| ### Removed SCSS Variables Placeholders, and Mixins | ||
| Functions: | ||
| - `rmd-icon-theme` | ||
| - `rmd-icon-theme-var` | ||
| Mixins: | ||
| - `rmd-icon-theme` | ||
| - `rmd-icon-set-theme-var` | ||
| ## Theme colors and different states | ||
| The `FontIcon` and `SVGIcon` do not support applying theme colors any more by | ||
| default. This list includes: | ||
| - primary | ||
| - secondary | ||
| - disabled | ||
| - error | ||
| - inherit | ||
| This will be changed in another alpha release once I decide how I want to apply | ||
| theme colors to components. | ||
| ## Components | ||
| This package will export the following components: | ||
| - `FontIcon` | ||
| - `SVGIcon` | ||
| - `TextIconSpacing` | ||
| - `IconRotator` | ||
| The `FontIcon` and `SVGIcon` components should be almost the same as before, | ||
| just with updated class names and a few more features listed below. The | ||
| `TextIconSpacing` component is a remake of the `IconSeparator` while the | ||
| `IconRotator` is a simple component used to rotate an icon or any component from | ||
| a starting position to and ending position. | ||
| ### TextIconSpacing | ||
| The biggest difference between this component and the old `IconSeparator` is | ||
| that the `label` prop was removed and an `icon` prop was added instead. The | ||
| `children` of this component will be treated as the `label` was before. If no | ||
| `icon` prop is provided, only the children will be rendered with no additional | ||
| changes. | ||
| If there is an `icon` prop, there will be 2 new behaviors: | ||
| 1. If the `forceIconWrap` prop is not enabled (disabled by default), the spacing | ||
| class names will be cloned into your provided icon element. If your icon | ||
| element **does not** pass the `className` prop down, the spacing will not | ||
| work. | ||
| 2. If the `forceIconWrap` prop is enabled, the icon will be wrapped with a | ||
| `<span>` element with the spacing class names applied instead. | ||
| Before this component was updated, the only way to work around the `className` | ||
| prop cloning was to provide a non-React element as an icon, but now you can use | ||
| the `forceIconWrap` prop to work around this. | ||
| The old `IconSeparator` component used to wrap the entire content in a `<div>` | ||
| with the `md-icon-separator` className while cloning the `md-icon-text` into the | ||
| label component (or wrapping the label with a `<span>` to add the class). Now, | ||
| the icon will gain either the `rmd-icon--before` or `rmd-icon--after` class name | ||
| and the returned html will be a `React.Fragment` containing the `children` and | ||
| `icon` instead of wrapping in a `<div>`. | ||
| The `iconBefore` prop was renamed to be `iconAfter` with a default value of | ||
| `false`. This means that it will default to having the icon **before** the text | ||
| instead of after. | ||
| Finally, the separator class names can now be configurable as 2 new props were | ||
| introduced: | ||
| - `beforeClassName` | ||
| - `afterClassName` | ||
| So now you can create custom spacing between any 2 elements if you need even | ||
| though it is recommended to update the `--rmd-icon-spacing` css variable | ||
| instead. | ||
| ### IconRotator | ||
| With this release, I now have created a component for the `md-collapser` | ||
| (`getCollapserStyles`) that was used behind the scenes for a couple of | ||
| components such as the `CardExpander` and the `ListItem` with nested items. | ||
| This component has one simple job: animate a rotation from some degree to | ||
| another. By default, it will rotate from 0-180 degrees but this is configurable | ||
| at build time with the `$rmd-icon-rotator-from` and `$rmd-icon-rotator-to` | ||
| variables. Otherwise, you can dynamically change it throughout your app by | ||
| updating the created css variables to be different values. See the | ||
| `rmd-icon-set-theme-var` mixin and the theming section for more info. | ||
| ## New `dense` prop | ||
| Added a new `dense` prop that will allow you to enable the dense mode for icons | ||
| in React instead of relying on media queries if it is easier that way. This prop | ||
| is added to both the `FontIcon` and `SVGIcon`. Using the prop will also make the | ||
| `forceSize` and `forceIconSize` props on the `FontIcon` component more reliable | ||
| if using the `react-md` defaults since it will not check the current | ||
| `--rmd-icon-size` css variable value at this time. | ||
| ## Refs | ||
| The `FontIcon` and `SVGIcon` components will now forward their ref to the `<i>` | ||
| and `<svg>` elements. | ||
| ## No more Prop Types | ||
| With my Typescript rewrite, I have removed the runtime prop validation with | ||
| `prop-types` for now since I have not figured out a nice way to get it to play | ||
| nicely with Typescript at this time. I will be adding it back before the final | ||
| v2 release. | ||
| ## Other Notes | ||
| All the components in this package are now functional components instead of | ||
| using the `React.PureComponent`. If you somehow notice performance issues | ||
| because of this change, you can wrap them with | ||
| [React.memo](https://reactjs.org/docs/react-api.html#reactmemo) if you are using | ||
| `react@16.6.0+` | ||
| ```jsx | ||
| import { FontIcon as FontIconMD, SVGIcon as SVGIconMD } from "@react-md/icon"; | ||
| export const FontIcon = React.memo(FontIconMD); | ||
| export const SVGIcon = React.memo(SVGIconMD); | ||
| ``` | ||
| - removed `$md-font-icon-include-separators` since it is always included by | ||
| default | ||
| - removed `$md-font-icon-include-dense-material-icons` since it is no longer | ||
| required | ||
| - removed `$md-font-icon-light-theme-disabled-color` and | ||
| `$md-font-icon-dark-theme-disabled-color` since they are no longer required | ||
| - removed `@mixin react-md-theme-icons` since it is no longer required | ||
| - removed `@mixin react-md-icons-media` since it is no longer required |
@@ -1,2 +0,2 @@ | ||
| import React, { Children, cloneElement, Fragment, isValidElement, } from "react"; | ||
| import React, { Children, cloneElement, isValidElement, } from "react"; | ||
| import cn from "classnames"; | ||
@@ -7,3 +7,3 @@ var TextIconSpacing = function (_a) { | ||
| if (!propIcon) { | ||
| return React.createElement(Fragment, null, children); | ||
| return React.createElement(React.Fragment, null, children); | ||
| } | ||
@@ -28,3 +28,3 @@ var baseClassName = cn((_b = {}, | ||
| if (iconEl) { | ||
| content = (React.createElement(Fragment, null, | ||
| content = (React.createElement(React.Fragment, null, | ||
| !iconAfter && iconEl, | ||
@@ -31,0 +31,0 @@ children, |
@@ -19,3 +19,3 @@ "use strict"; | ||
| if (!propIcon) { | ||
| return react_1.default.createElement(react_1.Fragment, null, children); | ||
| return react_1.default.createElement(react_1.default.Fragment, null, children); | ||
| } | ||
@@ -40,3 +40,3 @@ var baseClassName = classnames_1.default((_b = {}, | ||
| if (iconEl) { | ||
| content = (react_1.default.createElement(react_1.Fragment, null, | ||
| content = (react_1.default.createElement(react_1.default.Fragment, null, | ||
| !iconAfter && iconEl, | ||
@@ -43,0 +43,0 @@ children, |
| { | ||
| "name": "@react-md/icon", | ||
| "version": "2.0.0-alpha.14", | ||
| "version": "2.0.0-alpha.15", | ||
| "description": "This package is for including icons within react-md. There is included support for both font icons and SVG icons. There is also a helper component for applying spacing between icons and text.", | ||
@@ -40,5 +40,5 @@ "scripts": { | ||
| "dependencies": { | ||
| "@react-md/theme": "^2.0.0-alpha.14", | ||
| "@react-md/typography": "^2.0.0-alpha.14", | ||
| "@react-md/utils": "^2.0.0-alpha.14", | ||
| "@react-md/theme": "^2.0.0-alpha.15", | ||
| "@react-md/typography": "^2.0.0-alpha.15", | ||
| "@react-md/utils": "^2.0.0-alpha.15", | ||
| "classnames": "^2.2.6" | ||
@@ -55,3 +55,3 @@ }, | ||
| }, | ||
| "gitHead": "2c22440705bce3fb3cfc5876011e7b3df8be1c03" | ||
| "gitHead": "c20671308497530c59f6563eafd1914b55122b8c" | ||
| } |
@@ -31,4 +31,4 @@ # @react-md/icon | ||
| You should check out the | ||
| [full documentation](https://react-md.dev/packages/icon) for live examples and | ||
| more customization information, but an example usage is shown below. | ||
| [full documentation](https://react-md.dev/packages/icon/demos) for live examples | ||
| and more customization information, but an example usage is shown below. | ||
@@ -49,3 +49,3 @@ <!-- DOCS_REMOVE_END --> | ||
| ```tsx | ||
| import React, { Fragment } from "react"; | ||
| import React from "react"; | ||
| import { render } from "react-dom"; | ||
@@ -58,3 +58,3 @@ import { FontIcon, TextIconSpacing } from "@react-md/icon"; | ||
| const App = () => ( | ||
| <Fragment> | ||
| <> | ||
| // creates an icon spaced before the "Go Home" text | ||
@@ -74,3 +74,3 @@ <TextIconSpacing icon={<FontIcon>home</FontIcon>}> | ||
| </TextIconSpacing> | ||
| </Fragment> | ||
| </> | ||
| ); | ||
@@ -86,3 +86,3 @@ | ||
| ```tsx | ||
| import React, { Fragment } from "react"; | ||
| import React from "react"; | ||
| import { render } from "react-dom"; | ||
@@ -96,3 +96,3 @@ import { FontIcon, SVGIcon } from "@react-md/icon"; | ||
| const App = () => ( | ||
| <Fragment> | ||
| <> | ||
| <FontIcon>home</FontIcon> | ||
@@ -103,3 +103,3 @@ <FontIcon iconClassName="fa fa-github" aria-label="Github" /> | ||
| </SVGIcon> | ||
| </Fragment> | ||
| </> | ||
| ); | ||
@@ -106,0 +106,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by5.8%
73
- Lines of code
- increased by14.08%
2301
Worsened metrics
- Total package byte prevSize
- decreased by-64.16%
179467