Added text only button variant

Toniq-Labs · Mar 25, 2024 · 8da9d58 · 8da9d58
1 parent 22b210c
commit 8da9d58
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.5.1",
+    "version": "16.5.2",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.5.1",
+    "version": "16.5.2",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

diff --git a/packages/design-system/src/elements/toniq-button/toniq-button.element.book.ts b/packages/design-system/src/elements/toniq-button/toniq-button.element.book.ts
@@ -26,6 +26,12 @@ export const toniqButtonPage = defineBookPage({
                         variant: ToniqButtonVariantEnum.Outline,
                     },
                 },
+                {
+                    name: 'Text Only',
+                    inputs: {
+                        variant: ToniqButtonVariantEnum.TextOnly,
+                    },
+                },
                 {
                     name: 'Disabled',
                     inputs: {

diff --git a/packages/design-system/src/elements/toniq-button/toniq-button.element.ts b/packages/design-system/src/elements/toniq-button/toniq-button.element.ts
@@ -15,6 +15,7 @@ export enum ToniqButtonVariantEnum {
     Default = 'default',
     Outline = 'outline',
     Secondary = 'secondary',
+    TextOnly = 'text-only',
 }
 
 export const ToniqButton = defineToniqElement<{
@@ -28,6 +29,7 @@ export const ToniqButton = defineToniqElement<{
     hostClasses: {
         'toniq-button-secondary': ({inputs}) => inputs.variant === ToniqButtonVariantEnum.Secondary,
         'toniq-button-outline': ({inputs}) => inputs.variant === ToniqButtonVariantEnum.Outline,
+        'toniq-button-text-only': ({inputs}) => inputs.variant === ToniqButtonVariantEnum.TextOnly,
         'toniq-button-disabled': ({inputs}) => !!inputs.disabled,
     },
     styles: ({hostClasses}) => css`
@@ -83,6 +85,16 @@ export const ToniqButton = defineToniqElement<{
             border-color: ${toniqColors.accentPrimary.backgroundColor};
         }
 
+        ${hostClasses['toniq-button-text-only'].selector} button {
+            color: inherit;
+            background-color: transparent;
+            border-color: transparent;
+        }
+
+        :host(.${hostClasses['toniq-button-text-only'].name}:hover) button {
+            filter: brightness(85%);
+        }
+
         ${hostClasses['toniq-button-disabled'].selector} {
             ${toniqDisabledStyles};
         }

diff --git a/packages/native-elements-test/package.json b/packages/native-elements-test/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.5.1",
+    "version": "16.5.2",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.5.1",
+    "version": "16.5.2",
     "private": true,
     "scripts": {
         "compile": "virmator compile",