Skip to content

Commit 4c94cd0

Browse files
LFDanLuLFDanLu
committed
add mdn links for common types and specific css properties
1 parent e2b29c9 commit 4c94cd0

File tree

2 files changed

+66
-43
lines changed

2 files changed

+66
-43
lines changed

‎packages/dev/s2-docs/src/styleProperties.ts‎

Lines changed: 58 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -133,14 +133,10 @@ const dimensionsPropertyValues: {[key: string]: string[]} = {
133133
textIndent: [],
134134
translateX: ['full'],
135135
translateY: ['full'],
136-
137-
138-
// TODO These ones should have a description for the supported values, make a type link for number however
136+
// TODO These ones should have a description for the supported values
139137
rotate: ['number', '${number}deg', '${number}rad', '${number}grad', '${number}turn'],
140138
scaleX: ['number', '${number}%'],
141139
scaleY: ['number', '${number}%'],
142-
143-
144140
transform: ['string'],
145141
position: ['absolute', 'fixed', 'relative', 'sticky', 'static'],
146142
insetStart: ['auto', 'full'],
@@ -149,8 +145,7 @@ const dimensionsPropertyValues: {[key: string]: string[]} = {
149145
left: ['auto', 'full'],
150146
bottom: ['auto', 'full'],
151147
right: ['auto', 'full'],
152-
153-
// TODO: also would like this number/number to be code formatted, not a string? Maybe make it a type link as well
148+
// TODO: add description for this one
154149
aspectRatio: ['auto', 'square', 'video', 'number / number']
155150
};
156151

@@ -166,7 +161,6 @@ const textPropertyValues: {[key: string]: string[]} = {
166161
verticalAlign: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super'],
167162
textDecoration: ['none', 'underline', 'overline', 'line-through'],
168163
textOverflow: ['ellipsis', 'clip'],
169-
// TODO: make common type link for number, link to mdn
170164
lineClamp: ['number'],
171165
hyphens: ['none', 'manual', 'auto'],
172166
whiteSpace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'],
@@ -186,7 +180,7 @@ const effectsPropertyValues: {[key: string]: string[]} = {
186180
borderBottomEndRadius: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'],
187181
forcedColorAdjust: ['auto', 'none'],
188182
colorScheme: ['light', 'dark', 'light dark'],
189-
// TODO: ideally would be type links for string and LinearGradient, will need to decide if we wanna export LinearGradient
183+
// TODO: ideally would be type for LinearGradient, will need to decide if we wanna export LinearGradient
190184
backgroundImage: ['string', 'LinearGradient'],
191185
backgroundPosition: ['bottom', 'center', 'left', 'left bottom', 'left top', 'right', 'right bottom', 'right top', 'top'],
192186
backgroundSize: ['auto', 'cover', 'contain'],
@@ -196,34 +190,20 @@ const effectsPropertyValues: {[key: string]: string[]} = {
196190
backgroundOrigin: ['border-box', 'padding-box', 'content-box'],
197191
backgroundBlendMode: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'],
198192
mixBlendMode: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-darker', 'plus-lighter'],
199-
// TODO: ideally would be a type link
200193
opacity: ['number'],
201194
outlineStyle: ['none', 'solid', 'dashed', 'dotted', 'double', 'inset'],
202195
outlineOffset: ['number'],
203196
outlineWidth: ['0', '1', '2', '4'],
204197
transition: ['default', 'colors', 'opacity', 'shadow', 'transform', 'all', 'none'],
205-
206-
// TODO: type link
207198
transitionDelay: ['string', 'number'],
208199
transitionDuration: ['string', 'number'],
209-
210200
transitionTimingFunction: ['default', 'linear', 'in', 'out', 'in-out'],
211-
212-
// TODO: type link, maybe some of these type links should just be links to MDN?
213-
// Could make it similar to getAdditionalTypes and have a links object that has the type (aka string | number) and then links it to MDN
214201
animation: ['string', 'number'],
215202
animationDuration: ['string', 'number'],
216203
animationDelay: ['string', 'number'],
217-
218-
219-
220204
animationDirection: ['normal', 'reverse', 'alternate', 'alternate-reverse'],
221205
animationFillMode: ['none', 'forwards', 'backwards', 'both'],
222-
223-
// TODO: type link, see above
224206
animationIterationCount: ['string', 'number'],
225-
226-
227207
animationTimingFunction: ['default', 'linear', 'in', 'out', 'in-out'],
228208
animationPlayState: ['paused', 'running']
229209
};
@@ -238,17 +218,13 @@ const layoutPropertyValues: {[key: string]: string[]} = {
238218
justifySelf: ['auto', 'start', 'end', 'center', 'stretch'],
239219
flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
240220
flexWrap: ['wrap', 'wrap-reverse', 'nowrap'],
241-
242-
243-
// TODO: the below definitely link to MDN
244-
// flexShrink: new ArbitraryProperty<CSS.Property.FlexShrink>('flexShrink'),
245-
// flexGrow: new ArbitraryProperty<CSS.Property.FlexGrow>('flexGrow'),
246-
// gridColumnStart: new ArbitraryProperty<CSS.Property.GridColumnStart>('gridColumnStart'),
247-
// gridColumnEnd: new ArbitraryProperty<CSS.Property.GridColumnEnd>('gridColumnEnd'),
248-
// gridRowStart: new ArbitraryProperty<CSS.Property.GridRowStart>('gridRowStart'),
249-
// gridRowEnd: new ArbitraryProperty<CSS.Property.GridRowEnd>('gridRowEnd'),
250-
251-
221+
// these will be handled via specific links
222+
flexShrink: [],
223+
flexGrow: [],
224+
gridColumnStart: [],
225+
gridColumnEnd: [],
226+
gridRowStart: [],
227+
gridRowEnd: [],
252228
gridAutoFlow: ['row', 'column', 'dense', 'row dense', 'column dense'],
253229

254230
// TODO: make these link to MDN and also have baseSpacingValue type link
@@ -258,7 +234,6 @@ const layoutPropertyValues: {[key: string]: string[]} = {
258234
gridTemplateRows: ['auto', 'min-content', 'max-content', '${number}fr', 'minmax(${string}, ${string})', 'none', 'subgrid', 'string'],
259235
gridTemplateAreas: ['string[]'],
260236

261-
262237
float: ['inline-start', 'inline-end', 'right', 'left', 'none'],
263238
clear: ['inline-start', 'inline-end', 'left', 'right', 'both', 'none'],
264239
contain: ['none', 'strict', 'content', 'size', 'inline-size', 'layout', 'style', 'paint'],
@@ -274,8 +249,6 @@ const layoutPropertyValues: {[key: string]: string[]} = {
274249
overscrollBehaviorX: ['auto', 'contain', 'none'],
275250
overscrollBehaviorY: ['auto', 'contain', 'none'],
276251
scrollBehavior: ['auto', 'smooth'],
277-
278-
// TODO: make type link
279252
order: ['number'],
280253
};
281254

@@ -295,7 +268,6 @@ const miscPropertyValues: {[key: string]: string[]} = {
295268
objectFit: ['contain', 'cover', 'fill', 'none', 'scale-down'],
296269
objectPosition: ['bottom', 'center', 'left', 'left bottom', 'left top', 'right', 'right bottom', 'right top', 'top'],
297270
willChange: ['auto', 'scroll-position', 'contents', 'transform'],
298-
// TODO: need type link
299271
zIndex: ['number'],
300272
disableTapHighlight: ['true'],
301273
unicodeBidi: ['normal', 'embed', 'bidi-override', 'isolate', 'isolate-override', 'plaintext'],
@@ -424,25 +396,70 @@ export function getAdditionalTypes(propertyName: string): string[] {
424396
return types;
425397
}
426398

427-
// Export spacing values for use in TypePopover
428399
export const spacingTypeValues = {
429400
baseSpacing: baseSpacingValues,
430401
negativeSpacing: negativeBaseSpacingValues
431402
};
432403

404+
const mdnTypeLinks: {[key: string]: string} = {
405+
'string': 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String',
406+
'number': 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number',
407+
};
408+
409+
const mdnPropertyLinks: {[key: string]: {[value: string]: string}} = {
410+
'flexShrink': {
411+
'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink'
412+
},
413+
'flexGrow': {
414+
'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow'
415+
},
416+
'gridColumnStart': {
417+
'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start'
418+
},
419+
'gridColumnEnd': {
420+
'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end'
421+
},
422+
'gridRowStart': {
423+
'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start'
424+
},
425+
'gridRowEnd': {
426+
'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end'
427+
}
428+
};
429+
433430
interface StyleMacroPropertyDefinition {
434431
values: string[],
435-
additionalTypes?: string[]
432+
additionalTypes?: string[],
433+
links?: {[value: string]: string}
436434
}
437435

438436
export function getPropertyDefinitions(propertyCategory: string): {[key: string]: StyleMacroPropertyDefinition} {
439437
let result: {[key: string]: StyleMacroPropertyDefinition} = {};
440438
let propertiesMapping = properties[propertyCategory] || {};
441439

442440
for (let [name, values] of Object.entries(propertiesMapping)) {
441+
let links: {[value: string]: string} = {};
442+
443+
if (mdnPropertyLinks[name]) {
444+
links = {...mdnPropertyLinks[name]};
445+
values = [Object.keys(links)[0]];
446+
} else {
447+
// see if the property has any common types that should link to MDN instead
448+
for (let value of values) {
449+
if (mdnTypeLinks[value]) {
450+
// make sure not to overwrite number in sizing properties
451+
if (value === 'number' && sizingProperties.has(name)) {
452+
continue;
453+
}
454+
links[value] = mdnTypeLinks[value];
455+
}
456+
}
457+
}
458+
443459
result[name] = {
444460
values,
445-
additionalTypes: getAdditionalTypes(name)
461+
additionalTypes: getAdditionalTypes(name),
462+
links: Object.keys(links).length > 0 ? links : undefined
446463
};
447464
}
448465
return result;

‎packages/dev/s2-docs/src/types.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -756,7 +756,8 @@ function StyleMacroTypePopover({typeName, description, body}: StyleMacroTypePopo
756756

757757
interface StyleMacroPropertyDefinition {
758758
values: string[],
759-
additionalTypes?: string[]
759+
additionalTypes?: string[],
760+
links?: {[value: string]: string}
760761
}
761762

762763
interface StyleMacroPropertiesProps {
@@ -779,6 +780,7 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
779780
{propertyNames.map((propertyName, index) => {
780781
let propDef = properties[propertyName];
781782
let values = propDef.values;
783+
let links = propDef.links || {};
782784

783785
return (
784786
<TableRow key={index}>
@@ -792,7 +794,11 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
792794
{values.map((value, i) => (
793795
<React.Fragment key={i}>
794796
{i > 0 && <Punctuation>{' | '}</Punctuation>}
795-
<span className={codeStyles.string}>'{value}'</span>
797+
{links[value] ? (
798+
<ColorLink href={links[value]} type="variable" rel="noreferrer" target="_blank">{value}</ColorLink>
799+
) : (
800+
<span className={codeStyles.string}>'{value}'</span>
801+
)}
796802
</React.Fragment>
797803
))}
798804
{propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => (

0 commit comments

Comments
 (0)