Page History

Versions Compared

Key

This line was added.
This line was removed.
Formatting was changed.

...

How do we determine the minimum requirements for the Inspire Design Kit?

→ All features which comes with DevExtreme ui-elements.
→ All features that have been identified by UX/UI research as urgently needed across companiesIt must be possible to create applications with the Design Kit. Special requirements for the Design System were deliberately omitted. They are not part of the MVP. All UI elements must be extendible to implement these special requirements. How and when special requirements will be implemented is still to be decided.

UI-Elements

Templates ID's

Atoms, Molecules and Organisms

Status

MVP Requirements

Documentation

ToDo

Comments

ID1 Colors

Status

subtle	true
colour	Green
title	done

https://confluence.germanedge.com/x/XYC-AQ
https://wasp2-dev.myapp.de:444/live-style-guide/theming

Documentation
Final angular check

ID1 Typeface

Status

colour	Yellow
title	In Progress

https://confluence.germanedge.com/x/YoC-AQ

Documentation
Final angular check

ID1 Icon

Status

colour	Yellow
title	In Progress

https://confluence.germanedge.com/x/_MYdAg
https://wasp2-dev.myapp.de:444/live-style-guide/icons

Definition of Icon-Set for MVP
Design of missing Icons
Icon to Font
Final angular check
Documentation

ID2 Dashboard & basic components

Dashboard

Status

colour	Yellow
title	In Progress

Header
Contentarea

https://confluence.germanedge.com/x/7KMdAg
code is missing

Detailed Design Grid description
Documentation
Final angular check

Header

Status

subtle	true
colour	Green
title	done

Burger
Date & Datepicker
Product-Logo
Tool/App/Module Naming
Toolbar(Search-, Setting- & Notification Icon)

https://confluence.germanedge.com/x/JqQdAg

Detailed Design Grid description
Documentation
Final angular check

Overlay

Status

colour	Yellow
title	In Progress

Content
- detailed Design Grid description

https://confluence.germanedge.com/x/76MdAg

Detailed Design Grid description
Documentation
Final angular check

Floating Sidebar

Status

colour	Yellow
title	In Progress

Action Icon
Title
Link

https://confluence.germanedge.com/x/IKIdAg

Detailed Design Grid description
Documentation
Final angular check

Panel

Status

colour	Yellow
title	In Progress

Contentswitch
Content
Toolbar

https://confluence.germanedge.com/x/LaQdAg

Detailed Design Grid description
Documentation
Final angular check

Sandbox

Status

colour	Red
title	Not f. MVP

Not MVP - must be discussed

Status

colour	Red
title	Not f. MVP

Toast Notification

Status

colour	Red
title	Not f. MVP

Icon
Title
Subtext
Link
Toolbar
Colorcode

Detailed Design Grid description
Documentation
Final angular check

Inline Notification

Status

colour	Yellow
title	In Progress

Title
Subject
Link
Toolbar
Picture
Colorcode

Detailed Design Grid description
Documentation
Final angular check

ID3 Boardlets & content components

Default Boardlet

Status

subtle	true
colour	Green
title	done

boardlet
- Content Bereich
  - detailed Design Grid description
- Toolbar
  - Icons
- Title
- Datepicker on demand
tabs
- Toolbar bottom with control extension

Detailed Design Grid description
Documentation
Final angular check

Dialog

Status

subtle	true
colour	Green
title	done

Dialog
- Form
  - Title
  - Content Bereich
  - Top Toolbar( only without Sidebar)
  - Bottom Toolbar( only without Sidebar)
    detailed Design Grid description
- Sidebar on demand
  - Title
  - Content Bereich
  - detailed Design Grid description
  - Top Toolbar
  - Bottom Toolbar
- Info Field

Detailed Design Grid description
Documentation
Final angular check

Cards

Status

colour	Yellow
title	In Progress

Content Card
- Title
- Subtitle
- Toolbar
- Drilldown
- Content
Info Card*
- Title
- Subtitle
- Content

Design of missing Components
Update Zeplin
Detailed Design Grid description
Documentation
Final angular check

Overflow Menu

Status

colour	Yellow
title	In Progress

Content
- Group
- Links
- Button
Open Direction
Animation*
Parent ui-element/extension am button

Design of missing Components
Update Zeplin
Detailed Design Grid description
Documentation
Final angular check

Tooltip

Status

colour	Yellow
title	In Progress

