diff --git a/src/components/PasswordInput/PasswordInput.scss b/src/components/PasswordInput/PasswordInput.scss index be8fb445..388aea09 100644 --- a/src/components/PasswordInput/PasswordInput.scss +++ b/src/components/PasswordInput/PasswordInput.scss @@ -3,9 +3,11 @@ $block: '.#{variables.$ns}password-input'; #{$block} { - &::-ms-reveal, - &::-ms-clear { - display: none; + &__input-control { + &::-ms-reveal, + &::-ms-clear { + display: none; + } } &__additional-right-content { diff --git a/src/components/PasswordInput/PasswordInput.tsx b/src/components/PasswordInput/PasswordInput.tsx index 7912b768..4c2e7499 100644 --- a/src/components/PasswordInput/PasswordInput.tsx +++ b/src/components/PasswordInput/PasswordInput.tsx @@ -1,11 +1,12 @@ import React from 'react'; import {Eye, EyeSlash} from '@gravity-ui/icons'; -import {Button, ClipboardButton, TextInput, TextInputProps, Tooltip} from '@gravity-ui/uikit'; +import {Button, ClipboardButton, Icon, TextInput, TextInputProps, Tooltip} from '@gravity-ui/uikit'; import {block} from '../utils/cn'; import i18n from './i18n'; +import {getCopyButtonSizeAndIconButtonSize} from './utils'; import './PasswordInput.scss'; @@ -17,8 +18,10 @@ export type PasswordInputProps = Required = (props) => { @@ -29,7 +32,9 @@ export const PasswordInput: React.FC = (props) => { rightContent, showRevealButton, size = 'm', - hasTooltip = true, + hasCopyTooltip = true, + hasRevealTooltip = true, + controlProps, } = props; const [hideValue, setHideValue] = React.useState(true); @@ -43,20 +48,22 @@ export const PasswordInput: React.FC = (props) => { setHideValue((hideValue) => !hideValue); }; + const {copyButtonSize, iconSize} = getCopyButtonSizeAndIconButtonSize(size); + return (
{rightContent} {value && showCopyButton ? ( ) : null} {showRevealButton ? ( = (props) => { ) : null}
); - }, [showRevealButton, showCopyButton, rightContent, value, hasTooltip, hideValue, size]); + }, [ + showRevealButton, + showCopyButton, + rightContent, + value, + hasRevealTooltip, + hasCopyTooltip, + hideValue, + size, + ]); return ( = (props) => { rightContent={additionalRightContent} autoComplete={autoComplete ? autoComplete : 'new-password'} controlProps={{ - className: b(), + className: b('input-control', controlProps?.className), + ...controlProps, }} /> ); diff --git a/src/components/PasswordInput/README.md b/src/components/PasswordInput/README.md index 27837d90..cdb226e7 100644 --- a/src/components/PasswordInput/README.md +++ b/src/components/PasswordInput/README.md @@ -10,11 +10,12 @@ Same as [TextInput component](https://github.com/gravity-ui/uikit/blob/main/src/ - `onUpdate` is required property; - `type` is omitted; -| Property | Type | Required | Default | Description | -| :--------------- | :-------- | :------- | :------ | :-------------------------------------- | -| showCopyButton | `boolean` | | | Show copy button | -| showRevealButton | `boolean` | | | Show reveal button | -| hasTooltip | `boolean` | | `true` | Disable tooltip. Tooltip won't be shown | +| Property | Type | Required | Default | Description | +| :--------------- | :-------- | :------- | :------ | :--------------------------------------------------------------------------- | +| showCopyButton | `boolean` | | | Show copy button | +| showRevealButton | `boolean` | | | Show reveal button | +| hasCopyTooltip | `boolean` | | `true` | Disable the tooltip for the copy button. The tooltip will not be displayed | +| hasRevealTooltip | `boolean` | | `true` | Disable the tooltip for the reveal button. The tooltip will not be displayed | #### Usage example @@ -25,7 +26,7 @@ function MyComponent() { return ( diff --git a/src/components/PasswordInput/__stories__/PasswordInput.stories.tsx b/src/components/PasswordInput/__stories__/PasswordInput.stories.tsx index 7e45c1d8..5c90bb31 100644 --- a/src/components/PasswordInput/__stories__/PasswordInput.stories.tsx +++ b/src/components/PasswordInput/__stories__/PasswordInput.stories.tsx @@ -4,7 +4,7 @@ import {Button} from '@gravity-ui/uikit'; import type {Meta, StoryFn} from '@storybook/react'; import {cn} from '../../utils/cn'; -import {PasswordInput} from '../PasswordInput'; +import {PasswordInput, PasswordInputProps} from '../PasswordInput'; import './PasswordInputStories.scss'; @@ -13,26 +13,21 @@ const b = cn('password-input-stories'); export default { title: 'Components/PasswordInput', component: PasswordInput, + args: { + showCopyButton: true, + showRevealButton: true, + }, } as Meta; -const DefaultTemplate: StoryFn> = () => { +const DefaultTemplate: StoryFn = (args) => { const [value, setValue] = React.useState(''); - return ( - - ); + return ; }; export const Default = DefaultTemplate.bind({}); -const WithGenerateRandomValueTemplate: StoryFn> = ( - props: React.ComponentProps, -) => { +const WithGenerateRandomValueTemplate: StoryFn = (args) => { const [value, setValue] = React.useState(''); const generateRandomValue = React.useCallback(() => { @@ -51,7 +46,7 @@ const WithGenerateRandomValueTemplate: StoryFn - + diff --git a/src/components/PasswordInput/utils.ts b/src/components/PasswordInput/utils.ts new file mode 100644 index 00000000..5de1b7df --- /dev/null +++ b/src/components/PasswordInput/utils.ts @@ -0,0 +1,26 @@ +import type {ButtonSize, InputControlSize} from '@gravity-ui/uikit'; + +export const getCopyButtonSizeAndIconButtonSize = ( + textInputSize: InputControlSize, +): {copyButtonSize: ButtonSize; iconSize: number} => { + let copyButtonSize: ButtonSize = 's'; + let iconSize = 16; + + switch (textInputSize) { + case 's': { + copyButtonSize = 'xs'; + iconSize = 12; + break; + } + case 'l': { + copyButtonSize = 'm'; + break; + } + case 'xl': { + copyButtonSize = 'l'; + iconSize = 20; + } + } + + return {copyButtonSize, iconSize}; +};