From 035356b7182aa64406464c7ace13d5b3fe6e6243 Mon Sep 17 00:00:00 2001 From: NasgulNexus Date: Mon, 12 Aug 2024 18:45:08 +0200 Subject: [PATCH 01/10] feat(PaswordInput): added new input Password Input --- .../controls/PasswordInput/PasswordInput.scss | 21 ++++ .../controls/PasswordInput/PasswordInput.tsx | 118 ++++++++++++++++++ .../controls/PasswordInput/README.md | 39 ++++++ ...nder-story-Default-dark-chromium-linux.png | Bin 0 -> 3004 bytes ...render-story-Default-dark-webkit-linux.png | Bin 0 -> 2755 bytes ...der-story-Default-light-chromium-linux.png | Bin 0 -> 2770 bytes ...ender-story-Default-light-webkit-linux.png | Bin 0 -> 2542 bytes ...enerateRandomValue-dark-chromium-linux.png | Bin 0 -> 8968 bytes ...hGenerateRandomValue-dark-webkit-linux.png | Bin 0 -> 7025 bytes ...nerateRandomValue-light-chromium-linux.png | Bin 0 -> 8631 bytes ...GenerateRandomValue-light-webkit-linux.png | Bin 0 -> 6542 bytes .../PasswordInput/__stories__/Docs.mdx | 7 ++ .../__stories__/PasswordInput.stories.tsx | 61 +++++++++ .../__stories__/PasswordInputStories.scss | 7 ++ .../__tests__/PasswordInput.visual.test.tsx | 19 +++ .../__tests__/helpersPlaywright.ts | 5 + .../controls/PasswordInput/i18n/en.json | 4 + .../controls/PasswordInput/i18n/index.ts | 8 ++ .../controls/PasswordInput/i18n/ru.json | 4 + .../controls/PasswordInput/index.ts | 1 + .../controls/PasswordInput/utils.ts | 26 ++++ src/components/controls/index.ts | 1 + 22 files changed, 321 insertions(+) create mode 100644 src/components/controls/PasswordInput/PasswordInput.scss create mode 100644 src/components/controls/PasswordInput/PasswordInput.tsx create mode 100644 src/components/controls/PasswordInput/README.md create mode 100644 src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-dark-chromium-linux.png create mode 100644 src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-dark-webkit-linux.png create mode 100644 src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-light-chromium-linux.png create mode 100644 src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-light-webkit-linux.png create mode 100644 src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-dark-chromium-linux.png create mode 100644 src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-dark-webkit-linux.png create mode 100644 src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-light-chromium-linux.png create mode 100644 src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-light-webkit-linux.png create mode 100644 src/components/controls/PasswordInput/__stories__/Docs.mdx create mode 100644 src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx create mode 100644 src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss create mode 100644 src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx create mode 100644 src/components/controls/PasswordInput/__tests__/helpersPlaywright.ts create mode 100644 src/components/controls/PasswordInput/i18n/en.json create mode 100644 src/components/controls/PasswordInput/i18n/index.ts create mode 100644 src/components/controls/PasswordInput/i18n/ru.json create mode 100644 src/components/controls/PasswordInput/index.ts create mode 100644 src/components/controls/PasswordInput/utils.ts diff --git a/src/components/controls/PasswordInput/PasswordInput.scss b/src/components/controls/PasswordInput/PasswordInput.scss new file mode 100644 index 0000000000..c73982dee2 --- /dev/null +++ b/src/components/controls/PasswordInput/PasswordInput.scss @@ -0,0 +1,21 @@ +@use '../../variables'; + +$block: '.#{variables.$ns}password-input'; + +#{$block} { + &__input-control { + &::-ms-reveal, + &::-ms-clear { + display: none; + } + } + + &__additional-end-content { + display: flex; + align-items: center; + } + + &__copy-button { + margin-inline-end: 4px; + } +} diff --git a/src/components/controls/PasswordInput/PasswordInput.tsx b/src/components/controls/PasswordInput/PasswordInput.tsx new file mode 100644 index 0000000000..da058cba29 --- /dev/null +++ b/src/components/controls/PasswordInput/PasswordInput.tsx @@ -0,0 +1,118 @@ +import React from 'react'; + +import {Eye, EyeSlash} from '@gravity-ui/icons'; + +import {ActionTooltip} from '../../ActionTooltip'; +import {Button} from '../../Button'; +import {ClipboardButton} from '../../ClipboardButton'; +import {Icon} from '../../Icon'; +import {block} from '../../utils/cn'; +import {TextInput} from '../TextInput'; +import type {TextInputProps} from '../TextInput'; + +import {i18n} from './i18n'; +import {getActionButtonSizeAndIconSize} from './utils'; + +import './PasswordInput.scss'; + +const b = block('password-input'); + +export type PasswordInputProps = Required> & + Omit & { + /** Show copy button */ + showCopyButton?: boolean; + /** Show reveal button */ + showRevealButton?: boolean; + /** Disable the tooltip for the copy button. The tooltip will not be displayed */ + hasCopyTooltip?: boolean; + /** Disable the tooltip for the reveal button. The tooltip will not be displayed */ + hasRevealTooltip?: boolean; + }; + +export const PasswordInput = (props: PasswordInputProps) => { + const { + autoComplete, + value, + showCopyButton, + rightContent, + endContent, + showRevealButton, + size = 'm', + hasCopyTooltip = true, + hasRevealTooltip = true, + controlProps, + } = props; + + const [hideValue, setHideValue] = React.useState(true); + + const additionalEndContent = React.useMemo(() => { + if (!showRevealButton && !showCopyButton) { + return {endContent || rightContent}; + } + + const onClick = () => { + setHideValue((hideValue) => !hideValue); + }; + + const {actionButtonSize, iconSize} = getActionButtonSizeAndIconSize(size); + + return ( +
+ {endContent || rightContent} + {value && showCopyButton ? ( + + ) : null} + {showRevealButton ? ( + + + + ) : null} +
+ ); + }, [ + showRevealButton, + showCopyButton, + endContent, + rightContent, + value, + hasRevealTooltip, + hasCopyTooltip, + hideValue, + size, + ]); + + return ( + + ); +}; diff --git a/src/components/controls/PasswordInput/README.md b/src/components/controls/PasswordInput/README.md new file mode 100644 index 0000000000..aa8f1114aa --- /dev/null +++ b/src/components/controls/PasswordInput/README.md @@ -0,0 +1,39 @@ +## Password Input + +```tsx +import {PasswordInput} from '@gravity-ui/uikit'; +``` + +Password Input display component + +### PropTypes + +Same as [TextInput component](https://github.com/gravity-ui/uikit/blob/main/src/components/controls/TextInput/README.md), with some exceptions: + +- `value` is required property; +- `onUpdate` is required property; +- `type` is omitted; + +| 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 + +```jsx harmony +function MyComponent() { + const [value, setValue] = React.useState(''); + + return ( + + ); +} +``` diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-dark-chromium-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ace4d75b98cbcdb999d77a6e6e183b8eb851471a GIT binary patch literal 3004 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 literal 0 HcmV?d00001 diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-dark-webkit-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-dark-webkit-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..4091f4dc080b312e21a3d44f9a8c1834d44f464a GIT binary patch literal 2755 zcmd5;X*AneAO2I*g;7muO%Y5OrYe?FB`77fR<$ptN|MG>dr4^`K_zVsm1C=#N~01> z8>Z977GkU!loUnnYeX4MHP))FMBdE%W#;4ian3#G-ru?RIp?0|+~0kkhkV7&NnTb( z761Tw7iYLT07x}S>W2rVCG*xfs;gw#?|;z=4v7C61&t-y03b_nfuHvz+!JjZg%!kE0o$2F%}2 zWe7bxkMXp=di&nu7AzU3q&&$vk=gbvqR&>dAYLC($;!qbS61$tt6aL5V*19r1YDs= z{@L%lp|GJ2%M78CT-yc4Oe}q=Q0iT~(YFJp2s4FvhvM0X-(~e| zY;2T5QIHu}q)v9|Loovg`7tLDhr^A55b)ENO=^*D%Y?TCC*~q z#p1v)HF6KOJs_&p2+3tU1%^XILpyNDR-+kX8s|whW1#9SdxITTo!fB(n=WN*(s|?b zP}rIA<3og*7f>3=5&|imjYc25`zX400T!uwWW}T?iH()qpJHD6EL`&J6dRk4-jw6x z{U@sKL)`V1aPoldnx2yEXAj4!cd<+lxZdOaah0;Rtd)UP*mdET{L8@*-MjKD1BFpk zx#1Du@17Yxa!OZfOFYouf4V%pprodxq=d^}93H+3@YJ$~Su3YBvrKwtkzL`)> zwf~TBHZBIIu5OX%s*~7Uo&Df`vo8WM!H$?X42F5?Jq`*A(kZ=sLz(5%zOCo1d-sx} zY*I$Pd6W1LqSngi)O*dow+IBna#Q2krg~!{ZZiM3F?|WFy8U>Tl!=i_PxEX@Fic}GJ8TOE(#8V=i z`hPI?RZyH-CfDIl?+t3svwfp*%a|nsX(6Gj5`F`RTklFmXQ09OJj$yp@6CG_5j7^4 zO+@=dIe{mVvs`sF46UvUWLM%;TNGk|GHsRg47$pCeQj0Mmofgim*{&VRd4qlINVUN znO<6I0P47Ln$O=O#>LgK8|M}lZo+7L(+dYAymJE6>FT17y&7|Cu~2c&`s^#kKia>M zzE@!qK%>zhl?@HM^Jp8UO>mmyvtThch9JIWs&eMifN6J#Da^>IJp9&(gnTvCCCSc@ z7)iuO<9}3=^=V#W@@gnt?RHueLapeImcvSe$qeqafM{ApMYslOEM9WByX)gO7uV59RgRg3@%*1)-DOu~{_keQ zi0%VnlGfU~{bXj9keE++^@sm0(=?zltwn(907K_#5az zQY;O)-j}$eu(8NjuDTC}LKE#1@ynCzy5EtVE3P$c^PiRq*~tj|!iR#`7oK6!{+~NJ zWrO^z%(egxx~QDVyab;-wmHe~WdaaWlXH!R@=;QMsg+ITDIaqoM@( z?D$8^d+$+V1CLtd-Y%m%zKBlrHPo&)QU1m1IBfVY+pETzouh>{T|YZ^mUJ zj@`J)-E_=I+xiP9u(1)ZG}qOgtW#}?fB;XY_ZoNdcjvMtB2jV86&|y(JUPZ$n;$4) zu~-s?s!X*p#7&M3)iQ$-r>U>5kz~4+++`$AelJ?k=0YXHz6Scj=c4 z45~&@5b;T$^+Udl$IL%0I`m?R_$J5iT_n)Ciw!|S;E38?Cj8RCoq1g;UwIpFHJD5y zjrV)&QQ*&i7%cjq@QdHp=YybCjN5G}P*w`K?+gHRcd;Y3PipyuTr8P|LHwO=iaSWa zHQlbtg%lL?swgd_aLq>$9cgjopcUtoI?!P2<>jS$`1)NqwHmUWYk6|Mb&EhP$bX{KWg;yb_2S!N9M|sckc~D3FV_%P~2a zmrp;{4RrGHh3jps2+Nxf?4gBrh3}^0Eu`MHRK9{k`lk8}Ak-4-opWWeR&ff3kXmFZ z(m=OPG3NE*3BQpj)Cg2b_VIC6RK!aoCsRq>&Q9;@D$zno%3hqj@jkR|7f z<_E-yjn^5-j=5-w({I`W(+=j$eSh2FzcM=gf0=H>=I0@D!q$Svw~|x}xH!1MOYMB` F{}=Q!B8mV2 literal 0 HcmV?d00001 diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-light-chromium-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a2becc8a8cd8180b6eeb88e9f11043b0d600c226 GIT binary patch literal 2770 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 Fe*p?d+^YZp literal 0 HcmV?d00001 diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-dark-chromium-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..91a6acca1a71d1efc506e67d02cfdce7dbbb483c GIT binary patch literal 8968 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 Q<%{U3Kh}X)C_jt%4}}a41ONa4 literal 0 HcmV?d00001 diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-light-chromium-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..97a746529ab2409818e1f4f63a8e2cc00b07763f GIT binary patch literal 8631 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 aR5^*AU)xsK)g6#UQ&v#FlXLsg%l`oq{G#jt literal 0 HcmV?d00001 diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-light-webkit-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-light-webkit-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..27e2da866cc131aad16970f65474aa66281e5bc3 GIT binary patch literal 6542 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 literal 0 HcmV?d00001 diff --git a/src/components/controls/PasswordInput/__stories__/Docs.mdx b/src/components/controls/PasswordInput/__stories__/Docs.mdx new file mode 100644 index 0000000000..343d63b894 --- /dev/null +++ b/src/components/controls/PasswordInput/__stories__/Docs.mdx @@ -0,0 +1,7 @@ +import {Meta, Markdown} from '@storybook/addon-docs'; +import * as Stories from './PasswordInput.stories'; +import Readme from '../README.md?raw'; + + + +{Readme} diff --git a/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx b/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx new file mode 100644 index 0000000000..a800338f80 --- /dev/null +++ b/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx @@ -0,0 +1,61 @@ +import React from 'react'; + +import type {Meta, StoryFn} from '@storybook/react'; + +import {Button} from '../../../Button'; +import {cn} from '../../../utils/cn'; +import type {PasswordInputProps} from '../PasswordInput'; +import {PasswordInput} from '../PasswordInput'; + +import './PasswordInputStories.scss'; + +const b = cn('password-input-stories'); + +export default { + title: 'Components/Inputs/PasswordInput', + component: PasswordInput, + args: { + showCopyButton: true, + showRevealButton: true, + controlProps: { + 'aria-label': 'Password', + }, + }, +} as Meta; + +const DefaultTemplate: StoryFn = (args) => { + const [value, setValue] = React.useState(''); + + return ; +}; + +export const Default = DefaultTemplate.bind({}); + +const WithGenerateRandomValueTemplate: StoryFn = (args) => { + const [value, setValue] = React.useState(''); + + const generateRandomValue = React.useCallback(() => { + let randomValue = ''; + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + const charactersLength = characters.length; + let counter = 0; + + while (counter < charactersLength) { + randomValue += characters.charAt(Math.floor(Math.random() * charactersLength)); + counter += 1; + } + + setValue(randomValue); + }, []); + + return ( +
+ + +
+ ); +}; + +export const WithGenerateRandomValue = WithGenerateRandomValueTemplate.bind({}); diff --git a/src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss b/src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss new file mode 100644 index 0000000000..3242f2b4d8 --- /dev/null +++ b/src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss @@ -0,0 +1,7 @@ +.password-input-stories { + display: flex; + + &__button-generate-random-value { + margin-inline-start: 8px; + } +} diff --git a/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx b/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx new file mode 100644 index 0000000000..6ada1e82c0 --- /dev/null +++ b/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import {test} from '~playwright/core'; + +import {PasswordInputStories} from './helpersPlaywright'; + +test.describe('PasswordInputStories', () => { + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); +}); diff --git a/src/components/controls/PasswordInput/__tests__/helpersPlaywright.ts b/src/components/controls/PasswordInput/__tests__/helpersPlaywright.ts new file mode 100644 index 0000000000..7c6a1d906b --- /dev/null +++ b/src/components/controls/PasswordInput/__tests__/helpersPlaywright.ts @@ -0,0 +1,5 @@ +import {composeStories} from '@storybook/react'; + +import * as DefaultPasswordInputStories from '../__stories__/PasswordInput.stories'; + +export const PasswordInputStories = composeStories(DefaultPasswordInputStories); diff --git a/src/components/controls/PasswordInput/i18n/en.json b/src/components/controls/PasswordInput/i18n/en.json new file mode 100644 index 0000000000..130afcee1b --- /dev/null +++ b/src/components/controls/PasswordInput/i18n/en.json @@ -0,0 +1,4 @@ +{ + "label_show-password": "Show password", + "label_hide-password": "Hide password" +} diff --git a/src/components/controls/PasswordInput/i18n/index.ts b/src/components/controls/PasswordInput/i18n/index.ts new file mode 100644 index 0000000000..0e6a11a6f5 --- /dev/null +++ b/src/components/controls/PasswordInput/i18n/index.ts @@ -0,0 +1,8 @@ +import {addComponentKeysets} from '../../../utils/addComponentKeysets'; + +import en from './en.json'; +import ru from './ru.json'; + +const COMPONENT = 'passwordInput'; + +export const i18n = addComponentKeysets({en, ru}, COMPONENT); diff --git a/src/components/controls/PasswordInput/i18n/ru.json b/src/components/controls/PasswordInput/i18n/ru.json new file mode 100644 index 0000000000..838beedfba --- /dev/null +++ b/src/components/controls/PasswordInput/i18n/ru.json @@ -0,0 +1,4 @@ +{ + "label_show-password": "Показать пароль", + "label_hide-password": "Скрыть пароль" +} diff --git a/src/components/controls/PasswordInput/index.ts b/src/components/controls/PasswordInput/index.ts new file mode 100644 index 0000000000..1eed3611f8 --- /dev/null +++ b/src/components/controls/PasswordInput/index.ts @@ -0,0 +1 @@ +export * from './PasswordInput'; diff --git a/src/components/controls/PasswordInput/utils.ts b/src/components/controls/PasswordInput/utils.ts new file mode 100644 index 0000000000..3fbea684c2 --- /dev/null +++ b/src/components/controls/PasswordInput/utils.ts @@ -0,0 +1,26 @@ +import type {ButtonSize} from '../../Button'; +import type {InputControlSize} from '../types'; + +export const getActionButtonSizeAndIconSize = ( + textInputSize: InputControlSize, +): {actionButtonSize: ButtonSize; iconSize: number} => { + let actionButtonSize: ButtonSize = 's'; + let iconSize = 16; + + switch (textInputSize) { + case 's': { + actionButtonSize = 'xs'; + iconSize = 12; + break; + } + case 'l': { + actionButtonSize = 'm'; + break; + } + case 'xl': { + actionButtonSize = 'l'; + } + } + + return {actionButtonSize, iconSize}; +}; diff --git a/src/components/controls/index.ts b/src/components/controls/index.ts index 211411bace..7319aa37d2 100644 --- a/src/components/controls/index.ts +++ b/src/components/controls/index.ts @@ -1,3 +1,4 @@ export * from './TextArea'; export * from './TextInput'; +export * from './PasswordInput'; export type {InputControlPin, InputControlSize, InputControlState, InputControlView} from './types'; From 7a147ad189dfdbadb2fff21ad4fadf803e5951fa Mon Sep 17 00:00:00 2001 From: NasgulNexus Date: Mon, 26 Aug 2024 13:08:27 +0200 Subject: [PATCH 02/10] docs: fixed docs --- .../controls/PasswordInput/README.md | 52 +++++++++++++++---- .../__stories__/PasswordInput.stories.tsx | 5 +- .../__stories__/PasswordInputStories.scss | 2 - .../__tests__/PasswordInput.visual.test.tsx | 6 --- 4 files changed, 45 insertions(+), 20 deletions(-) diff --git a/src/components/controls/PasswordInput/README.md b/src/components/controls/PasswordInput/README.md index aa8f1114aa..6ae1371e1f 100644 --- a/src/components/controls/PasswordInput/README.md +++ b/src/components/controls/PasswordInput/README.md @@ -1,29 +1,59 @@ + + ## Password Input + + ```tsx import {PasswordInput} from '@gravity-ui/uikit'; ``` -Password Input display component +`TextInput` for typing passwords and other sensitive information. It can be rendered with copy and reveal buttons for more convinient usage. + +### Copy button + +The `showCopyButton` prop displays a "Copy" button next to the input field when a value is entered. This button allows users to easily copy the input value to their clipboard. + + + +### Reveal button -### PropTypes +The `showRevealButton` prop allows users to toggle the visibility of the password. -Same as [TextInput component](https://github.com/gravity-ui/uikit/blob/main/src/components/controls/TextInput/README.md), with some exceptions: + + +### Properties + +`TextInput` [properties](https://github.com/gravity-ui/uikit/blob/main/src/components/controls/TextInput/README.md#properties), with some exceptions and additions: - `value` is required property; - `onUpdate` is required property; - `type` is omitted; -| 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 | +| Name | Description | Type | Default | +| :--------------- | :--------------------------------------------------------------------------- | :-------: | :-----: | +| showCopyButton | Show copy button | `boolean` | `false` | +| showRevealButton | Show reveal button | `boolean` | `false` | +| hasCopyTooltip | Disable the tooltip for the copy button. The tooltip will not be displayed | `boolean` | `true` | +| hasRevealTooltip | Disable the tooltip for the reveal button. The tooltip will not be displayed | `boolean` | `true` | + + #### Usage example -```jsx harmony +```tsx function MyComponent() { const [value, setValue] = React.useState(''); @@ -37,3 +67,5 @@ function MyComponent() { ); } ``` + + diff --git a/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx b/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx index a800338f80..8ac43c72ce 100644 --- a/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx +++ b/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx @@ -3,6 +3,7 @@ import React from 'react'; import type {Meta, StoryFn} from '@storybook/react'; import {Button} from '../../../Button'; +import {Flex} from '../../../layout/Flex/Flex'; import {cn} from '../../../utils/cn'; import type {PasswordInputProps} from '../PasswordInput'; import {PasswordInput} from '../PasswordInput'; @@ -49,12 +50,12 @@ const WithGenerateRandomValueTemplate: StoryFn = (args) => { }, []); return ( -
+ -
+ ); }; diff --git a/src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss b/src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss index 3242f2b4d8..2ce1a88bd9 100644 --- a/src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss +++ b/src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss @@ -1,6 +1,4 @@ .password-input-stories { - display: flex; - &__button-generate-random-value { margin-inline-start: 8px; } diff --git a/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx b/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx index 6ada1e82c0..d82ef4a7b2 100644 --- a/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx +++ b/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx @@ -10,10 +10,4 @@ test.describe('PasswordInputStories', () => { await expectScreenshot(); }); - - test('render story: ', async ({mount, expectScreenshot}) => { - await mount(); - - await expectScreenshot(); - }); }); From 5cf8b311d3d85ba8cf0cade165c65683ddf540d2 Mon Sep 17 00:00:00 2001 From: NasgulNexus Date: Mon, 26 Aug 2024 13:35:12 +0200 Subject: [PATCH 03/10] test: delete screen --- ...thGenerateRandomValue-dark-chromium-linux.png | Bin 8968 -> 0 bytes ...WithGenerateRandomValue-dark-webkit-linux.png | Bin 7025 -> 0 bytes ...hGenerateRandomValue-light-chromium-linux.png | Bin 8631 -> 0 bytes ...ithGenerateRandomValue-light-webkit-linux.png | Bin 6542 -> 0 bytes 4 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-dark-chromium-linux.png delete mode 100644 src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-dark-webkit-linux.png delete mode 100644 src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-light-chromium-linux.png delete mode 100644 src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-light-webkit-linux.png diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-dark-chromium-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-dark-chromium-linux.png deleted file mode 100644 index 91a6acca1a71d1efc506e67d02cfdce7dbbb483c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8968 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 Q<%{U3Kh}X)C_jt%4}}a41ONa4 diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-light-chromium-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-light-chromium-linux.png deleted file mode 100644 index 97a746529ab2409818e1f4f63a8e2cc00b07763f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8631 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 aR5^*AU)xsK)g6#UQ&v#FlXLsg%l`oq{G#jt diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-light-webkit-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-WithGenerateRandomValue-light-webkit-linux.png deleted file mode 100644 index 27e2da866cc131aad16970f65474aa66281e5bc3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6542 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 From 131354bb1a22516c7e266fb18d523c5e090f366a Mon Sep 17 00:00:00 2001 From: NasgulNexus Date: Fri, 6 Sep 2024 16:46:38 +0200 Subject: [PATCH 04/10] fix: remarks --- .../controls/PasswordInput/PasswordInput.scss | 5 ---- .../controls/PasswordInput/PasswordInput.tsx | 27 +++++++++--------- .../controls/PasswordInput/README.md | 2 -- ...der-story-Default-dark-chromium-linux.png} | Bin ...ender-story-Default-dark-webkit-linux.png} | Bin ...er-story-Default-light-chromium-linux.png} | Bin ...nder-story-Default-light-webkit-linux.png} | Bin .../__stories__/PasswordInput.stories.tsx | 13 +++------ .../__stories__/PasswordInputStories.scss | 5 ---- .../__tests__/PasswordInput.visual.test.tsx | 2 +- .../controls/PasswordInput/i18n/index.ts | 2 +- 11 files changed, 20 insertions(+), 36 deletions(-) rename src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/{PasswordInputStories-render-story-Default-dark-chromium-linux.png => PasswordInput-render-story-Default-dark-chromium-linux.png} (100%) rename src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/{PasswordInputStories-render-story-Default-dark-webkit-linux.png => PasswordInput-render-story-Default-dark-webkit-linux.png} (100%) rename src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/{PasswordInputStories-render-story-Default-light-chromium-linux.png => PasswordInput-render-story-Default-light-chromium-linux.png} (100%) rename src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/{PasswordInputStories-render-story-Default-light-webkit-linux.png => PasswordInput-render-story-Default-light-webkit-linux.png} (100%) delete mode 100644 src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss diff --git a/src/components/controls/PasswordInput/PasswordInput.scss b/src/components/controls/PasswordInput/PasswordInput.scss index c73982dee2..9e8f8c231b 100644 --- a/src/components/controls/PasswordInput/PasswordInput.scss +++ b/src/components/controls/PasswordInput/PasswordInput.scss @@ -10,11 +10,6 @@ $block: '.#{variables.$ns}password-input'; } } - &__additional-end-content { - display: flex; - align-items: center; - } - &__copy-button { margin-inline-end: 4px; } diff --git a/src/components/controls/PasswordInput/PasswordInput.tsx b/src/components/controls/PasswordInput/PasswordInput.tsx index da058cba29..a235672964 100644 --- a/src/components/controls/PasswordInput/PasswordInput.tsx +++ b/src/components/controls/PasswordInput/PasswordInput.tsx @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import {Eye, EyeSlash} from '@gravity-ui/icons'; @@ -17,17 +19,16 @@ import './PasswordInput.scss'; const b = block('password-input'); -export type PasswordInputProps = Required> & - Omit & { - /** Show copy button */ - showCopyButton?: boolean; - /** Show reveal button */ - showRevealButton?: boolean; - /** Disable the tooltip for the copy button. The tooltip will not be displayed */ - hasCopyTooltip?: boolean; - /** Disable the tooltip for the reveal button. The tooltip will not be displayed */ - hasRevealTooltip?: boolean; - }; +export type PasswordInputProps = Omit & { + /** Show copy button */ + showCopyButton?: boolean; + /** Show reveal button */ + showRevealButton?: boolean; + /** Disable the tooltip for the copy button. The tooltip will not be displayed */ + hasCopyTooltip?: boolean; + /** Disable the tooltip for the reveal button. The tooltip will not be displayed */ + hasRevealTooltip?: boolean; +}; export const PasswordInput = (props: PasswordInputProps) => { const { @@ -57,7 +58,7 @@ export const PasswordInput = (props: PasswordInputProps) => { const {actionButtonSize, iconSize} = getActionButtonSizeAndIconSize(size); return ( -
+ {endContent || rightContent} {value && showCopyButton ? ( { ) : null} -
+ ); }, [ showRevealButton, diff --git a/src/components/controls/PasswordInput/README.md b/src/components/controls/PasswordInput/README.md index 6ae1371e1f..fcb5fce594 100644 --- a/src/components/controls/PasswordInput/README.md +++ b/src/components/controls/PasswordInput/README.md @@ -38,8 +38,6 @@ LANDING_BLOCK--> `TextInput` [properties](https://github.com/gravity-ui/uikit/blob/main/src/components/controls/TextInput/README.md#properties), with some exceptions and additions: -- `value` is required property; -- `onUpdate` is required property; - `type` is omitted; | Name | Description | Type | Default | diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-dark-chromium-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInput-render-story-Default-dark-chromium-linux.png similarity index 100% rename from src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-dark-chromium-linux.png rename to src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInput-render-story-Default-dark-chromium-linux.png diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-dark-webkit-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInput-render-story-Default-dark-webkit-linux.png similarity index 100% rename from src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-dark-webkit-linux.png rename to src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInput-render-story-Default-dark-webkit-linux.png diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-light-chromium-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInput-render-story-Default-light-chromium-linux.png similarity index 100% rename from src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-light-chromium-linux.png rename to src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInput-render-story-Default-light-chromium-linux.png diff --git a/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-light-webkit-linux.png b/src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInput-render-story-Default-light-webkit-linux.png similarity index 100% rename from src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInputStories-render-story-Default-light-webkit-linux.png rename to src/components/controls/PasswordInput/__snapshots__/PasswordInput.visual.test.tsx-snapshots/PasswordInput-render-story-Default-light-webkit-linux.png diff --git a/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx b/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx index 8ac43c72ce..8ae6798ac1 100644 --- a/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx +++ b/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx @@ -3,15 +3,10 @@ import React from 'react'; import type {Meta, StoryFn} from '@storybook/react'; import {Button} from '../../../Button'; -import {Flex} from '../../../layout/Flex/Flex'; -import {cn} from '../../../utils/cn'; +import {Flex, spacing} from '../../../layout'; import type {PasswordInputProps} from '../PasswordInput'; import {PasswordInput} from '../PasswordInput'; -import './PasswordInputStories.scss'; - -const b = cn('password-input-stories'); - export default { title: 'Components/Inputs/PasswordInput', component: PasswordInput, @@ -52,9 +47,9 @@ const WithGenerateRandomValueTemplate: StoryFn = (args) => { return ( - + + + ); }; diff --git a/src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss b/src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss deleted file mode 100644 index 2ce1a88bd9..0000000000 --- a/src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss +++ /dev/null @@ -1,5 +0,0 @@ -.password-input-stories { - &__button-generate-random-value { - margin-inline-start: 8px; - } -} diff --git a/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx b/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx index d82ef4a7b2..f6ab293e36 100644 --- a/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx +++ b/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx @@ -4,7 +4,7 @@ import {test} from '~playwright/core'; import {PasswordInputStories} from './helpersPlaywright'; -test.describe('PasswordInputStories', () => { +test.describe('PasswordInput', () => { test('render story: ', async ({mount, expectScreenshot}) => { await mount(); diff --git a/src/components/controls/PasswordInput/i18n/index.ts b/src/components/controls/PasswordInput/i18n/index.ts index 0e6a11a6f5..00314f8ae5 100644 --- a/src/components/controls/PasswordInput/i18n/index.ts +++ b/src/components/controls/PasswordInput/i18n/index.ts @@ -3,6 +3,6 @@ import {addComponentKeysets} from '../../../utils/addComponentKeysets'; import en from './en.json'; import ru from './ru.json'; -const COMPONENT = 'passwordInput'; +const COMPONENT = 'PasswordInput'; export const i18n = addComponentKeysets({en, ru}, COMPONENT); From 130724184d63e0a84eb531550471d86860ad1e34 Mon Sep 17 00:00:00 2001 From: NasgulNexus Date: Fri, 6 Sep 2024 18:12:17 +0200 Subject: [PATCH 05/10] fix: add useControlledState and delete useMemo --- .../controls/PasswordInput/PasswordInput.tsx | 96 +++++++++---------- 1 file changed, 43 insertions(+), 53 deletions(-) diff --git a/src/components/controls/PasswordInput/PasswordInput.tsx b/src/components/controls/PasswordInput/PasswordInput.tsx index a235672964..00d9c6e818 100644 --- a/src/components/controls/PasswordInput/PasswordInput.tsx +++ b/src/components/controls/PasswordInput/PasswordInput.tsx @@ -4,6 +4,7 @@ import React from 'react'; import {Eye, EyeSlash} from '@gravity-ui/icons'; +import {useControlledState} from '../../../hooks'; import {ActionTooltip} from '../../ActionTooltip'; import {Button} from '../../Button'; import {ClipboardButton} from '../../ClipboardButton'; @@ -33,7 +34,6 @@ export type PasswordInputProps = Omit & { export const PasswordInput = (props: PasswordInputProps) => { const { autoComplete, - value, showCopyButton, rightContent, endContent, @@ -44,65 +44,53 @@ export const PasswordInput = (props: PasswordInputProps) => { controlProps, } = props; - const [hideValue, setHideValue] = React.useState(true); + const [inputValue, setInputValue] = useControlledState( + props.value, + props.defaultValue ?? '', + props.onUpdate, + ); - const additionalEndContent = React.useMemo(() => { - if (!showRevealButton && !showCopyButton) { - return {endContent || rightContent}; - } + const [hideValue, setHideValue] = React.useState(true); - const onClick = () => { - setHideValue((hideValue) => !hideValue); - }; + const {actionButtonSize, iconSize} = getActionButtonSizeAndIconSize(size); - const {actionButtonSize, iconSize} = getActionButtonSizeAndIconSize(size); + const onClick = () => { + setHideValue((hideValue) => !hideValue); + }; - return ( - - {endContent || rightContent} - {value && showCopyButton ? ( - + {endContent || rightContent} + {inputValue && showCopyButton ? ( + + ) : null} + {showRevealButton ? ( + + - - ) : null} - - ); - }, [ - showRevealButton, - showCopyButton, - endContent, - rightContent, - value, - hasRevealTooltip, - hasCopyTooltip, - hideValue, - size, - ]); + + + + ) : null} + + ); return ( { ...controlProps, className: b('input-control', controlProps?.className), }} + value={inputValue} + onUpdate={setInputValue} /> ); }; From 513b83632c0b38d26c1d7d7e3908ab5e4cf5235f Mon Sep 17 00:00:00 2001 From: NasgulNexus Date: Thu, 26 Sep 2024 14:26:58 +0200 Subject: [PATCH 06/10] fix: rebase --- src/components/controls/PasswordInput/i18n/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/controls/PasswordInput/i18n/index.ts b/src/components/controls/PasswordInput/i18n/index.ts index 00314f8ae5..5a8bb879a3 100644 --- a/src/components/controls/PasswordInput/i18n/index.ts +++ b/src/components/controls/PasswordInput/i18n/index.ts @@ -1,4 +1,4 @@ -import {addComponentKeysets} from '../../../utils/addComponentKeysets'; +import {addComponentKeysets} from '../../../../i18n'; import en from './en.json'; import ru from './ru.json'; From 92c2e9468338ec54afe27dd90346c9064df7153c Mon Sep 17 00:00:00 2001 From: NasgulNexus Date: Fri, 27 Sep 2024 10:35:22 +0200 Subject: [PATCH 07/10] fix: unstable_endContent --- src/components/controls/PasswordInput/PasswordInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/controls/PasswordInput/PasswordInput.tsx b/src/components/controls/PasswordInput/PasswordInput.tsx index 00d9c6e818..66ca13d6b0 100644 --- a/src/components/controls/PasswordInput/PasswordInput.tsx +++ b/src/components/controls/PasswordInput/PasswordInput.tsx @@ -96,7 +96,7 @@ export const PasswordInput = (props: PasswordInputProps) => { Date: Tue, 15 Oct 2024 10:31:08 +0200 Subject: [PATCH 08/10] fix: add revealValue --- .../controls/PasswordInput/PasswordInput.tsx | 26 +++++++++++++------ .../controls/PasswordInput/README.md | 14 +++++----- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/components/controls/PasswordInput/PasswordInput.tsx b/src/components/controls/PasswordInput/PasswordInput.tsx index 66ca13d6b0..ef891da1db 100644 --- a/src/components/controls/PasswordInput/PasswordInput.tsx +++ b/src/components/controls/PasswordInput/PasswordInput.tsx @@ -29,6 +29,10 @@ export type PasswordInputProps = Omit & { hasCopyTooltip?: boolean; /** Disable the tooltip for the reveal button. The tooltip will not be displayed */ hasRevealTooltip?: boolean; + /** Determines the visibility state of the password input field */ + revealValue?: boolean; + /** A callback function that is invoked whenever the revealValue state changes */ + onRevealValueUpdate?: (value: boolean) => void; }; export const PasswordInput = (props: PasswordInputProps) => { @@ -50,18 +54,23 @@ export const PasswordInput = (props: PasswordInputProps) => { props.onUpdate, ); - const [hideValue, setHideValue] = React.useState(true); + const [revealValue, setRevealValue] = useControlledState( + props.revealValue, + false, + props.onRevealValueUpdate, + ); const {actionButtonSize, iconSize} = getActionButtonSizeAndIconSize(size); - const onClick = () => { - setHideValue((hideValue) => !hideValue); + const onClick: React.MouseEventHandler = (event) => { + event.preventDefault(); + setRevealValue(!revealValue); }; const additionalEndContent = ( {endContent || rightContent} - {inputValue && showCopyButton ? ( + {inputValue && showCopyButton && !props.disabled ? ( { {showRevealButton ? ( ) : null} @@ -95,7 +105,7 @@ export const PasswordInput = (props: PasswordInputProps) => { return ( - `type` is omitted; -| Name | Description | Type | Default | -| :--------------- | :--------------------------------------------------------------------------- | :-------: | :-----: | -| showCopyButton | Show copy button | `boolean` | `false` | -| showRevealButton | Show reveal button | `boolean` | `false` | -| hasCopyTooltip | Disable the tooltip for the copy button. The tooltip will not be displayed | `boolean` | `true` | -| hasRevealTooltip | Disable the tooltip for the reveal button. The tooltip will not be displayed | `boolean` | `true` | +| Name | Description | Type | Default | +| :------------------ | :--------------------------------------------------------------------------- | :--------: | :-----: | +| showCopyButton | Show copy button | `boolean` | `false` | +| showRevealButton | Show reveal button | `boolean` | `false` | +| hasCopyTooltip | Disable the tooltip for the copy button. The tooltip will not be displayed | `boolean` | `true` | +| hasRevealTooltip | Disable the tooltip for the reveal button. The tooltip will not be displayed | `boolean` | `true` | +| revealValue | Determines the visibility state of the password input field | `boolean` | `false` | +| onRevealValueUpdate | A callback function that is invoked whenever the revealValue state changes | `function` | | From c9643fcec67c4f69ab1fd8e4d5cde8df6ec5ce29 Mon Sep 17 00:00:00 2001 From: NasgulNexus Date: Tue, 15 Oct 2024 10:41:08 +0200 Subject: [PATCH 09/10] fix: reval value logic --- .../controls/PasswordInput/PasswordInput.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/controls/PasswordInput/PasswordInput.tsx b/src/components/controls/PasswordInput/PasswordInput.tsx index ef891da1db..fc32f8e794 100644 --- a/src/components/controls/PasswordInput/PasswordInput.tsx +++ b/src/components/controls/PasswordInput/PasswordInput.tsx @@ -82,7 +82,7 @@ export const PasswordInput = (props: PasswordInputProps) => { {showRevealButton ? ( ) : null} @@ -105,7 +105,7 @@ export const PasswordInput = (props: PasswordInputProps) => { return ( Date: Mon, 21 Oct 2024 17:54:15 +0200 Subject: [PATCH 10/10] fix: rename props and onMouseDown --- .../controls/PasswordInput/PasswordInput.tsx | 24 ++++++++----------- .../controls/PasswordInput/README.md | 16 ++++++------- 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/components/controls/PasswordInput/PasswordInput.tsx b/src/components/controls/PasswordInput/PasswordInput.tsx index fc32f8e794..15b9d2eba4 100644 --- a/src/components/controls/PasswordInput/PasswordInput.tsx +++ b/src/components/controls/PasswordInput/PasswordInput.tsx @@ -25,10 +25,10 @@ export type PasswordInputProps = Omit & { showCopyButton?: boolean; /** Show reveal button */ showRevealButton?: boolean; - /** Disable the tooltip for the copy button. The tooltip will not be displayed */ - hasCopyTooltip?: boolean; - /** Disable the tooltip for the reveal button. The tooltip will not be displayed */ - hasRevealTooltip?: boolean; + /** Determines whether to display the tooltip for the copy button */ + showCopyTooltip?: boolean; + /** Determines whether to display the tooltip for the reveal button */ + showRevealTooltip?: boolean; /** Determines the visibility state of the password input field */ revealValue?: boolean; /** A callback function that is invoked whenever the revealValue state changes */ @@ -43,8 +43,8 @@ export const PasswordInput = (props: PasswordInputProps) => { endContent, showRevealButton, size = 'm', - hasCopyTooltip = true, - hasRevealTooltip = true, + showCopyTooltip, + showRevealTooltip, controlProps, } = props; @@ -62,11 +62,6 @@ export const PasswordInput = (props: PasswordInputProps) => { const {actionButtonSize, iconSize} = getActionButtonSizeAndIconSize(size); - const onClick: React.MouseEventHandler = (event) => { - event.preventDefault(); - setRevealValue(!revealValue); - }; - const additionalEndContent = ( {endContent || rightContent} @@ -74,25 +69,26 @@ export const PasswordInput = (props: PasswordInputProps) => { ) : null} {showRevealButton ? (