carbon-design-system / carbon-design-system/devtools

Carbon automated validation

Open
#13 0 comments 0 reactions 0 assignees View on GitHub
enhancement Epic
Dominant language
JavaScript
Stars
46
Forks
23
PR merge metrics
No merged PRs in 30d

Description

We can use this tool to validate how well it follows Carbon and IDL.

> checking all browser breakpoints? (sm, md, lg, xlg, max)

Some ideas to go into this report...
- [ ] IBM Design Language
- [ ] Color
- [ ] Carbon tokens (if css properties on) (pass)
— Carbon theme token values only fallback
— Can we contextualize the tokens?
- [ ] IDL theme values as alternative (warning — with documentation)
- [ ] No in Carbon or IDL (error — with documentation)
- [ ] Spacing
— Margin (layout first, spacing second)
— padding (spacing first, layout second)
- [ ] first spacing check (pass)
- [ ] second spacing check (pass, possible warning — with documentation)
- [ ] mini unit value (warning — with documentation)
- [ ] doesn't match (error — with documentation)
- [ ] Typography
- If expressive theme enabled (check expressive tokens first)
- by default (check productive tokens first)
- if found (pass)
- if not found (error — with documentation)
- possible opportunity for contextual checks?
> **possible future rulesets**
> - [ ] Ratio
> - specific list of items we know have to have a correct aspect ratio? (image, cards, videos, ect...)
> - changes on browser resizes?
> - [ ] Icons
> - check against Carbon icons
> - if found (pass)
> - if not found (error — with documentation)
> - [ ] Photography
> - background images as well
> - [ ] check against watson visual recognition
> - [ ] check ratios
> - [ ] Grid
- [ ] Code
- [ ] Version usage
- [ ] Overriding or additional code (need to check feasibility)
- [ ] Component count & usage
- Look at component list
- total components in all
- total unique components
- Minimum count to be a carbon page? (e.g. 3)
- [ ] Stale status
- Has the page been updated within a time frame (e.g. 6 months since last update)
- [ ] 3rd party code usage
- specific and known checks (e.g. jquery, bootstrap, material)
- anything not carbon? (e.g. anything from a seperate URL, or the main build if possible)
- [ ] Library specific validation
- [ ] Carbon for IBM.com #12

> **Rule results**
> Pass — points added
> Warning — no points deducted — provide documentation
> Error — points deducted — provide documentation

> **What exactly makes a page Carbon compliant?**
> If we add a percentage to a page, what percentage passes, what percentage fails? (85 >= pass, 50 >= warning, else = fail)

> **Possible algorithms**
> 1. `($max – $min)($correctCount * 1 / $ruleCount)` // min/max // never can get 100%, and yet never can get below 25%/ / Leaning towards this one
> 2. `$correctCount * 100 / $ruleCount` // basic percentage based
> 3. `100 - ($incorrectCount * $value)` // start with 100% and take a value away for each one, stop at zero // not great for only a couple rules or scaling

> **Weight results where some might be worth 2 times or more than normal**
> in/Correct `$resultsValue=1`, Warning `$resultsValue=.5`
> `$ruleCount += $rules[i].ruleWeight * 1 || 1`
> `$correctCount += $rules[i].ruleWeight * $resultValue || $resultValue`
> `$incorrectCount += $rules[i].ruleWeight * $resultValue || $resultValue`


> Delayed in favor of [beacon for ibm dot com](https://github.com/IBM/beacon-for-ibm-dotcom)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.