@khanacademy/wonder-blocks-icon-button
Advanced tools
@khanacademy/wonder-blocks-icon-button - npm Package Compare versions
Comparing version 3.4.5 to 3.4.6
| # @khanacademy/wonder-blocks-icon-button | ||
| ## 3.4.6 | ||
| ### Patch Changes | ||
| - @khanacademy/wonder-blocks-clickable@2.2.6 | ||
| - @khanacademy/wonder-blocks-core@4.3.1 | ||
| - @khanacademy/wonder-blocks-icon@1.2.27 | ||
| ## 3.4.5 | ||
@@ -4,0 +12,0 @@ |
@@ -40,3 +40,3 @@ import _extends from '@babel/runtime/helpers/extends'; | ||
| const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)]; | ||
| const child = /*#__PURE__*/React.createElement(Icon, { | ||
| const child = React.createElement(Icon, { | ||
| size: "medium", | ||
@@ -53,9 +53,9 @@ color: "currentColor", | ||
| if (href && !disabled) { | ||
| return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/React.createElement(StyledLink, _extends({}, commonProps, { | ||
| return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, { | ||
| to: href | ||
| }), child) : /*#__PURE__*/React.createElement(StyledAnchor, _extends({}, commonProps, { | ||
| }), child) : React.createElement(StyledAnchor, _extends({}, commonProps, { | ||
| href: href | ||
| }), child); | ||
| } else { | ||
| return /*#__PURE__*/React.createElement(StyledButton, _extends({ | ||
| return React.createElement(StyledButton, _extends({ | ||
| type: "button" | ||
@@ -69,3 +69,3 @@ }, commonProps, { | ||
| render() { | ||
| return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router)); | ||
| return React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router)); | ||
| } | ||
@@ -90,7 +90,4 @@ | ||
| margin: -8, | ||
| // This removes the 300ms click delay on mobile browsers by indicating that | ||
| // "double-tap to zoom" shouldn't be used on this element. | ||
| touchAction: "manipulation", | ||
| ":focus": { | ||
| // Mobile: Removes a blue highlight style shown when the user clicks a button | ||
| WebkitTapHighlightColor: "rgba(0,0,0,0)" | ||
@@ -166,39 +163,2 @@ } | ||
| _excluded2 = ["tabIndex"]; | ||
| /** | ||
| * An IconButton is a button whose contents are an SVG image. | ||
| * | ||
| * To use, supply an onClick function, a wonder-blocks icon asset (see | ||
| * the Icon section) and an aria-label to describe the button functionality. | ||
| * Optionally specify href (URL), clientSideNav, color | ||
| * (Wonder Blocks Blue or Red), kind ("primary", "secondary", or "tertiary"), | ||
| * light (whether the IconButton will be rendered on a dark background), | ||
| * disabled , test ID, and custom styling. | ||
| * | ||
| * The size of an IconButton matches the size of icon it wraps which is 24x24 | ||
| * pixels. The focus ring which is displayed on hover and focus is much | ||
| * larger but does not affect its size. This matches the behavior of Button. | ||
| * | ||
| * IconButtons require a certain amount of space between them to ensure the | ||
| * focus rings don't overlap. The minimum amount of spacing is 16px, but | ||
| * you should refer to the mocks provided by design. Using a Strut in between | ||
| * IconButtons is the preferred way to for adding this spacing. | ||
| * | ||
| * Many layouts require alignment of visual left (or right) side of an | ||
| * IconButton. This requires a little bit of pixel nudging since each icon | ||
| * as a different amount of internal padding. | ||
| * | ||
| * See the Toolbar documentation for examples of IconButton use that follow | ||
| * the best practices described above. | ||
| * | ||
| * ```js | ||
| * import {icons} from "@khanacademy/wonder-blocks-icon"; | ||
| * | ||
| * <IconButton | ||
| * icon={icons.anIcon} | ||
| * aria-label="An Icon" | ||
| * onClick={(e) => console.log("Hello, world!")} | ||
| * /> | ||
| * ``` | ||
| */ | ||
| class IconButton extends React.Component { | ||
@@ -217,3 +177,3 @@ renderClickableBehavior(router) { | ||
| const ClickableBehavior = getClickableBehavior(href, skipClientNav, router); | ||
| return /*#__PURE__*/React.createElement(ClickableBehavior, { | ||
| return React.createElement(ClickableBehavior, { | ||
| disabled: sharedProps.disabled, | ||
@@ -230,9 +190,6 @@ href: href, | ||
| return /*#__PURE__*/React.createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, { | ||
| return React.createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, { | ||
| skipClientNav: skipClientNav, | ||
| href: href, | ||
| target: target // If tabIndex is provide to the component we allow | ||
| // it to override the tabIndex provide to use by | ||
| // ClickableBehavior. | ||
| , | ||
| target: target, | ||
| tabIndex: tabIndex || clickableTabIndex | ||
@@ -244,3 +201,3 @@ })); | ||
| render() { | ||
| return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router)); | ||
| return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router)); | ||
| } | ||
@@ -247,0 +204,0 @@ |
| { | ||
| "name": "@khanacademy/wonder-blocks-icon-button", | ||
| "version": "3.4.5", | ||
| "version": "3.4.6", | ||
| "design": "v1", | ||
@@ -19,6 +19,6 @@ "publishConfig": { | ||
| "@babel/runtime": "^7.16.3", | ||
| "@khanacademy/wonder-blocks-clickable": "^2.2.5", | ||
| "@khanacademy/wonder-blocks-clickable": "^2.2.6", | ||
| "@khanacademy/wonder-blocks-color": "^1.1.20", | ||
| "@khanacademy/wonder-blocks-core": "^4.3.0", | ||
| "@khanacademy/wonder-blocks-icon": "^1.2.26" | ||
| "@khanacademy/wonder-blocks-core": "^4.3.1", | ||
| "@khanacademy/wonder-blocks-icon": "^1.2.27" | ||
| }, | ||
@@ -32,4 +32,4 @@ "peerDependencies": { | ||
| "devDependencies": { | ||
| "wb-dev-build-settings": "^0.3.0" | ||
| "wb-dev-build-settings": "^0.4.0" | ||
| } | ||
| } |
@@ -84,2 +84,4 @@ // @flow | ||
| * A target destination window for a link to open in. | ||
| * | ||
| * TODO(WB-1262): only allow this prop when `href` is also set.t | ||
| */ | ||
@@ -86,0 +88,0 @@ target?: "_blank", |
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
Worsened metrics
- Total package byte prevSize
- decreased by-1.02%
170468
- Lines of code
- decreased by-3.1%
1251