@rmwc/button - npm Package Compare versions

Comparing version 8.0.8 to 14.0.0-alpha.0

dist/index.d.ts

@@ -24,2 +24,4 @@ import * as RMWC from '@rmwc/types';
     label?: React.ReactNode | any;
+    /** Makes the button more touch friendly. This will automatically be set true if used inside of TouchTargetWrapper.*/
+    touch?: boolean;
     /** Content specified as children. */
@@ -26,0 +28,0 @@ children?: React.ReactNode;

dist/index.js

@@ -8,2 +8,3 @@ "use strict";
 var icon_1 = require("@rmwc/icon");
+var touch_target_1 = require("@rmwc/touch-target");
 var base_1 = require("@rmwc/base");
@@ -16,3 +17,4 @@ /**
 })(base_1.createComponent(function Button(props, ref) {
-    var dense = props.dense, raised = props.raised, unelevated = props.unelevated, outlined = props.outlined, danger = props.danger, icon = props.icon, label = props.label, trailingIcon = props.trailingIcon, children = props.children, rest = tslib_1.__rest(props, ["dense", "raised", "unelevated", "outlined", "danger", "icon", "label", "trailingIcon", "children"]);
+    var dense = props.dense, raised = props.raised, unelevated = props.unelevated, outlined = props.outlined, danger = props.danger, icon = props.icon, label = props.label, trailingIcon = props.trailingIcon, children = props.children, touch = props.touch, rest = tslib_1.__rest(props, ["dense", "raised", "unelevated", "outlined", "danger", "icon", "label", "trailingIcon", "children", "touch"]);
+    var isTouch = touch_target_1.useIsWrappedTouchTarget(touch);
     var className = base_1.useClassNames(props, [
@@ -24,3 +26,4 @@ 'mdc-button',
             'mdc-button--unelevated': unelevated,
-            'mdc-button--outlined': outlined
+            'mdc-button--outlined': outlined,
+            'mdc-button--touch': isTouch
         }
@@ -38,2 +41,4 @@ ]);
         react_1.default.createElement(ButtonRipple, null),
+        react_1.default.createElement(ButtonTouch, null),
+        react_1.default.createElement(ButtonFocusRing, null),
         !!icon && react_1.default.createElement(ButtonIcon, { icon: icon }),
@@ -48,2 +53,8 @@ react_1.default.createElement("span", { className: "mdc-button__label" },
  *********************************************************************/
