Skip to content

Commit

Permalink
[#638] Update menus documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
paulinea committed Oct 9, 2023
1 parent 2f21f51 commit cdd23a8
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 21 deletions.
29 changes: 20 additions & 9 deletions docs/components/Menus.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ description: Menus appear from a button, action, or other control. It contains a

- [Design System Manager - Menus](https://system.design.orange.com/0c1af118d/p/07a69b-menus/b/862cbb)
- [Material Design - Menus](https://m2.material.io/components/menus)
- Technical documentation soon available

## Accessibility

Expand All @@ -35,7 +34,7 @@ A dropdown menu is a compact way of displaying multiple choices. It appears upon

![Dropdown menu light](images/menu_dropdown_light.png) ![Dropdown menu dark](images/menu_dropdown_dark.png)

> **Jetpack Compose implementation**
#### Jetpack Compose implementation

The library offers an `OdsDropdownMenu` container composable in which you can add `OdsDropdownMenuItem` or `OdsDivider` as shown in the following example:

Expand Down Expand Up @@ -66,17 +65,23 @@ OdsDropdownMenu(
)
```

> **XML implementation**
*Not available yet*
Parameter | Default value | Description
-- | -- | --
`items: List<OdsDropdownMenuItem>` | | Items displayed into the dropdown menu
`expanded: Boolean` | | Controls whether the menu is currently open and visible to the user
`onDismissRequest: () -> Unit` | | Callback invoked when the user requests to dismiss the menu, such as by tapping outside the menu's bounds
`modifier: Modifier` | `Modifier` | `Modifier` applied to the dropdown menu
`offset: DpOffset` | `DpOffset(0.dp, 0.dp)` | Offset added to the menu position
`properties: PopupProperties` | `PopupProperties(focusable = true)` | Properties for further customization of the popup's behavior
{:.table}

### Exposed dropdown menu

Exposed dropdown menus display the currently selected menu item above the menu. This is a combination of a text field and a menu.

![Exposed dropdown menu light](images/menu_exposed_dropdown_light.png) ![Exposed dropdown menu dark](images/menu_exposed_dropdown_dark.png)

> **Jetpack Compose implementation**
#### Jetpack Compose implementation

To display an exposed dropdown menu, you can use the `OdsExposedDropdownMenu` composable. As shown below, you should provide a list of `OdsExposedDropdownMenuItem` corresponding to the items displayed in the menu (with or without icons).

Expand All @@ -99,9 +104,15 @@ OdsExposedDropdownMenu(
)
```

> **XML implementation**
*Not available yet*
Parameter | Default value | Description
-- | -- | --
`label: String` | | Label of the exposed menu text field
`items: List<OdsExposedDropdownMenuItem>` | | Items displayed into the dropdown menu
`selectedItem: MutableState<OdsExposedDropdownMenuItem>` | | Selected item displayed into the text field
`onItemSelectionChange: (OdsExposedDropdownMenuItem) -> Unit` | | Callback invoked when a dropdown menu item is selected. It can be used to get the menu value.
`modifier: Modifier` | `Modifier` | `Modifier` applied to the dropdown menu
`enabled: Boolean` | `true` | Controls the enabled state of the dropdown menu. When `false`, the dropdown menu text field will be neither clickable nor focusable, visually it will appear in the disabled state.
{:.table}

## Component specific tokens

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,11 @@ import com.orange.ods.compose.utilities.extension.enable
*
* @see androidx.compose.material.DropdownMenu
*
* @param items The items of the dropdown menu
* @param expanded Whether the menu is currently open and visible to the user
* @param onDismissRequest Called when the user requests to dismiss the menu, such as by
* tapping outside the menu's bounds
* @param modifier The modifier to be applied to the menu
* @param offset [DpOffset] to be added to the position of the menu
* @param items List of [OdsDropdownMenuItem] displayed into the dropdown menu
* @param expanded Controls whether the menu is currently open and visible to the user
* @param onDismissRequest Callback invoked when the user requests to dismiss the menu, such as by tapping outside the menu's bounds
* @param modifier [Modifier] applied to the dropdown menu
* @param offset [DpOffset] added to the menu position
* @param properties [PopupProperties] for further customization of the popup's behavior
*/
@OdsComposable
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@ import kotlinx.parcelize.Parcelize
* <a href="https://system.design.orange.com/0c1af118d/p/07a69b-menus/b/862cbb" class="external" target="_blank">ODS menus</a>.
*
* @param label The label of the text field
* @param items The [OdsExposedDropdownMenuItem]s displayed in the dropdown menu
* @param selectedItem The selected item displayed in the text field
* @param onItemSelectionChange The action executed when a dropdown menu item is selected. Can be used to get the menu value.
* @param modifier The modifier to be applied to the menu
* @param enabled controls the enabled state of the [OdsExposedDropdownMenu]. When `false`, the dropdown menu text field will
* be neither clickable nor focusable, visually it will appear in the disabled UI state
* @param items List of [OdsExposedDropdownMenuItem] displayed in the dropdown menu
* @param selectedItem Selected item displayed into the text field
* @param onItemSelectionChange Callback invoked when a dropdown menu item is selected. It can be used to get the menu value.
* @param modifier [Modifier] applied to the dropdown menu
* @param enabled Controls the enabled state of the dropdown menu. When `false`, the dropdown menu text field will be neither clickable nor focusable,
* visually it will appear in the disabled state.
*/
@OdsComposable
@OptIn(ExperimentalMaterialApi::class)
Expand Down

0 comments on commit cdd23a8

Please sign in to comment.