Azure / Azure/api-management-developer-portal

Inherit typography styles

Open
#1,289 2 comments 0 reactions 0 assignees View on GitHub
(t) Improvement (u) Customization (u) Paperbits (u) Usability P2
Dominant language
TypeScript
Stars
545
Forks
360
PR merge metrics
No merged PRs in 30d

Description

## Bug description

Currently on the "Styles"-configuration page most of the typography styles descent from the "Regular" styling.
Meaning if "inherit" in any styling option of a text element is selected then only the styles from "Regular" are applied.

For example the "Header" styles are not used for the headers as seen in the gif.
![2021-04-29_12-31-16](https://user-images.githubusercontent.com/58420097/116537848-10574a80-a8e7-11eb-9a6a-2371cedc9004.gif)
This effectively renders the other options useless.

To have everything at one place and to actually be able to use the "inherit" option it would be best to see/configure where the inheritance comes from/where it goes to.
A possible solution would be an option to assign the different base types (Footer, Header, Regular or any additional type) to different typography sections e.g. headings and body-types.

This is just a quick idea with the current methods in the DevPortal. If there is a better way/improvements then go ahead.
![image](https://user-images.githubusercontent.com/58420097/116540530-91641100-a8ea-11eb-9e2d-d7ad6099e974.png)
This option should define where the styles descend to.

This would allow the editor to see where the settings are pointed, could create alternative styles and easily compare them and the editor can use the inherit option more often instead of assigning every setting new.

Currently it is only useable if all the basic settings are in one "typography base type" (again: Header, Footer and Regular) and for future maintainability this is not suitable.

## Expected behavior

The inherit option should correctly inherit from the style settings and it should be clear where to/from the styles came.

---
@AnRei123

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at the Styles-configuration page and reproduce the typography inheritance behavior described in the issue, including Header, Footer, and Regular base types. Trace how selecting inherit resolves its source; done means inherited settings use the intended style and the editor can clearly see where each style comes from.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.