+var ButtonTouch = react_1.default.memo(function ButtonTouch() {
+    return react_1.default.createElement("div", { className: "mdc-button__touch" });
+});
+var ButtonFocusRing = react_1.default.memo(function ButtonFocusRing() {
+    return react_1.default.createElement("div", { className: "mdc-button__focus-ring" });
+});
 var ButtonRipple = react_1.default.memo(function ButtonRipple() {
@@ -50,0 +61,0 @@ return react_1.default.createElement("div", { className: "mdc-button__ripple" });

dist/readme.d.ts

@@ -1,3 +0,3 @@
-/// <reference types="react" />
-export default function Readme(): JSX.Element;
-export declare const galleryExample: JSX.Element;
+import React from 'react';
+export default function Readme(): React.JSX.Element;
+export declare const galleryExample: React.JSX.Element;

dist/readme.js

@@ -11,2 +11,3 @@ "use strict";
 var circular_progress_1 = require("../circular-progress");
+var touch_target_1 = require("../touch-target");
 function Readme() {
@@ -41,4 +42,8 @@ return (react_1.default.createElement(_doc_utils_1.Docs, { title: "Buttons", lead: "Buttons communicate the action that will occur when the user touches them.", module: "@rmwc/button", styles: [
                 react_1.default.createElement(_1.Button, { label: "With Theme", theme: "secondary" }))),
-        react_1.default.createElement(_doc_utils_1.DocsExample, null,
+        react_1.default.createElement(_doc_utils_1.DocsExample, { label: "Children" },
             react_1.default.createElement(_1.Button, null, "As Children")),
+        react_1.default.createElement(_doc_utils_1.DocsExample, { label: "Touch Target Wrapper" },
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(touch_target_1.TouchTargetWrapper, null,
+                    react_1.default.createElement(_1.Button, null, "Touch Accessible")))),
         react_1.default.createElement(_doc_utils_1.DocProps, { src: generated_props_json_1.default, components: [{ displayName: 'Button', component: _1.Button }] })));
@@ -45,0 +50,0 @@ }

next/index.d.ts

@@ -24,2 +24,4 @@ import * as RMWC from '@rmwc/types';
     label?: React.ReactNode | any;
+    /** Makes the button more touch friendly. This will automatically be set true if used inside of TouchTargetWrapper.*/
+    touch?: boolean;
     /** Content specified as children. */
@@ -26,0 +28,0 @@ children?: React.ReactNode;

next/index.js

@@ -5,2 +5,3 @@ import { __assign, __rest } from "tslib";
 import { Icon } from '@rmwc/icon';
+import { useIsWrappedTouchTarget } from '@rmwc/touch-target';
 import { Tag, useClassNames, createComponent, createMemoComponent } from '@rmwc/base';
@@ -13,3 +14,4 @@ /**
 })(createComponent(function Button(props, ref) {
-    var dense = props.dense, raised = props.raised, unelevated = props.unelevated, outlined = props.outlined, danger = props.danger, icon = props.icon, label = props.label, trailingIcon = props.trailingIcon, children = props.children, rest = __rest(props, ["dense", "raised", "unelevated", "outlined", "danger", "icon", "label", "trailingIcon", "children"]);
+    var dense = props.dense, raised = props.raised, unelevated = props.unelevated, outlined = props.outlined, danger = props.danger, icon = props.icon, label = props.label, trailingIcon = props.trailingIcon, children = props.children, touch = props.touch, rest = __rest(props, ["dense", "raised", "unelevated", "outlined", "danger", "icon", "label", "trailingIcon", "children", "touch"]);
+    var isTouch = useIsWrappedTouchTarget(touch);
     var className = useClassNames(props, [
@@ -21,3 +23,4 @@ 'mdc-button',
             'mdc-button--unelevated': unelevated,
-            'mdc-button--outlined': outlined
+            'mdc-button--outlined': outlined,
+            'mdc-button--touch': isTouch
         }
@@ -35,2 +38,4 @@ ]);
         React.createElement(ButtonRipple, null),
+        React.createElement(ButtonTouch, null),
+        React.createElement(ButtonFocusRing, null),
         !!icon && React.createElement(ButtonIcon, { icon: icon }),
@@ -45,2 +50,8 @@ React.createElement("span", { className: "mdc-button__label" },
  *********************************************************************/
+var ButtonTouch = React.memo(function ButtonTouch() {
+    return React.createElement("div", { className: "mdc-button__touch" });
+});
+var ButtonFocusRing = React.memo(function ButtonFocusRing() {
+    return React.createElement("div", { className: "mdc-button__focus-ring" });
+});
 var ButtonRipple = React.memo(function ButtonRipple() {
@@ -47,0 +58,0 @@ return React.createElement("div", { className: "mdc-button__ripple" });

next/readme.d.ts

@@ -1,3 +0,3 @@
-/// <reference types="react" />
-export default function Readme(): JSX.Element;
-export declare const galleryExample: JSX.Element;
+import React from 'react';
+export default function Readme(): React.JSX.Element;
+export declare const galleryExample: React.JSX.Element;

next/readme.js

@@ -7,2 +7,3 @@ import React from 'react';
 import { CircularProgress } from '../circular-progress';
+import { TouchTargetWrapper } from '../touch-target';
 export default function Readme() {
@@ -37,6 +38,10 @@ return (React.createElement(Docs, { title: "Buttons", lead: "Buttons communicate the action that will occur when the user touches them.", module: "@rmwc/button", styles: [
                 React.createElement(Button, { label: "With Theme", theme: "secondary" }))),
-        React.createElement(DocsExample, null,
+        React.createElement(DocsExample, { label: "Children" },
             React.createElement(Button, null, "As Children")),
+        React.createElement(DocsExample, { label: "Touch Target Wrapper" },
+            React.createElement(React.Fragment, null,
+                React.createElement(TouchTargetWrapper, null,
+                    React.createElement(Button, null, "Touch Accessible")))),
         React.createElement(DocProps, { src: propsSrc, components: [{ displayName: 'Button', component: Button }] })));
 }
 export var galleryExample = React.createElement(Button, { raised: true, label: "Raised" });

package.json

 {
   "name": "@rmwc/button",
-  "version": "8.0.8",
+  "version": "14.0.0-alpha.0",
   "description": "RMWC Button component",
@@ -39,10 +39,10 @@ "main": "dist/index.js",
   "dependencies": {
-    "@material/button": "^8.0.0",
-    "@rmwc/base": "^8.0.8",
-    "@rmwc/icon": "^8.0.8",
-    "@rmwc/provider": "^8.0.8",
-    "@rmwc/ripple": "^8.0.8",
-    "@rmwc/types": "^8.0.8"
+    "@material/button": "^14.0.0",
+    "@rmwc/base": "^14.0.0-alpha.0",
+    "@rmwc/icon": "^14.0.0-alpha.0",
+    "@rmwc/provider": "^14.0.0-alpha.0",
+    "@rmwc/ripple": "^14.0.0-alpha.0",
+    "@rmwc/types": "^14.0.0-alpha.0"
   },
   "gitHead": "d9befec0e3b258864b71686eecd16c16feb43cf1"
 }

README.md

@@ -67,2 +67,11 @@ # Buttons
 
+```jsx
+<>
+  {/** Wrapping a button in TouchTargetWrapper will automatically set its `touch` prop to true. */}
+  <TouchTargetWrapper>
+    <Button>Touch Accessible</Button>
+  </TouchTargetWrapper>
+</>
+```
+
 ## Button
@@ -83,2 +92,3 @@ The Button component.
 | `raised` | `undefined \| false \| true` | Make the Button raised. |
+| `touch` | `undefined \| false \| true` | Makes the button more touch friendly. This will automatically be set true if used inside of TouchTargetWrapper. |
 | `trailingIcon` | `RMWC.IconPropT` | A trailing icon for the Button |
@@ -85,0 +95,0 @@ | `unelevated` | `undefined \| false \| true` | Make the button unelevated. |

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Total package byte prevSize

23640

increased by14.8%

Lines of code

403

increased by12.57%

Number of lines in readme file

96

increased by11.63%

Worsened metrics

Number of low quality alerts

3

increased by50%

Dependency changes

• + Added@material/animation@14.0.0(transitive)

• + Added@material/base@14.0.0(transitive)

• + Added@material/button@14.0.0(transitive)

• + Added@material/density@14.0.0(transitive)

• + Added@material/dom@14.0.0(transitive)

• + Added@material/elevation@14.0.0(transitive)

• + Added@material/feature-targeting@14.0.0(transitive)

• + Added@material/focus-ring@14.0.0(transitive)

• + Added@material/ripple@14.0.0(transitive)

• + Added@material/rtl@14.0.0(transitive)

• + Added@material/shape@14.0.0(transitive)

• + Added@material/theme@14.0.0(transitive)

• + Added@material/tokens@14.0.0(transitive)

• + Added@material/touch-target@14.0.0(transitive)

• + Added@material/typography@14.0.0(transitive)

• + Added@rmwc/base@14.3.5(transitive)

• + Added@rmwc/icon@14.3.5(transitive)

• + Added@rmwc/provider@14.3.5(transitive)

• + Added@rmwc/ripple@14.3.5(transitive)

• + Added@rmwc/types@14.3.5(transitive)

• - Removed@material/animation@8.0.0(transitive)

• - Removed@material/base@8.0.0(transitive)

• - Removed@material/button@8.0.0(transitive)

• - Removed@material/density@8.0.0(transitive)

• - Removed@material/dom@8.0.0(transitive)

• - Removed@material/elevation@8.0.0(transitive)

• - Removed@material/feature-targeting@8.0.0(transitive)

• - Removed@material/ripple@8.0.0(transitive)

• - Removed@material/rtl@8.0.0(transitive)

• - Removed@material/shape@8.0.0(transitive)

• - Removed@material/theme@8.0.0(transitive)

• - Removed@material/touch-target@8.0.0(transitive)

• - Removed@material/typography@8.0.0(transitive)

• - Removed@rmwc/base@8.0.8(transitive)

• - Removed@rmwc/icon@8.0.8(transitive)

• - Removed@rmwc/provider@8.0.8(transitive)

• - Removed@rmwc/ripple@8.0.8(transitive)

• - Removed@rmwc/types@8.0.8(transitive)

• - Removed@types/classnames@2.3.4(transitive)

• - Removedtslib@1.14.1(transitive)

• Updated@material/button@^14.0.0

• Updated@rmwc/base@^14.0.0-alpha.0

• Updated@rmwc/icon@^14.0.0-alpha.0

• Updated@rmwc/provider@^14.0.0-alpha.0

• Updated@rmwc/ripple@^14.0.0-alpha.0

• Updated@rmwc/types@^14.0.0-alpha.0