Full height Modal Bottom Sheet best practices clarification and doc update request [321877275]

Assigned

Bug

Status Update

No update yet.

Description

da...@gmail.com

created issue #1

Jan 23, 2024 05:27PM

Reviewing the modal bottom sheet spec here I am not clear on exactly what happens in different cases where the modal bottom sheet is full height

https://m3.material.io/components/bottom-sheets/guidelines#22deb8a2-3513-4a2e-aa47-c64875e15e12

It states:

They can be dismissed by:

Using a close affordance within the bottom sheet’s top app bar, if available

Display a close affordance in a full-screen modal bottom sheet.

The above is the link of what to do in that situation but I think there is more clarification needed and maybe there is multiple ways Material recommends to do this?

Is this saying there should be a collapse icon in the app bar as I do not see it. Should we include an x icon in the content of the bottomsheet / replace the drag handle with it?

The full expanded modal bottomsheet on the material sample app maintains a drag handle and does not merge into the top bar (see screenshot)

Screenshot_20240123-112546.png

108 KB

View

Download

Comments

ma...@google.com <ma...@google.com> Jan 23, 2024 09:11PM

Reassigned to ma...@google.com.

se...@google.com <se...@google.com> #2May 15, 2024 07:29PM

Project: platform/frameworks/support
Branch: androidx-master-dev

commit c60f33e229e31ab328ef6b59dab63b264954831c
Author: Alexandre Elias <aelias@google.com>
Date: Fri Jul 10 16:23:09 2020

Semantics no-op cleanups

Partly in response to lmr's broad code review, I did a pass of
superficial API/implementation cleanup. The main changes are:

- I changed each Boolean SemanticsProperty where false is equivalent to
not being present to take "Unit" instead. This is conceptually
clearer: it avoids questions like "can I cancel out a semantics from a
merged child by setting it to false?" Because "property = Unit" looks
weird, I also changed the style of these to "property()".

- I moved the Semantics id generator closer to where it's used, in
SemanticsModifierCore. I made it internal and an AtomicInt.
(Note that integer ids are heavily used in the Android
AccessibilityNodeInfo APIs so I can't simply remove them entirely.)

- I deleted dead code. Some examples include SemanticsHintOverrides,
a public API not connected to anything, and SemanticsPropertyKey
merge() open method which is never called. (In both cases I have
a different plan in mind for accessibility.)

Fixes: 145951226
Fixes: 145955412
Test: existing tests
Relnote: "Single-value semantics properties now use a calling style.
For example, 'semantics { hidden = true }' is now written as:
'semantics { hidden() }'."

Change-Id: Ic1afd12ea22c926babc9662f1804d80b33aa0cfc

M ui/integration-tests/benchmark/src/androidTest/java/androidx/ui/benchmark/test/LayoutNodeModifierBenchmark.kt
M ui/ui-core/api/0.1.0-dev15.txt
M ui/ui-core/api/current.txt
M ui/ui-core/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-core/api/public_plus_experimental_current.txt
M ui/ui-core/api/restricted_0.1.0-dev15.txt
M ui/ui-core/api/restricted_current.txt
M ui/ui-core/src/androidAndroidTest/kotlin/androidx/ui/graphics/vector/VectorTest.kt
M ui/ui-core/src/androidAndroidTest/kotlin/androidx/ui/semantics/SemanticsTests.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidActuals.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidComposeView.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidComposeViewAccessibilityDelegateCompat.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidPopup.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/Expect.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsConfiguration.kt
D ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsHintOverrides.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsModifier.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsNode.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsOwner.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsWrapper.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/semantics/SemanticsProperties.kt
M ui/ui-foundation/api/0.1.0-dev15.txt
M ui/ui-foundation/api/current.txt
M ui/ui-foundation/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-foundation/api/public_plus_experimental_current.txt
M ui/ui-foundation/api/restricted_0.1.0-dev15.txt
M ui/ui-foundation/api/restricted_current.txt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Clickable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Dialog.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Scroller.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/selection/Selectable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/selection/Toggleable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/semantics/FoundationSemanticsProperties.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ButtonTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/CardTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/CheckboxScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/RadioButtonScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ScaffoldTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/SnackbarTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/SurfaceTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ripple/RippleIndicationTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/textfield/TextFieldScreenshotTest.kt
M ui/ui-material/src/main/java/androidx/ui/material/AppBar.kt
M ui/ui-material/src/main/java/androidx/ui/material/TextFieldImpl.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/AssertsTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/CallSemanticsActionTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/ErrorMessagesTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/FindersTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/PrintToStringTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/ScrollToTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/TextActionsTest.kt
M ui/ui-test/src/main/java/androidx/ui/test/Actions.kt
M ui/ui-test/src/main/java/androidx/ui/test/Filters.kt
M ui/ui-text/api/0.1.0-dev15.txt
M ui/ui-text/api/current.txt
M ui/ui-text/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-text/api/public_plus_experimental_current.txt
M ui/ui-text/api/restricted_0.1.0-dev15.txt
M ui/ui-text/api/restricted_current.txt
M ui/ui-text/src/commonMain/kotlin/androidx/ui/text/CoreTextField.kt
M ui/ui-text/src/commonMain/kotlin/androidx/ui/text/TextSemanticsProperties.kt

https://android-review.googlesource.com/1360099

da...@gmail.com <da...@gmail.com> #3May 16, 2024 12:33AM

I don't think it is necessarily a request to provide library implementations of all of the variants, but an example of how to do something like the following

"Using a close affordance within the bottom sheet’s top app bar, if available"

There is also the issue that the fully expanded modal bottomsheet on the material sample app maintains a drag handle and does not merge into the top bar (see screenshot). This implementation might conflict with the guidance in the guidelines that states "Display a close affordance in a full-screen modal bottom sheet." Does a drag handle equate to a close affordance in this scenario?

da...@well.co <da...@well.co> #4May 21, 2024 02:17PM

I am mainly looking for documentation on best practices. Would be great to have clear guidance

se...@google.com <se...@google.com> #5Jul 24, 2024 06:38PM

Reassigned to lu...@google.com.

Passing this onward to Luis for some clarification here. Scrolling through the mio page, for modal bottom sheet specifically, I am not sure if there is a clear asset demonstrating what this could look like, and in turn, additional functionality we could provide to users to help enable fluid closing functionality.

ap...@google.com <ap...@google.com> #6Oct 2, 2024 07:56PM

Project: platform/frameworks/support
Branch: androidx-main
Author: Jose Figueroa <serniebanders@google.com>
Link: https://android-review.googlesource.com/3289201

[Material3][ModalBottomSheet] Update inset handling to move modalbottomsheet content out of status bars

Expand for full commit details

[Material3][ModalBottomSheet] Update inset handling to move modalbottomsheet content out of status bars

This makes content more visible and interactable, per material spec
RelNote: "ModalBottomSheet content now moves content away from status bar."
Bug: 336553431
Bug: 321877275
Bug: 336962418
Bug: 342093067
Test: Manual testing

Change-Id: I5114c66808d155f5db97908520bad2efd93be08e

Files:

M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ModalBottomSheet.kt

Hash: 8e198d739211999723660d6394ba6274730f564a
Date: Tue Oct 01 11:59:21 2024

Issue 321877275