@ag.ds-next/button - npm Package Compare versions

Comparing version 10.0.0 to 11.0.0

CHANGELOG.md

 # @ag.ds-next/button
 
+## 11.0.0
+
+### Minor Changes
+
+- 931a7e7a2: Created new `text` variant
+
+### Patch Changes
+
+- Updated dependencies [aad2cb62d]
+- Updated dependencies [aad2cb62d]
+  - @ag.ds-next/box@7.0.0
+  - @ag.ds-next/loading@6.0.0
+  - @ag.ds-next/core@4.0.0
+
 ## 10.0.0
@@ -4,0 +18,0 @@

dist/ag.ds-next-button.cjs.dev.js

@@ -51,2 +51,17 @@ 'use strict';
     }
+  }),
+  text: _objectSpread$2(_objectSpread$2({
+    height: 'auto',
+    paddingLeft: 0,
+    paddingRight: 0,
+    background: 'transparent',
+    borderColor: 'transparent',
+    color: core.boxPalette.foregroundAction
+  }, core.packs.underline), {}, {
+    '&:not(:disabled):hover': {
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: core.boxPalette.foregroundText,
+      textDecoration: 'none'
+    }
   })
@@ -78,3 +93,3 @@ };
       size = _ref.size;
-  return _objectSpread$2(_objectSpread$2(_objectSpread$2(_objectSpread$2({}, variants[variant]), sizes[size]), {}, {
+  return _objectSpread$2(_objectSpread$2(_objectSpread$2(_objectSpread$2({}, sizes[size]), variants[variant]), {}, {
     appearance: 'none',
@@ -283,3 +298,3 @@ boxSizing: 'border-box',
     flexDirection: ['column', 'row'],
-    alignItems: ['stretch', 'flex-start'],
+    alignItems: ['stretch', 'center'],
     children: children
@@ -286,0 +301,0 @@ });

dist/ag.ds-next-button.cjs.prod.js

@@ -51,2 +51,17 @@ 'use strict';
     }
+  }),
+  text: _objectSpread$2(_objectSpread$2({
+    height: 'auto',
+    paddingLeft: 0,
+    paddingRight: 0,
+    background: 'transparent',
+    borderColor: 'transparent',
+    color: core.boxPalette.foregroundAction
+  }, core.packs.underline), {}, {
+    '&:not(:disabled):hover': {
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: core.boxPalette.foregroundText,
+      textDecoration: 'none'
+    }
   })
@@ -78,3 +93,3 @@ };
       size = _ref.size;
-  return _objectSpread$2(_objectSpread$2(_objectSpread$2(_objectSpread$2({}, variants[variant]), sizes[size]), {}, {
+  return _objectSpread$2(_objectSpread$2(_objectSpread$2(_objectSpread$2({}, sizes[size]), variants[variant]), {}, {
     appearance: 'none',
@@ -271,3 +286,3 @@ boxSizing: 'border-box',
     flexDirection: ['column', 'row'],
-    alignItems: ['stretch', 'flex-start'],
+    alignItems: ['stretch', 'center'],
     children: children
@@ -274,0 +289,0 @@ });

dist/ag.ds-next-button.esm.js

@@ -47,2 +47,17 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
     }
+  }),
+  text: _objectSpread$2(_objectSpread$2({
+    height: 'auto',
+    paddingLeft: 0,
+    paddingRight: 0,
+    background: 'transparent',
+    borderColor: 'transparent',
+    color: boxPalette.foregroundAction
+  }, packs.underline), {}, {
+    '&:not(:disabled):hover': {
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: boxPalette.foregroundText,
+      textDecoration: 'none'
+    }
   })
@@ -74,3 +89,3 @@ };
       size = _ref.size;
