feat(select): new label behavior (#719)

core-ds · Aug 7, 2023 · f98bfab · f98bfab
1 parent 6fd833f
commit f98bfab
Show file tree

Hide file tree

Showing 26 changed files with 203 additions and 171 deletions.
diff --git a/.changeset/five-years-kick.md b/.changeset/five-years-kick.md
@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-input-autocomplete': minor
+'@alfalab/core-components-select': minor
+---
+
+Поведение плейсхолдера и лейбла изменено на стандартное. Теперь, в дефолтном состоянии, в инпутах с внутренним положением лейбла отображается лейбл, а не плейсхолдер.
diff --git a/packages/input-autocomplete/src/Component.modal.mobile.tsx b/packages/input-autocomplete/src/Component.modal.mobile.tsx
@@ -174,21 +174,21 @@ export const InputAutocompleteModalMobile = React.forwardRef<
             <React.Fragment>
                 <Button
                     block={true}
-                    view='primary'
+                    view='secondary'
                     size='s'
-                    onClick={handleApply}
-                    {...continueButtonProps}
+                    onClick={handleCancel}
+                    {...cancelButtonProps}
                 >
-                    Продолжить
+                    Отмена
                 </Button>
                 <Button
                     block={true}
-                    view='secondary'
+                    view='primary'
                     size='s'
-                    onClick={handleCancel}
-                    {...cancelButtonProps}
+                    onClick={handleApply}
+                    {...continueButtonProps}
                 >
-                    Отмена
+                    Продолжить
                 </Button>
             </React.Fragment>
         );

