From 2aced855c364baa9a8fd4cdc9ce855a297d6adc0 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Fri, 13 Oct 2023 17:06:14 +0200 Subject: [PATCH] [#638] Review: Add missing titles in summaries and remove empty sections --- docs/components/AppBarsBottom.md | 12 +- docs/components/AppBarsTop.md | 17 +-- docs/components/Banners.md | 11 +- docs/components/Buttons.md | 61 ++++------ docs/components/Cards.md | 37 ++----- docs/components/Checkboxes.md | 6 +- docs/components/Chips.md | 25 +++-- docs/components/Dialogs.md | 9 +- docs/components/FloatingActionButtons.md | 18 +-- docs/components/ImageTile.md | 7 +- docs/components/Lists.md | 14 +-- docs/components/Menus.md | 13 +-- docs/components/NavigationBottom.md | 7 +- docs/components/NavigationDrawers.md | 6 +- docs/components/ProgressIndicators.md | 13 +-- docs/components/RadioButtons.md | 7 +- docs/components/SheetsBottom.md | 6 +- docs/components/Sliders.md | 25 +++-- docs/components/Snackbars.md | 6 +- docs/components/Switches.md | 6 +- docs/components/Tabs.md | 135 +++++++++++------------ docs/components/TextFields.md | 124 ++++++++++----------- 22 files changed, 239 insertions(+), 326 deletions(-) diff --git a/docs/components/AppBarsBottom.md b/docs/components/AppBarsBottom.md index 46bb931c6..8c7367f02 100644 --- a/docs/components/AppBarsBottom.md +++ b/docs/components/AppBarsBottom.md @@ -8,8 +8,6 @@ description: A bottom app bar displays navigation and key actions at the bottom * [Specifications references](#specifications-references) * [Accessibility](#accessibility) -* [Implementation](#implementation) -* [Component specific tokens](#component-specific-tokens) --- @@ -30,12 +28,4 @@ action performs. While optional, their use is strongly encouraged. When using icons for navigation icons, action items and other elements of bottom app bars, you should set a content description on them so that screen readers -like TalkBack are able to announce their purpose or action, if any. - -## Implementation - -_Soon available_ - -## Component specific tokens - -_Soon available_ +like TalkBack are able to announce their purpose or action, if any. \ No newline at end of file diff --git a/docs/components/AppBarsTop.md b/docs/components/AppBarsTop.md index 2d4faba14..1024be842 100644 --- a/docs/components/AppBarsTop.md +++ b/docs/components/AppBarsTop.md @@ -10,8 +10,11 @@ description: Top app bars display information and actions relating to the curren * [Accessibility](#accessibility) * [Variants](#variants) * [Regular top app bar](#regular-top-app-bar) + * [Jetpack Compose](#jetpack-compose) + * [OdsTopAppBar API](#odstopappbar-api) * [Large top app bar](#large-top-app-bar) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose-1) + * [OdsLargeTopAppBar API](#odslargetopappbar-api) --- @@ -32,7 +35,7 @@ action performs. ### Regular top app bar -#### Jetpack Compose implementation +#### Jetpack Compose Add `OdsTopAppBar` composable to your Scaffold `topBar`. Here is an example of use: @@ -77,13 +80,9 @@ Parameter | Default value | Description `elevated: Boolean` | `true` | Controls the elevation of the top app bar: `true` to set an elevation to the top app bar (a shadow is displayed below), `false` otherwise {:.table} -#### XML implementation - -_Not available_ - ### Large top app bar -#### Jetpack Compose implementation +#### Jetpack Compose First, you have to add this line in your application `build.gradle.kts` file cause this component relies on Compose Material 3 implementation: @@ -156,7 +155,3 @@ Parameter | Default value | Description `overflowMenuActions: List` | `emptyList()` | Actions displayed in the overflow menu `scrollBehavior: TopAppBarScrollBehavior?` | `null` | `TopAppBarScrollBehavior` attached to the top app bar {:.table} - -## Component specific tokens - -_Soon available_ diff --git a/docs/components/Banners.md b/docs/components/Banners.md index e528c13a4..8db1347dc 100644 --- a/docs/components/Banners.md +++ b/docs/components/Banners.md @@ -15,7 +15,8 @@ Only one banner should be shown at a time * [Specifications references](#specifications-references) * [Accessibility](#accessibility) * [Implementation](#implementation) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose) + * [OdsBanner API](#odsbanner-api) --- @@ -59,11 +60,3 @@ Parameter | Default value | Description `image: OdsBannerImage?` | `null` | Image displayed in the banner in a circle shape `secondButton: OdsBannerButton?` | `null` | Secondary button displayed into the banner next to the primary one {:.table} - -### XML - -_Soon available_ - -## Component specific tokens - -_Soon available_ \ No newline at end of file diff --git a/docs/components/Buttons.md b/docs/components/Buttons.md index b1c4ac974..893b847c7 100644 --- a/docs/components/Buttons.md +++ b/docs/components/Buttons.md @@ -10,13 +10,26 @@ description: Buttons allow users to take actions, and make choices, with a singl * [Accessibility](#accessibility) * [Variants](#variants) * [Contained button](#contained-button) + * [Jetpack Compose](#jetpack-compose) + * [OdsButton API](#odsbutton-api) * [Text button](#text-button) + * [Jetpack Compose](#jetpack-compose-1) + * [OdsTextButton API](#odstextbutton-api) * [Outlined button](#outlined-button) + * [Jetpack Compose](#jetpack-compose-2) + * [OdsOutlinedButton API](#odsoutlinedbutton-api) * [Text toggle buttons group](#text-toggle-buttons-group) + * [Jetpack Compose](#jetpack-compose-3) + * [OdsTextToggleButtonsRow API](#odstexttogglebuttonsrow-api) * [Icon button](#icon-button) + * [Jetpack Compose](#jetpack-compose-4) + * [OdsIconButton API](#odsiconbutton-api) * [Icon toggle button](#icon-toggle-button) + * [Jetpack Compose](#jetpack-compose-5) + * [OdsIconToggleButton API](#odsicontogglebutton-api) * [Icon toggle buttons group](#icon-toggle-buttons-group) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose-6) + * [OdsIconToggleButtonsRow API](#odsicontogglebuttonsrow-api) --- @@ -50,7 +63,7 @@ Functional negative: ![ContainedButton negative light](images/button_contained_negative_light.png) ![ContainedButton negative dark](images/button_contained_negative_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose Use the `OdsButton` composable: @@ -89,10 +102,6 @@ Parameter | Default value | Description `displaySurface: OdsDisplaySurface` | `OdsDisplaySurface.Default` | `OdsDisplaySurface` applied to the button. It allows to force the button display on light or dark surface. By default, the appearance applied is based on the system night mode value. {:.table} -#### XML implementation - -_Soon available_ - ### Text button Text buttons are typically used for less-pronounced actions, including those located in dialogs and @@ -100,7 +109,7 @@ cards. In cards, text buttons help maintain an emphasis on card content. ![TextButton](images/button_text_light.png) ![TextButton dark](images/button_text_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose Use the `OdsTextButton` composable: @@ -127,10 +136,6 @@ Parameter | Default value | Description `displaySurface: OdsDisplaySurface` | `OdsDisplaySurface.Default` | `OdsDisplaySurface` applied to the button. It allows to force the button display on light or dark surface. By default, the appearance applied is based on the system night mode value. {:.table} -#### XML implementation - -_Soon available_ - ### Outlined button Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t @@ -138,7 +143,7 @@ the primary action in an app. ![ButtonOutlined](images/button_outlined_light.png) ![ButtonOutlined dark](images/button_outlined_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose Use the `OdsOutlinedButton` composable: @@ -163,10 +168,6 @@ Parameter | Default value | Description `displaySurface: OdsDisplaySurface` | `OdsDisplaySurface.Default` | `OdsDisplaySurface` applied to the button. It allows to force the button display on light or dark surface. By default, the appearance applied is based on the system night mode value. {:.table} -#### XML implementation - -_Soon available_ - ### Text toggle buttons group A group of text toggle buttons. Only one option in a group of toggle buttons can be selected and active at a time. @@ -174,7 +175,7 @@ Selecting one option deselects any other. ![Button text toggle group light](images/button_text_toggle_group_light.png) ![Button text toggle group dark](images/button_text_toggle_group_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose Use the `OdsTextToggleButtonsRow` composable: @@ -204,10 +205,6 @@ Parameter | Default value | Description `displaySurface: OdsDisplaySurface` | `OdsDisplaySurface.Default` | `OdsDisplaySurface` applied to the button. It allows to force the button display on light or dark surface. By default, the appearance applied is based on the system night mode value. {:.table} -#### XML implementation - -_Soon available_ - ### Icon button An icon button is a clickable icon, used to represent actions. This component is typically used @@ -215,7 +212,7 @@ inside an App Bar for the navigation icon / actions. ![OdsIconButton](images/button_icon_light.png) ![OdsIconButton dark](images/button_icon_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose Use the `OdsIconButton` composable: @@ -240,10 +237,6 @@ Parameter | Default value | Description `displaySurface: OdsDisplaySurface` | `OdsDisplaySurface.Default` | `OdsDisplaySurface` to be applied to the button. It allows to force the button display on light or dark surface. By default, the appearance applied is based on the system night mode value. {:.table} -#### XML implementation - -_Soon available_ - ### Icon toggle button An icon button with two states, for icons that can be toggled 'on' and 'off', such as a bookmark @@ -251,7 +244,7 @@ icon, or a navigation icon that opens a drawer. ![Button icon toggle light](images/button_icon_toggle_light.png) ![Button icon toggle dark](images/button_icon_toggle_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose Use the `OdsIconToggleButton` composable: @@ -280,10 +273,6 @@ Parameter | Default value | Description `displaySurface: OdsDisplaySurface` | `OdsDisplaySurface.Default` | `OdsDisplaySurface` applied to the button. It allows to force the button display on light or dark surface. By default, the appearance applied is based on the system night mode value. {:.table} -#### XML implementation - -_Soon available_ - ### Icon toggle buttons group A group of toggle buttons. Only one option in a group of toggle buttons can be selected and active @@ -292,7 +281,7 @@ Selecting one option deselects any other. ![Button icon toggle group light](images/button_icon_toggle_group_light.png) ![Button icon toggle group dark](images/button_icon_toggle_group_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose Use the `OdsIconToggleButtonsRow` composable: @@ -325,11 +314,3 @@ Parameter | Default value | Description `modifier: Modifier` | `Modifier` | `Modifier` applied to the toggle buttons group `displaySurface: OdsDisplaySurface` | `OdsDisplaySurface.Default` | `OdsDisplaySurface` applied to the button. It allows to force the button display on light or dark surface. By default, the appearance applied is based on the system night mode value. {:.table} - -#### XML implementation - -_Soon available_ - -## Component specific tokens - -_Soon available_ diff --git a/docs/components/Cards.md b/docs/components/Cards.md index 359d81de4..dec684134 100644 --- a/docs/components/Cards.md +++ b/docs/components/Cards.md @@ -10,10 +10,17 @@ description: Cards contain content and actions about a single subject. * [Accessibility](#accessibility) * [Variants](#variants) * [Vertical image first card](#vertical-image-first-card) + * [Jetpack Compose](#jetpack-compose) + * [OdsVerticalImageFirstCard API](#odsverticalimagefirstcard-api) * [Vertical header first card](#vertical-header-first-card) + * [Jetpack Compose](#jetpack-compose-1) + * [OdsVerticalHeaderFirstCard API](#odsverticalheaderfirstcard-api) * [Small card](#small-card) + * [Jetpack Compose](#jetpack-compose-2) + * [OdsSmallCard API](#odssmallcard-api) * [Horizontal card](#horizontal-card) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose-3) + * [OdsHorizontalCard API](#odshorizontalcard-api) --- @@ -39,7 +46,7 @@ This is a full width card containing elements arranged vertically with an image ![Vertical image first card light](images/card_vertical_image_first_light.png) ![Vertical image first card dark](images/card_vertical_image_first_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose In your composable screen you can use `OdsVerticalImageFirstCard` composable: @@ -75,17 +82,13 @@ Parameter | Default value | Description `onClick: (() -> Unit)?` | `null` | Callback invoked on card click {:.table} -#### XML implementation - -_Soon available_ - ### Vertical header first card This is a full width card containing elements arranged vertically with a header (thumbnail, title & subtitle) as first element. ![Vertical header first card light](images/card_vertical_header_first_light.png) ![Vertical header first card dark](images/card_vertical_header_first_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose In your composable screen you can use `OdsVerticalHeaderFirstCard` composable: @@ -126,17 +129,13 @@ Parameter | Default value | Description `onClick: (() -> Unit)?` | `null` | Callback called on card click {:.table} -#### XML implementation - -_Soon available_ - ### Small card This is a small card which takes the half screen width. ![CardSmall](images/card_small_light.png) ![CardSmall dark](images/card_small_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose You can add an `OdsSmallCard` composable in your screen to add a small card: @@ -176,17 +175,13 @@ Parameter | Default value | Description `onClick: (() -> Unit)?` | `null` | Callback invoked on card click {:.table} -#### XML implementation - -_Soon available_ - ### Horizontal card This is a full screen width card with an image on the side. The image can be displayed on the left or on the right. ![Horizontal card light](images/card_horizontal_light.png) ![Horizontal card dark](images/card_horizontal_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose In your screen you can use `OdsHorizontalCard` composable: @@ -225,11 +220,3 @@ Parameter | Default value | Description `divider: Boolean` | `true` | Controls the divider display. If `true`, it will be displayed between the card content and the action buttons. `onClick: (() -> Unit)?` | `null` | Callback invoked on card click {:.table} - -#### XML implementation - -_Soon available_ - -## Component specific tokens - -_Soon available_ diff --git a/docs/components/Checkboxes.md b/docs/components/Checkboxes.md index 38fe05d84..e15648bf3 100644 --- a/docs/components/Checkboxes.md +++ b/docs/components/Checkboxes.md @@ -15,7 +15,8 @@ Use checkboxes to: * [Specifications references](#specifications-references) * [Accessibility](#accessibility) * [Implementation](#implementation) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose) + * [OdsCheckbox API](#odscheckbox-api) --- @@ -59,6 +60,3 @@ Parameter | Default value | Description `enabled: Boolean` | `true` | Controls enabled state of the checkbox. When `false`, this checkbox will not be clickable. {:.table} -## Component specific tokens - -_Soon available_ diff --git a/docs/components/Chips.md b/docs/components/Chips.md index f8978b1a1..5d5649c65 100644 --- a/docs/components/Chips.md +++ b/docs/components/Chips.md @@ -10,13 +10,18 @@ description: Chips are compact elements that represent an input, attribute, or a * [Accessibility](#accessibility) * [Variants](#variants) * [Input chip](#input-chip) + * [Jetpack Compose](#jetpack-compose) + * [OdsChip API](#odschip-api) * [Choice chip](#choice-chip) + * [Jetpack Compose](#jetpack-compose-1) (use [OdsChip API](#odschip-api)) * [Filter chip](#filter-chip) + * [Jetpack Compose](#jetpack-compose-2) + * [OdsFilterChip API](#odsfilterchip-api) * [Action chip](#action-chip) -* [OdsChip API](#odschip-api) -* [Related components](#related-components) + * [Jetpack Compose](#jetpack-compose-3) (use [OdsChip API](#odschip-api)) +* [Extras](#extras) * [Choice chips flow row](#choice-chips-flow-row) -* [Component specific tokens](#component-specific-tokens) + * [OdsChoiceChipsFlowRow API](#odschoicechipsflowrow-api) --- @@ -45,7 +50,7 @@ that input by converting text into chips. ![Light outlined input chip](images/chips_input_outlined_light.png) ![Dark outlined input chip](images/chips_input_outlined_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose Use the `OdsChip` composable. Note that the chip style is outlined or filled according to your OdsTheme component configuration, @@ -97,7 +102,7 @@ toggle buttons, radio buttons, and single select menus. ![Light outlined choice chips](images/chips_choice_outlined_light.png) ![Dark outlined choice chips](images/chips_choice_outlined_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose Use the `OdsChip` composable. Note that the chip style is outlined or filled according to your OdsTheme component configuration, @@ -126,7 +131,7 @@ toggle buttons or checkboxes. ![Light filter chips with avatar](images/chips_filter_avatar_light.png) ![Dark filter chips with avatar](images/chips_filter_avatar_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose Use the `OdsFilterChip` composable. Note that the chip style is outlined or filled according to your OdsTheme component configuration, @@ -170,7 +175,7 @@ An alternative to action chips are buttons, which should appear persistently and ![Light outlined action chip](images/chips_action_outlined_light.png) ![Dark outlined action chip](images/chips_action_outlined_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose Use the `OdsChip` composable. Note that the chip style is outlined or filled according to your OdsTheme component configuration, @@ -192,7 +197,7 @@ OdsChip( Use the [OdsChip API](#odschip-api). -## Related components +## Extras The ODS library provides some chips related components to facilitate the implementation of chips groups. @@ -229,7 +234,3 @@ Parameter | Default value | Description `modifier: Modifier` | `Modifier` | `Modifier` applied to the chips flow row `chips: List>` | | Chips displayed into the flow row {:.table} - -## Component specific tokens - -_Soon available_ diff --git a/docs/components/Dialogs.md b/docs/components/Dialogs.md index eb3b3e892..f8c7d642a 100644 --- a/docs/components/Dialogs.md +++ b/docs/components/Dialogs.md @@ -17,7 +17,8 @@ Dialogs are purposefully interruptive, so they should be used sparingly. * [Accessibility](#accessibility) * [Variants](#variants) * [Alert dialog](#alert-dialog) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose) + * [OdsAlertDialog API](#odsalertdialog-api) --- @@ -38,7 +39,7 @@ Alert dialogs interrupt users with urgent information, details, or actions. ![Alert dialog light](images/dialog_alert_light.png) ![Alert dialog dark](images/dialog_alert_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose To display an alert dialog in your composable screen, you can use: @@ -65,7 +66,3 @@ Parameter | Default value | Description `title: String?` | `null` | Title displayed into the dialog which should specify the purpose of the dialog. The title is not mandatory, because there may be sufficient information inside the `text`. `properties: DialogProperties` | `DialogProperties()` | Typically platform specific properties to further configure the dialog {:.table} - -## Component specific tokens - -_Soon available_ diff --git a/docs/components/FloatingActionButtons.md b/docs/components/FloatingActionButtons.md index 23c7f0fb2..594b70894 100644 --- a/docs/components/FloatingActionButtons.md +++ b/docs/components/FloatingActionButtons.md @@ -10,15 +10,19 @@ description: A floating action button (FAB) represents the primary action of a s * [Accessibility](#accessibility) * [Variants](#variants) * [Regular FAB](#regular-fab) + * [Jetpack Compose](#jetpack-compose) + * [OdsFloatingActionButton API](#odsfloatingactionbutton-api) * [Mini FAB](#mini-fab) + * [Jetpack Compose](#jetpack-compose-1) (use [OdsFloatingActionButton API](#odsfloatingactionbutton-api)) * [Extended FAB](#extended-fab) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose-2) + * [OdsExtendedFloatingActionButton API](#odsextendedfloatingactionbutton-api) --- ## Specifications references -- Design System Manager - Floating Action Button (soon available) +- [Design System Manager - Floating Action Button](https://system.design.orange.com/0c1af118d/p/577022-buttons-fab/b/101b2a) - [Material Design - Buttons: floating action button](https://material.io/components/buttons-floating-action-button/) ## Accessibility @@ -39,7 +43,7 @@ Regular FABs are FABs that are not expanded and are a regular size. ![FAB light](images/fab_light.png) ![FAB dark](images/fab_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose To display a regular Floating Action Button in your composable screen, use `OdsFloatingActionButton`: @@ -73,7 +77,7 @@ Mini FABs can also be used to create visual continuity with other screen element ![FAB mini light](images/fab_mini_light.png) ![FAB mini dark](images/fab_mini_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose To display a mini FAB in your composable screen use `OdsFloatingActionButton` @@ -99,7 +103,7 @@ The extended FAB is wider, and it includes a text label. ![FAB extended full width light](images/fab_extended_full_width_light.png) ![FAB extended full width dark](images/fab_extended_full_width_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose To display an extended FAB, use `OdsExtendedFloatingActionButton`: @@ -121,7 +125,3 @@ Parameter | Default value | Description `text: String` | | Text displayed into the FAB `modifier: Modifier` | `Modifier` | `Modifier` applied to the FAB {:.table} - -## Component specific tokens - -_Soon available_ diff --git a/docs/components/ImageTile.md b/docs/components/ImageTile.md index cd460a0c7..4e53837bd 100644 --- a/docs/components/ImageTile.md +++ b/docs/components/ImageTile.md @@ -9,7 +9,8 @@ description: * [Specifications references](#specifications-references) * [Accessibility](#accessibility) * [Implementation](#implementation) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose) + * [OdsImageTile API](#odsimagetile-api) --- @@ -66,7 +67,3 @@ Parameter | Default value | Description `icon: OdsImageTileIconToggleButton` | `null` | Clickable icon displayed next to the `title` `onClick: (() -> Unit)?` | `null` | Callback invoked on tile click {:.table} - -## Component specific tokens - -_Soon available_ \ No newline at end of file diff --git a/docs/components/Lists.md b/docs/components/Lists.md index 4ea9f6579..b169a915a 100644 --- a/docs/components/Lists.md +++ b/docs/components/Lists.md @@ -10,9 +10,11 @@ description: Lists are continuous, vertical indexes of text or images. * [Accessibility](#accessibility) * [Variants](#variants) * [Single-line list](#single-line-list) + * [Jetpack Compose](#jetpack-compose) * [Two-line list](#two-line-list) + * [Jetpack Compose](#jetpack-compose-1) * [Three-line list](#three-line-list) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose-2) --- @@ -43,7 +45,7 @@ Here are two examples: Please note that there is no start padding with wide images. -#### Jetpack Compose implementation +#### Jetpack Compose The library offers the `OdsListItem` composable to display lists items. @@ -93,7 +95,7 @@ Here are two examples: ![Lists two-line](images/lists_two_line_light.png) ![Lists two-line dark](images/lists_two_line_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose The only difference with the single-line implementation is that the `secondaryText` property of `OdsListItem` is not null. @@ -127,7 +129,7 @@ Here are two examples: ![Lists three-line](images/lists_three_line_light.png) ![Lists three-line dark](images/lists_three_line_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose The only difference with the two-line implementation is that the `singleLineSecondaryText` property of `OdsListItem` is `false`. @@ -144,7 +146,3 @@ OdsListItem( trailing = OdsCaptionTrailing(text = "Caption") ) ``` - -## Component specific tokens - -_Soon available_ diff --git a/docs/components/Menus.md b/docs/components/Menus.md index 0eedf2a1c..acd7c58cc 100644 --- a/docs/components/Menus.md +++ b/docs/components/Menus.md @@ -10,8 +10,11 @@ description: Menus appear from a button, action, or other control. It contains a * [Accessibility](#accessibility) * [Variants](#variants) * [Dropdown menu](#dropdown-menu) + * [Jetpack Compose](#jetpack-compose) + * [OdsDropdownMenu API](#odsdropdownmenu-api) * [Exposed dropdown menu](#exposed-dropdown-menu) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose-1) + * [OdsExposedDropdownMenu API](#odsexposeddropdownmenu-api) --- @@ -34,7 +37,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 The library offers an `OdsDropdownMenu` container composable in which you can add `OdsDropdownMenuItem` or `OdsDivider` as shown in the following example: @@ -79,7 +82,7 @@ Exposed dropdown menus display the currently selected menu item above the 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 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). @@ -113,7 +116,3 @@ Parameter | Default value | Description `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 - -_Soon available_ diff --git a/docs/components/NavigationBottom.md b/docs/components/NavigationBottom.md index 5e47e8af6..6eb962d4e 100644 --- a/docs/components/NavigationBottom.md +++ b/docs/components/NavigationBottom.md @@ -9,7 +9,8 @@ description: Bottom navigation bars allow movement between primary destinations * [Specifications references](#specifications-references) * [Accessibility](#accessibility) * [Implementation](#implementation) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose) + * [OdsBottomNavigation API](#odsbottomnavigation-api) --- @@ -77,7 +78,3 @@ Parameter | Default value | Description `modifier: Modifier` | `Modifier` | `Modifier` applied to the bottom navigation `items: List` | | Items displayed into the bottom navigation {:.table} - -## Component specific tokens - -_Soon available_ diff --git a/docs/components/NavigationDrawers.md b/docs/components/NavigationDrawers.md index b7948f6e9..d9095bf5f 100644 --- a/docs/components/NavigationDrawers.md +++ b/docs/components/NavigationDrawers.md @@ -9,7 +9,7 @@ description: The navigation drawer slides in from the left when the nav icon is * [Specifications references](#specifications-references) * [Accessibility](#accessibility) * [Implementation](#implementation) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose) --- @@ -61,7 +61,3 @@ OdsModalDrawer( // Put here the rest of the UI content } ``` - -## Component specific tokens - -_Soon available_ \ No newline at end of file diff --git a/docs/components/ProgressIndicators.md b/docs/components/ProgressIndicators.md index 068057ac7..6c0c460e1 100644 --- a/docs/components/ProgressIndicators.md +++ b/docs/components/ProgressIndicators.md @@ -10,8 +10,11 @@ description: Progress indicators express an unspecified wait time or display the * [Accessibility](#accessibility) * [Variants](#variants) * [Progress bar](#progress-bar) + * [Jetpack Compose](#jetpack-compose) + * [OdsLinearProgressIndicator API](#odslinearprogressindicator-api) * [Activity indicator](#activity-indicator) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose-1) + * [OdsCircularProgressIndicator API](#odscircularprogressindicator-api) --- @@ -43,7 +46,7 @@ Linear progress indicators support both determinate and indeterminate operations ![Progress bar dark](images/progress_linear_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose You can use the composable `OdsLinearProgressIndicator` like this: @@ -100,7 +103,7 @@ processes. ![Activity indicator light](images/progress_circular_light.png) ![Activity indicator dark](images/progress_circular_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose You can use the `OdsCircularProgressIndicator` composable like this: @@ -129,7 +132,3 @@ Parameter | Default value | Description `progress: Float?` | `null` | Progress indicator value where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range. If set to `null`, the progress indicator is indeterminate. `label: String?` | `null` | Label displayed below the circular progress {:.table} - -## Component specific tokens - -_Soon available_ diff --git a/docs/components/RadioButtons.md b/docs/components/RadioButtons.md index d2520bee5..e3a2e3d68 100644 --- a/docs/components/RadioButtons.md +++ b/docs/components/RadioButtons.md @@ -16,7 +16,8 @@ Use radio buttons to: * [Specifications references](#specifications-references) * [Accessibility](#accessibility) * [Implementation](#implementation) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose) + * [OdsRadioButton API](#odsradiobutton-api) --- @@ -59,7 +60,3 @@ Parameter | Default value | Description `modifier: Modifier` | `Modifier` | `Modifier` applied to the radio button `enabled: Boolean` | `true` | Controls the enabled state of the radio button. When `false`, the button will not be selectable and appears disabled. {:.table} - -## Component specific tokens - -_Soon available_ diff --git a/docs/components/SheetsBottom.md b/docs/components/SheetsBottom.md index 01b16f258..9fe68d932 100644 --- a/docs/components/SheetsBottom.md +++ b/docs/components/SheetsBottom.md @@ -14,7 +14,7 @@ Use Sheets bottom to: * [Specifications references](#specifications-references) * [Accessibility](#accessibility) * [Implementation](#implementation) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose) --- @@ -53,7 +53,3 @@ OdsBottomSheetScaffold( } ) ``` - -## Component specific tokens - -_Soon available_ \ No newline at end of file diff --git a/docs/components/Sliders.md b/docs/components/Sliders.md index f624f2156..39bd1d4a0 100644 --- a/docs/components/Sliders.md +++ b/docs/components/Sliders.md @@ -10,10 +10,15 @@ description: Sliders allow users to make selections from a range of values. * [Accessibility](#accessibility) * [Variants](#variants) * [Continuous slider](#continuous-slider) + * [Jetpack Compose](#jetpack-compose) + * [OdsSlider API](#odsslider-api) * [Continuous lockups slider](#continuous-lockups-slider) + * [Jetpack Compose](#jetpack-compose-1) + * [OdsSliderLockups API](#odssliderlockups-api) * [Discrete slider](#discrete-slider) + * [Jetpack Compose](#jetpack-compose-2) (use [OdsSlider API](#odsslider-api)) * [Discrete lockups slider](#discrete-lockups-slider) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose-3) (use [OdsSliderLockups API](#odssliderlockups-api)) --- @@ -39,7 +44,7 @@ With icons: ![Continuous slider with icons](images/slider_continuous_with_icon_light.png) ![Continuous slider with icons dark](images/slider_continuous_with_icon_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose In your composable screen you can use: @@ -92,7 +97,7 @@ With icons: ![Continuous lockups slider with icons](images/slider_continuous_lockups_with_icon_light.png) ![Continuous lockups slider with icons dark](images/slider_continuous_lockups_with_icon_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose In your composable screen you can use: @@ -122,6 +127,8 @@ OdsSliderLockups( ) ``` +##### OdsSliderLockups API + Parameter | Default value | Description -- | -- | -- `value: Float` | | Current value of the slider. If outside of `valueRange` provided, value will be coerced to this range. @@ -146,7 +153,7 @@ With icons: ![Discrete slider with icon](images/slider_discrete_with_icon_light.png) ![Discrete slider with icon dark](images/slider_discrete_with_icon_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose In your composable screen you can use: @@ -178,7 +185,7 @@ OdsSlider( ) ``` -Use the same API as the [Continuous slider](#continuous-slider). +Use [OdsSlider API](#odsslider-api). ### Discrete lockups slider @@ -188,7 +195,7 @@ With icons: ![Discrete lockups slider with icons](images/slider_discrete_lockups_with_icon_light.png) ![Discrete lockups slider with icons dark](images/slider_discrete_lockups_with_icon_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose In your composable screen you can use: @@ -220,8 +227,4 @@ OdsSliderLockups( ) ``` -Use the same API as the [Continuous lockups slider](#continuous-lockups-slider). - -## Component specific tokens - -_Soon available_ +Use [OdsSliderLockups API](#odssliderlockups-api). diff --git a/docs/components/Snackbars.md b/docs/components/Snackbars.md index a25f5d16b..b702fafde 100644 --- a/docs/components/Snackbars.md +++ b/docs/components/Snackbars.md @@ -18,7 +18,7 @@ action that was just taken, or retrying an action that had failed. * [Specifications references](#specifications-references) * [Accessibility](#accessibility) * [Implementation](#implementation) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose) --- @@ -80,7 +80,3 @@ Scaffold( ) } ``` - -## Component specific tokens - -_Soon available_ diff --git a/docs/components/Switches.md b/docs/components/Switches.md index 0d0831ebe..357673ca6 100644 --- a/docs/components/Switches.md +++ b/docs/components/Switches.md @@ -12,7 +12,8 @@ way to adjust settings on mobile. * [Specifications references](#specifications-references) * [Accessibility](#accessibility) * [Implementation](#implementation) -* [Component specific tokens](#component-specific-tokens) + * [Jetpack Compose](#jetpack-compose) + * [OdsSwitch API](#odsswitch-api) --- @@ -56,6 +57,3 @@ Parameter | Default value | Description `enabled: Boolean` | `true` | Controls the enabled state of the switch. When `false`, the switch will not be checkable and appears disabled. {:.table} -## Component specific tokens - -_Soon available_ diff --git a/docs/components/Tabs.md b/docs/components/Tabs.md index bb26d9dfe..2465d0bb8 100644 --- a/docs/components/Tabs.md +++ b/docs/components/Tabs.md @@ -9,9 +9,10 @@ description: Tabs organize content across different screens, data sets, and othe * [Specifications references](#specifications-references) * [Accessibility](#accessibility) * [Variants](#variants) - * [Fixed tabs](#fixed-tabs) - * [Scrollable tabs](#scrollable-tabs) -* [Component specific tokens](#component-specific-tokens) + * [Fixed tabs](#fixed-tabs) + * [Jetpack Compose](#jetpack-compose) + * [Scrollable tabs](#scrollable-tabs) + * [Jetpack Compose](#jetpack-compose-1) --- @@ -36,7 +37,7 @@ width of each tab is determined by dividing the number of tabs by the screen width. They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available. -#### Jetpack Compose implementation +#### Jetpack Compose In Compose, the fixed tabs should be added inside of an `OdsTabRow`. The used composable for tab depends on the type of tabs to display: classic `OdsTab` or `OdsLeadingIconTab`. @@ -55,26 +56,26 @@ This composable allows to display: ```kotlin OdsTabRow(selectedTabIndex = pagerState.currentPage) { - OdsTab( - icon = painterResource(id = R.drawable.ic_alert), // if set to `null`, no icon will be displayed - text = "Alerts", // if set to `null`, no text will be displayed - selected = pagerState.currentPage == index, - onClick = { - scope.launch { - pagerState.animateScrollToPage(index) - } - } - ) - OdsTab( - icon = painterResource(id = R.drawable.ic_calendar), // if set to `null`, no icon will be displayed - text = "Calendar", // if set to `null`, no text will be displayed - selected = pagerState.currentPage == index, - onClick = { - scope.launch { - pagerState.animateScrollToPage(index) - } - } - ) + OdsTab( + icon = painterResource(id = R.drawable.ic_alert), // if set to `null`, no icon will be displayed + text = "Alerts", // if set to `null`, no text will be displayed + selected = pagerState.currentPage == index, + onClick = { + scope.launch { + pagerState.animateScrollToPage(index) + } + } + ) + OdsTab( + icon = painterResource(id = R.drawable.ic_calendar), // if set to `null`, no icon will be displayed + text = "Calendar", // if set to `null`, no text will be displayed + selected = pagerState.currentPage == index, + onClick = { + scope.launch { + pagerState.animateScrollToPage(index) + } + } + ) } ``` @@ -84,26 +85,26 @@ This composable allows to display a tab with a text label and an icon in front o ```kotlin OdsTabRow(selectedTabIndex = pagerState.currentPage) { - OdsLeadingIconTab( - icon = painterResource(id = R.drawable.ic_alert), // icon is mandatory in an `OdsLeadingIconTab` - text = "Alerts", // text is mandatory in an `OdsLeadingIconTab` - selected = pagerState.currentPage == index, - onClick = { - scope.launch { - pagerState.animateScrollToPage(index) - } - } - ) - OdsLeadingIconTab( - icon = painterResource(id = R.drawable.ic_calendar), - text = "Calendar", - selected = pagerState.currentPage == index, - onClick = { - scope.launch { - pagerState.animateScrollToPage(index) - } - } - ) + OdsLeadingIconTab( + icon = painterResource(id = R.drawable.ic_alert), // icon is mandatory in an `OdsLeadingIconTab` + text = "Alerts", // text is mandatory in an `OdsLeadingIconTab` + selected = pagerState.currentPage == index, + onClick = { + scope.launch { + pagerState.animateScrollToPage(index) + } + } + ) + OdsLeadingIconTab( + icon = painterResource(id = R.drawable.ic_calendar), + text = "Calendar", + selected = pagerState.currentPage == index, + onClick = { + scope.launch { + pagerState.animateScrollToPage(index) + } + } + ) } ``` @@ -116,36 +117,32 @@ that some tabs will remain off-screen until scrolled. ![Scrollable tabs dark](images/tabs_scrollable_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose For scrollable tabs, the tabs should be added inside of an `OdsScrollableTabRow`. This is the only difference with fixed tabs implementation. As for fixed tabs, you can use an `OdsTab` composable or an `OdsLeadingIconTab` inside. ```kotlin OdsScrollableTabRow(selectedTabIndex = pagerState.currentPage) { - OdsTab( - icon = painterResource(id = R.drawable.ic_alert), // if set to `null`, no icon will be displayed - text = "Alerts", // if set to `null`, no text will be displayed - selected = pagerState.currentPage == index, - onClick = { - scope.launch { - pagerState.animateScrollToPage(index) - } - } - ) - OdsTab( - icon = painterResource(id = R.drawable.ic_calendar), // if set to `null`, no icon will be displayed - text = "Calendar", // if set to `null`, no text will be displayed - selected = pagerState.currentPage == index, - onClick = { - scope.launch { - pagerState.animateScrollToPage(index) - } - } - ) + OdsTab( + icon = painterResource(id = R.drawable.ic_alert), // if set to `null`, no icon will be displayed + text = "Alerts", // if set to `null`, no text will be displayed + selected = pagerState.currentPage == index, + onClick = { + scope.launch { + pagerState.animateScrollToPage(index) + } + } + ) + OdsTab( + icon = painterResource(id = R.drawable.ic_calendar), // if set to `null`, no icon will be displayed + text = "Calendar", // if set to `null`, no text will be displayed + selected = pagerState.currentPage == index, + onClick = { + scope.launch { + pagerState.animateScrollToPage(index) + } + } + ) } ``` - -## Component specific tokens - -_Soon available_ diff --git a/docs/components/TextFields.md b/docs/components/TextFields.md index e080500e4..43035335d 100644 --- a/docs/components/TextFields.md +++ b/docs/components/TextFields.md @@ -9,11 +9,13 @@ description: Text fields let users enter and edit text. * [Specifications references](#specifications-references) * [Accessibility](#accessibility) * [Variants](#variants) - * [Text field](#text-field) - * [Password text field](#password-text-field) + * [Text field](#text-field) + * [Jetpack Compose](#jetpack-compose) + * [Password text field](#password-text-field) + * [Jetpack Compose](#jetpack-compose-1) * [Extras](#extras) - * [Character counter](#character-counter) -* [Component specific tokens](#component-specific-tokens) + * [Character counter](#character-counter) + * [Jetpack Compose](#jetpack-compose-2) --- @@ -42,37 +44,37 @@ The outlined version is more accessible in term of contrast. This is the reason ![TextField filled light](images/textfield_filled_light.png) ![TextField filled dark](images/textfield_filled_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose To add a text field in your composable screen you can use the `OdsTextField` composable as follow: ```kotlin var text by rememberSaveable { mutableStateOf("") } OdsTextField( - leadingIcon = painterResource(id = R.drawable.ic_heart), - leadingIconContentDescription = "Like", - onLeadingIconClick = { doSomething() }, - trailing = OdsTextTrailing(text = "units"), // It can be one of the provided `OdsTextFieldTrailing`. See more information below. - enabled = true, - readOnly = false, - isError = false, - errorMessage = "Error message", - value = text, - onValueChange = { text = it }, - label = "Label", - placeholder = "Placeholder", - visualTransformation = VisualTransformation.None, - keyboardOptions = KeyboardOptions.Default, - keyboardActions = KeyboardActions(), - singleLine = false, - maxLines = Int.MAX_VALUE, - characterCounter = { - OdsTextFieldCharacterCounter( - valueLength = valueLength, - maxChars = TextFieldMaxChars, - enabled = enabled - ) - } + leadingIcon = painterResource(id = R.drawable.ic_heart), + leadingIconContentDescription = "Like", + onLeadingIconClick = { doSomething() }, + trailing = OdsTextTrailing(text = "units"), // It can be one of the provided `OdsTextFieldTrailing`. See more information below. + enabled = true, + readOnly = false, + isError = false, + errorMessage = "Error message", + value = text, + onValueChange = { text = it }, + label = "Label", + placeholder = "Placeholder", + visualTransformation = VisualTransformation.None, + keyboardOptions = KeyboardOptions.Default, + keyboardActions = KeyboardActions(), + singleLine = false, + maxLines = Int.MAX_VALUE, + characterCounter = { + OdsTextFieldCharacterCounter( + valueLength = valueLength, + maxChars = TextFieldMaxChars, + enabled = enabled + ) + } ) ``` @@ -90,10 +92,10 @@ If you want a more complex trailing element, you can use the other `OdsTextField ```kotlin override val components: OdsComponentsConfiguration - get() = object : OdsComponentsConfiguration() { - override val textFieldStyle: ComponentStyle - get() = ComponentStyle.Filled - } + get() = object : OdsComponentsConfiguration() { + override val textFieldStyle: ComponentStyle + get() = ComponentStyle.Filled + } ``` ### Password text field @@ -106,31 +108,31 @@ Password text field is a text field implementation that includes password visual ![TextField filled password light](images/textfield_filled_password_light.png) ![TextField filled password dark](images/textfield_filled_password_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose To add a password text field in your composable screen you can use the `OdsPasswordTextField` composable as follow: ```kotlin var text by rememberSaveable { mutableStateOf("") } OdsPasswordTextField( - enabled = true, - readOnly = false, - isError = false, - errorMessage = "Error message", - value = text, - onValueChange = { text = it }, - label = "Label", - placeholder = "Placeholder", - visualisationIcon = true, - keyboardOptions = KeyboardOptions.Default, - keyboardActions = KeyboardActions(), - characterCounter = { - OdsTextFieldCharacterCounter( - valueLength = valueLength, - maxChars = TextFieldMaxChars, - enabled = enabled - ) - } + enabled = true, + readOnly = false, + isError = false, + errorMessage = "Error message", + value = text, + onValueChange = { text = it }, + label = "Label", + placeholder = "Placeholder", + visualisationIcon = true, + keyboardOptions = KeyboardOptions.Default, + keyboardActions = KeyboardActions(), + characterCounter = { + OdsTextFieldCharacterCounter( + valueLength = valueLength, + maxChars = TextFieldMaxChars, + enabled = enabled + ) + } ) ``` @@ -145,7 +147,7 @@ See [text field section](#text-field) if you want to change it in your custom th ![TextField character counter light](images/textfield_character_counter_light.png) ![TextField character counter dark](images/textfield_character_counter_dark.png) -#### Jetpack Compose implementation +#### Jetpack Compose In each TextField component, you can use the `characterCounter` parameter to add a character counter if there is a restriction on the number of characters in a field. It will be placed properly below the text field, end aligned. @@ -154,10 +156,10 @@ Please use the provided `OdsTextFieldCharacterCounter` composable for this behav ```kotlin OdsTextFieldCharacterCounter( - modifier = Modifier.align(Alignment.End), - valueLength = valueLength, - maxChars = 20, - enabled = true // If `false` the counter is displayed with a disabled color + modifier = Modifier.align(Alignment.End), + valueLength = valueLength, + maxChars = 20, + enabled = true // If `false` the counter is displayed with a disabled color ) ``` @@ -165,10 +167,6 @@ Be careful, the limitation behavior should be managed by yourself in the `onValu ```kotlin if (text.length <= TextFieldMaxChars) { - value = text + value = text } -``` - -## Component specific tokens - -_Soon available_ +``` \ No newline at end of file