Skip to content

Commit a622a67

Browse files
AhmedAmineZrAhmedAmineZr
authored
feat: create BottomSheet component (#671)(#705)
* feat: create BottomSheet component * chore: update constants in bottomsheet * fix: the spacing and the typography of cards * chore: update changelog * review: resolve all comments of review * chore: add shadow in top bottomsheet * chore: update a11y in bottom sheet actions * chore: update with bottomsheet version
1 parent 7c73f0a commit a622a67

36 files changed

Lines changed: 2004 additions & 92 deletions

‎app/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
55
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66
## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.2.0...develop)
77
### Added
8+
- [DemoApp][Library] Create component - `Bottom sheet` ([#671](https://github.com/Orange-OpenSource/ouds-flutter/issues/671))
89
- [DemoApp][Library] Create component - `Alert message` ([#670](https://github.com/Orange-OpenSource/ouds-flutter/issues/670))
910
- [DemoApp][Library] Create component - `Inline alert` ([#485](https://github.com/Orange-OpenSource/ouds-flutter/issues/485))
1011
- [Library] `Filter chip` Apply high contrast theme to filter chip (selected) ([#494](https://github.com/Orange-OpenSource/ouds-flutter/issues/494))

‎app/lib/l10n/gen/ouds_flutter_app_localizations.dart‎

Lines changed: 107 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -151,18 +151,6 @@ abstract class AppLocalizations {
151151
/// **'Expanded'**
152152
String get app_common_expanded_a11y;
153153

154-
/// No description provided for @app_common_bottomSheetExpanded_a11y.
155-
///
156-
/// In en, this message translates to:
157-
/// **'Bottom sheet expanded'**
158-
String get app_common_bottomSheetExpanded_a11y;
159-
160-
/// No description provided for @app_common_bottomSheetCollapsed_a11y.
161-
///
162-
/// In en, this message translates to:
163-
/// **'Bottom sheet collapsed'**
164-
String get app_common_bottomSheetCollapsed_a11y;
165-
166154
/// No description provided for @app_common_customize_label.
167155
///
168156
/// In en, this message translates to:
@@ -685,6 +673,113 @@ abstract class AppLocalizations {
685673
/// **'Inline alert is a lightweight UI element, placed in the content flow, that displays information, system feedback, status changes throughout short, prominent, persistent and non actionable communication.'**
686674
String get app_components_alert_inlineAlert_description_text;
687675

676+
/// No description provided for @app_components_bottomSheet_tech.
677+
///
678+
/// In en, this message translates to:
679+
/// **'Bottom sheet'**
680+
String get app_components_bottomSheet_tech;
681+
682+
/// No description provided for @app_components_bottomSheet_description_text.
683+
///
684+
/// In en, this message translates to:
685+
/// **'Bottom sheets show secondary content anchored to the bottom of the screen.'**
686+
String get app_components_bottomSheet_description_text;
687+
688+
/// No description provided for @app_components_bottomSheet_sheetContent_text.
689+
///
690+
/// In en, this message translates to:
691+
/// **'Bottom sheet content.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum erat vel lectus bibendum ultricies. Fusce non vestibulum nibh, sed fermentum purus. Quisque at dui ipsum. Sed maximus nibh vel vestibulum aliquam. Donec porta quam blandit elit ultrices, eget rhoncus mauris faucibus. Duis a elit sit amet tellus aliquam pellentesque. Sed in felis quis ex lacinia suscipit. Vestibulum vel tempus ante, sit amet viverra sem. Proin venenatis urna sit amet tristique consequat. Phasellus ultricies odio non risus vulputate, vel pulvinar sapien pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin suscipit purus augue, aliquet finibus libero malesuada eu. Nulla non magna mi.'**
692+
String get app_components_bottomSheet_sheetContent_text;
693+
694+
/// No description provided for @app_components_bottomSheet_standardBottomSheet_tech.
695+
///
696+
/// In en, this message translates to:
697+
/// **'Standard bottom sheet'**
698+
String get app_components_bottomSheet_standardBottomSheet_tech;
699+
700+
/// No description provided for @app_components_bottomSheet_standardBottomSheet_description_text.
701+
///
702+
/// In en, this message translates to:
703+
/// **'Standard bottom sheets co-exist with the main screen content, allowing users to interact with both simultaneously.'**
704+
String get app_components_bottomSheet_standardBottomSheet_description_text;
705+
706+
/// No description provided for @app_components_bottomSheet_standardBottomSheet_sheetPeekHeight_tech.
707+
///
708+
/// In en, this message translates to:
709+
/// **'Sheet peek height'**
710+
String
711+
get app_components_bottomSheet_standardBottomSheet_sheetPeekHeight_tech;
712+
713+
/// No description provided for @app_components_bottomSheet_standardBottomSheet_sheetPeekHeightSuffix_tech.
714+
///
715+
/// In en, this message translates to:
716+
/// **'dp'**
717+
String
718+
get app_components_bottomSheet_standardBottomSheet_sheetPeekHeightSuffix_tech;
719+
720+
/// No description provided for @app_components_bottomSheet_standardBottomSheet_sheetDragHandle_tech.
721+
///
722+
/// In en, this message translates to:
723+
/// **'Sheet drag handle'**
724+
String
725+
get app_components_bottomSheet_standardBottomSheet_sheetDragHandle_tech;
726+
727+
/// No description provided for @app_components_bottomSheet_standardBottomSheet_sheetSwipeEnabled_tech.
728+
///
729+
/// In en, this message translates to:
730+
/// **'Sheet swipe enabled'**
731+
String
732+
get app_components_bottomSheet_standardBottomSheet_sheetSwipeEnabled_tech;
733+
734+
/// No description provided for @app_components_bottomSheet_standardBottomSheet_sheetValue_tech.
735+
///
736+
/// In en, this message translates to:
737+
/// **'Sheet value'**
738+
String get app_components_bottomSheet_standardBottomSheet_sheetValue_tech;
739+
740+
/// No description provided for @app_components_bottomSheet_standardBottomSheet_collapse_label.
741+
///
742+
/// In en, this message translates to:
743+
/// **'Collapse'**
744+
String get app_components_bottomSheet_standardBottomSheet_collapse_label;
745+
746+
/// No description provided for @app_components_bottomSheet_modalBottomSheet_tech.
747+
///
748+
/// In en, this message translates to:
749+
/// **'Modal bottom sheet'**
750+
String get app_components_bottomSheet_modalBottomSheet_tech;
751+
752+
/// No description provided for @app_components_bottomSheet_modalBottomSheet_description_text.
753+
///
754+
/// In en, this message translates to:
755+
/// **'Modal bottom sheet displays content that temporarily blocks interaction with the main screen.'**
756+
String get app_components_bottomSheet_modalBottomSheet_description_text;
757+
758+
/// No description provided for @app_components_bottomSheet_modalBottomSheet_dragHandle_tech.
759+
///
760+
/// In en, this message translates to:
761+
/// **'Drag handle'**
762+
String get app_components_bottomSheet_modalBottomSheet_dragHandle_tech;
763+
764+
/// No description provided for @app_components_bottomSheet_modalBottomSheet_sheetGestureEnabled_tech.
765+
///
766+
/// In en, this message translates to:
767+
/// **'Sheet gestures enabled'**
768+
String
769+
get app_components_bottomSheet_modalBottomSheet_sheetGestureEnabled_tech;
770+
771+
/// No description provided for @app_components_bottomSheet_modalBottomSheet_showButton_label.
772+
///
773+
/// In en, this message translates to:
774+
/// **'Show bottom sheet'**
775+
String get app_components_bottomSheet_modalBottomSheet_showButton_label;
776+
777+
/// No description provided for @app_components_bottomSheet_modalBottomSheet_close_label.
778+
///
779+
/// In en, this message translates to:
780+
/// **'Close'**
781+
String get app_components_bottomSheet_modalBottomSheet_close_label;
782+
688783
/// No description provided for @app_components_button_label.
689784
///
690785
/// In en, this message translates to:

‎app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart‎

Lines changed: 71 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,6 @@ class AppLocalizationsAr extends AppLocalizations {
3535
@override
3636
String get app_common_expanded_a11y => 'موسّع';
3737

38-
@override
39-
String get app_common_bottomSheetExpanded_a11y => 'القائمة السفلى موسعة';
40-
41-
@override
42-
String get app_common_bottomSheetCollapsed_a11y => 'القائمة السفلية مطوية';
43-
4438
@override
4539
String get app_common_customize_label => 'تخصيص';
4640

@@ -321,6 +315,77 @@ class AppLocalizationsAr extends AppLocalizations {
321315
String get app_components_alert_inlineAlert_description_text =>
322316
'Inline alert هو عنصر واجهة مستخدم خفيف الوزن، يتم وضعه داخل تدفّق المحتوى، ويُستخدم لعرض المعلومات أو ملاحظات النظام أو تغيّرات الحالة، من خلال رسائل قصيرة وواضحة وبارزة ومستمرّة، وغير قابلة لاتخاذ إجراء.';
323317

318+
@override
319+
String get app_components_bottomSheet_tech => 'Bottom sheet';
320+
321+
@override
322+
String get app_components_bottomSheet_description_text =>
323+
'تعرض Bottom Sheet محتوى ثانوياً مثبتاً في أسفل الشاشة.';
324+
325+
@override
326+
String get app_components_bottomSheet_sheetContent_text =>
327+
'محتوى الـ Bottom Sheet.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum erat vel lectus bibendum ultricies. Fusce non vestibulum nibh, sed fermentum purus. Quisque at dui ipsum. Sed maximus nibh vel vestibulum aliquam. Donec porta quam blandit elit ultrices, eget rhoncus mauris faucibus. Duis a elit sit amet tellus aliquam pellentesque. Sed in felis quis ex lacinia suscipit. Vestibulum vel tempus ante, sit amet viverra sem. Proin venenatis urna sit amet tristique consequat. Phasellus ultricies odio non risus vulputate, vel pulvinar sapien pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin suscipit purus augue, aliquet finibus libero malesuada eu. Nulla non magna mi.';
328+
329+
@override
330+
String get app_components_bottomSheet_standardBottomSheet_tech =>
331+
'Standard bottom sheet';
332+
333+
@override
334+
String get app_components_bottomSheet_standardBottomSheet_description_text =>
335+
'تتعايش الـ Bottom Sheet القياسية مع محتوى الشاشة الرئيسية، مما يتيح التفاعل مع الاثنين في نفس الوقت.';
336+
337+
@override
338+
String
339+
get app_components_bottomSheet_standardBottomSheet_sheetPeekHeight_tech =>
340+
'Sheet peek height';
341+
342+
@override
343+
String
344+
get app_components_bottomSheet_standardBottomSheet_sheetPeekHeightSuffix_tech =>
345+
'dp';
346+
347+
@override
348+
String
349+
get app_components_bottomSheet_standardBottomSheet_sheetDragHandle_tech =>
350+
'Sheet drag handle';
351+
352+
@override
353+
String
354+
get app_components_bottomSheet_standardBottomSheet_sheetSwipeEnabled_tech =>
355+
'Sheet swipe enabled';
356+
357+
@override
358+
String get app_components_bottomSheet_standardBottomSheet_sheetValue_tech =>
359+
'Sheet value';
360+
361+
@override
362+
String get app_components_bottomSheet_standardBottomSheet_collapse_label =>
363+
'طي';
364+
365+
@override
366+
String get app_components_bottomSheet_modalBottomSheet_tech =>
367+
'Modal bottom sheet';
368+
369+
@override
370+
String get app_components_bottomSheet_modalBottomSheet_description_text =>
371+
'تعرض الـ Bottom Sheet النموذجية محتوى يحجب مؤقتاً التفاعل مع الشاشة الرئيسية.';
372+
373+
@override
374+
String get app_components_bottomSheet_modalBottomSheet_dragHandle_tech =>
375+
'Drag handle';
376+
377+
@override
378+
String
379+
get app_components_bottomSheet_modalBottomSheet_sheetGestureEnabled_tech =>
380+
'Sheet gestures enabled';
381+
382+
@override
383+
String get app_components_bottomSheet_modalBottomSheet_showButton_label =>
384+
'Show bottom sheet';
385+
386+
@override
387+
String get app_components_bottomSheet_modalBottomSheet_close_label => 'إغلاق';
388+
324389
@override
325390
String get app_components_button_label => 'Button';
326391

‎app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart‎

Lines changed: 71 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,6 @@ class AppLocalizationsEn extends AppLocalizations {
3535
@override
3636
String get app_common_expanded_a11y => 'Expanded';
3737

38-
@override
39-
String get app_common_bottomSheetExpanded_a11y => 'Bottom sheet expanded';
40-
41-
@override
42-
String get app_common_bottomSheetCollapsed_a11y => 'Bottom sheet collapsed';
43-
4438
@override
4539
String get app_common_customize_label => 'Customize';
4640

@@ -321,6 +315,77 @@ class AppLocalizationsEn extends AppLocalizations {
321315
String get app_components_alert_inlineAlert_description_text =>
322316
'Inline alert is a lightweight UI element, placed in the content flow, that displays information, system feedback, status changes throughout short, prominent, persistent and non actionable communication.';
323317

318+
@override
319+
String get app_components_bottomSheet_tech => 'Bottom sheet';
320+
321+
@override
322+
String get app_components_bottomSheet_description_text =>
323+
'Bottom sheets show secondary content anchored to the bottom of the screen.';
324+
325+
@override
326+
String get app_components_bottomSheet_sheetContent_text =>
327+
'Bottom sheet content.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum erat vel lectus bibendum ultricies. Fusce non vestibulum nibh, sed fermentum purus. Quisque at dui ipsum. Sed maximus nibh vel vestibulum aliquam. Donec porta quam blandit elit ultrices, eget rhoncus mauris faucibus. Duis a elit sit amet tellus aliquam pellentesque. Sed in felis quis ex lacinia suscipit. Vestibulum vel tempus ante, sit amet viverra sem. Proin venenatis urna sit amet tristique consequat. Phasellus ultricies odio non risus vulputate, vel pulvinar sapien pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin suscipit purus augue, aliquet finibus libero malesuada eu. Nulla non magna mi.';
328+
329+
@override
330+
String get app_components_bottomSheet_standardBottomSheet_tech =>
331+
'Standard bottom sheet';
332+
333+
@override
334+
String get app_components_bottomSheet_standardBottomSheet_description_text =>
335+
'Standard bottom sheets co-exist with the main screen content, allowing users to interact with both simultaneously.';
336+
337+
@override
338+
String
339+
get app_components_bottomSheet_standardBottomSheet_sheetPeekHeight_tech =>
340+
'Sheet peek height';
341+
342+
@override
343+
String
344+
get app_components_bottomSheet_standardBottomSheet_sheetPeekHeightSuffix_tech =>
345+
'dp';
346+
347+
@override
348+
String
349+
get app_components_bottomSheet_standardBottomSheet_sheetDragHandle_tech =>
350+
'Sheet drag handle';
351+
352+
@override
353+
String
354+
get app_components_bottomSheet_standardBottomSheet_sheetSwipeEnabled_tech =>
355+
'Sheet swipe enabled';
356+
357+
@override
358+
String get app_components_bottomSheet_standardBottomSheet_sheetValue_tech =>
359+
'Sheet value';
360+
361+
@override
362+
String get app_components_bottomSheet_standardBottomSheet_collapse_label =>
363+
'Collapse';
364+
365+
@override
366+
String get app_components_bottomSheet_modalBottomSheet_tech =>
367+
'Modal bottom sheet';
368+
369+
@override
370+
String get app_components_bottomSheet_modalBottomSheet_description_text =>
371+
'Modal bottom sheet displays content that temporarily blocks interaction with the main screen.';
372+
373+
@override
374+
String get app_components_bottomSheet_modalBottomSheet_dragHandle_tech =>
375+
'Drag handle';
376+
377+
@override
378+
String
379+
get app_components_bottomSheet_modalBottomSheet_sheetGestureEnabled_tech =>
380+
'Sheet gestures enabled';
381+
382+
@override
383+
String get app_components_bottomSheet_modalBottomSheet_showButton_label =>
384+
'Show bottom sheet';
385+
386+
@override
387+
String get app_components_bottomSheet_modalBottomSheet_close_label => 'Close';
388+
324389
@override
325390
String get app_components_button_label => 'Button';
326391

0 commit comments

Comments
 (0)