diff --git a/frontend/src/metabase/parameters/components/ParameterValueWidget.module.css b/frontend/src/metabase/parameters/components/ParameterValueWidget.module.css index 1127668608917553c976e4ec7c0692700884c545..14a3ed0e987fab44307c89a7fc95ee1244f1fab3 100644 --- a/frontend/src/metabase/parameters/components/ParameterValueWidget.module.css +++ b/frontend/src/metabase/parameters/components/ParameterValueWidget.module.css @@ -69,3 +69,7 @@ font-weight: bold; color: var(--mb-color-text-secondary); } + +.widgetStatus { + flex: 0 0 auto; +} diff --git a/frontend/src/metabase/parameters/components/ParameterValueWidget.tsx b/frontend/src/metabase/parameters/components/ParameterValueWidget.tsx index cfb6b309fa7ee259c14a8441f5a602def601ba9e..c691082ced9495ef92ca31b20c2f731d959a7767 100644 --- a/frontend/src/metabase/parameters/components/ParameterValueWidget.tsx +++ b/frontend/src/metabase/parameters/components/ParameterValueWidget.tsx @@ -84,6 +84,7 @@ export const ParameterValueWidget = ({ ) { return ( <WidgetStatus + className={S.widgetStatus} highlighted={fieldHasValueOrFocus} status="reset" onClick={() => setParameterValueToDefault?.(parameter.id)} @@ -94,6 +95,7 @@ export const ParameterValueWidget = ({ if (value != null) { return ( <WidgetStatus + className={S.widgetStatus} highlighted={fieldHasValueOrFocus} status="clear" onClick={() => { @@ -105,7 +107,7 @@ export const ParameterValueWidget = ({ } if (!hasNoPopover(parameter)) { - return <WidgetStatus status="empty" />; + return <WidgetStatus className={S.widgetStatus} status="empty" />; } }; @@ -119,6 +121,7 @@ export const ParameterValueWidget = ({ ) { return ( <WidgetStatus + className={S.widgetStatus} highlighted={fieldHasValueOrFocus} status="reset" onClick={() => setParameterValueToDefault?.(parameter.id)} @@ -139,7 +142,7 @@ export const ParameterValueWidget = ({ if (!icon) { // This is required to keep input width constant - return <WidgetStatus status="none" />; + return <WidgetStatus className={S.widgetStatus} status="none" />; } return icon; diff --git a/frontend/src/metabase/parameters/components/WidgetStatus/WidgetStatus.module.css b/frontend/src/metabase/parameters/components/WidgetStatus/WidgetStatus.module.css deleted file mode 100644 index d4f55fd6e1fa5862a3e97cf8ec54396341b4c3bf..0000000000000000000000000000000000000000 --- a/frontend/src/metabase/parameters/components/WidgetStatus/WidgetStatus.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.root { - flex: 0 0 auto; -} diff --git a/frontend/src/metabase/parameters/components/WidgetStatus/WidgetStatus.tsx b/frontend/src/metabase/parameters/components/WidgetStatus/WidgetStatus.tsx index 800416ce3b52607f39246bd8e579bd9ebd49cdda..b58ddae0d06a6e6ce84961e88da11d05f66a6466 100644 --- a/frontend/src/metabase/parameters/components/WidgetStatus/WidgetStatus.tsx +++ b/frontend/src/metabase/parameters/components/WidgetStatus/WidgetStatus.tsx @@ -3,10 +3,10 @@ import { t } from "ttag"; import { Button, Flex, Icon, rem, Tooltip } from "metabase/ui"; -import S from "./WidgetStatus.module.css"; import type { Status } from "./types"; type Props = { + className?: string; highlighted?: boolean; status: Status; onClick?: () => void; @@ -20,7 +20,12 @@ const COMPACT_BUTTON_PADDING = 4; */ const BUTTON_MARGIN = -COMPACT_BUTTON_PADDING; -export const WidgetStatus = ({ highlighted, status, onClick }: Props) => { +export const WidgetStatus = ({ + className, + highlighted, + status, + onClick, +}: Props) => { const handleClick = (event: MouseEvent) => { if (onClick) { event.stopPropagation(); @@ -31,7 +36,7 @@ export const WidgetStatus = ({ highlighted, status, onClick }: Props) => { return ( <Flex align="center" - className={S.root} + className={className} h={0} // trick to prevent this element from affecting parent's height ml="auto" >