Repository navigation
feat(ui): give the card sheets the header of the design system - #768
Merged
Merged
Conversation
A shared sheet header: iOS has a glass Cancel pill, the centered title and a prominent action; Android a close icon, the title and a text action. The create card, extra field and card edit sheets use it, so their add button leaves the bottom of the sheet, and the color of a new card moves to its own row. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
farfromrefug
commented
Oct 29, 2026
|
|
||
| <!-- iOS: a glass Cancel pill, the title centered and a prominent Done. Android: a close icon, the title and a Save text button --> | ||
| <gridlayout columns="auto,*,auto" padding="12 16 8 16" {...$$restProps}> | ||
| {#if __IOS__} |
Collaborator
Author
There was a problem hiding this comment.
why the if here? cant we do it with styling? should be a rule to prevent if IOS/ANDROID in templates as much as possible
Collaborator
Author
There was a problem hiding this comment.
Done in 062bce3: no if, the button props are picked in the script (iOS: glass Cancel + contained, Android: close icon + text), the title is styled by css (.sheetHeaderTitle). The rule is in the working agreement (PR 765).
| <uibutton colSpan={2} horizontalAlignment="right" isEnabled={name?.length > 0} row={5} text={lc('add')} variant={__IOS__ ? 'prominentGlass' : 'contained'} on:tap={add} /> | ||
| <gesturerootview bind:this={rootView} rows="auto,auto"> | ||
| <SheetHeader doneEnabled={name?.length > 0} doneText={lc('add')} onCancel={close} onDone={add} title={lc('create')} /> | ||
| <gridlayout columns="*,auto" padding="0 16 16 16" row={1} rows="auto,auto,auto,auto,auto,auto"> |
Collaborator
Author
There was a problem hiding this comment.
this does not follow the ui specs. each item should be wrapped in a ListItem as shown in screenshot
Collaborator
Author
There was a problem hiding this comment.
Done in 062bce3: the create card and extra field sheets are a grouped form, each row a ListItemAutoSize (label left, value right), on the grouped page color like the edit sheet.
…orm ifs The sheet header shares its markup between platforms (buttons props picked in the script, title styled by css). The create card and extra field sheets are a grouped form of rows (label left, value right), each a ListItemAutoSize, like the edit sheet of the design. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
… disabled add readable The create card and extra field sheets keep the header of the design system and use the outlined fields again, the color of a new card is a row of its own on both platforms. The primary action is 45% when disabled and keeps its on-accent text color, so it is no longer red over red on iOS. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The outlined fields take the accent while they have the focus: a css pseudo class set from the focus and blur events on iOS, the stroke colors of the text field on Android. The sheets with fields resize with the keyboard on Android, so the focused field stays visible. The color row has the height of a field. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on the buttons PR (#767).
Summary
SheetHeader: iOS glass Cancel pill, centered title, prominent action (45% when disabled, on-accent text); Android close icon, title, text action (Components > Sheetsanatomy). No platformif: button props are picked in the script, the title is styled by css.Not done here (needs ui-bottomsheet): the transparent sheet appearance, the hairline under the header on scroll, the 32% dim, detents.
Testing
svelte-checkclean.🤖 Generated with Claude Code