From 0865c2142be2f1ecd8bdb1b7b62125b7aba18b7c Mon Sep 17 00:00:00 2001
From: Nick Fitzpatrick <nick@metabase.com>
Date: Thu, 9 Nov 2023 09:38:59 -0400
Subject: [PATCH] Adding Stacked Checkbox component (#35448)
* Adding Stacked Checkbox component
* Switching to checkbox variant
* PR Feedback
* Storybook cleanup
* including description
---
.storybook/preview.tsx | 7 ++-
.../inputs/Checkbox/Checkbox.stories.mdx | 20 +++++++++
.../inputs/Checkbox/Checkbox.styled.tsx | 45 +++++++++++++++++--
.../ChartSettingAddRemoveColumns.tsx | 10 +++--
4 files changed, 75 insertions(+), 7 deletions(-)
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 22fb7a39c23..f5bb69c06b1 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,6 +1,7 @@
import React from "react";
import "metabase/css/index.css";
import "metabase/lib/dayjs";
+import { EmotionCacheProvider } from "metabase/styled-components/components/EmotionCacheProvider";
import { ThemeProvider } from "metabase/ui";
export const parameters = {
@@ -14,5 +15,9 @@ export const parameters = {
};
export const decorators = [
- renderStory => <ThemeProvider>{renderStory()}</ThemeProvider>,
+ renderStory => (
+ <EmotionCacheProvider>
+ <ThemeProvider>{renderStory()}</ThemeProvider>
+ </EmotionCacheProvider>
+ ),
];
diff --git a/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx b/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx
index 7c3bc5023b1..d43132f01bf 100644
--- a/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx
+++ b/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx
@@ -6,6 +6,7 @@ export const args = {
description: undefined,
disabled: false,
labelPosition: "right",
+ size: "md",
};
export const argTypes = {
@@ -22,6 +23,14 @@ export const argTypes = {
options: ["left", "right"],
control: { type: "inline-radio" },
},
+ size: {
+ options: ["xs", "md", "lg", "xl"],
+ control: { type: "inline-radio" },
+ },
+ variant: {
+ options: ["default", "stacked"],
+ control: { type: "inline-radio" },
+ },
};
<Meta
@@ -149,6 +158,17 @@ DescriptionLeft.args = {
<Story name="Description, left position">{DescriptionLeft}</Story>
</Canvas>
+#### Stacked Variant
+
+export const Stacked = StateTemplate.bind({});
+Stacked.args = {
+ variant: "stacked",
+};
+
+<Canvas>
+ <Story name="Stacked">{Stacked}</Story>
+</Canvas>
+
## Related components
- Radio
diff --git a/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.styled.tsx b/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.styled.tsx
index 7b70643a815..b7dd00b2a95 100644
--- a/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.styled.tsx
+++ b/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.styled.tsx
@@ -34,9 +34,6 @@ export const getCheckboxOverrides = (): MantineThemeOverride["components"] => ({
},
},
},
- body: {
- alignItems: "center",
- },
inner: {
width: getSize({ size, sizes: SIZES }),
height: getSize({ size, sizes: SIZES }),
@@ -47,6 +44,7 @@ export const getCheckboxOverrides = (): MantineThemeOverride["components"] => ({
height: getSize({ size, sizes: SIZES }),
cursor: "pointer",
borderRadius: theme.radius.xs,
+ border: `1px solid ${theme.colors.bg[2]}`,
"&:checked": {
borderColor: theme.colors.brand[1],
@@ -79,5 +77,46 @@ export const getCheckboxOverrides = (): MantineThemeOverride["components"] => ({
color: theme.colors.text[0],
},
}),
+ variants: {
+ stacked: (theme, { labelPosition }) => ({
+ inner: {
+ position: "relative",
+ zIndex: 0,
+ },
+ label: {
+ paddingLeft: labelPosition === "right" ? "0.75rem" : "0.5rem",
+ },
+ description: {
+ paddingLeft: labelPosition === "right" ? "0.75rem" : "0.5rem",
+ },
+ input: {
+ "&:after": {
+ content: "''",
+ border: `1px solid ${theme.colors.bg[2]}`,
+ position: "absolute",
+ top: rem(-4),
+ left: rem(4),
+ height: "100%",
+ width: "100%",
+ borderRadius: rem(4),
+ zIndex: -1,
+ backgroundColor: theme.white,
+ boxSizing: "border-box",
+ },
+
+ "&:checked:not([disabled]):after": {
+ border: `${rem(2)} solid ${theme.colors.brand[1]}`,
+ },
+
+ "&:disabled:after": {
+ border: `${rem(2)} solid ${theme.colors.border[0]}`,
+ },
+ },
+ labelWrapper: {
+ psoition: "relative",
+ top: rem(-2),
+ },
+ }),
+ },
},
});
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingAddRemoveColumns/ChartSettingAddRemoveColumns.tsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingAddRemoveColumns/ChartSettingAddRemoveColumns.tsx
index f7a3cbfd3d1..81a2bcfdfd0 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingAddRemoveColumns/ChartSettingAddRemoveColumns.tsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingAddRemoveColumns/ChartSettingAddRemoveColumns.tsx
@@ -5,7 +5,7 @@ import { Checkbox, TextInput, Box, Flex, Text } from "metabase/ui";
import { Icon } from "metabase/core/components/Icon";
import type { TableColumnOrderSetting } from "metabase-types/api";
import { getColumnIcon } from "metabase/common/utils/columns";
-import { StackedCheckBox } from "metabase/components/StackedCheckBox/StackedCheckBox";
+
import type * as Lib from "metabase-lib";
import type {
ColumnSetting,
@@ -187,7 +187,9 @@ export const ChartSettingAddRemoveColumns = ({
{showAddRemoveAll(columnGroup.columns) && (
<Box mb="1rem">
{areAllColumnsInQuery(columnGroup.columns) ? (
- <StackedCheckBox
+ <Checkbox
+ variant="stacked"
+ size="xs"
label={
<Text
fw={700}
@@ -201,7 +203,9 @@ export const ChartSettingAddRemoveColumns = ({
}
/>
) : (
- <StackedCheckBox
+ <Checkbox
+ variant="stacked"
+ size="xs"
label={
<Text
fw={700}
--
GitLab