mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 13:36:48 +00:00
fix(planner): give the day's optimize button room by dropping its label
Every button in the day's route-tools row hands the day somewhere: show the route, open it in Google Maps, open it in CoMaps, reorder it. Two were already icon-only. Optimize carried a label on flex: 1 with padding '6px 0', which is no horizontal padding at all — survivable until CoMaps added a fifth button, at which point the text sat hard against both edges of its own button. Icon-only now, matching the two beside it. The label stays as the accessible name and the tooltip, so nothing about reaching the action changes, and the row has room for whatever gets added to it next. Closes #1981
This commit is contained in:
@@ -830,7 +830,8 @@ describe('DayPlanSidebar', () => {
|
||||
render(<DayPlanSidebar {...makeDefaultProps({
|
||||
days: [day], places, assignments: assigns, selectedDayId: 10, onReorder,
|
||||
})} />)
|
||||
// Find the Optimize button (contains 'optimize' text)
|
||||
// Found by its accessible name — the button is icon-only since #1981, so
|
||||
// the label lives on aria-label rather than in the button's text.
|
||||
const optimizeBtn = screen.getByRole('button', { name: /optimize/i })
|
||||
await user.click(optimizeBtn)
|
||||
await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, expect.any(Array)))
|
||||
@@ -4201,3 +4202,47 @@ describe('reordering the day plan with a finger (#1616)', () => {
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* The day's route-tools row (#1981).
|
||||
*
|
||||
* Every button in it hands the day somewhere: show the route, open it in Google
|
||||
* Maps, open it in CoMaps, reorder it. Two of those were already icon-only; the
|
||||
* other two carried labels on `flex: 1` with `padding: '6px 0'`, which is no
|
||||
* horizontal padding at all. That was survivable until CoMaps added a fifth
|
||||
* button to the row, at which point the optimize label sat hard against both
|
||||
* edges of its own button.
|
||||
*
|
||||
* It is icon-only now, which is also what keeps the row from crowding again the
|
||||
* next time something is added to it.
|
||||
*/
|
||||
describe('the day route-tools row', () => {
|
||||
const dayWithTwoStops = () => {
|
||||
const places = [
|
||||
buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
|
||||
buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
|
||||
]
|
||||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||||
return {
|
||||
days: [day], places, selectedDayId: 10,
|
||||
assignments: {
|
||||
'10': [
|
||||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
|
||||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
it('keeps the optimize action reachable by name without printing it', () => {
|
||||
render(<DayPlanSidebar {...makeDefaultProps(dayWithTwoStops())} />)
|
||||
const btn = screen.getByRole('button', { name: /optimize/i })
|
||||
// The assertion that pins the change: named, but no visible label.
|
||||
expect(btn).toBeInTheDocument()
|
||||
expect(btn.textContent?.trim()).toBe('')
|
||||
expect(btn.getAttribute('title')).toBeTruthy()
|
||||
})
|
||||
|
||||
/* The click itself is already pinned by FE-PLANNER-DAYPLAN-038 above, which
|
||||
finds the button the same way. */
|
||||
})
|
||||
|
||||
@@ -2609,13 +2609,24 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
>
|
||||
<Compass size={14} strokeWidth={2} />
|
||||
</button>
|
||||
<button onClick={() => handleOptimize(day.id)} className="bg-surface-hover text-content-secondary" style={{
|
||||
flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
|
||||
padding: '6px 0', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500, borderRadius: 8, border: 'none',
|
||||
cursor: 'pointer', fontFamily: 'inherit',
|
||||
}}>
|
||||
<RotateCcw size={12} strokeWidth={2} />
|
||||
{t('dayplan.optimize')}
|
||||
{/* Icon-only, like the two map hand-offs beside it (#1981). It
|
||||
was the one button here carrying a label with no room for
|
||||
it: `flex: 1` alongside `padding: '6px 0'` meant the text
|
||||
sat against both edges as soon as the row filled up, and
|
||||
the row gained a button when CoMaps arrived. The label
|
||||
stays as the accessible name and the tooltip. */}
|
||||
<button
|
||||
onClick={() => handleOptimize(day.id)}
|
||||
aria-label={t('dayplan.optimize')}
|
||||
title={t('dayplan.optimize')}
|
||||
className="bg-surface-hover text-content-secondary"
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
padding: '6px 10px', borderRadius: 8, border: 'none',
|
||||
cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<RotateCcw size={14} strokeWidth={2} />
|
||||
</button>
|
||||
<div style={{ display: 'flex', borderRadius: 8, overflow: 'hidden', border: '1px solid var(--border-faint)', flexShrink: 0 }}>
|
||||
{routeProfileOptions.map(p => {
|
||||
|
||||
Reference in New Issue
Block a user