Skip to content

Commit

Permalink
[86bzfqyeb][docs] fixed input-phone clear icons color and behavior in…
Browse files Browse the repository at this point in the history 
… examples (#1495)

## Motivation and Context

This PR fixes color of clear icons of input phone examples. Also it
fixes show/hide behavior of one of examples.

## How has this been tested?

Manually.

## Types of changes

- [x] Bug fix (non-breaking change which fixes an issue).
- [ ] New feature (non-breaking change which adds functionality).
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [ ] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [x] I have updated the documentation accordingly or it's not required.
- [x] Unit tests are not broken.
- [x] I have added changelog note to corresponding `CHANGELOG.md` file
with planned publish date.
- [ ] I have added new unit tests on added of fixed functionality.
  • Loading branch information
@msereniti
msereniti committed Jul 5, 2024
1 parent 64be6c9 commit fc20df1
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 87 deletions.
175 changes: 88 additions & 87 deletions website/docs/components/input-phone/examples/known_country_and_number_format.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,94 @@ import { Text } from 'intergalactic/typography';
import CloseM from 'intergalactic/icon/Close/m';
import { Box, Flex } from 'intergalactic/flex-box';

const Demo = () => {
const inputRef = React.useRef(null);
const [countryFilter, setCountryFilterValue] = React.useState('');
const [country, setCountry] = React.useState<keyof typeof countries>('ZW');
const prefix = countries[country].prefix;
const [phoneNumber, setPhoneNumber] = React.useState(prefix);
const [phoneMask, setPhoneMask] = React.useState(`${prefix} (___)___-____`);

return (
<Flex direction='column'>
<Text tag='label' htmlFor='phone-number-with-country-select' size={200} mr={2}>
Phone number
</Text>
<Box mt={2}>
<NeighborLocation controlsLength={2}>
<Select
value={country}
onChange={(country) => {
setCountry(country);
const prefix = countries[country].prefix;
setPhoneNumber(prefix);
setPhoneMask(`${prefix} (___)___-____`);
setTimeout(() => {
inputRef?.current.focus();
}, 1);
}}
>
<Select.Trigger>
<Select.Trigger.Addon mr={0}>
<Flag iso2={country} />
</Select.Trigger.Addon>
</Select.Trigger>

<Select.Popper>
<>
<InputSearch
placeholder='Search'
value={countryFilter}
onChange={setCountryFilterValue}
/>

<Select.List hMax='240px' w='232px'>
{Object.keys(countries)
.filter((country) =>
countries[country].name.toLowerCase().includes(countryFilter),
)
.map((country) => (
<Select.Option key={country} value={country}>
<Text size={200} mr={2} flex='0 0 auto'>
<Flag iso2={country as keyof typeof countries} />
</Text>
<Text size={200} mr={2}>
{countries[country].name}
</Text>
<Text size={200} color='text-secondary'>
{countries[country].prefix}
</Text>
</Select.Option>
))}
</Select.List>
</>
</Select.Popper>
</Select>
<InputMask w={210}>
<InputMask.Value
title={'phone number'}
id='phone-number-with-country-select'
ref={inputRef}
value={phoneNumber}
onChange={setPhoneNumber}
mask={phoneMask.replace(/_/g, '9')}
/>
{phoneNumber?.includes('(') && (
<Input.Addon
tag={CloseM}
aria-label='Clear value'
color='icon-secondary-neutral'
interactive
onClick={() => setPhoneNumber(prefix)}
/>
)}
</InputMask>
</NeighborLocation>
</Box>
</Flex>
);
};

const countries = {
AF: { name: 'Afghanistan', prefix: '+93' },
AX: { name: 'Åland Islands', prefix: '+358' },
Expand Down Expand Up @@ -257,91 +345,4 @@ const countries = {
ZW: { name: 'Zimbabwe', prefix: '+263' },
};

const Demo = () => {
const inputRef = React.useRef(null);
const [countryFilter, setCountryFilterValue] = React.useState('');
const [country, setCountry] = React.useState<keyof typeof countries>('ZW');
const prefix = countries[country].prefix;
const [phoneNumber, setPhoneNumber] = React.useState(prefix);
const [phoneMask, setPhoneMask] = React.useState(`${prefix} (___)___-____`);

return (
<Flex direction='column'>
<Text tag='label' htmlFor='phone-number-with-country-select' size={200} mr={2}>
Phone number
</Text>
<Box mt={2}>
<NeighborLocation controlsLength={2}>
<Select
value={country}
onChange={(country) => {
setCountry(country);
const prefix = countries[country].prefix;
setPhoneNumber(prefix);
setPhoneMask(`${prefix} (___)___-____`);
setTimeout(() => {
inputRef?.current.focus();
}, 1);
}}
>
<Select.Trigger>
<Select.Trigger.Addon mr={0}>
<Flag iso2={country} />
</Select.Trigger.Addon>
</Select.Trigger>

<Select.Popper>
<>
<InputSearch
placeholder='Search'
value={countryFilter}
onChange={setCountryFilterValue}
/>

<Select.List hMax='240px' w='232px'>
{Object.keys(countries)
.filter((country) =>
countries[country].name.toLowerCase().includes(countryFilter),
)
.map((country) => (
<Select.Option key={country} value={country}>
<Text size={200} mr={2} flex='0 0 auto'>
<Flag iso2={country as keyof typeof countries} />
</Text>
<Text size={200} mr={2}>
{countries[country].name}
</Text>
<Text size={200} color='text-secondary'>
{countries[country].prefix}
</Text>
</Select.Option>
))}
</Select.List>
</>
</Select.Popper>
</Select>
<InputMask w={210}>
<InputMask.Value
title={'phone number'}
id='phone-number-with-country-select'
ref={inputRef}
value={phoneNumber}
onChange={setPhoneNumber}
mask={phoneMask.replace(/_/g, '9')}
/>
{phoneNumber !== phoneMask && (
<Input.Addon
tag={CloseM}
aria-label='Clear value'
interactive
onClick={() => setPhoneNumber(prefix)}
/>
)}
</InputMask>
</NeighborLocation>
</Box>
</Flex>
);
};

export default Demo;
1 change: 1 addition & 0 deletions ...e/docs/components/input-phone/examples/known_country_but_the_number_format_is_unknown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const Demo = () => {
tag={CloseM}
interactive
aria-label='Clear field'
color='icon-secondary-neutral'
onClick={() => setValue('+1')}
/>
)}
Expand Down
1 change: 1 addition & 0 deletions website/docs/components/input-phone/examples/unknown_country_and_number_format.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const Demo = () => {
tag={CloseM}
interactive
aria-label='Clear field'
color='icon-secondary-neutral'
onClick={() => setValue('+')}
/>
)}
Expand Down

0 comments on commit fc20df1

Please sign in to comment.