diff --git a/app/client/src/components/ads/IconSelector.tsx b/app/client/src/components/ads/IconSelector.tsx index 73b283762440..36c4fda4a6ad 100644 --- a/app/client/src/components/ads/IconSelector.tsx +++ b/app/client/src/components/ads/IconSelector.tsx @@ -5,7 +5,7 @@ import { Size } from "./Button"; import { CommonComponentProps, Classes } from "./common"; import ScrollIndicator from "components/ads/ScrollIndicator"; -type IconSelectorProps = CommonComponentProps & { +export type IconSelectorProps = CommonComponentProps & { onSelect?: (icon: AppIconName) => void; selectedColor: string; selectedIcon?: AppIconName; diff --git a/app/client/src/components/ads/Menu.tsx b/app/client/src/components/ads/Menu.tsx index 68aa8ebef68c..a08c6d5ffcd1 100644 --- a/app/client/src/components/ads/Menu.tsx +++ b/app/client/src/components/ads/Menu.tsx @@ -5,7 +5,7 @@ import { Popover } from "@blueprintjs/core/lib/esm/components/popover/popover"; import { Position } from "@blueprintjs/core/lib/esm/common/position"; import { PopperModifiers } from "@blueprintjs/core"; -type MenuProps = CommonComponentProps & { +export type MenuProps = CommonComponentProps & { children?: ReactNode[]; target: JSX.Element; position?: Position; diff --git a/app/client/src/components/ads/TextInput.tsx b/app/client/src/components/ads/TextInput.tsx index a2eb2a9e3486..fc9153e62ae8 100644 --- a/app/client/src/components/ads/TextInput.tsx +++ b/app/client/src/components/ads/TextInput.tsx @@ -103,6 +103,7 @@ const StyledInput = styled((props) => { inputStyle: boxReturnType; isValid: boolean; rightSideComponentWidth: number; + hasLeftIcon: boolean; } >` width: ${(props) => (props.fill ? "100%" : "260px")}; @@ -113,25 +114,19 @@ const StyledInput = styled((props) => { padding: 0px ${(props) => props.theme.spaces[5]}px; height: 36px; padding-right: ${(props) => - props.rightSideComponentWidth + props.theme.spaces[6]}px; + props.rightSideComponentWidth + props.theme.spaces[5]}px; + padding-left: ${(props) => + props.hasLeftIcon ? "35" : props.theme.spaces[5]}px; background-color: ${(props) => props.inputStyle.bgColor}; color: ${(props) => props.inputStyle.color}; -​ - ${(props) => - props.leftIcon && - IconCollection.includes(props.leftIcon) && - ` - padding-left: 35px;`}; -​ + &:-internal-autofill-selected, &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus { - -webkit-box-shadow: 0 0 0 30px ${(props) => - props.inputStyle.bgColor} inset !important; + -webkit-box-shadow: 0 0 0 30px ${(props) => props.inputStyle.bgColor} inset !important; -webkit-text-fill-color: ${(props) => props.inputStyle.color} !important; } -​ &:hover { background-color: ${(props) => props.disabled @@ -267,6 +262,7 @@ const TextInput = forwardRef( type={props.dataType || "text"} {...props} data-cy={props.cypressSelector} + hasLeftIcon={IconCollection.includes(props.leftIcon)} inputRef={ref} onChange={memoizedChangeHandler} placeholder={props.placeholder} diff --git a/app/client/src/components/stories/IconSelector.stories.tsx b/app/client/src/components/stories/IconSelector.stories.tsx index b2ebbe733f0a..d0148bea5cb3 100644 --- a/app/client/src/components/stories/IconSelector.stories.tsx +++ b/app/client/src/components/stories/IconSelector.stories.tsx @@ -1,40 +1,57 @@ import React from "react"; -import { withKnobs, select, boolean } from "@storybook/addon-knobs"; import { withDesign } from "storybook-addon-designs"; -import IconSelector from "components/ads/IconSelector"; +import IconSelector, { IconSelectorProps } from "components/ads/IconSelector"; import { action } from "@storybook/addon-actions"; import { AppIconCollection } from "components/ads/AppIcon"; -import { StoryWrapper } from "components/ads/common"; +import { storyName } from "./config/constants"; +import { controlType, statusType } from "./config/types"; export default { - title: "IconSelector", + title: storyName.platform.icons.iconSelector.PATH, component: IconSelector, - decorators: [withKnobs, withDesign], + decorators: [withDesign], + parameters: { + status: { + type: statusType.STABLE, + }, + }, }; -export function IconPicker() { - return ( - - - - ); +export function IconSelectorStory(args: IconSelectorProps) { + return ; } + +IconSelectorStory.args = { + selectedColor: "#54A9FB", + selectedIcon: "bag", + iconPalette: AppIconCollection, + fill: false, +}; + +IconSelectorStory.argTypes = { + selectedColor: { + control: controlType.SELECT, + options: [ + "#4F70FD", + "#54A9FB", + "#5ED3DA", + "#F56AF4", + "#F36380", + "#FE9F44", + "#E9C951", + "#A8D76C", + "#6C4CF1", + ], + }, + selectedIcon: { + control: controlType.SELECT, + options: AppIconCollection, + }, + iconPalette: { + control: controlType.ARRAY, + options: AppIconCollection, + }, + fill: { control: controlType.BOOLEAN }, +}; + +IconSelectorStory.storyName = storyName.platform.icons.iconSelector.NAME; diff --git a/app/client/src/components/stories/Menu.stories.tsx b/app/client/src/components/stories/Menu.stories.tsx index 7c19b862cebd..2b1f78778609 100644 --- a/app/client/src/components/stories/Menu.stories.tsx +++ b/app/client/src/components/stories/Menu.stories.tsx @@ -1,25 +1,29 @@ import React, { useState } from "react"; -import { boolean, select, text, withKnobs } from "@storybook/addon-knobs"; import { withDesign } from "storybook-addon-designs"; -import Menu from "components/ads/Menu"; +import Menu, { MenuProps } from "components/ads/Menu"; import { action } from "@storybook/addon-actions"; import MenuDivider from "components/ads/MenuDivider"; import MenuItem from "components/ads/MenuItem"; import { Position } from "@blueprintjs/core/lib/esm/common/position"; import ColorSelector from "components/ads/ColorSelector"; -import { AppIconCollection } from "components/ads/AppIcon"; import IconSelector from "components/ads/IconSelector"; import EditableText, { SavingState, EditInteractionKind, } from "components/ads/EditableText"; -import { IconCollection, IconName } from "components/ads/Icon"; import { theme } from "constants/DefaultTheme"; +import { storyName } from "./config/constants"; +import { controlType, statusType } from "./config/types"; export default { - title: "Menu", - component: Menu, - decorators: [withKnobs, withDesign], + title: storyName.platform.menus.menu.PATH, + component: IconSelector, + decorators: [withDesign], + parameters: { + status: { + type: statusType.STABLE, + }, + }, }; const errorFunction = (name: string) => { @@ -30,14 +34,10 @@ const errorFunction = (name: string) => { } }; -export function MenuStory() { +export function MenuStory(args: MenuProps) { const [selectedColor, setSelectedColor] = useState( theme.colors.appCardColors[0], ); - const [savingState, SetSavingState] = useState( - SavingState.NOT_STARTED, - ); - return (
} + {...args} + onClose={action("menu-closed")} + onOpening={action("menu-opended")} > errorFunction(name)} - onBlur={() => { - SetSavingState(SavingState.STARTED); - setTimeout(() => { - SetSavingState(SavingState.SUCCESS); - }, 2000); - }} + onBlur={action("editable-input-blured")} onTextChanged={action("editable-input-changed")} placeholder={"Edit text input"} - savingState={savingState} + savingState={SavingState.NOT_STARTED} valueTransform={(value: any) => value.toUpperCase()} /> W} onSelect={action("clicked-first-option")} - text={text("First option", "Invite user")} + text="Invite user" /> - {boolean("First menu item divider", false) ? : null} W} onSelect={action("clicked-second-option")} - text={text("Second option", "Are you sure")} + text="Are you sure" /> - {boolean("Second menu item divider", false) ? : null} + ); } + +MenuStory.args = { + position: Position.RIGHT, + isOpen: false, + canEscapeKeyClose: true, + canOutsideClickClose: true, + menuItemWrapperWidth: 200, +}; + +MenuStory.argTypes = { + target: { + control: controlType.OBJECT, + description: "JSX.Element", + }, + position: { + control: controlType.SELECT, + options: Object.values(Position), + }, + isOpen: { control: controlType.BOOLEAN }, + canEscapeKeyClose: { control: controlType.BOOLEAN }, + canOutsideClickClose: { control: controlType.BOOLEAN }, + menuItemWrapperWidth: { control: controlType.NUMBER }, +}; + +MenuStory.storyName = storyName.platform.menus.menu.NAME; diff --git a/app/client/src/components/stories/MenuItem.stories.tsx b/app/client/src/components/stories/MenuItem.stories.tsx new file mode 100644 index 000000000000..14bdfdf65d06 --- /dev/null +++ b/app/client/src/components/stories/MenuItem.stories.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import { withDesign } from "storybook-addon-designs"; +import { action } from "@storybook/addon-actions"; +import MenuItem, { MenuItemProps } from "components/ads/MenuItem"; +import { IconCollection, IconName } from "components/ads/Icon"; +import { storyName } from "./config/constants"; +import { controlType, statusType } from "./config/types"; + +export default { + title: storyName.platform.menus.menuItem.PATH, + component: MenuItem, + decorators: [withDesign], + parameters: { + status: { + type: statusType.STABLE, + }, + }, +}; + +export function MenuItemStory(args: MenuItemProps) { + if (args.label) { + args.label = {args.label}; + } + return ; +} + +MenuItemStory.args = { + icon: "Select a icon" as IconName, + text: "Menu Item", + label: "W", + href: "", + type: "warning", + ellipsize: 0, + selected: true, +}; + +MenuItemStory.argTypes = { + icon: { + control: controlType.SELECT, + options: ["Select a icon" as IconName, ...IconCollection], + }, + text: { control: controlType.TEXT }, + label: { + control: controlType.TEXT, + description: "ReactNode", + }, + href: { + control: controlType.TEXT, + description: "url link", + }, + type: { control: controlType.TEXT }, + ellipsize: { control: controlType.NUMBER }, + selected: { control: controlType.BOOLEAN }, +}; + +MenuItemStory.storyName = storyName.platform.menus.menuItem.NAME; diff --git a/app/client/src/components/stories/TextInput.stories.tsx b/app/client/src/components/stories/TextInput.stories.tsx index bbb079eb8bc6..8cf0a2ca199d 100644 --- a/app/client/src/components/stories/TextInput.stories.tsx +++ b/app/client/src/components/stories/TextInput.stories.tsx @@ -94,6 +94,10 @@ Primary.argTypes = { description: "function", defaultValue: true, }, + rightSideComponent: { + control: controlType.OBJECT, + description: "React.ReactNode", + }, }; Primary.storyName = storyName.platform.form.textInput.NAME; diff --git a/app/client/src/components/stories/config/constants.tsx b/app/client/src/components/stories/config/constants.tsx index ba5781cca5d5..79d3f0ae545b 100644 --- a/app/client/src/components/stories/config/constants.tsx +++ b/app/client/src/components/stories/config/constants.tsx @@ -51,6 +51,20 @@ export const storyName = { PATH: "Platform/Icons/AppIcon", NAME: "AppIcon", }, + iconSelector: { + PATH: "Platform/Icons/IconSelector", + NAME: "IconSelector", + }, + }, + menus: { + menu: { + PATH: "Platform/Menus/Menu", + NAME: "Menu", + }, + menuItem: { + PATH: "Platform/Menus/MenuItem", + NAME: "MenuItem", + }, }, }, };