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
|
||||
freeSolo
|
||||
options={[]}
|
||||
forcePopupIcon={false}
|
||||
clearIcon={null}
|
||||
value={searchQuery.trim() ? [searchQuery.trim()] : []}
|
||||
inputValue={searchDraft}
|
||||
onInputChange={(_, newDraft, reason) => {
|
||||
@@ -443,7 +445,6 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
|
||||
key={key}
|
||||
label={option}
|
||||
size="small"
|
||||
selected
|
||||
aria-label={`Current location: ${option}. Press delete to clear.`}
|
||||
{...chipProps}
|
||||
/>
|
||||
@@ -470,22 +471,38 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
|
||||
</>
|
||||
),
|
||||
endAdornment: (
|
||||
<InputAdornment position="end" sx={{ mr: 0.25 }}>
|
||||
<InputAdornment position="end" sx={{ mr: 0.5 }}>
|
||||
<IconButton
|
||||
aria-label="Search"
|
||||
color="primary"
|
||||
size="small"
|
||||
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>
|
||||
</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 */}
|
||||
@@ -497,7 +514,11 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
|
||||
}}
|
||||
>
|
||||
{/* Filters */}
|
||||
<FilterPanel activeCount={activeCount} onClear={handleClear}>
|
||||
<FilterPanel
|
||||
activeCount={activeCount}
|
||||
onClear={handleClear}
|
||||
sx={{ '& .MuiButton-root:focus-visible': { outline: 'none' } }}
|
||||
>
|
||||
{/* ── Location ── */}
|
||||
<Box>
|
||||
<Typography variant="labelLg" sx={sectionHeadingSx}>
|
||||
@@ -681,7 +702,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
|
||||
onClick={(e) => setSortAnchor(e.currentTarget)}
|
||||
aria-haspopup="listbox"
|
||||
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 }}>
|
||||
Sort:
|
||||
|
||||
Reference in New Issue
Block a user