[Enhancement] Add missing specs to links page
natalia-fitzgerald opened this issue · 3 comments
Add missing specs to the links page including:
- Hex values for link states (throughout)
- Specs for call-to-action link
- Simplified styling for destructive link
Before and after
Inline links
- Added the hex values so that what a designer sees in code (inspector) matches what's in the specs.
| Current | Update |
|---|---|
Call-to-action links
- No current specs existed.
- Consideration: Should we cross link between call-to-action links and list links? Are they the same thing?
| Current (no specs) | Update |
|---|---|
Destructive links
- Optional: Add styling info for states
- Bug: Implementation tab is showing even though it contains no content
| Current | Update |
|---|---|
Looking for review (optional): @meissadia @anselmbradford @jenn-franklin @chaisamantha
Thanks for updating and adding specs! Here are some thoughts:
General: Love the addition of hex codes next to color names. Would it be helpful to write specs that follow CSS formatting? So, instead of 1px dotted bottom border, it would be border-bottom: 1px dotted Pacific Blue (#0072ce). The updated call-to-action specs uses similar formatting. For focus states, it would be outline: thin dotted instead of thin dotted outline.
Call-to-action links: For When links appear as a part of a list section, I think it would be helpful to also add an image that helps visualize the specs between items. Here is a quick mockup:
Destructive links: I think it’d be helpful to include the font weight and size because destructive links aren’t grouped with call-to-action links.
Ok here's a start on those updates:
Inline links
- Added the formatting identifiers to more closely align with CSS properties (see note below).
| R1 | R2 |
|---|---|
Destructive links
- Added font weight and size
| R1 | R2 |
|---|---|
Call-to-action links
For the "Call-to-action" image would we add this to the specs tab?
--
Bigger picture:
If we were to actually add the specs as they appear in the CSS we would actually break it up a lot more than what is described here. I think this is worth discussing as a more global item. How do we want to format specs? Should the properties be labeled and ordered as they appear in CSS?
The link styling includes all of these properties (and more):
- Font-family
- Font-weight
- Font-size:
- Color:
- Border-width
- Border-style:
- Border-color:
- Outline:
I'll open up another issue to discuss the specs styling more globally. For now I'd like to go ahead and push these iterative updates.
Closing this out because I have updated and published the specs on the links page. I will open a separate discussion issue regarding the way we organize and label UI specs and how we might want to standardize our approach.