fix(sdk): modify `Custom column` widget in notebook to conform to some styles (#45044)

enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult.tsx

@@ -88,7 +88,13 @@ export const InteractiveQuestionResult = ({
           <BackButton />
           {withTitle && (customTitle ?? <Title />)}
           {withResetButton && <QuestionResetButton />}
-          <FilterButton onClick={() => setQuestionView("filter")} />
+          <FilterButton
+            onClick={() =>
+              setQuestionView(
+                questionView === "filter" ? "visualization" : "filter",
+              )
+            }
+          />
           <SummarizeButton
             isOpen={questionView === "summarize"}
             onOpen={() => setQuestionView("summarize")}

frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions/ExpressionEditorSuggestions.styled.tsx

@@ -26,12 +26,12 @@ export const ExpressionListItem = styled.li<{ isHighlighted: boolean }>`
   padding-right: 0.5rem;
   cursor: pointer;
   height: 2rem;
+  color: var(--mb-color-text-dark);
 
   ${props => props.isHighlighted && highlighted}
 `;
 
 export const ExpressionListFooter = styled.a<{ isHighlighted: boolean }>`
-  background: white;
   height: 2rem;
   color: var(--mb-color-text-medium);
   display: flex;

frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.tsx

@@ -2,9 +2,9 @@ import type { ReactNode } from "react";
 import { useState } from "react";
 import { t } from "ttag";
 
-import Input from "metabase/core/components/Input/Input";
+import CS from "metabase/css/core/index.css";
 import { isNotNull } from "metabase/lib/types";
-import { Button } from "metabase/ui";
+import { Button, TextInput } from "metabase/ui";
 import * as Lib from "metabase-lib";
 import { isExpression } from "metabase-lib/v1/expressions";
 import type { Expression } from "metabase-types/api";
@@ -233,15 +233,19 @@ export const ExpressionWidget = <Clause extends object = Lib.ExpressionClause>(
       {withName && (
         <FieldWrapper>
           <FieldLabel htmlFor="expression-name">{t`Name`}</FieldLabel>
-          <Input
+          <TextInput
+            classNames={{
+              input: CS.textBold,
+            }}
             id="expression-name"
             data-testid="expression-name"
             type="text"
             value={name}
             placeholder={t`Something nice and descriptive`}
-            fullWidth
+            w="100%"
+            radius="md"
             onChange={event => setName(event.target.value)}
-            onKeyPress={e => {
+            onKeyDown={e => {
               if (e.key === "Enter") {
                 handleCommit(expression, clause);
               }

frontend/src/metabase/ui/components/inputs/Input/Input.styled.tsx

@@ -16,10 +16,14 @@ export const getInputOverrides = (): MantineThemeOverride["components"] => ({
     defaultProps: {
       size: "md",
     },
-    styles: (theme, { multiline }: InputStylesParams, { size = "md" }) => ({
+    styles: (
+      theme,
+      { multiline, radius }: InputStylesParams,
+      { size = "md" },
+    ) => ({
       input: {
         color: theme.fn.themeColor("text-dark"),
-        borderRadius: theme.radius.xs,
+        borderRadius: radius ?? theme.radius.xs,
         height: multiline ? "auto" : getSize({ size, sizes: SIZES }),
         minHeight: getSize({ size, sizes: SIZES }),
         background: theme.fn.themeColor("bg-white"),