Repository navigation
feat(android): DdsSegmentedControl — the web segmented control at its touch size - #149
Merged
Merged
Conversation
…segmented control at its touch size The web SegmentedControl (packages/dds-css/src/segmented-control.css) in Compose: a bg.subtle track with a 1dp border.strong edge and radius md, 2dp inside and between segments; the chosen segment a bg.default face with a 1dp edge, a level-1 shadow and weight 600. One height, the web's touch height: a 50dp track (48 of touch + the edge), 44dp faces, 56 of touch in large text mode. Content width (default) holds the bold width in every state so choosing never moves a neighbour, and too many segments scroll inside the track; fullWidth shares the width equally (left-over pixels spread so the last segment ends on the inner edge) and ellipsizes a long label. Read as a radio group. label / contentDescription, error (edge color + a spoken sentence), readOnly, enabled, and enabled per segment. First consumer: Qooroo's card-type toggle, whose in-app DdsStyleSegmented copy this replaces.
VERSION_NAME 0.8.0; the changelog, guide §10/§12, both READMEs and the backlog name 0.8.0. Checked on SM-F971N before release: SegmentedOnDeviceTest 20/20, and the catalog's Segmented control section looked at in light and dark at font scale 1.3.
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.
What
DdsSegmentedControl+DdsSegmentfor DDS for Android: one choice among a few visible options (a view switch, a filter, a type such as Person / Business). It is the web SegmentedControl (packages/dds-css/src/segmented-control.css,packages/dds-react|solid|vue/src/segmented-control.*) at the size the web uses on a touch screen.bg.subtle, 1dpborder.strongedge,radius.md, 2dp inside it and 2dp between segments.radius.sm,labeltype,text.secondary. Chosen:bg.defaultface, 1dpborder.strongedge, level-1 shadow (DdsElevation.level1),text.primary, weight 600.pointer: coarsethe web also gives both a 50 track, so Android has no size argument.WeightStableLabel), so choosing never moves a neighbour; too many segments scroll inside the track.fullWidth = trueshares the width equally (the pixels an equal split leaves over go to the first segments, so the last one ends on the inner edge) and ends a long label in an ellipsis. Labels never wrap.border.focusline inside the segment that replaces the chosen edge,enabled = falsedims the whole track to 0.45,DdsSegment(enabled = false)dims one segment,readOnlycan be focused and read but not changed,errorturns the track edgestatus.dangerand shows a spoken sentence under it (never the color alone, same line asDdsTextField).selectableGroup); each segment is aRole.RadioButtonwith its selected state; the unseen bold copy is not read.contentDescriptionnames the group when there is no visiblelabel.segmentsmust be non-empty with unique values (elseIllegalArgumentException); aselectedthat matches none chooses none;onSelectis not called for the already chosen segment or whilereadOnly.Catalog: a "Segmented control" section on the Parts tab (full width, content width with a disabled segment, read-only, disabled, error).
Docs: guide §12 (
docs/mobile-native.md+.ko.md),android/CHANGELOG.md+.ko.md, both READMEs, backlog.One decision for the owner: guide §10 no. 5 drops card and menu shadows on Android. This face keeps the web's level-1 shadow (the segmented look the owner picked); the 1dp edge sets it apart in the dark theme, where the shadow barely shows. Recorded as §10 no. 20, not yet confirmed.
First consumer
Qooroo's card-type toggle (개인 / 비즈니스,
jlc488/qooroo, branchredesign/t6-editor) ships a local Compose copy,DdsStyleSegmented, written to the same spec. This replaces it.Verified locally
./gradlew testDebugUnitTest :dds-tokens:lintRelease :dds-compose:lintRelease :dds-compose-testing:lintRelease :dds-tokens:assembleRelease :dds-compose:assembleRelease :dds-compose-testing:assembleRelease :catalog:assembleDebug :dds-compose:assembleDebugAndroidTeston the final commit — BUILD SUCCESSFUL; every unit suite 0 failures / 0 errors, newSegmentedTest4/4.node --test tests/android-tokens.test.mjs13/13, token/icon--checkandcheck-android-sources.mjsclean.SegmentedOnDeviceTest20/20 (failures="0" errors="0" skipped="0") — sizes, insets, no shift on choosing, full-width shares and end edge, scroll and no wrap, pixel checks of track edge / track / chosen face / chosen edge in light, dark and error, disabled opacity, screen-reader semantics, callbacks, read-only, disabled.Release
The owner asked for this to ship: the second commit makes it 0.8.0 (
VERSION_NAME, changelog, guide, READMEs, backlog). After merge,android-v0.8.0goes on the merge commit.