From 01b4b80e82ce5a6291b7174e35e75a7875b4b5e6 Mon Sep 17 00:00:00 2001
From: Nick Fitzpatrick <nick@metabase.com>
Date: Tue, 17 Jan 2023 13:13:01 -0400
Subject: [PATCH] adding onlyText button variant (#27720)
* adding onlyText button variant
* PR feedback
---
.../core/components/Button/Button.stories.tsx | 6 ++++++
.../core/components/Button/Button.styled.tsx | 13 +++++++++++++
.../src/metabase/core/components/Button/Button.tsx | 1 +
3 files changed, 20 insertions(+)
diff --git a/frontend/src/metabase/core/components/Button/Button.stories.tsx b/frontend/src/metabase/core/components/Button/Button.stories.tsx
index 96dd1a2d86e..fefb9501a7b 100644
--- a/frontend/src/metabase/core/components/Button/Button.stories.tsx
+++ b/frontend/src/metabase/core/components/Button/Button.stories.tsx
@@ -26,3 +26,9 @@ export const WithIcon = Template.bind({});
WithIcon.args = {
icon: "chevrondown",
};
+
+export const OnlyText = Template.bind({});
+OnlyText.args = {
+ onlyText: true,
+ children: "Click Me",
+};
diff --git a/frontend/src/metabase/core/components/Button/Button.styled.tsx b/frontend/src/metabase/core/components/Button/Button.styled.tsx
index dc961e81130..c9fba056cd9 100644
--- a/frontend/src/metabase/core/components/Button/Button.styled.tsx
+++ b/frontend/src/metabase/core/components/Button/Button.styled.tsx
@@ -4,6 +4,7 @@ import { alpha, color } from "metabase/lib/colors";
export interface ButtonRootProps {
purple?: boolean;
+ onlyText?: boolean;
}
export const ButtonRoot = styled.button<ButtonRootProps>`
@@ -23,6 +24,18 @@ export const ButtonRoot = styled.button<ButtonRootProps>`
border-color: ${alpha("filter", 0.88)};
}
`}
+
+ ${({ onlyText }) =>
+ onlyText &&
+ css`
+ border: none;
+ padding: 0;
+
+ color: ${color("brand")};
+ &:hover {
+ background-color: unset;
+ }
+ `}
`;
export interface ButtonContentProps {
diff --git a/frontend/src/metabase/core/components/Button/Button.tsx b/frontend/src/metabase/core/components/Button/Button.tsx
index 2bb07b6673e..67c8c8133a7 100644
--- a/frontend/src/metabase/core/components/Button/Button.tsx
+++ b/frontend/src/metabase/core/components/Button/Button.tsx
@@ -65,6 +65,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
borderless?: boolean;
onlyIcon?: boolean;
fullWidth?: boolean;
+ onlyText?: boolean;
}
const BaseButton = forwardRef(function BaseButton(
--
GitLab