Skip to content

Commit

Permalink
Merge pull request #884 from freshworks/feat/select-style-focus
Browse files Browse the repository at this point in the history 
feat(fw-select): Add search variant, reset popover min-width for tags
  • Loading branch information
@rihansiddhi
rihansiddhi authored Jul 27, 2023
2 parents 62719ff + cf8452e commit a5ecf64
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 11 deletions.
4 changes: 2 additions & 2 deletions packages/crayons-core/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1827,7 +1827,7 @@ export namespace Components {
/**
* The UI variant of the select to be used.
*/
"variant": 'button' | 'standard' | 'mail';
"variant": 'button' | 'standard' | 'mail' | 'search';
/**
* Warning text displayed below the text box.
*/
Expand Down Expand Up @@ -4775,7 +4775,7 @@ declare namespace LocalJSX {
/**
* The UI variant of the select to be used.
*/
"variant"?: 'button' | 'standard' | 'mail';
"variant"?: 'button' | 'standard' | 'mail' | 'search';
/**
* Warning text displayed below the text box.
*/
Expand Down
165 changes: 164 additions & 1 deletion packages/crayons-core/src/components/select/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1694,6 +1694,169 @@ function App() {
</code-block>
</code-group>

### Demo with search variant

```html live
<fw-select
id="search"
label="Rick & Morty Characters"
no-data-text="Type to search.."
not-found-text="Not available in this universe"
placeholder="Your choices"
hint-text="Select multiple options"
options-variant="avatar"
tag-variant="avatar"
multiple
caret="false"
variant="search"
>
</fw-select>

<script type="application/javascript">
var searchVariant = document.getElementById('search');
baseURL = 'https://api.sampleapis.com/rickandmorty/characters';
searchVariant.selectedOptions = [
{
text: 'Rick Sanchez',
subText: 'Human',
value: '1',
graphicsProps: {
image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
},
},
];
searchVariant.search = (value, source) => {
// Sample function to mimic the dynamic filter over network
return fetch(baseURL)
.then((resp) => resp.json())
.then((data) => {
const result = data.filter((x) =>
x.name.toLowerCase().includes(value.toLowerCase())
);
return result.map((x) => {
return {
text: x.name,
subText: x.type,
value: x.id.toString(),
graphicsProps: { image: x.image },
};
});
});
};
</script>
```

### Usage of search variant

<code-group>
<code-block title="HTML">

```html
<fw-select
id="search"
label="Rick & Morty Characters"
no-data-text="Type to search.."
not-found-text="Not available in this universe"
placeholder="Your choices"
hint-text="Select multiple options"
options-variant="avatar"
tag-variant="avatar"
multiple
caret="false"
variant="search"
>
</fw-select>

<script type="application/javascript">
var searchVariant = document.getElementById('search');
baseURL = 'https://api.sampleapis.com/rickandmorty/characters';
searchVariant.selectedOptions = [
{
text: 'Rick Sanchez',
subText: 'Human',
value: '1',
graphicsProps: {
image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
},
},
];
searchVariant.search = (value, source) => {
// Sample function to mimic the dynamic filter over network
return fetch(baseURL)
.then((resp) => resp.json())
.then((data) => {
const result = data.filter((x) =>
x.name.toLowerCase().includes(value.toLowerCase())
);
return result.map((x) => {
return {
text: x.name,
subText: x.type,
value: x.id.toString(),
graphicsProps: { image: x.image },
};
});
});
};
</script>
```

</code-block>
<code-block title="React">

```jsx
function Select() {
var baseURL = 'https://api.sampleapis.com/rickandmorty/characters';
const searchFn = (value, source) => {
// Sample function to mimic the dynamic filter over network
return fetch(baseURL)
.then((resp) => resp.json())
.then((data) => {
const result = data.filter((x) =>
x.name.toLowerCase().includes(value.toLowerCase())
);
return result.map((x) => {
return {
text: x.name,
subText: x.type,
value: x.id.toString(),
graphicsProps: { image: x.image },
};
});
});
};
return (
<FwSelect
id='search'
label={'Rick & Morty Characters'}
notFoundText='Not available in this universe'
placeholder='Your choices'
hintText='Select multiple options'
optionsVariant='avatar'
tagVariant='avatar'
search={searchFn}
multiple
selectedOptions={[
{
text: 'Rick Sanchez',
subText: 'Human',
value: '1',
graphicsProps: {
image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
},
},
]}
variant="search"
caret={false}
></FwSelect>
);
}
export default Select;
```

</code-block>
</code-group>

## Styling

Refer the css variables in fw-popover to control the height and width of the select popup.
Expand Down Expand Up @@ -1743,7 +1906,7 @@ Refer the [css variables](#css-custom-properties) for modifying the appearance o
| `tagVariant` | `tag-variant` | The variant of tag to be used. | `"avatar" \| "standard"` | `'standard'` |
| `type` | `type` | Type of option accepted as the input value. If a user tries to enter an option other than the specified type, the list is not populated. | `"number" \| "text"` | `'text'` |
| `value` | `value` | Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select. | `any` | `undefined` |
| `variant` | `variant` | The UI variant of the select to be used. | `"button" \| "mail" \| "standard"` | `'standard'` |
| `variant` | `variant` | The UI variant of the select to be used. | `"button" \| "mail" \| "search" \| "standard"` | `'standard'` |
| `warningText` | `warning-text` | Warning text displayed below the text box. | `string` | `''` |


Expand Down
1 change: 1 addition & 0 deletions packages/crayons-core/src/components/select/select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ $disabled-color: $input-disabled-color;
margin-block-start: 4px;
display: flex;
min-width: inherit;
--fw-popover-min-width: 0;
}
}

Expand Down
18 changes: 10 additions & 8 deletions packages/crayons-core/src/components/select/select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export class Select {
this.setFocus();
// Select the whole text in case of single select
this.multiple || this.selectInput?.select?.();
if (this.variant !== 'mail') {
if (!['search', 'mail'].includes(this.variant)) {
this.openDropdown();
}
this.focusedValues = [];
Expand Down Expand Up @@ -153,7 +153,7 @@ export class Select {
/**
* The UI variant of the select to be used.
*/
@Prop() variant: 'button' | 'standard' | 'mail' = 'standard';
@Prop() variant: 'button' | 'standard' | 'mail' | 'search' = 'standard';
/**
* Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row.
* The props for the icon or avatar are passed as an object via the graphicsProps.
Expand Down Expand Up @@ -312,7 +312,7 @@ export class Select {
@Listen('fwLoading')
onLoading(event) {
this.isLoading = event.detail.isLoading;
if (this.variant === 'mail' && !this.isLoading) {
if (['search', 'mail'].includes(this.variant) && !this.isLoading) {
this.selectInput?.value?.trim() && this.openDropdown();
}
}
Expand All @@ -323,7 +323,7 @@ export class Select {
this.selectedOptionsState = selectedItem.detail?.meta?.selectedOptions;
this.value = selectedItem.detail.value;
this.renderInput();
if (!this.multiple || this.variant === 'mail') {
if (!this.multiple || ['search', 'mail'].includes(this.variant)) {
this.closeDropdown();
}
selectedItem.stopImmediatePropagation();
Expand Down Expand Up @@ -550,6 +550,8 @@ export class Select {
} else {
this.tagArrowKeyCounter = 0;
}
ev.preventDefault();
ev.stopPropagation();
ev.stopImmediatePropagation();
break;
case 'ArrowRight':
Expand All @@ -559,6 +561,8 @@ export class Select {
this.tagArrowKeyCounter++;
this.focusOnTag(this.tagArrowKeyCounter);
}
ev.preventDefault();
ev.stopPropagation();
ev.stopImmediatePropagation();
break;
}
Expand Down Expand Up @@ -596,7 +600,6 @@ export class Select {
[...tags][index].scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'start',
});
}
}
Expand Down Expand Up @@ -628,11 +631,11 @@ export class Select {
if (this.changeEmittable()) {
this.searchValue = this.selectInput?.value;
if (this.selectInput?.value) {
this.variant !== 'mail' && this.openDropdown();
!['search', 'mail'].includes(this.variant) && this.openDropdown();
} else {
// Clear selected value in case of single select.
this.multiple || this.setSelectedValues('');
this.variant === 'mail' && this.closeDropdown();
['search', 'mail'].includes(this.variant) && this.closeDropdown();
}
this.focusedValues = [];
}
Expand All @@ -645,7 +648,6 @@ export class Select {
e.currentTarget.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'start',
});
if (!this.selectedOptionsState[index]?.disabled) {
const focusedIndex = this.focusedValues.indexOf(index);
Expand Down

0 comments on commit a5ecf64

Please sign in to comment.