8a835357cc
## Description Fixed the alignment of the content inside the input <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced `prefix` and `suffix` props for better customization in TextInput components, replacing `startIcon` and `endIcon`. - Added examples for using menus as prefixes/suffixes and for type password functionality in TextInput stories. - Implemented loading indicator functionality with priority over icons in TextInput. - Added support for disabled and readonly states with icon prefixes and suffixes in TextInput. - **Bug Fixes** - Adjusted styles for autofill, focus states, and padding in input fields to improve user experience. - **Documentation** - Updated TextInput component documentation to reflect new `prefix` and `suffix` props usage and examples. - **Refactor** - Removed `startIcon` and `endIcon` properties from TextInputProps and updated rendering logic. - Replaced `startIcon` with `prefix` in CurrencyInputComponent and PhoneInputComponent. - Changed `startIcon` and `endIcon` to `prefix` and `suffix` in InputComponent. - **Style** - Removed specific styling for `[data-field-input-group]` affecting display and alignment. - Updated text-input module CSS to enhance the appearance of prefix and suffix elements and small-sized input fields. - **Chores** - Added `MULTI_LINE_TEXT` constant to the `InputTypes` object. - Updated the label for the "Icon" property in WDSInputWidget's propertyPaneStyleConfig. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
114 lines
2.5 KiB
TypeScript
114 lines
2.5 KiB
TypeScript
import type { Intent as BlueprintIntent } from "@blueprintjs/core";
|
|
import type { IconName } from "@blueprintjs/icons";
|
|
|
|
export interface DropdownOption {
|
|
label: string;
|
|
value: string;
|
|
icon?: IconName;
|
|
subText?: string;
|
|
id?: string;
|
|
onSelect?: (option: DropdownOption) => void;
|
|
children?: DropdownOption[];
|
|
intent?: BlueprintIntent;
|
|
}
|
|
|
|
export enum SubTextPosition {
|
|
BOTTOM,
|
|
LEFT,
|
|
}
|
|
|
|
export const InputTypes: { [key: string]: string } = {
|
|
TEXT: "TEXT",
|
|
NUMBER: "NUMBER",
|
|
INTEGER: "INTEGER",
|
|
PHONE_NUMBER: "PHONE_NUMBER",
|
|
EMAIL: "EMAIL",
|
|
PASSWORD: "PASSWORD",
|
|
CURRENCY: "CURRENCY",
|
|
SEARCH: "SEARCH",
|
|
MULTI_LINE_TEXT: "MULTI_LINE_TEXT",
|
|
};
|
|
|
|
export type InputType = (typeof InputTypes)[keyof typeof InputTypes];
|
|
|
|
export enum ButtonBorderRadiusTypes {
|
|
SHARP = "SHARP",
|
|
ROUNDED = "ROUNDED",
|
|
CIRCLE = "CIRCLE",
|
|
}
|
|
|
|
export type ButtonBorderRadius = keyof typeof ButtonBorderRadiusTypes;
|
|
|
|
export enum ButtonBoxShadowTypes {
|
|
NONE = "NONE",
|
|
VARIANT1 = "VARIANT1",
|
|
VARIANT2 = "VARIANT2",
|
|
VARIANT3 = "VARIANT3",
|
|
VARIANT4 = "VARIANT4",
|
|
VARIANT5 = "VARIANT5",
|
|
}
|
|
|
|
export type ButtonBoxShadow = keyof typeof ButtonBoxShadowTypes;
|
|
|
|
export type ButtonStyle =
|
|
| "PRIMARY_BUTTON"
|
|
| "SECONDARY_BUTTON"
|
|
| "SUCCESS_BUTTON"
|
|
| "DANGER_BUTTON";
|
|
|
|
export enum ButtonStyleTypes {
|
|
PRIMARY = "PRIMARY",
|
|
WARNING = "WARNING",
|
|
DANGER = "DANGER",
|
|
INFO = "INFO",
|
|
SECONDARY = "SECONDARY",
|
|
CUSTOM = "CUSTOM",
|
|
}
|
|
export type ButtonStyleType = keyof typeof ButtonStyleTypes;
|
|
|
|
export enum ButtonVariantTypes {
|
|
PRIMARY = "PRIMARY",
|
|
SECONDARY = "SECONDARY",
|
|
TERTIARY = "TERTIARY",
|
|
}
|
|
export type ButtonVariant = keyof typeof ButtonVariantTypes;
|
|
|
|
export enum RecaptchaTypes {
|
|
V3 = "V3",
|
|
V2 = "V2",
|
|
}
|
|
export type RecaptchaType = keyof typeof RecaptchaTypes;
|
|
|
|
export enum CheckboxGroupAlignmentTypes {
|
|
START = "flex-start",
|
|
END = "flex-end",
|
|
CENTER = "center",
|
|
SPACE_BETWEEN = "space-between",
|
|
SPACE_AROUND = "space-around",
|
|
NONE = "unset",
|
|
}
|
|
export type CheckboxGroupAlignment = keyof typeof CheckboxGroupAlignmentTypes;
|
|
export enum ButtonPlacementTypes {
|
|
START = "START",
|
|
BETWEEN = "BETWEEN",
|
|
CENTER = "CENTER",
|
|
}
|
|
export type ButtonPlacement = keyof typeof ButtonPlacementTypes;
|
|
|
|
export enum LabelPosition {
|
|
Auto = "Auto",
|
|
Top = "Top",
|
|
Left = "Left",
|
|
Right = "Right",
|
|
}
|
|
|
|
/**
|
|
* Default height for Select, MultiSelect, SingleTreeSelect and MultiTreeSelect
|
|
*/
|
|
export const SELECT_DEFAULT_HEIGHT = "32px";
|
|
|
|
/**
|
|
* Default margin bottom value for old select widgets
|
|
*/
|
|
export const LABEL_MARGIN_OLD_SELECT = "5px";
|