diff --git a/..._snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-2-snap.png b/..._snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-2-snap.png
diff --git a/..._snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-3-snap.png b/..._snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-3-snap.png
diff --git a/...ge_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-snap.png b/...ge_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-snap.png
diff --git a/packages/input-autocomplete/src/autocomplete-mobile-field/Component.tsx b/packages/input-autocomplete/src/autocomplete-mobile-field/Component.tsx
@@ -15,16 +15,13 @@ export type AutocompleteMobileFieldProps = FormControlProps &
 export const AutocompleteMobileField = ({
     size = 'm',
     open,
-    error,
-    hint,
     disabled,
-    label,
-    labelView = 'inner',
-    placeholder,
     value,
     innerProps,
     dataTestId,
     fieldClassName,
+    labelView = 'inner',
+    placeholder,
     Arrow,
     valueRenderer,
     toggleMenu,
@@ -39,7 +36,7 @@ export const AutocompleteMobileField = ({
     const [focusVisible] = useFocus(wrapperRef, 'keyboard');
 
     const filled = Boolean(value);
-    const showLabel = !!label && (filled || !placeholder || labelView === 'outer');
+    const showPlaceholder = placeholder && !filled && labelView === 'outer';
 
     return (
         <div
@@ -58,19 +55,14 @@ export const AutocompleteMobileField = ({
                 focused={focused}
                 disabled={disabled}
                 filled={filled}
-                label={showLabel && label}
                 labelView={labelView}
-                error={error}
-                hint={hint}
                 rightAddons={Arrow}
                 data-test-id={dataTestId}
                 {...restProps}
                 {...innerProps}
             >
                 <div className={styles.contentWrapper}>
-                    {placeholder && !filled && (
-                        <span className={styles.placeholder}>{placeholder}</span>
-                    )}
+                    {showPlaceholder && <span className={styles.placeholder}>{placeholder}</span>}
                     {filled && <div className={styles.value}>{value}</div>}
                 </div>
             </FormControl>

diff --git a/packages/input-autocomplete/src/component.screenshots.test.tsx b/packages/input-autocomplete/src/component.screenshots.test.tsx
@@ -119,15 +119,36 @@ describe('InputAutocompleteModalMobile | interactions', () => {
         try {
             await page.click('[role="combobox"]');
 
-            await matchHtml({ context, page, expect });
+            await matchHtml({
+                context,
+                page,
+                expect,
+                screenshotOpts: {
+                    fullPage: true,
+                },
+            });
 
             await page.fill('input', 'Nep');
 
-            await matchHtml({ context, page, expect });
+            await matchHtml({
+                context,
+                page,
+                expect,
+                screenshotOpts: {
+                    fullPage: true,
+                },
+            });
 
             await page.click('button[data-test-id="continue"]');
 
-            await matchHtml({ context, page, expect });
+            await matchHtml({
+                context,
+                page,
+                expect,
+                screenshotOpts: {
+                    fullPage: true,
+                },
+            });
         } catch (error) {
             // eslint-disable-next-line no-console
             console.error((error as Error).message);

diff --git a/packages/input-autocomplete/src/docs/description.mdx b/packages/input-autocomplete/src/docs/description.mdx
@@ -77,27 +77,24 @@ render(() => {
                     block={true}
                     options={getFilteredOptions()}
                     label='Инпут с автокомплитом'
+                    placeholder='Начните вводить название'
                     onChange={handleChange}
                     onInput={handleInput}
                     value={value}
                     Arrow={shownChevron ? Arrow : undefined}
                     multiple={multiple}
                     allowUnselect={true}
                     Option={BaseOption}
-                    {...(shownChevron
-                        ? {
-                              showEmptyOptionsList: true,
-                              optionsListProps: {
-                                  emptyPlaceholder: (
-                                      <div style={{ display: 'flex', justifyContent: 'center' }}>
-                                          <Typography.Text view='component'>
-                                              Ничего не нашлось
-                                          </Typography.Text>
-                                      </div>
-                                  ),
-                              },
-                          }
-                        : null)}
+                    showEmptyOptionsList={true}
+                    optionsListProps={{
+                        emptyPlaceholder: (
+                            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                                <Typography.Text view='component'>
+                                    Ничего не нашлось
+                                </Typography.Text>
+                            </div>
+                        ),
+                    }}
                 />
             </div>
             <Gap size='xl' />
@@ -122,6 +119,7 @@ render(() => {
 //MOBILE
 render(() => {
     const [shownChevron, setShownChevron] = React.useState(false);
+    const [showInModal, setShowInModal] = React.useState(false);
     const [multiple, setMultiple] = React.useState(false);
     const [value, setValue] = React.useState('');
     const [filter, setFilter] = React.useState('');
@@ -186,28 +184,17 @@ render(() => {
                   );
               });
 
+    const emptyPlaceholder = (
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <Typography.Text view='component'>Ничего не нашлось</Typography.Text>
+        </div>
+    );
+
+    const Component = showInModal ? InputAutocompleteModalMobile : InputAutocompleteMobile;
+
     return (
         <div style={{ width: document.body.clientWidth < 450 ? '100%' : 320 }}>
-            <InputAutocompleteMobile
-                size='m'
-                block={true}
-                value={value}
-                Arrow={shownChevron ? Arrow : undefined}
-                filter={filter}
-                options={filteredOptions}
-                label='Инпут с автокомплитом'
-                placeholder='Начните вводить название'
-                multiple={multiple}
-                selected={selected}
-                closeOnSelect={!multiple}
-                allowUnselect={true}
-                onChange={handleChange}
-                onFilter={handleFilter}
-                onClearFilter={() => setFilter('')}
-                onCancel={() => setFilter(value)}
-            />
-            <Gap size='m' />
-            <InputAutocompleteModalMobile
+            <Component
                 size='m'
                 block={true}
                 value={value}
@@ -216,6 +203,7 @@ render(() => {
                 options={filteredOptions}
                 label='Инпут с автокомплитом'
                 placeholder='Начните вводить название'
+                Option={BaseOption}
                 multiple={multiple}
                 selected={selected}
                 closeOnSelect={!multiple}
@@ -224,6 +212,8 @@ render(() => {
                 onFilter={handleFilter}
                 onClearFilter={() => setFilter('')}
                 onCancel={() => setFilter(value)}
+                showEmptyOptionsList={true}
+                optionsListProps={{ emptyPlaceholder }}
             />
             <Gap size='xl' />
 
@@ -241,57 +231,11 @@ render(() => {
                     setValue('');
                 }}
             />
-        </div>
-    );
-});
-```
-
-## Пустой список
-
-Когда по запросу пользователя не находится соответствия в списке, рекомендуется использовать такой шаблон.
-
-```jsx live
-render(() => {
-    return (
-        <div style={{ width: document.body.clientWidth < 450 ? '100%' : 320 }}>
-            <InputAutocompleteDesktop
-                size='m'
-                block={true}
-                options={[]}
-                label='Пустой список'
-                showEmptyOptionsList={true}
-                optionsListProps={{
-                    emptyPlaceholder: (
-                        <div style={{ display: 'flex', justifyContent: 'center' }}>
-                            <Typography.Text view='component'>Ничего не нашлось</Typography.Text>
-                        </div>
-                    ),
-                }}
-                Option={BaseOption}
-            />
-        </div>
-    );
-});
-//MOBILE
-render(() => {
-    return (
-        <div style={{ width: document.body.clientWidth < 450 ? '100%' : 320 }}>
-            <InputAutocompleteMobile
-                size='m'
-                block={true}
-                options={[]}
-                onChange={() => {}}
-                label='Инпут с автокомплитом'
-                placeholder='Начните вводить название'
-                showEmptyOptionsList={true}
-                optionsListProps={{
-                    emptyPlaceholder: (
-                        <div style={{ display: 'flex', justifyContent: 'center' }}>
-                            <Typography.Text view='component'>Ничего не нашлось</Typography.Text>
-                        </div>
-                    ),
-                }}
-                Option={BaseOption}
+            <Gap size='m' />
+            <Switch
+                checked={showInModal}
+                label='Открывать в модалке'
+                onChange={() => setShowInModal((prevState) => !prevState)}
             />
         </div>
     );
@@ -355,9 +299,11 @@ render(() => {
     const CardOption = (props) => (
         <BaseOption {...props}>
             <div style={{ padding: 'var(--gap-s)' }}>
-                {props.option.key}
-                <br />
-                <sub>{props.option.content}</sub>
+                <Typography.Text view='component'>{props.option.content}</Typography.Text>
+                <Gap size='2xs' />
+                <Typography.Text view='primary-small' color='secondary'>
+                    {props.option.key}
+                </Typography.Text>
             </div>
         </BaseOption>
     );
@@ -382,21 +328,25 @@ render(() => {
     const filteredOptions = cards.filter((option) => matchOption(option, value));
 
     return (
-        <InputAutocompleteDesktop
-            size='m'
-            options={filteredOptions}
-            selected={[]}
-            label='Маскированный ввод счёта'
-            onInput={handleInput}
-            onChange={handleChange}
-            value={value}
-            Option={CardOption}
-            Input={MaskedInput}
-            inputProps={{
-                ref: inputRef,
-                mask,
-            }}
-        />
+        <div style={{ width: 320 }}>
+            <InputAutocompleteDesktop
+                size='m'
+                options={filteredOptions}
+                selected={[]}
+                label='Счёт'
+                placeholder='Маскированный ввод счёта'
+                onInput={handleInput}
+                onChange={handleChange}
+                value={value}
+                Option={CardOption}
+                Input={MaskedInput}
+                block={true}
+                inputProps={{
+                    ref: inputRef,
+                    mask,
+                }}
+            />
+        </div>
     );
 });
 //MOBILE
@@ -455,9 +405,11 @@ render(() => {
     const CardOption = (props) => (
         <BaseOption {...props}>
             <div style={{ padding: 'var(--gap-s) var(--gap-m)' }}>
-                {props.option.key}
-                <br />
-                <sub>{props.option.content}</sub>
+                <Typography.Text view='component'>{props.option.content}</Typography.Text>
+                <Gap size='2xs' />
+                <Typography.Text view='primary-small' color='secondary'>
+                    {props.option.key}
+                </Typography.Text>
             </div>
         </BaseOption>
     );