Merge branch 'main' into alert-readme-message-prop-type-fix

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [6.35.2](https://github.com/gravity-ui/uikit/compare/v6.35.1...v6.35.2) (2024-11-14)
+
+
+### Bug Fixes
+
+* **PlaceholderContainer:** remove href attribute fallback in actions ([#1947](https://github.com/gravity-ui/uikit/issues/1947)) ([60a8b92](https://github.com/gravity-ui/uikit/commit/60a8b9240b51d78f0aa5e711a6bed8e30e049814))
+* **useBodyScrollLock:** correctly restore styles ([#1950](https://github.com/gravity-ui/uikit/issues/1950)) ([b41a53a](https://github.com/gravity-ui/uikit/commit/b41a53a477d479b925331bbc227862942da04d00))
+
 ## [6.35.1](https://github.com/gravity-ui/uikit/compare/v6.35.0...v6.35.1) (2024-11-13)
 
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "6.35.1",
+    "version": "6.35.2",
     "description": "Gravity UI base styling and components",
     "keywords": [
         "component",

src/components/PlaceholderContainer/PlaceholderContainer.tsx

@@ -19,7 +19,7 @@ const PlaceholderContainerAction = (props: PlaceholderContainerActionProps) => {
                 size={props.size || 'm'}
                 loading={Boolean(props.loading)}
                 disabled={Boolean(props.disabled)}
-                href={props.href || ''}
+                href={props.href}
                 {...(props.onClick ? {onClick: props.onClick} : {})}
             >
                 {props.text}

src/components/PlaceholderContainer/__stories__/PlaceholderContainer.stories.tsx

@@ -88,6 +88,12 @@ const actionAdditionalBtnProps: PlaceholderContainerActionProps = {
     onClick: () => alert('Click by additional button'),
 };
 
+const actionLinkProps: PlaceholderContainerActionProps = {
+    text: 'Link button',
+    view: 'flat-info',
+    href: 'https://gravity-ui.com/',
+};
+
 export const Default: Story = {
     args: {
         title: 'Some title',
@@ -165,7 +171,7 @@ export const Actions: Story = {
                 <PlaceholderContainer
                     {...args}
                     title="Array of actions"
-                    actions={[actionMainProps, actionAdditionalBtnProps]}
+                    actions={[actionMainProps, actionAdditionalBtnProps, actionLinkProps]}
                 />
             </Showcase>
             <Showcase>

src/components/controls/PasswordInput/PasswordInput.scss

@@ -0,0 +1,16 @@
+@use '../../variables';
+
+$block: '.#{variables.$ns}password-input';
+
+#{$block} {
+    &__input-control {
+        &::-ms-reveal,
+        &::-ms-clear {
+            display: none;
+        }
+    }
+
+    &__copy-button {
+        margin-inline-end: 4px;
+    }
+}

src/components/controls/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+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';
+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 = Omit<TextInputProps, 'type'> & {
+    /** Hide copy button */
+    hideCopyButton?: boolean;
+    /** Hide reveal button */
+    hideRevealButton?: 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 */
+    onRevealValueUpdate?: (value: boolean) => void;
+};
+
+export const PasswordInput = (props: PasswordInputProps) => {
+    const {
+        autoComplete,
+        controlProps,
+        endContent,
+        rightContent,
+        hideCopyButton = false,
+        hideRevealButton = false,
+        showCopyTooltip = false,
+        showRevealTooltip = false,
+        size = 'm',
+    } = props;
+
+    const [inputValue, setInputValue] = useControlledState(
+        props.value,
+        props.defaultValue ?? '',
+        props.onUpdate,
+    );
+
+    const [revealValue, setRevealValue] = useControlledState(
+        props.revealValue,
+        false,
+        props.onRevealValueUpdate,
+    );
+
+    const {actionButtonSize, iconSize} = getActionButtonSizeAndIconSize(size);
+
+    const additionalEndContent = (
+        <React.Fragment>
+            {endContent || rightContent}
+            {inputValue && !hideCopyButton && !props.disabled ? (
+                <ClipboardButton
+                    view="flat-secondary"
+                    text={inputValue}
+                    hasTooltip={showCopyTooltip}
+                    size={actionButtonSize}
+                    className={b('copy-button')}
+                />
+            ) : null}
+            {hideRevealButton ? null : (
+                <ActionTooltip
+                    disabled={!showRevealTooltip}
+                    title={revealValue ? i18n('label_hide-password') : i18n('label_show-password')}
+                >
+                    <Button
+                        view="flat-secondary"
+                        disabled={props.disabled}
+                        onClick={() => setRevealValue(!revealValue)}
+                        size={actionButtonSize}
+                        extraProps={{
+                            'aria-label': revealValue
+                                ? i18n('label_hide-password')
+                                : i18n('label_show-password'),
+                            onMouseDown: (event: React.SyntheticEvent) => event.preventDefault(),
+                        }}
+                    >
+                        <Icon data={revealValue ? EyeSlash : Eye} size={iconSize} />
+                    </Button>
+                </ActionTooltip>
+            )}
+        </React.Fragment>
+    );
+
+    return (
+        <TextInput
+            {...props}
+            type={revealValue ? 'text' : 'password'}
+            unstable_endContent={additionalEndContent}
+            autoComplete={autoComplete ? autoComplete : 'new-password'}
+            controlProps={{
+                ...controlProps,
+                className: b('input-control', controlProps?.className),
+            }}
+            value={inputValue}
+            onUpdate={setInputValue}
+        />
+    );
+};

src/components/controls/PasswordInput/README.md

@@ -0,0 +1,64 @@
+<!--GITHUB_BLOCK-->
+
+## Password Input
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {PasswordInput} from '@gravity-ui/uikit';
+```
+
+`TextInput` for typing passwords and other sensitive information. It can be rendered with copy and reveal buttons for more convinient usage.
+
+### Copy button
+
+This button allows users to easily copy the input value to their clipboard. You can hide this button with `hideCopyButton` boolean prop.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={` <PasswordInput hideCopyButton={true} /> `}
+>
+  <UIKit.PasswordInput hideCopyButton={true}  />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+### Reveal button
+
+The `hideRevealButton` prop allows users to toggle the visibility of the password.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={` <PasswordInput hideRevealButton={true} /> `}
+>
+  <UIKit.PasswordInput hideRevealButton={true}  />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+### Properties
+
+`TextInput` [properties](https://github.com/gravity-ui/uikit/blob/main/src/components/controls/TextInput/README.md#properties), with some exceptions and additions:
+
+- `type` is omitted;
+
+| Name                | Description                                                                |    Type    | Default |
+| :------------------ | :------------------------------------------------------------------------- | :--------: | :-----: |
+| hideCopyButton      | Show copy button                                                           | `boolean`  | `false` |
+| hideRevealButton    | Show reveal button                                                         | `boolean`  | `false` |
+| showCopyTooltip     | Determines whether to display the tooltip for the copy button              | `boolean`  | `false` |
+| showRevealTooltip   | Determines whether to display the tooltip for the reveal button            | `boolean`  | `false` |
+| 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` |         |
+
+<!--GITHUB_BLOCK-->
+
+#### Usage example
+
+```tsx
+function MyComponent() {
+  const [value, setValue] = React.useState('');
+
+  return <PasswordInput onUpdate={setValue} value={value} />;
+}
+```
+
+<!--GITHUB_BLOCK-->

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';
+
+<Meta of={Stories} />
+
+<Markdown>{Readme}</Markdown>

src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {Button} from '../../../Button';
+import {Flex, spacing} from '../../../layout';
+import type {PasswordInputProps} from '../PasswordInput';
+import {PasswordInput} from '../PasswordInput';
+
+export default {
+    title: 'Components/Inputs/PasswordInput',
+    component: PasswordInput,
+    args: {
+        controlProps: {
+            'aria-label': 'Password',
+        },
+    },
+} as Meta<typeof PasswordInput>;
+
+const DefaultTemplate: StoryFn<PasswordInputProps> = (args) => {
+    const [value, setValue] = React.useState('');
+
+    return <PasswordInput {...args} onUpdate={setValue} value={value} />;
+};
+
+export const Default = DefaultTemplate.bind({});
+
+const WithGenerateRandomValueTemplate: StoryFn<PasswordInputProps> = (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 (
+        <Flex>
+            <PasswordInput {...args} onUpdate={setValue} value={value} />
+            <Flex className={spacing({ml: 2})}>
+                <Button onClick={generateRandomValue}>Generate random value</Button>
+            </Flex>
+        </Flex>
+    );
+};
+
+export const WithGenerateRandomValue = WithGenerateRandomValueTemplate.bind({});

src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import {test} from '~playwright/core';
+
+import {PasswordInputStories} from './helpersPlaywright';
+
+test.describe('PasswordInput', () => {
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<PasswordInputStories.Default />);
+
+        await expectScreenshot();
+    });
+});

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);

src/components/controls/PasswordInput/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "label_show-password": "Show password",
+  "label_hide-password": "Hide password"
+}

src/components/controls/PasswordInput/i18n/index.ts

@@ -0,0 +1,8 @@
+import {addComponentKeysets} from '../../../../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'PasswordInput';
+
+export const i18n = addComponentKeysets({en, ru}, COMPONENT);

src/components/controls/PasswordInput/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "label_show-password": "Показать пароль",
+  "label_hide-password": "Скрыть пароль"
+}

src/components/controls/PasswordInput/index.ts

@@ -0,0 +1 @@
+export * from './PasswordInput';

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};
+};