BTP vs. Fiori

[droshev]

• [x] Review BTP design
• [x] Identify the differences and evaluate the changes needed

Documentation Requests:

• [ ] buttons - regular buttons - update the documentation to map and reflect primary/secondary/tertiary vs. button types
• [ ] List item - show more/less - update the doc
• [ ] Vertical Nav - add examples with collapsed/expanded sections - update the doc

Visual Requests:

• [ ] buttons - toggle and segmented button - centred text, button width should be equal regardless of text length
• [ ] list - vertical spacing: should Fundamental match with BTP design to reduce vertical spacing for improved readability?
• [ ] card-based layout - vertical spacing: should Fundamental match with BTP design to reduce vertical spacing for improved readability?

To be implemented in Fundamental if needed

• [ ] color picker - arrows design, few design diff. design question, missing in fundamentals
• [ ] Tabs - instance tab - to be implemented in fundamental
• [ ] wizard - embedding wizard in the dialog component
• [ ] list - in-place editing; show examples
• [ ] multi-input - new pattern introduced in BTP to fit five lines
• [ ] splitter; split layout

BTP Related:

• [ ] input examples in BTP: UI texts should reflect the semantic message
• [ ] switch - color differences/ width (awaiting response from BTP team)

Resolved:

• [x] timepicker - arrows up/down design question
• [x] select - arrow icons - two weights available
• [x] slider - ring size - two weights available
• [x] panel - slightly diff. design/padding - check with Fiori 3 design: two options: (a) having the line under the header (b) having the line under the section. both can be used
• [x] List item - avatar examples: avatar can be in either a circle or a rectangular shape, depends on use cases; in some cases it is flexible for the user to choose
• [x] wizard - text colors, spacing and line width, empty spacing
• [x] user menu - 2 additional icons in Fundamental: only exist in spec but never has the use case for it in implementation; badge design
• [x] calendar - the state which the date is on light blue block with dark blue border: not documented in Fundamental

[I546502]

For more details on these requests and additional considerations, please refer to this Figma file.

---

Documentation Requests

• [x] button - regular button: update UI text to reflect primary/secondary/tertiary

  

• [ ] vertical navigation - add examples of collapsed/expanded sections to show expanded view of secondary-level nav

  

Visual Requests

• [ ] button - toggle and segmented button: update/fix button width so all buttons share the same size

  

• [ ] list - byline list: vertical spacing

  

• [ ] card-based layout - vertical spacing: same concern with byline list

  

To be implemented in Fundamental if needed

• [ ] color picker - to be implemented in Fundamental

  

• [ ] tabs - instance tab - to be implemented in Fundamental

  

• [ ] wizard - embedding wizard in the dialog component: BTP introduces a new pattern of having wizard in a dialog format and uses a dynamic page format (which incorporates a floating, dynamic page footer)

  

• [ ] list - in-place editing: to be implemented in Fundamental if needed

  

• [ ] multi-input - new pattern introduced in BTP to fit five lines; update UI text: More instead of more

  

• [ ] splitter; split layout - to be implemented in Fundamental if needed

  

Consideration for Fiori

• [ ] input - transient creation: update design or documentation - conflicting behaviour in the example

[droshev]

@hanjunt @kari-leg let's discuss this and decide how to proceed.

[droshev]

closing this as we are shifting towards Fiori Horizon