Rookiemode Tooltip*
- Content
Tooltip
- Content
- Whitelist/Blacklist

Basic Design
Present final design in UI/UX Guilde
Zeplin Documentation
Documentation
Final angular check

Tags

Status

colour	Yellow
title	In Progress

Icon Button
Text Link
Icon
Colorcode

Basic Design
Present final design in UI/UX Guilde
Zeplin Documentation
Documentation
Final angular check

Modal

Status

colour	Yellow
title	In Progress

Title
Subtitle
Link
Button

Design of missing Components
Update Zeplin
Detailed Design Grid description
Documentation
Final angular check

ID4 Tables components

Table header
Table content
Pagination
controlbar & controlelements

Status

colour	Yellow
title	In Progress

global search über alle spalten der Tabelle
spalten basierte suche/filter
- Filterkriterien festlegen (gt, lt)
- Filterkriterium sichtbar und deaktivierbar
Process bar
Toolbar top
Toolbar bottom
Paginierung
Buttons

Basic Design
Present final design in UI/UX Guilde
Zeplin Documentation
Documentation
Final angular check

ID5 Buttons & control components

Buttons

Status

colour	Yellow
title	In Progress

Text
Icons
Switch
Text/Icon
Text/Text
Icon/Text/Icon
Button Style
Button Size
Button Type

Design of missing Components
Update Zeplin
Detailed Design Grid description
Documentation
Final angular check

ID6 Link components

Link

Status

colour	Yellow
title	In Progress

Icon Button
Text Link
Icon

ID6 Link

Detailed Design Grid description
Documentation
Final angular check

Tree

Status

colour	Yellow
title	In Progress

Expand icon
Sub- or Checkbox Icon
Text Link
More Icon Button

Detailed Design Grid description
Documentation
Final angular check

ID7 Input & Dropdown components

Default input
Specal input
Default dropdown
Specal dropdown
Dropdown Links
Datepicker/Timepicker

Status

colour	Yellow
title	In Progress

Design of missing Components
Update Zeplin
Detailed Design Grid description
Documentation
Final angular check

Radio

Status

colour	Yellow
title	In Progress

Icon Button
Text Link

Detailed Design Grid description
Documentation
Final angular check

Checkbox

Status

colour	Yellow
title	In Progress

Icon Button
Text Link

Detailed Design Grid description
Documentation
Final angular check

Input

Status

colour	Yellow
title	In Progress

Label field
Input field
- Placeholder
Info Container
- Icon
- Info Field
Input Style
- Validation
- State
- Size

Detailed Design Grid description
Documentation
Final angular check

Dropdown

Status

colour	Yellow
title	In Progress

Label field
Input field
Icon Button
Content(Overflow Menu*)
- Group
- Button
Input Style
- Validation
- State
- Size

Detailed Design Grid description
Documentation
Final angular check

Multiselect

Status

colour	Yellow
title	In Progress

Label field
Input field
Icon Button
Tag
Content(Overflow Menu*)
- Group
- Button
Input Style
- Validation
- State
- Size

Detailed Design Grid description
Documentation
Final angular check

Datepicker

Status

colour	Yellow
title	In Progress

Input Field
Icon
Toolbar Bottom
Contentswitch
Content
- Title
- Form
- Sidebar
Input Style
- Validation
- State (Dropdown/Link)

Basic Design
Present final design in UI/UX Guilde
Zeplin Documentation
Documentation
Final angular check

Graphics

Karma

Status

subtle	true
colour	Green
title	done

SVG Images
- bad
- neutral
- bad

Documentation
Final angular check

Pictures

News

Status

colour	Red
title	Not f. MVP

Not MVP - must be discussed

Status

colour	Red
title	Not f. MVP

Charts

Gantt Chart

Status

colour	Red
title	Not f. MVP

Not MVP - DevExtreme

Status

colour	Red
title	Not f. MVP

Pie Chart

Status

colour	Yellow
title	In Progress

Thomas King

Documentation
Final angular check

Bar Chart

Status

colour	Yellow
title	In Progress

Thomas King

Documentation
Final angular check

Doughnut Chart

Status

colour	Yellow
title	In Progress

Thomas King

Documentation
Final angular check

Line Chart

Status

colour	Yellow
title	In Progress

Thomas King

Documentation
Final angular check

...

Content

Space Tools

Versions Compared

Old Version 10

New Version 11

Key

UI-Elements