Skip to content

Commit 0a8ca4c

Browse files
rviscomirviscomi
authored
Add Baseline status to hovercards (#428)
* update custom-data * show baseline info * sync custom data * updated design * respect documentation setting * tests * show missing baseline browsers * light/dark inline SVGs * fix tests * re-add browsers, adjust baseline schema * add baseline to schema docs * merge browser support * also remove baseline.support from doc * reconcile baseline support * update mobile shortnames * remove duplicate types * address UI feedback
1 parent 5eb09e6 commit 0a8ca4c

File tree

8 files changed

+192
-87
lines changed

8 files changed

+192
-87
lines changed

‎docs/customData.md‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ All top-level properties share two basic properties, `name` and `description`. F
5858
}
5959
```
6060

61-
You can also specify 4 additional properties for them:
61+
You can also specify 5 additional properties for them:
6262

6363
```jsonc
6464
{
@@ -73,6 +73,11 @@ You can also specify 4 additional properties for them:
7373
"IE10",
7474
"O37"
7575
],
76+
"baseline": {
77+
"status": "high",
78+
"baseline_low_date": "2015-09-30",
79+
"baseline_high_date": "2018-03-30"
80+
},
7681
"status": "standard",
7782
"references": [
7883
{
@@ -91,14 +96,25 @@ You can also specify 4 additional properties for them:
9196
export let browserNames = {
9297
E: 'Edge',
9398
FF: 'Firefox',
99+
FFA: 'Firefox on Android',
94100
S: 'Safari',
101+
SM: 'Safari on iOS',
95102
C: 'Chrome',
103+
CA: 'Chrome on Android',
96104
IE: 'IE',
97105
O: 'Opera'
98106
};
99107
```
100108
The browser compatibility will be rendered at completion and hover. Items that is supported in only one browser are dropped from completion.
101109

110+
- `baseline`: An object containing [Baseline](https://web-platform-dx.github.io/web-features/) information about the feature's browser compatibility, as defined by the [WebDX Community Group](https://web-platform-dx.github.io/web-features/webdx-cg/).
111+
112+
- `status`: The Baseline status is either `"false"` (limited availability across major browsers), `"low"` (newly available across major browsers), or `"high"` (widely available across major browsers).
113+
114+
- `baseline_low_date`: A date in the format `YYYY-MM-DD` representing when the feature became newly available, or undefined if it hasn't yet reached that status.
115+
116+
- `baseline_high_date`: A date in the format `YYYY-MM-DD` representing when the feature became widely available, or undefined if it hasn't yet reached that status. The widely available date is always 30 months after the newly available date.
117+
102118
- `status`: The status of the item. The format is:
103119
```
104120
export type EntryStatus = 'standard' | 'experimental' | 'nonstandard' | 'obsolete';

‎docs/customData.schema.json‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,31 @@
8383
"description": "Supported browsers",
8484
"items": {
8585
"type": "string",
86-
"pattern": "(E|FF|S|C|IE|O)([\\d|\\.]+)?",
87-
"patternErrorMessage": "Browser item must follow the format of `${browser}${version}`. `browser` is one of:\n- E: Edge\n- FF: Firefox\n- S: Safari\n- C: Chrome\n- IE: Internet Explorer\n- O: Opera"
86+
"pattern": "(E|FFA|FF|SM|S|CA|C|IE|O)([\\d|\\.]+)?",
87+
"patternErrorMessage": "Browser item must follow the format of `${browser}${version}`. `browser` is one of:\n- E: Edge\n- FF: Firefox\n- FM: Firefox Android\n- S: Safari\n- SM: Safari on iOS\n- C: Chrome\n- CM: Chrome on Android\n- IE: Internet Explorer\n- O: Opera"
88+
}
89+
},
90+
"baseline": {
91+
"type": "object",
92+
"description": "Baseline information for the feature",
93+
"properties": {
94+
"status": {
95+
"type": "string",
96+
"description": "Baseline status",
97+
"enum": ["high", "low", "false"]
98+
},
99+
"baseline_low_date": {
100+
"type": "string",
101+
"description": "Date when the feature became newly supported in all major browsers",
102+
"pattern": "^\\d{4}-\\d{2}-\\d{2}$",
103+
"patternErrorMessage": "Date must be in the format of `YYYY-MM-DD`"
104+
},
105+
"baseline_high_date": {
106+
"type": "string",
107+
"description": "Date when the feature became widely supported in all major browsers",
108+
"pattern": "^\\d{4}-\\d{2}-\\d{2}$",
109+
"patternErrorMessage": "Date must be in the format of `YYYY-MM-DD`"
110+
}
88111
}
89112
},
90113
"references": {

‎src/cssLanguageTypes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,4 +327,4 @@ export interface CSSFormatConfiguration {
327327
/** @deprecated Use newlineBetweenSelectors instead*/
328328
selectorSeparatorNewline?: boolean;
329329

330-
}
330+
}

‎src/data/webCustomData.ts‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -448,7 +448,7 @@ export const cssData : CSSDataV1 = {
448448
}
449449
],
450450
"syntax": "auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>",
451-
"relevance": 74,
451+
"relevance": 75,
452452
"references": [
453453
{
454454
"name": "MDN Reference",
@@ -725,7 +725,7 @@ export const cssData : CSSDataV1 = {
725725
}
726726
],
727727
"syntax": "<single-animation-fill-mode>#",
728-
"relevance": 64,
728+
"relevance": 65,
729729
"references": [
730730
{
731731
"name": "MDN Reference",
@@ -873,7 +873,7 @@ export const cssData : CSSDataV1 = {
873873
"O30"
874874
],
875875
"syntax": "<easing-function>#",
876-
"relevance": 72,
876+
"relevance": 73,
877877
"references": [
878878
{
879879
"name": "MDN Reference",
@@ -2633,7 +2633,7 @@ export const cssData : CSSDataV1 = {
26332633
"O3.5"
26342634
],
26352635
"syntax": "<line-width> || <line-style> || <color>",
2636-
"relevance": 81,
2636+
"relevance": 82,
26372637
"references": [
26382638
{
26392639
"name": "MDN Reference",
@@ -2793,7 +2793,7 @@ export const cssData : CSSDataV1 = {
27932793
"O9.2"
27942794
],
27952795
"syntax": "<line-width> || <line-style> || <color>",
2796-
"relevance": 80,
2796+
"relevance": 81,
27972797
"references": [
27982798
{
27992799
"name": "MDN Reference",
@@ -3081,7 +3081,7 @@ export const cssData : CSSDataV1 = {
30813081
"O10.5"
30823082
],
30833083
"syntax": "<length-percentage>{1,2}",
3084-
"relevance": 76,
3084+
"relevance": 75,
30853085
"references": [
30863086
{
30873087
"name": "MDN Reference",
@@ -3177,7 +3177,7 @@ export const cssData : CSSDataV1 = {
31773177
],
31783178
"values": [],
31793179
"syntax": "<line-width>{1,4}",
3180-
"relevance": 82,
3180+
"relevance": 83,
31813181
"references": [
31823182
{
31833183
"name": "MDN Reference",
@@ -3215,7 +3215,7 @@ export const cssData : CSSDataV1 = {
32153215
}
32163216
],
32173217
"syntax": "<length> | <percentage> | auto",
3218-
"relevance": 90,
3218+
"relevance": 91,
32193219
"references": [
32203220
{
32213221
"name": "MDN Reference",
@@ -3336,7 +3336,7 @@ export const cssData : CSSDataV1 = {
33363336
}
33373337
],
33383338
"syntax": "content-box | border-box",
3339-
"relevance": 92,
3339+
"relevance": 93,
33403340
"references": [
33413341
{
33423342
"name": "MDN Reference",
@@ -6942,7 +6942,7 @@ export const cssData : CSSDataV1 = {
69426942
}
69436943
],
69446944
"syntax": "<absolute-size> | <relative-size> | <length-percentage>",
6945-
"relevance": 94,
6945+
"relevance": 95,
69466946
"references": [
69476947
{
69486948
"name": "MDN Reference",
@@ -8086,7 +8086,7 @@ export const cssData : CSSDataV1 = {
80868086
}
80878087
],
80888088
"syntax": "<grid-line>",
8089-
"relevance": 52,
8089+
"relevance": 53,
80908090
"references": [
80918091
{
80928092
"name": "MDN Reference",
@@ -8973,7 +8973,7 @@ export const cssData : CSSDataV1 = {
89738973
}
89748974
],
89758975
"syntax": "<length> | <percentage> | auto",
8976-
"relevance": 94,
8976+
"relevance": 95,
89778977
"references": [
89788978
{
89798979
"name": "MDN Reference",
@@ -16287,7 +16287,7 @@ export const cssData : CSSDataV1 = {
1628716287
}
1628816288
],
1628916289
"syntax": "none | <length>",
16290-
"relevance": 54,
16290+
"relevance": 55,
1629116291
"references": [
1629216292
{
1629316293
"name": "MDN Reference",
@@ -17633,7 +17633,7 @@ export const cssData : CSSDataV1 = {
1763317633
"O67"
1763417634
],
1763517635
"syntax": "<number>",
17636-
"relevance": 53,
17636+
"relevance": 54,
1763717637
"references": [
1763817638
{
1763917639
"name": "MDN Reference",
@@ -22216,7 +22216,7 @@ export const cssData : CSSDataV1 = {
2221622216
}
2221722217
],
2221822218
"syntax": "normal | break-word",
22219-
"relevance": 77,
22219+
"relevance": 78,
2222022220
"description": "Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit.",
2222122221
"restrictions": [
2222222222
"enum"
@@ -24756,7 +24756,7 @@ export const cssData : CSSDataV1 = {
2475624756
{
2475724757
"name": "inset-inline-end",
2475824758
"syntax": "<'top'>",
24759-
"relevance": 54,
24759+
"relevance": 55,
2476024760
"browsers": [
2476124761
"E87",
2476224762
"FF63",
@@ -31860,4 +31860,4 @@ export const cssData : CSSDataV1 = {
3186031860
"description": "The ::view-transition-old CSS pseudo-element represents the \"old\" view state of a view transition — a static snapshot of the old view, before the transition."
3186131861
}
3186231862
]
31863-
};
31863+
};

0 commit comments

Comments
 (0)