Add extended color pickers (#22880)

frontend/src/metabase/core/components/ColorSelector/index.ts

+export { default } from "./ColorSelector";

frontend/src/metabase/core/components/DateInput/DateInput.tsx

@@ -19,7 +19,7 @@ const TIME_FORMAT_24 = "HH:mm";
 
 export type DateInputAttributes = Omit<
   InputHTMLAttributes<HTMLDivElement>,
-  "value" | "onChange"
+  "size" | "value" | "onChange"
 >;
 
 export interface DateInputProps extends DateInputAttributes {

frontend/src/metabase/core/components/Input/Input.styled.tsx

@@ -2,8 +2,10 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { color, darken } from "metabase/lib/colors";
 import IconButtonWrapper from "metabase/components/IconButtonWrapper";
+import { InputSize } from "./types";
 
 export interface InputProps {
+  fieldSize?: InputSize;
   hasError?: boolean;
   fullWidth?: boolean;
   hasLeftIcon?: boolean;
@@ -57,6 +59,13 @@ export const InputField = styled.input<InputProps>`
     css`
       padding-right: 2.25rem;
     `};
+
+  ${props =>
+    props.fieldSize === "small" &&
+    css`
+      font-size: 0.875rem;
+      padding: 0.4375rem 0.625rem;
+    `};
 `;
 
 export const InputButton = styled(IconButtonWrapper)`

frontend/src/metabase/core/components/Input/Input.tsx

@@ -13,9 +13,16 @@ import {
   InputRightButton,
   InputRoot,
 } from "./Input.styled";
+import { InputSize } from "./types";
 
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+export type InputAttributes = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "size"
+>;
+
+export interface InputProps extends InputAttributes {
   inputRef?: Ref<HTMLInputElement>;
+  size?: InputSize;
   error?: boolean;
   fullWidth?: boolean;
   leftIcon?: string;
@@ -31,6 +38,7 @@ const Input = forwardRef(function Input(
     className,
     style,
     inputRef,
+    size = "medium",
     error,
     fullWidth,
     leftIcon,
@@ -53,6 +61,7 @@ const Input = forwardRef(function Input(
       <InputField
         {...props}
         ref={inputRef}
+        fieldSize={size}
         hasError={error}
         fullWidth={fullWidth}
         hasRightIcon={Boolean(rightIcon)}

frontend/src/metabase/core/components/Input/types.ts

+export type InputSize = "small" | "medium";

frontend/src/metabase/core/components/NumericInput/NumericInput.tsx

@@ -12,7 +12,7 @@ import Input from "metabase/core/components/Input";
 
 export type NumericInputAttributes = Omit<
   InputHTMLAttributes<HTMLDivElement>,
-  "value" | "onChange"
+  "value" | "size" | "onChange"
 >;
 
 export interface NumericInputProps extends NumericInputAttributes {