- $bulb: #FFFFCF
@@ -186,4 +186,4 @@ Most of the application is gray, pops of color catch a user’s eye.
## How to use Scheme Colors
Each scheme palette owns 6 shades of a specific color. To offer a well balanced user interface, each color of the scheme is assigned to a specific function.
-
+
diff --git a/doc/general/3-spacing.md b/doc/general/3-spacing.md
index 81801ac..bb05be7 100644
--- a/doc/general/3-spacing.md
+++ b/doc/general/3-spacing.md
@@ -40,25 +40,25 @@ XXXL, $space-xxl: 4rem
## Grid
Design System is using 24 column grid.
-
+
Gutter (column padding) width is 0.5 rem (8 px) which means that distance between columns is 1 rem. Column size depends on screen size.
-
+
During screen design Designer needs to decide how many columns is needed for content area.
-
+
Designer should also remember that on smaller screens. He needs to:
-
+
## Layout
1440 screen, 24 col, 0,5rem margin, 1rem gutter
-
+
## Spatial Concept
Using insets, stacks and inlines will help to organise layouts in a harmonious way.
-
+
diff --git a/doc/general/4-typography.md b/doc/general/4-typography.md
index c831e5c..7213dbd 100644
--- a/doc/general/4-typography.md
+++ b/doc/general/4-typography.md
@@ -13,4 +13,4 @@ Typographic hierarchy is created by:
Most commonly these methods are used in combination with each other. Fabric uses the color **“fiord”** for its titles and labels to arise a slight differentiation from other values.
-
+
diff --git a/doc/general/5-navigation.md b/doc/general/5-navigation.md
index d628c0e..7c3902e 100644
--- a/doc/general/5-navigation.md
+++ b/doc/general/5-navigation.md
@@ -1,34 +1,34 @@
# Navigation
Navigation structure and used elements highly depend on system **Information Architecture** structure. Think about it before you make decision about your navigation and menu structure.
-
+
## Context Links
The most natural way to move through the system is a system of well placed context links that leads to proper place.
-
+
## Menu Structure
First level
-
+
Second level
-
+
## Tabs
Tabs can be used to divide page content into sections. It should be used to show only content relevant to specific user actions.
-
+
## Overlays
Layers are very efficient in showing detailed data or advanced actions without leaving current context. They should be considered as a standard way to show details in Fabric based products.
-
+
More details in [Overlays](../#/general/7-overlays)
diff --git a/doc/general/6-structure.md b/doc/general/6-structure.md
index 2074023..9e63010 100644
--- a/doc/general/6-structure.md
+++ b/doc/general/6-structure.md
@@ -27,7 +27,7 @@ Don’t:
## Sheet
-
+
Basic view component. Every view need to be built by Sheet or Tile(s). Sheet can be sliced into smaller pieces through grid.
@@ -37,15 +37,15 @@ Don’t:
## Tile
-
+
-
+
Alternative main view component. Every view need to be built by Sheet or Tile(s). Number of used tiles depends on needs. Tiles can be merged into bigger tiles. Standard tile width is 6 grid columns (minimum 3 grid columns)
## Side Panels
-
+
### Left Panel
Should be used only when it is reasonable need for menu or fixed filters panel.
diff --git a/doc/general/7-overlays.md b/doc/general/7-overlays.md
index 371eb27..738f18f 100644
--- a/doc/general/7-overlays.md
+++ b/doc/general/7-overlays.md
@@ -9,26 +9,26 @@ Do not use it when:
## Details Layer
It is the default layer solution for most of Fabric use cases. It is a simple and subtle solution do show element details without hiding screen information.
-
+
Use it to show limited details data or additional action elements.
-
+
For a bigger amount of data use Full-page Layer or Side Panel.
## Modal Window
Should be used ONLY for task stopping events (like critical error).
-
+
Use it for crucial decisions that interfere user workflow.
-
+
Use it for crucial information that break standard user workflow.
-
+
Standard decisions and editions elements should be placed next to main data view or on Details Layer
-
+
For standard system feedback use Notification system.
## Full-page Layer
@@ -36,23 +36,23 @@ Whole page content is hidden under it.
It should be used only if default page content is not needed when user is looking for layer info. It also shouldn’t be used for limited amount of information.
-
+
Use it when you need to focus additional information about element.
-
+
For limited amount of data, use Details Layer.
## Side Panel
Side layers can be used on the right (only for filters and navigation elements), left or bottom edge of the screen.
-
+
Use it when you need to show additional information about element without hiding the main data.
-
+
For limited amount of data, use Details Layer.
-
+
Additonal decision options should be placed on Details Layer.
diff --git a/doc/general/8-feedback.md b/doc/general/8-feedback.md
new file mode 100644
index 0000000..65ce410
--- /dev/null
+++ b/doc/general/8-feedback.md
@@ -0,0 +1,49 @@
+# System Feedback
+System feedback elements should be used to inform user about important system actions.
+
+
+Inform about finished/successful actions.
+
+
+Inform about system errors.
+
+
+Inform about input errors (ex. wrong data format).
+
+
+Skip obvious information.
+
+## Feedback Categories
+### Neutral
+General information
+
+Error
+Information about system problem
+
+Success
+Information about successful or finished activity
+
+Warning
+Information about action that can be potentially harmful
+
+## Feedback forms
+### Contextual Feedback
+It is short feedback (text, icon) shown next to the linked area when feedback action occurs. It can be show for a short time (ex. 3 seconds) or it can stay until it is relevant.
+
+Option to provide feedback next to associated element should be considered as default. Consider alternatives only if contextual feedback is not possible or not linked with any screen area.
+
+
+
+### Notifications
+Used for general system feedback.
+
+
+
+For more info, check [Notifications](../#/components/notification).
+
+### Modal Window
+Used when system feedback breaks user activity and using a system can’t be continued without getting an info or making a decision.
+
+
+
+For more info, check [Overlays](../#/general/7-overlays).