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:
2026-04-22 10:53:04 +10:00
parent 4d77d42876
commit 3bf5f72b4f

View File

@@ -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: