DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Merge pull request #10635 from tchak/improuve-combobox

Browse source 
feat(combobox): improve style and menu trigger mode
This commit is contained in:
Paul Chavard 2024-07-25 18:29:41 +00:00 committed by GitHub
commit 11cb856921
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/javascript/components/ComboBox.tsx
View file

@ -48,7 +48,6 @@ export function ComboBox({
<AriaComboBox <AriaComboBox
{...props} {...props}
className={`fr-ds-combobox ${className ?? ''}`} className={`fr-ds-combobox ${className ?? ''}`}
menuTrigger="focus"
shouldFocusWrap={true} shouldFocusWrap={true}
> >
{label ? <Label className="fr-label">{label}</Label> : null} {label ? <Label className="fr-label">{label}</Label> : null}
@ -114,7 +113,12 @@ export function SingleComboBox({
return ( return (
<> <>
<ComboBox aria-labelledby={labelledby} {...comboBoxProps} {...props}> <ComboBox
aria-labelledby={labelledby}
menuTrigger="focus"
{...comboBoxProps}
{...props}
>
{(item) => <ComboBoxItem id={item.value}>{item.label}</ComboBoxItem>} {(item) => <ComboBoxItem id={item.value}>{item.label}</ComboBoxItem>}
</ComboBox> </ComboBox>
{children || name ? ( {children || name ? (
@ -184,7 +188,7 @@ export function MultiComboBox(maybeProps: MultiComboBoxProps) {
key={item.value} key={item.value}
id={item.value} id={item.value}
textValue={`Retirer ${item.label}`} textValue={`Retirer ${item.label}`}
className="fr-tag fr-tag--sm" className="fr-tag fr-tag--sm fr-tag--dismiss"
> >
{item.label} {item.label}
<Button slot="remove" className="fr-tag--dismiss"></Button> <Button slot="remove" className="fr-tag--dismiss"></Button>
@ -197,6 +201,7 @@ export function MultiComboBox(maybeProps: MultiComboBoxProps) {
aria-labelledby={labelledby} aria-labelledby={labelledby}
allowsCustomValue={allowsCustomValue} allowsCustomValue={allowsCustomValue}
inputRef={inputRef} inputRef={inputRef}
menuTrigger="focus"
{...comboBoxProps} {...comboBoxProps}
{...props} {...props}
> >

2
app/javascript/entrypoints/application.js
View file

@ -3,8 +3,8 @@ import Rails from '@rails/ujs';
import * as ActiveStorage from '@rails/activestorage'; import * as ActiveStorage from '@rails/activestorage';
import * as Turbo from '@hotwired/turbo'; import * as Turbo from '@hotwired/turbo';
import { Application } from '@hotwired/stimulus'; import { Application } from '@hotwired/stimulus';
import '@gouvfr/dsfr/dist/dsfr.module.js';
import '../shared/dsfr';
import '../shared/activestorage/ujs'; import '../shared/activestorage/ujs';
import '../shared/safari-11-empty-file-workaround'; import '../shared/safari-11-empty-file-workaround';
import '../shared/toggle-target'; import '../shared/toggle-target';

17
app/javascript/shared/dsfr.ts Normal file
View file

@ -0,0 +1,17 @@
import '@gouvfr/dsfr/dist/core/core.module';
import '@gouvfr/dsfr/dist/scheme/scheme.module';
import '@gouvfr/dsfr/dist/component/toggle/toggle.module';
import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.module';
import '@gouvfr/dsfr/dist/component/modal/modal.module';
import '@gouvfr/dsfr/dist/component/navigation/navigation.module';
import '@gouvfr/dsfr/dist/component/segmented/segmented.module';
import '@gouvfr/dsfr/dist/component/table/table.module';
import '@gouvfr/dsfr/dist/component/tile/tile.module';
import '@gouvfr/dsfr/dist/component/card/card.module';
import '@gouvfr/dsfr/dist/component/header/header.module';
import '@gouvfr/dsfr/dist/component/sidemenu/sidemenu.module';
import '@gouvfr/dsfr/dist/component/password/password.module';
import '@gouvfr/dsfr/dist/component/accordion/accordion.module';
import '@gouvfr/dsfr/dist/component/tab/tab.module';
import '@gouvfr/dsfr/dist/component/tooltip/tooltip.module';