Skip to content

Commit

Permalink
plasma-*: Fix TextField placeholder logic [HOTFIX] (#1425)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Yakutoc
Yakutoc authored Sep 10, 2024
2 parents adc8c9e + 6b4e3d3 commit 2a7e7b3
Show file tree
Hide file tree
Showing 13 changed files with 272 additions and 120 deletions.
Binary file added ...eld/TextField.component-test.tsx/plasma-web TextField -- _defaultValue.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...eld/TextField.component-test.tsx/plasma-web TextField -- _defaultValue.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions packages/plasma-b2c/src/components/TextField/TextField.component-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,16 @@ describe('plasma-web: TextField', () => {
cy.matchImageSnapshot();
});

it('_defaultValue', () => {
mount(
<CypressTestDecoratorWithTypo>
<TextField size="m" defaultValue="Default value" placeholder="Placeholder" helperText="Helper text" />
</CypressTestDecoratorWithTypo>,
);

cy.matchImageSnapshot();
});

it('content: with label', () => {
mount(
<CypressTestDecoratorWithTypo>
Expand Down
45 changes: 30 additions & 15 deletions packages/plasma-b2c/src/components/TextField/TextField.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,21 +120,36 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, status, ...rest }: S
const iconSize = rest.size === 'xs' ? 'xs' : 's';

return (
<TextField
{...rest}
value={value}
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
status={status || undefined}
onChange={(e) => {
setValue(e.target.value);
onChange(e);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
onChangeChips={onChipsChange}
/>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<TextField
{...rest}
value={value}
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
status={status || undefined}
onChange={(e) => {
setValue(e.target.value);
onChange(e);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
onChangeChips={onChipsChange}
/>

<TextField
{...rest}
label="Uncontrolled TextField"
defaultValue="Дефолтное значение"
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
status={status || undefined}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
onChangeChips={onChipsChange}
/>
</div>
);
};

Expand Down
8 changes: 4 additions & 4 deletions packages/plasma-new-hope/src/components/TextField/TextField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const textFieldRoot = (Root: RootProps<HTMLDivElement, TextFieldProps>) =

const controlledRefs = { contentRef, inputRef, chipsRefs };

const [hasValue, setHasValue] = useState(Boolean(outerValue));
const [hasValue, setHasValue] = useState(Boolean(outerValue) || Boolean(rest?.defaultValue));
const [chips, setChips] = useState<Array<ChipValues>>([]);

const uniqId = safeUseId();
Expand Down Expand Up @@ -198,8 +198,8 @@ export const textFieldRoot = (Root: RootProps<HTMLDivElement, TextFieldProps>) =
}, [isChipEnumeration, values]);

useEffect(() => {
setHasValue(Boolean(outerValue));
}, [outerValue]);
setHasValue(Boolean(outerValue) || Boolean(rest?.defaultValue));
}, [outerValue, rest.defaultValue]);

const innerOptional = Boolean(required ? false : optional);
const hasPlaceholderOptional = innerOptional && !innerLabelValue && !hasOuterLabel;
Expand Down Expand Up @@ -288,7 +288,7 @@ export const textFieldRoot = (Root: RootProps<HTMLDivElement, TextFieldProps>) =
{optionalTextNode}
</Label>
)}
{placeholderShown && (
{placeholderShown && !hasValue && (
<InputPlaceholder>
{innerPlaceholderValue}
{hasPlaceholderOptional && optionalTextNode}
Expand Down
45 changes: 30 additions & 15 deletions packages/plasma-new-hope/src/examples/plasma_b2c/components/TextField/TextField.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,21 +98,36 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
const iconSize = rest.size === 'xs' ? 'xs' : 's';

return (
<TextField
{...rest}
enumerationType="plain"
value={text}
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
view={view}
onChange={(e) => {
setText(e.target.value);
onChange(e.target.value);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
/>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<TextField
{...rest}
enumerationType="plain"
value={text}
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
view={view}
onChange={(e) => {
setText(e.target.value);
onChange(e.target.value);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
/>

<TextField
{...rest}
label="Uncontrolled TextField"
defaultValue="Дефолтное значение"
enumerationType="plain"
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
view={view}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
/>
</div>
);
};

Expand Down
45 changes: 30 additions & 15 deletions packages/plasma-new-hope/src/examples/plasma_web/components/TextField/TextField.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,21 +98,36 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
const iconSize = rest.size === 'xs' ? 'xs' : 's';

return (
<TextField
{...rest}
enumerationType="plain"
value={text}
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
view={view}
onChange={(e) => {
setText(e.target.value);
onChange(e.target.value);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
/>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<TextField
{...rest}
enumerationType="plain"
value={text}
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
view={view}
onChange={(e) => {
setText(e.target.value);
onChange(e.target.value);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
/>

<TextField
{...rest}
label="Uncontrolled TextField"
defaultValue="Дефолтное значение"
enumerationType="plain"
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
view={view}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
/>
</div>
);
};

Expand Down
10 changes: 10 additions & 0 deletions packages/plasma-web/src/components/TextField/TextField.component-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,16 @@ describe('plasma-web: TextField', () => {
cy.matchImageSnapshot();
});

it('_defaultValue', () => {
mount(
<CypressTestDecoratorWithTypo>
<TextField size="m" defaultValue="Default value" placeholder="Placeholder" helperText="Helper text" />
</CypressTestDecoratorWithTypo>,
);

cy.matchImageSnapshot();
});

it('content: with label', () => {
mount(
<CypressTestDecoratorWithTypo>
Expand Down
45 changes: 30 additions & 15 deletions packages/plasma-web/src/components/TextField/TextField.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,21 +115,36 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, status, ...rest }: S
const iconSize = rest.size === 'xs' ? 'xs' : 's';

return (
<TextField
{...rest}
value={value}
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
status={status || undefined}
onChange={(e) => {
setValue(e.target.value);
onChange(e);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
onChangeChips={onChipsChange}
/>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<TextField
{...rest}
value={value}
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
status={status || undefined}
onChange={(e) => {
setValue(e.target.value);
onChange(e);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
onChangeChips={onChipsChange}
/>

<TextField
{...rest}
label="Uncontrolled TextField"
defaultValue="Дефолтное значение"
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
status={status || undefined}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
onChangeChips={onChipsChange}
/>
</div>
);
};

Expand Down
46 changes: 32 additions & 14 deletions packages/sdds-cs/src/components/TextField/TextField.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,20 +117,38 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
const [text, setText] = useState('Значение поля');

return (
<TextField
{...rest}
value={text}
contentLeft={enableContentLeft ? <BellIcon size={rest.size} /> : undefined}
contentRight={enableContentRight ? <BellIcon size={rest.size} /> : undefined}
view={view}
onChange={(e) => {
setText(e.target.value);
onChange(e.target.value);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
/>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<TextField
{...rest}
value={text}
contentLeft={enableContentLeft ? <BellIcon size={rest.size} /> : undefined}
contentRight={enableContentRight ? <BellIcon size={rest.size} /> : undefined}
view={view}
onChange={(e) => {
setText(e.target.value);
onChange(e.target.value);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
/>

<TextField
{...rest}
label="Uncontrolled TextField"
defaultValue="Дефолтное значение"
contentLeft={enableContentLeft ? <BellIcon size={rest.size} /> : undefined}
contentRight={enableContentRight ? <BellIcon size={rest.size} /> : undefined}
view={view}
onChange={(e) => {
setText(e.target.value);
onChange(e.target.value);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
/>
</div>
);
};

Expand Down
46 changes: 32 additions & 14 deletions packages/sdds-dfa/src/components/TextField/TextField.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,20 +117,38 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
const [text, setText] = useState('Значение поля');

return (
<TextField
{...rest}
value={text}
contentLeft={enableContentLeft ? <BellIcon size={rest.size} /> : undefined}
contentRight={enableContentRight ? <BellIcon size={rest.size} /> : undefined}
view={view}
onChange={(e) => {
setText(e.target.value);
onChange(e.target.value);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
/>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<TextField
{...rest}
value={text}
contentLeft={enableContentLeft ? <BellIcon size={rest.size} /> : undefined}
contentRight={enableContentRight ? <BellIcon size={rest.size} /> : undefined}
view={view}
onChange={(e) => {
setText(e.target.value);
onChange(e.target.value);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
/>

<TextField
{...rest}
label="Uncontrolled TextField"
defaultValue="Дефолтное значение"
contentLeft={enableContentLeft ? <BellIcon size={rest.size} /> : undefined}
contentRight={enableContentRight ? <BellIcon size={rest.size} /> : undefined}
view={view}
onChange={(e) => {
setText(e.target.value);
onChange(e.target.value);
}}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
/>
</div>
);
};

Expand Down
Loading

0 comments on commit 2a7e7b3

Please sign in to comment.