-  return _objectSpread$2(_objectSpread$2(_objectSpread$2(_objectSpread$2({}, variants[variant]), sizes[size]), {}, {
+  return _objectSpread$2(_objectSpread$2(_objectSpread$2(_objectSpread$2({}, sizes[size]), variants[variant]), {}, {
     appearance: 'none',
@@ -279,3 +294,3 @@ boxSizing: 'border-box',
     flexDirection: ['column', 'row'],
-    alignItems: ['stretch', 'flex-start'],
+    alignItems: ['stretch', 'center'],
     children: children
@@ -282,0 +297,0 @@ });

dist/declarations/src/Button.d.ts

@@ -32,3 +32,3 @@ import { ComponentType, ReactNode } from 'react';
     onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-    type?: "button" | "submit" | "reset" | undefined;
+    type?: "button" | "reset" | "submit" | undefined;
 } & {
@@ -35,0 +35,0 @@ children?: ReactNode;

dist/declarations/src/styles.d.ts

@@ -41,2 +41,18 @@ declare const variants: {
     };
+    readonly text: {
+        readonly '&:not(:disabled):hover': {
+            readonly background: "transparent";
+            readonly borderColor: "transparent";
+            readonly color: string;
+            readonly textDecoration: "none";
+        };
+        readonly textDecoration: "underline";
+        readonly textDecorationSkipInk: "auto";
+        readonly height: "auto";
+        readonly paddingLeft: 0;
+        readonly paddingRight: 0;
+        readonly background: "transparent";
+        readonly borderColor: "transparent";
+        readonly color: string;
+    };
 };
@@ -114,8 +130,2 @@ export declare type ButtonVariant = keyof typeof variants;
     readonly textAlign: "center";
-    readonly gap: string;
-    readonly paddingLeft: string;
-    readonly paddingRight: string;
-    readonly height: string;
-    readonly fontSize: string;
-    readonly lineHeight: number;
     readonly background: string;
@@ -132,2 +142,8 @@ readonly borderColor: string;
     };
+    readonly gap: string;
+    readonly paddingLeft: string;
+    readonly paddingRight: string;
+    readonly height: string;
+    readonly fontSize: string;
+    readonly lineHeight: number;
 } | {
@@ -158,9 +174,3 @@ readonly '&:disabled': {
     readonly textAlign: "center";
-    readonly gap: string;
-    readonly paddingLeft: string;
-    readonly paddingRight: string;
-    readonly height: string;
-    readonly fontSize: string;
-    readonly lineHeight: string;
-    readonly background: string;
+    readonly background: "transparent";
     readonly borderColor: string;
@@ -172,6 +182,12 @@ readonly color: string;
         readonly textDecorationSkipInk: "auto";
-        readonly background: string;
+        readonly background: "transparent";
         readonly borderColor: string;
         readonly color: string;
     };
+    readonly gap: string;
+    readonly paddingLeft: string;
+    readonly paddingRight: string;
+    readonly height: string;
+    readonly fontSize: string;
+    readonly lineHeight: number;
 } | {
@@ -202,2 +218,13 @@ readonly '&:disabled': {
     readonly textAlign: "center";
+    readonly '&:not(:disabled):hover': {
+        readonly background: "transparent";
+        readonly borderColor: "transparent";
+        readonly color: string;
+        readonly textDecoration: "none";
+    };
+    readonly textDecoration: "underline";
+    readonly textDecorationSkipInk: "auto";
+    readonly background: "transparent";
+    readonly borderColor: "transparent";
+    readonly color: string;
     readonly gap: string;
@@ -209,13 +236,44 @@ readonly paddingLeft: string;
     readonly lineHeight: number;
-    readonly background: string;
-    readonly borderColor: string;
-    readonly color: string;
-    readonly textDecoration: "none";
+} | {
+    readonly '&:disabled': {
+        readonly cursor: "not-allowed";
+        readonly opacity: 0.3;
+    };
+    readonly '&:focus': {
+        outlineWidth: string;
+        outlineStyle: string;
+        outlineColor: string;
+        outlineOffset: number;
+    };
+    readonly width?: string | undefined;
+    readonly appearance: "none";
+    readonly boxSizing: "border-box";
+    readonly position: "relative";
+    readonly display: "flex" | "inline-flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly borderWidth: 3;
+    readonly borderStyle: "solid";
+    readonly borderRadius: number;
+    readonly cursor: "pointer";
+    readonly fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+    readonly margin: 0;
+    readonly textAlign: "center";
     readonly '&:not(:disabled):hover': {
-        readonly textDecoration: "underline";
-        readonly textDecorationSkipInk: "auto";
-        readonly background: string;
-        readonly borderColor: string;
+        readonly background: "transparent";
+        readonly borderColor: "transparent";
         readonly color: string;
+        readonly textDecoration: "none";
     };
+    readonly textDecoration: "underline";
+    readonly textDecorationSkipInk: "auto";
+    readonly height: "auto";
+    readonly paddingLeft: 0;
+    readonly paddingRight: 0;
+    readonly background: "transparent";
+    readonly borderColor: "transparent";
+    readonly color: string;
+    readonly gap: string;
+    readonly fontSize: string;
+    readonly lineHeight: number;
 } | {
@@ -246,8 +304,2 @@ readonly '&:disabled': {
     readonly textAlign: "center";
-    readonly gap: string;
-    readonly paddingLeft: string;
-    readonly paddingRight: string;
-    readonly height: string;
-    readonly fontSize: string;
-    readonly lineHeight: string;
     readonly background: string;
@@ -264,2 +316,8 @@ readonly borderColor: string;
     };
+    readonly gap: string;
+    readonly paddingLeft: string;
+    readonly paddingRight: string;
+    readonly height: string;
+    readonly fontSize: string;
+    readonly lineHeight: string;
 } | {
@@ -290,8 +348,2 @@ readonly '&:disabled': {
     readonly textAlign: "center";
-    readonly gap: string;
-    readonly paddingLeft: string;
-    readonly paddingRight: string;
-    readonly height: string;
-    readonly fontSize: string;
-    readonly lineHeight: number;
     readonly background: "transparent";
@@ -308,2 +360,8 @@ readonly borderColor: string;
     };
+    readonly gap: string;
+    readonly paddingLeft: string;
+    readonly paddingRight: string;
+    readonly height: string;
+    readonly fontSize: string;
+    readonly lineHeight: string;
 } | {
@@ -334,2 +392,13 @@ readonly '&:disabled': {
     readonly textAlign: "center";
+    readonly '&:not(:disabled):hover': {
+        readonly background: "transparent";
+        readonly borderColor: "transparent";
+        readonly color: string;
+        readonly textDecoration: "none";
+    };
+    readonly textDecoration: "underline";
+    readonly textDecorationSkipInk: "auto";
+    readonly background: "transparent";
+    readonly borderColor: "transparent";
+    readonly color: string;
     readonly gap: string;
@@ -341,13 +410,44 @@ readonly paddingLeft: string;
     readonly lineHeight: string;
-    readonly background: "transparent";
-    readonly borderColor: string;
-    readonly color: string;
-    readonly textDecoration: "none";
+} | {
+    readonly '&:disabled': {
+        readonly cursor: "not-allowed";
+        readonly opacity: 0.3;
+    };
+    readonly '&:focus': {
+        outlineWidth: string;
+        outlineStyle: string;
+        outlineColor: string;
+        outlineOffset: number;
+    };
+    readonly width?: string | undefined;
+    readonly appearance: "none";
+    readonly boxSizing: "border-box";
+    readonly position: "relative";
+    readonly display: "flex" | "inline-flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly borderWidth: 3;
+    readonly borderStyle: "solid";
+    readonly borderRadius: number;
+    readonly cursor: "pointer";
+    readonly fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+    readonly margin: 0;
+    readonly textAlign: "center";
     readonly '&:not(:disabled):hover': {
-        readonly textDecoration: "underline";
-        readonly textDecorationSkipInk: "auto";
         readonly background: "transparent";
-        readonly borderColor: string;
+        readonly borderColor: "transparent";
         readonly color: string;
+        readonly textDecoration: "none";
     };
+    readonly textDecoration: "underline";
+    readonly textDecorationSkipInk: "auto";
+    readonly height: "auto";
+    readonly paddingLeft: 0;
+    readonly paddingRight: 0;
+    readonly background: "transparent";
+    readonly borderColor: "transparent";
+    readonly color: string;
+    readonly gap: string;
+    readonly fontSize: string;
+    readonly lineHeight: string;
 } | {
@@ -378,9 +478,3 @@ readonly '&:disabled': {
     readonly textAlign: "center";
-    readonly gap: string;
-    readonly paddingLeft: string;
-    readonly paddingRight: string;
-    readonly height: string;
-    readonly fontSize: string;
-    readonly lineHeight: number;
-    readonly background: "transparent";
+    readonly background: string;
     readonly borderColor: string;
@@ -392,6 +486,12 @@ readonly color: string;
         readonly textDecorationSkipInk: "auto";
-        readonly background: "transparent";
+        readonly background: string;
         readonly borderColor: string;
         readonly color: string;
     };
+    readonly gap: string;
+    readonly paddingLeft: string;
+    readonly paddingRight: string;
+    readonly height: string;
+    readonly fontSize: string;
+    readonly lineHeight: number;
 } | {
@@ -422,8 +522,2 @@ readonly '&:disabled': {
     readonly textAlign: "center";
-    readonly gap: string;
-    readonly paddingLeft: string;
-    readonly paddingRight: string;
-    readonly height: string;
-    readonly fontSize: string;
-    readonly lineHeight: string;
     readonly background: "transparent";
@@ -440,2 +534,8 @@ readonly borderColor: string;
     };
+    readonly gap: string;
+    readonly paddingLeft: string;
+    readonly paddingRight: string;
+    readonly height: string;
+    readonly fontSize: string;
+    readonly lineHeight: number;
 } | {
@@ -466,2 +566,13 @@ readonly '&:disabled': {
     readonly textAlign: "center";
+    readonly '&:not(:disabled):hover': {
+        readonly background: "transparent";
+        readonly borderColor: "transparent";
+        readonly color: string;
+        readonly textDecoration: "none";
+    };
+    readonly textDecoration: "underline";
+    readonly textDecorationSkipInk: "auto";
+    readonly background: "transparent";
+    readonly borderColor: "transparent";
+    readonly color: string;
     readonly gap: string;
@@ -473,2 +584,27 @@ readonly paddingLeft: string;
     readonly lineHeight: number;
+} | {
+    readonly '&:disabled': {
+        readonly cursor: "not-allowed";
+        readonly opacity: 0.3;
+    };
+    readonly '&:focus': {
+        outlineWidth: string;
+        outlineStyle: string;
+        outlineColor: string;
+        outlineOffset: number;
+    };
+    readonly width?: string | undefined;
+    readonly appearance: "none";
+    readonly boxSizing: "border-box";
+    readonly position: "relative";
+    readonly display: "flex" | "inline-flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly borderWidth: 3;
+    readonly borderStyle: "solid";
+    readonly borderRadius: number;
+    readonly cursor: "pointer";
+    readonly fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+    readonly margin: 0;
+    readonly textAlign: "center";
     readonly '&:not(:disabled):hover': {
@@ -482,5 +618,11 @@ readonly background: "transparent";
     readonly textDecorationSkipInk: "auto";
+    readonly height: "auto";
+    readonly paddingLeft: 0;
+    readonly paddingRight: 0;
     readonly background: "transparent";
     readonly borderColor: "transparent";
     readonly color: string;
+    readonly gap: string;
+    readonly fontSize: string;
+    readonly lineHeight: number;
 } | {
@@ -511,2 +653,13 @@ readonly '&:disabled': {
     readonly textAlign: "center";
+    readonly background: string;
+    readonly borderColor: string;
+    readonly color: string;
+    readonly textDecoration: "none";
+    readonly '&:not(:disabled):hover': {
+        readonly textDecoration: "underline";
+        readonly textDecorationSkipInk: "auto";
+        readonly background: string;
+        readonly borderColor: string;
+        readonly color: string;
+    };
     readonly gap: string;
@@ -518,13 +671,2 @@ readonly paddingLeft: string;
     readonly lineHeight: string;
-    readonly '&:not(:disabled):hover': {
-        readonly background: "transparent";
-        readonly borderColor: "transparent";
-        readonly color: string;
-        readonly textDecoration: "none";
-    };
-    readonly textDecoration: "underline";
-    readonly textDecorationSkipInk: "auto";
-    readonly background: "transparent";
-    readonly borderColor: "transparent";
-    readonly color: string;
 } | {
@@ -555,2 +697,13 @@ readonly '&:disabled': {
     readonly textAlign: "center";
+    readonly background: "transparent";
+    readonly borderColor: string;
+    readonly color: string;
+    readonly textDecoration: "none";
+    readonly '&:not(:disabled):hover': {
+        readonly textDecoration: "underline";
+        readonly textDecorationSkipInk: "auto";
+        readonly background: "transparent";
+        readonly borderColor: string;
+        readonly color: string;
+    };
     readonly gap: string;
@@ -561,3 +714,28 @@ readonly paddingLeft: string;
     readonly fontSize: string;
-    readonly lineHeight: number;
+    readonly lineHeight: string;
+} | {
+    readonly '&:disabled': {
+        readonly cursor: "not-allowed";
+        readonly opacity: 0.3;
+    };
+    readonly '&:focus': {
+        outlineWidth: string;
+        outlineStyle: string;
+        outlineColor: string;
+        outlineOffset: number;
+    };
+    readonly width?: string | undefined;
+    readonly appearance: "none";
+    readonly boxSizing: "border-box";
+    readonly position: "relative";
+    readonly display: "flex" | "inline-flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly borderWidth: 3;
+    readonly borderStyle: "solid";
+    readonly borderRadius: number;
+    readonly cursor: "pointer";
+    readonly fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+    readonly margin: 0;
+    readonly textAlign: "center";
     readonly '&:not(:disabled):hover': {
@@ -574,2 +752,8 @@ readonly background: "transparent";
     readonly color: string;
+    readonly gap: string;
+    readonly paddingLeft: string;
+    readonly paddingRight: string;
+    readonly height: string;
+    readonly fontSize: string;
+    readonly lineHeight: string;
 } | {
@@ -600,8 +784,2 @@ readonly '&:disabled': {
     readonly textAlign: "center";
-    readonly gap: string;
-    readonly paddingLeft: string;
-    readonly paddingRight: string;
-    readonly height: string;
-    readonly fontSize: string;
-    readonly lineHeight: string;
     readonly '&:not(:disabled):hover': {
@@ -615,6 +793,12 @@ readonly background: "transparent";
     readonly textDecorationSkipInk: "auto";
+    readonly height: "auto";
+    readonly paddingLeft: 0;
+    readonly paddingRight: 0;
     readonly background: "transparent";
     readonly borderColor: "transparent";
     readonly color: string;
+    readonly gap: string;
+    readonly fontSize: string;
+    readonly lineHeight: string;
 };
 export {};

package.json

 {
 	"name": "@ag.ds-next/button",
-	"version": "10.0.0",
+	"version": "11.0.0",
 	"main": "dist/ag.ds-next-button.cjs.js",
@@ -11,5 +11,5 @@ "module": "dist/ag.ds-next-button.esm.js",
 	"peerDependencies": {
-		"@ag.ds-next/box": "6.1.0",
-		"@ag.ds-next/core": "3.0.1",
-		"@ag.ds-next/loading": "5.0.0",
+		"@ag.ds-next/box": "7.0.0",
+		"@ag.ds-next/core": "4.0.0",
+		"@ag.ds-next/loading": "6.0.0",
 		"@emotion/react": "^11.7.0",
@@ -16,0 +16,0 @@ "react": "^16.14.0 || ^17.0.0 || ^18.0.0"

No alert changes

Improved metrics

Total package byte prevSize

124775

increased by7%

Lines of code

2268

increased by11.83%

No dependency changes