ProvidersStep search: lock button, primary-circle, drop focus rings, grey chip
- Suppress Autocomplete's own popup/clear indicators (forcePopupIcon, clearIcon) so the search IconButton stays anchored in the same spot across empty, draft, and chip states - Search button is a primary-filled circle at default strength in every state (no disabled dimming) — a clear affordance, handler already guards for empty drafts - Drop the brand-gold focus ring on the search bar; keep the default neutral border on focus - Drop the copper 2px focus outline on Filters and Sort (outline: none under :focus-visible) - Committed location chip now uses the default neutral tonal fill instead of the promoted brand colour Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -416,6 +416,8 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
|
|||||||
multiple
|
multiple
|
||||||
freeSolo
|
freeSolo
|
||||||
options={[]}
|
options={[]}
|
||||||
|
forcePopupIcon={false}
|
||||||
|
clearIcon={null}
|
||||||
value={searchQuery.trim() ? [searchQuery.trim()] : []}
|
value={searchQuery.trim() ? [searchQuery.trim()] : []}
|
||||||
inputValue={searchDraft}
|
inputValue={searchDraft}
|
||||||
onInputChange={(_, newDraft, reason) => {
|
onInputChange={(_, newDraft, reason) => {
|
||||||
@@ -443,7 +445,6 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
|
|||||||
key={key}
|
key={key}
|
||||||
label={option}
|
label={option}
|
||||||
size="small"
|
size="small"
|
||||||
selected
|
|
||||||
aria-label={`Current location: ${option}. Press delete to clear.`}
|
aria-label={`Current location: ${option}. Press delete to clear.`}
|
||||||
{...chipProps}
|
{...chipProps}
|
||||||
/>
|
/>
|
||||||
@@ -470,22 +471,38 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
|
|||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
endAdornment: (
|
endAdornment: (
|
||||||
<InputAdornment position="end" sx={{ mr: 0.25 }}>
|
<InputAdornment position="end" sx={{ mr: 0.5 }}>
|
||||||
<IconButton
|
<IconButton
|
||||||
aria-label="Search"
|
aria-label="Search"
|
||||||
color="primary"
|
|
||||||
size="small"
|
|
||||||
onClick={() => commitSearch(searchDraft)}
|
onClick={() => commitSearch(searchDraft)}
|
||||||
disabled={!searchDraft.trim()}
|
sx={{
|
||||||
|
width: 28,
|
||||||
|
height: 28,
|
||||||
|
borderRadius: '50%',
|
||||||
|
bgcolor: 'primary.main',
|
||||||
|
color: 'primary.contrastText',
|
||||||
|
'&:hover': { bgcolor: 'primary.dark' },
|
||||||
|
'&:focus-visible': { outline: 'none' },
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<SearchIcon fontSize="small" />
|
<SearchIcon sx={{ fontSize: 16 }} />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</InputAdornment>
|
</InputAdornment>
|
||||||
),
|
),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
sx={{ mb: 1.5 }}
|
sx={{
|
||||||
|
mb: 1.5,
|
||||||
|
// Kill the custom brand focus ring + border colour change on focus
|
||||||
|
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||||
|
boxShadow: 'none',
|
||||||
|
'& .MuiOutlinedInput-notchedOutline': {
|
||||||
|
borderColor: 'var(--fa-color-neutral-300)',
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Control bar — filters + sort */}
|
{/* Control bar — filters + sort */}
|
||||||
@@ -497,7 +514,11 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Filters */}
|
{/* Filters */}
|
||||||
<FilterPanel activeCount={activeCount} onClear={handleClear}>
|
<FilterPanel
|
||||||
|
activeCount={activeCount}
|
||||||
|
onClear={handleClear}
|
||||||
|
sx={{ '& .MuiButton-root:focus-visible': { outline: 'none' } }}
|
||||||
|
>
|
||||||
{/* ── Location ── */}
|
{/* ── Location ── */}
|
||||||
<Box>
|
<Box>
|
||||||
<Typography variant="labelLg" sx={sectionHeadingSx}>
|
<Typography variant="labelLg" sx={sectionHeadingSx}>
|
||||||
@@ -681,7 +702,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
|
|||||||
onClick={(e) => setSortAnchor(e.currentTarget)}
|
onClick={(e) => setSortAnchor(e.currentTarget)}
|
||||||
aria-haspopup="listbox"
|
aria-haspopup="listbox"
|
||||||
aria-label={`Sort by ${SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Recommended'}`}
|
aria-label={`Sort by ${SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Recommended'}`}
|
||||||
sx={{ textTransform: 'none' }}
|
sx={{ textTransform: 'none', '&:focus-visible': { outline: 'none' } }}
|
||||||
>
|
>
|
||||||
<Box component="span" sx={{ color: 'text.secondary', fontWeight: 400, mr: 0.5 }}>
|
<Box component="span" sx={{ color: 'text.secondary', fontWeight: 400, mr: 0.5 }}>
|
||||||
Sort:
|
Sort:
|
||||||
|
|||||||
Reference in New Issue
Block a user