Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjustment: Readme updated for version 0.7.0 part 2 #248

Merged
merged 1 commit into from
Jul 2, 2024
+5 −18
Merged

Adjustment: Readme updated for version 0.7.0 part 2 #248

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 5 additions & 18 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,7 @@ for page transitions, and scrollable content within each page.
- [Design Guidelines](#design-guidelines)
* [Overview](#overview)
* [Breakpoints](#breakpoints)
+ [Modal Types](#modal-types)
* [Safe Areas](#safe-areas)
+ [iOS](#ios)
+ [Android](#android)
* [Scroll Logic](#scroll-logic)
+ [Scroll Logic Layouts](#scroll-logic-layouts)
* [Modal Sheet Layouts](#modal-sheet-layouts)
* [Modal Types](#modal-types)
+ [Alert](#alert)
+ [Dialog](#dialog)
+ [Side Sheet](#side-sheet)
Expand Down Expand Up @@ -463,26 +457,19 @@ The modal sheet component adjusts its layout based on the following breakpoints:

![Breakpoints](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/breakpoints_design_guidelines.png?raw=true)

#### Modal Types

- **Alert**: Used for critical information that requires immediate attention.
- **Dialog**: Used for single user actions or to convey information related to changes in state (success, errors).
- **Side Sheet**: Used to focus users' attention on a specific task while keeping the context visible.
- **Bottom Sheet**: Used for additional options or actions, and can be used instead of a dialog in smaller screen sizes.

### Modal Sheet Layouts
### Modal Types

#### Alert
- Used to display information requiring immediate user attention like showing a QR code.
- Used for critical information that requires immediate attention.
- Must be dismissed by user interaction to ensure the alert is acknowledged.

#### Dialog
- Should be dedicated to completing a single task or state change information (success, errors).
- Used for single user actions or to convey information related to changes in state (success, errors).
- Provides clear actions for users to acknowledge or dismiss the dialog.
- We recommend to use dialogs in small,medium and large windows sizes.

#### Side Sheet
- Use when users need to provide input or to display a list of controls, like filters.
- Used to focus users' attention on a specific task while keeping the context visible.
- We recommend to use side sheets in small,medium and large windows sizes.

#### Bottom Sheet
Expand Down
Loading