297 design update for snackbars (#301)

* library and app : align component name and param

* documentation: add snackbar

* app : new version build

app/CHANGELOG.md

@@ -1,15 +1,26 @@
-### ODS_Flutter Demo Application
+### ODS Flutter Demo Application
 
 All notable changes done in Demo application of ods_flutter library will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased](https://github.com/Orange-OpenSource/ods-flutter/releases)
+### [Unreleased](https://github.com/Orange-OpenSource/ods-flutter/releases)
 
-## [0.5.O](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.1...0.5.0) - 2023-11-27
+### [0.6.O](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.1...0.6.0) - 2023-12-14
 
-### Added
+## Added
+
+- [Bug] Update changelog title ([#294](https://github.com/Orange-OpenSource/ods-flutter/issues/194))
+
+## Changed
+
+- Design Update for snackbars ([#297](https://github.com/Orange-OpenSource/ods-flutter/issues/297))
+- Align component name and parameters for Snackbars ([#298](https://github.com/Orange-OpenSource/ods-flutter/issues/298))
+
+### [0.5.O](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.1...0.5.0) - 2023-11-27
+
+## Added
 
 - [Bug]: ODS - component - Lists - standard lists ([#264](https://github.com/Orange-OpenSource/ods-flutter/issues/264))
 - [Bug]: dialog top padding update ([#248](https://github.com/Orange-OpenSource/ods-flutter/issues/248))
@@ -20,7 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add Change log in about page ([#172](https://github.com/Orange-OpenSource/ods-flutter/issues/172))
 - [Bug]: ODS - Component - App bars: top ([#273](https://github.com/Orange-OpenSource/ods-flutter/issues/273))
 
-### Changed
+## Changed
 
 - Align component name and parameters for Checkbox ([#279](https://github.com/Orange-OpenSource/ods-flutter/issues/279))
 - Design Update for checkbox ([#235](https://github.com/Orange-OpenSource/ods-flutter/issues/235))
@@ -35,12 +46,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Align component name and parameters for App bars : top ([#292](https://github.com/Orange-OpenSource/ods-flutter/issues/292))
 - Design Update for app bar top ([#291](https://github.com/Orange-OpenSource/ods-flutter/issues/291))
 
-### Removed
-
 
-## [0.4.O](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.1...0.4.0) - 2023-11-02
+### [0.4.O](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.1...0.4.0) - 2023-11-02
 
-### Added
+## Added
 
 - Create components list screen ([#132](https://github.com/Orange-OpenSource/ods-flutter/issues/132))
 - Add guideline typography screen ([#121](https://github.com/Orange-OpenSource/ods-flutter/issues/121))
@@ -74,7 +83,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Bug]: ODS - Components - Chips - Filter chips ([#274](https://github.com/Orange-OpenSource/ods-flutter/issues/274))
 - [feature]: ODS - Component - Chips - Filter chips - shape ([#275](https://github.com/Orange-OpenSource/ods-flutter/issues/275))
 
-### Changed
+## Changed
 
 - Add a scroll view to see all the content in about screen ([#160](https://github.com/Orange-OpenSource/ods-flutter/issues/160))
 - Factorize top app bar management ([#149](https://github.com/Orange-OpenSource/ods-flutter/issues/149))
@@ -109,16 +118,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Filter Chip Design Update ([#205](https://github.com/Orange-OpenSource/ods-flutter/issues/205))
 - Other Material Component Page Updates ([#202](https://github.com/Orange-OpenSource/ods-flutter/issues/202))
 
-### Removed
+## Removed
 
 - Remove french translations ([#154](https://github.com/Orange-OpenSource/ods-flutter/issues/154))
 - Remove the Elevated button ([#197](https://github.com/Orange-OpenSource/ods-flutter/issues/197))
 
-## [0.1.1](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.1...0.1.0) - 2023-05-04
+### [0.1.1](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.1...0.1.0) - 2023-05-04
 
 First version of ods_flutter library and Application from hackathon (publication on pub.dev)
 
-## [0.1.0](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.0) - 2023-05-02
+### [0.1.0](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.0) - 2023-05-02
 
 First version of ods_flutter library and Application from hackathon.
 (Not published on pub.dev due to warnings, missing files and assets listing)

app/lib/ui/components/snackbars/snackbars.dart

@@ -3,7 +3,7 @@ import 'package:flutter_gen/gen_l10n/ods_flutter_app_localizations.dart';
 import 'package:ods_flutter/components/button/ods_button.dart';
 import 'package:ods_flutter/components/lists/ods_list_switch.dart';
 import 'package:ods_flutter/components/sheets_bottom/ods_sheets_bottom.dart';
-import 'package:ods_flutter/components/snackbars/ods_snackbars.dart';
+import 'package:ods_flutter/components/snackbars/ods_snackbar.dart';
 import 'package:ods_flutter/guidelines/spacings.dart';
 import 'package:ods_flutter_demo/ui/components/snackbars/snackbars_customization.dart';
 import 'package:ods_flutter_demo/ui/main_app_bar.dart';
@@ -75,11 +75,11 @@ class _SnackBarsVariants extends StatelessWidget {
             onClick: () {
               if (customizationState?.hasTwoLines == false &&
                   customizationState?.hasLongerAction == false) {
-                OdsSnackbars.showSnackbarSingleLine(
+                OdsSnackbar.showSnackbarSingleLine(
                   context: context,
-                  content: AppLocalizations.of(context)!
+                  message: AppLocalizations.of(context)!
                       .componentSnackbarsSingleText,
-                  label: customizationState?.hasActionButton == true
+                  actionLabel: customizationState?.hasActionButton == true
                       ? AppLocalizations.of(context)!
                           .componentSnackbarsActionExampleButtonText
                       : null,
@@ -89,11 +89,11 @@ class _SnackBarsVariants extends StatelessWidget {
                 );
               } else if (customizationState?.hasTwoLines == true &&
                   customizationState?.hasLongerAction == false) {
-                OdsSnackbars.showSnackbarTwoLines(
+                OdsSnackbar.showSnackbarTwoLines(
                   context: context,
-                  content: AppLocalizations.of(context)!
+                  message: AppLocalizations.of(context)!
                       .componentSnackbarsTwoLineActionText,
-                  label: customizationState?.hasActionButton == true
+                  actionLabel: customizationState?.hasActionButton == true
                       ? AppLocalizations.of(context)!
                           .componentSnackbarsActionExampleButtonText
                       : null,
@@ -103,11 +103,11 @@ class _SnackBarsVariants extends StatelessWidget {
                 );
               }
               if (customizationState?.hasLongerAction == true) {
-                OdsSnackbars.showSnackbarLongerAction(
+                OdsSnackbar.showSnackbarLongerAction(
                   context: context,
-                  content: AppLocalizations.of(context)!
+                  message: AppLocalizations.of(context)!
                       .componentSnackbarsTwoLineLongerActionText,
-                  label: AppLocalizations.of(context)!
+                  actionLabel: AppLocalizations.of(context)!
                       .componentSnackbarsTwoLineLongerActionButton,
                   onPressed: () {},
                 );

app/pubspec.yaml

@@ -16,7 +16,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 0.5.0+1
+version: 0.6.0+1
 
 environment:
   sdk: '>=2.19.6 <3.0.0'

docs/_data/data_menus.yml

@@ -38,6 +38,8 @@ toc2:
         url: components/radioButtons_docs
       - page: Slider
         url: components/slider_docs
+      - page: Snackbar
+        url: components/snackbars_docs
       - page: Switches
         url: components/switches_docs
 

docs/components/snackbars.md

@@ -0,0 +1,97 @@
+---
+layout: detail
+title: Snackbars
+description: Snackbars provide brief messages about app processes at the bottom of the screen.
+---
+
+Snackbars inform users of a process that an app has performed or will perform.
+They appear temporarily, towards the bottom of the screen. They shouldn’t
+interrupt the user experience, and they don’t require user input to disappear.
+They disappear either after a timeout or after a user interaction elsewhere on
+the screen, but can also be swiped off the screen.
+
+Snackbars can also offer the ability to perform an action, such as undoing an
+action that was just taken, or retrying an action that had failed.
+
+<br>**On this page**
+
+* [Specifications references](#specifications-references)
+* [Accessibility](#accessibility)
+* [Implementation](#implementation)
+    * [Flutter code](#flutter-code)
+        * [OdsSnackbar API](#odssnackbar-api)
+
+---
+
+## Specifications references
+
+- [Design System Manager - Snackbars](https://system.design.orange.com/0c1af118d/p/259fde-snackbars/b/28c190)
+- [Material Design - Snackbars](https://m3.material.io/components/snackbar/overview)
+
+## Accessibility
+
+Please follow [accessibility criteria for development](https://m3.material.io/components/snackbar/accessibility).
+
+Snackbars support content labeling for accessibility and are readable by most
+screen readers, such as TalkBack. Text rendered in snackbars is automatically
+provided to accessibility services. Additional content labels are usually
+unnecessary.
+
+## Implementation
+
+### Variant single lines
+
+![Snackbar light](images/snackbar_single_light.png)
+
+![Snackbar dark](images/snackbar_single_dark.png)
+
+With action button:
+
+![Snackbar with action light](images/snackbar_single_with_action_light.png)
+
+![Snackbar with action dark](images/snackbar_single_with_action_dark.png)
+
+
+### Variant two lines
+
+
+![Snackbar with two lines light](images/snackbar_two_lines_light.png)
+
+![Snackbar with two lines dark](images/snackbar_two_lines_dark.png)
+
+### Variant longer action button
+
+
+![Snackbar with longer action light](images/snackbar_longer_action_light.png)
+
+![Snackbar with longer action dark](images/snackbar_longer_action_dark.png)
+
+#### Flutter code
+
+We advise you to use a `Scaffold` to add an `OdsSnackbars` in order to make sure everything is displayed together in the right place according to Material Design.
+
+Then use Ods Snackbar with the correct method to display the snackbar with `showSnackbarSingleLine`, `showSnackbarTwoLines` or `showSnackbarLongerAction` :
+
+```dart
+return OdsButton(
+  text: 'Show snackbar',
+  onClick: () {
+    OdsSnackbar.showSnackbarSingleLine(
+      context: context,
+      message: "This is the message of the Snackbar.",
+      actionLabel: "ACTION", // Optional
+      onPressed: () {}, // Optional
+    );
+  },
+);
+```
+
+##### OdsSnackbar API
+
+Parameter | Default&nbsp;value | Description
+-- | -- | --
+`message: String` | | State of this component to read and show `OdsSnackbar` accordingly.
+`context: Context` | `BuildContext` | `Context` applied to the snackbar
+`actionLabel: Button` | | The button action label
+`onPressed: Button` | | The callback to be called when the button is pressed 
+{:.table}

docs/components/snackbars_docs.md

@@ -0,0 +1,4 @@
+---
+layout: main
+content_page: snackbars.md
+---

library/CHANGELOG.md

@@ -24,6 +24,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.1...main)
 
+## [0.6.O](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.1...0.6.0) - 2023-12-14
+
+### Changed
+
+- Design Update for snackbars ([#297](https://github.com/Orange-OpenSource/ods-flutter/issues/297))
+- Align component name and parameters for Snackbars ([#298](https://github.com/Orange-OpenSource/ods-flutter/issues/298))
+
 ### Added
 
 - Add ODS typography for iOS & Android platforms ([#121](https://github.com/Orange-OpenSource/ods-flutter/issues/121))