Skip to content

Commit 980d3d6

Browse files
LFDanLuLFDanLu
committed
add short hand and condition tables
1 parent 5d2b172 commit 980d3d6

File tree

3 files changed

+225
-86
lines changed

3 files changed

+225
-86
lines changed

‎packages/dev/s2-docs/pages/s2/Reference.mdx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {InlineAlert, Heading, Content, Link} from '@react-spectrum/s2';
33
import {S2Colors} from '../../src/S2Colors';
44
import {S2Typography} from '../../src/S2Typography';
55
import {StyleMacroProperties} from '../../src/types';
6-
import {getPropertyDefinitions} from '../../src/styleProperties';
6+
import {getPropertyDefinitions, getShorthandDefinitions} from '../../src/styleProperties';
77
export default Layout;
88

99
export const section = 'Guides';
@@ -71,5 +71,10 @@ Type scales include: UI, Body, Heading, Title, Detail, and Code. Each scale has
7171

7272
## Shorthands
7373

74+
Shorthands apply their provided value to commonly grouped properties.
75+
76+
<StyleMacroProperties properties={getShorthandDefinitions('shorthand')} />
7477

7578
## Conditions
79+
80+
<StyleMacroProperties properties={getPropertyDefinitions('conditions')} />

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

Lines changed: 201 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,6 @@ const dimensionsPropertyValues: {[key: string]: string[]} = {
128128
textIndent: [],
129129
translateX: ['full'],
130130
translateY: ['full'],
131-
// TODO These ones should have a description for the supported values
132131
rotate: ['number', '${number}deg', '${number}rad', '${number}grad', '${number}turn'],
133132
scaleX: ['number', '${number}%'],
134133
scaleY: ['number', '${number}%'],
@@ -140,7 +139,6 @@ const dimensionsPropertyValues: {[key: string]: string[]} = {
140139
left: ['auto', 'full'],
141140
bottom: ['auto', 'full'],
142141
right: ['auto', 'full'],
143-
// TODO: add description for this one
144142
aspectRatio: ['auto', 'square', 'video', 'number / number']
145143
};
146144

@@ -192,7 +190,7 @@ const effectsPropertyValues: {[key: string]: string[]} = {
192190
transitionDelay: ['string', 'number'],
193191
transitionDuration: ['string', 'number'],
194192
transitionTimingFunction: ['default', 'linear', 'in', 'out', 'in-out'],
195-
animation: ['string', 'number'],
193+
animation: ['string'],
196194
animationDuration: ['string', 'number'],
197195
animationDelay: ['string', 'number'],
198196
animationDirection: ['normal', 'reverse', 'alternate', 'alternate-reverse'],
@@ -220,14 +218,11 @@ const layoutPropertyValues: {[key: string]: string[]} = {
220218
gridRowStart: [],
221219
gridRowEnd: [],
222220
gridAutoFlow: ['row', 'column', 'dense', 'row dense', 'column dense'],
223-
224-
// TODO: make these link to MDN and also have baseSpacingValue type link
225221
gridAutoRows:['auto', 'min-content', 'max-content', '${number}fr', 'minmax(${string}, ${string})', 'string'],
226222
gridAutoColumns: ['auto', 'min-content', 'max-content', '${number}fr', 'minmax(${string}, ${string})', 'string'],
227223
gridTemplateColumns: ['auto', 'min-content', 'max-content', '${number}fr', 'minmax(${string}, ${string})', 'none', 'subgrid', 'string',],
228224
gridTemplateRows: ['auto', 'min-content', 'max-content', '${number}fr', 'minmax(${string}, ${string})', 'none', 'subgrid', 'string'],
229225
gridTemplateAreas: ['string[]'],
230-
231226
float: ['inline-start', 'inline-end', 'right', 'left', 'none'],
232227
clear: ['inline-start', 'inline-end', 'left', 'right', 'both', 'none'],
233228
contain: ['none', 'strict', 'content', 'size', 'inline-size', 'layout', 'style', 'paint'],
@@ -268,78 +263,163 @@ const miscPropertyValues: {[key: string]: string[]} = {
268263
caretColor: ['auto', 'transparent']
269264
};
270265

271-
272-
// TODO add shorthand mapping and conditions to the docs
273-
const shorthandMapping: {[key: string]: string[]} = {
274-
padding: ['paddingTop', 'paddingBottom', 'paddingStart', 'paddingEnd'],
275-
paddingX: ['paddingStart', 'paddingEnd'],
276-
paddingY: ['paddingTop', 'paddingBottom'],
277-
margin: ['marginTop', 'marginBottom', 'marginStart', 'marginEnd'],
278-
marginX: ['marginStart', 'marginEnd'],
279-
marginY: ['marginTop', 'marginBottom'],
280-
scrollPadding: ['scrollPaddingTop', 'scrollPaddingBottom', 'scrollPaddingStart', 'scrollPaddingEnd'],
281-
scrollPaddingX: ['scrollPaddingStart', 'scrollPaddingEnd'],
282-
scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'],
283-
scrollMargin: ['scrollMarginTop', 'scrollMarginBottom', 'scrollMarginStart', 'scrollMarginEnd'],
284-
scrollMarginX: ['scrollMarginStart', 'scrollMarginEnd'],
285-
scrollMarginY: ['scrollMarginTop', 'scrollMarginBottom'],
286-
borderWidth: ['borderTopWidth', 'borderBottomWidth', 'borderStartWidth', 'borderEndWidth'],
287-
borderXWidth: ['borderStartWidth', 'borderEndWidth'],
288-
borderYWidth: ['borderTopWidth', 'borderBottomWidth'],
289-
borderRadius: ['borderTopStartRadius', 'borderTopEndRadius', 'borderBottomStartRadius', 'borderBottomEndRadius'],
290-
borderTopRadius: ['borderTopStartRadius', 'borderTopEndRadius'],
291-
borderBottomRadius: ['borderBottomStartRadius', 'borderBottomEndRadius'],
292-
borderStartRadius: ['borderTopStartRadius', 'borderBottomStartRadius'],
293-
borderEndRadius: ['borderTopEndRadius', 'borderBottomEndRadius'],
294-
translate: ['translateX', 'translateY'],
295-
scale: ['scaleX', 'scaleY'],
296-
inset: ['top', 'bottom', 'insetStart', 'insetEnd'],
297-
insetX: ['insetStart', 'insetEnd'],
298-
insetY: ['top', 'bottom'],
299-
placeItems: ['alignItems', 'justifyItems'],
300-
placeContent: ['alignContent', 'justifyContent'],
301-
placeSelf: ['alignSelf', 'justifySelf'],
302-
gap: ['rowGap', 'columnGap'],
303-
size: ['width', 'height'],
304-
minSize: ['minWidth', 'minHeight'],
305-
maxSize: ['maxWidth', 'maxHeight'],
306-
overflow: ['overflowX', 'overflowY'],
307-
overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],
308-
gridArea: ['gridColumnStart', 'gridColumnEnd', 'gridRowStart', 'gridRowEnd'],
309-
310-
// TODO: is it more important to display the mapping that each short hand corresponds to or the value that it accepts?
311-
// I was hoping that I would just display the mapping and then have people reference the value for the corresponding
312-
// values in the sections above
313-
font: fontSize
314-
315-
// TODO: For the below, similar question as the above
316-
// transition: (value: keyof typeof transitionProperty) => ({
317-
// transition: value,
318-
// transitionDuration: 150,
319-
// transitionTimingFunction: 'default'
320-
// }),
321-
// animation: (value: string) => ({
322-
// animation: value,
323-
// animationDuration: 150,
324-
// animationTimingFunction: 'default'
325-
// }),
326-
// // eslint-disable-next-line @typescript-eslint/no-unused-vars
327-
// truncate: (_value: true) => ({
328-
// overflowX: 'hidden',
329-
// overflowY: 'hidden',
330-
// textOverflow: 'ellipsis',
331-
// whiteSpace: 'nowrap'
332-
// }),
333-
// font: (value: keyof typeof fontSize) => {
334-
// let type = value.split('-')[0];
335-
// return {
336-
// fontFamily: type === 'code' ? 'code' : 'sans',
337-
// fontSize: value,
338-
// fontWeight: type === 'heading' || type === 'title' || type === 'detail' ? type : 'normal',
339-
// lineHeight: type,
340-
// color: type === 'ui' ? 'body' : type
341-
// };
342-
// }
266+
const shorthandMapping: {[key: string]: {values: string[], mapping: string[]}} = {
267+
padding: {
268+
values: relativeSpacingValues,
269+
mapping: ['paddingTop', 'paddingBottom', 'paddingStart', 'paddingEnd']
270+
},
271+
paddingX: {
272+
values: relativeSpacingValues,
273+
mapping: ['paddingStart', 'paddingEnd']
274+
},
275+
paddingY: {
276+
values: relativeSpacingValues,
277+
mapping: ['paddingTop', 'paddingBottom']
278+
},
279+
margin: {
280+
values: ['auto'],
281+
mapping: ['marginTop', 'marginBottom', 'marginStart', 'marginEnd']
282+
},
283+
marginX: {
284+
values: ['auto'],
285+
mapping: ['marginStart', 'marginEnd']
286+
},
287+
marginY: {
288+
values: ['auto'],
289+
mapping: ['marginTop', 'marginBottom']
290+
},
291+
scrollPadding: {
292+
values: [],
293+
mapping: ['scrollPaddingTop', 'scrollPaddingBottom', 'scrollPaddingStart', 'scrollPaddingEnd']
294+
},
295+
scrollPaddingX: {
296+
values: [],
297+
mapping: ['scrollPaddingStart', 'scrollPaddingEnd']
298+
},
299+
scrollPaddingY: {
300+
values: [],
301+
mapping: ['scrollPaddingTop', 'scrollPaddingBottom']
302+
},
303+
scrollMargin: {
304+
values: [],
305+
mapping: ['scrollMarginTop', 'scrollMarginBottom', 'scrollMarginStart', 'scrollMarginEnd']
306+
},
307+
scrollMarginX: {
308+
values: [],
309+
mapping: ['scrollMarginStart', 'scrollMarginEnd']
310+
},
311+
scrollMarginY: {
312+
values: [],
313+
mapping: ['scrollMarginTop', 'scrollMarginBottom']
314+
},
315+
borderWidth: {
316+
values: ['0', '1', '2', '4'],
317+
mapping: ['borderTopWidth', 'borderBottomWidth', 'borderStartWidth', 'borderEndWidth']
318+
},
319+
borderXWidth: {
320+
values: ['0', '1', '2', '4'],
321+
mapping: ['borderStartWidth', 'borderEndWidth']
322+
},
323+
borderYWidth: {
324+
values: ['0', '1', '2', '4'],
325+
mapping: ['borderTopWidth', 'borderBottomWidth']
326+
},
327+
borderRadius: {
328+
values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'],
329+
mapping: ['borderTopStartRadius', 'borderTopEndRadius', 'borderBottomStartRadius', 'borderBottomEndRadius']
330+
},
331+
borderTopRadius: {
332+
values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'],
333+
mapping: ['borderTopStartRadius', 'borderTopEndRadius']
334+
},
335+
borderBottomRadius: {
336+
values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'],
337+
mapping: ['borderBottomStartRadius', 'borderBottomEndRadius']
338+
},
339+
borderStartRadius: {
340+
values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'],
341+
mapping: ['borderTopStartRadius', 'borderBottomStartRadius']
342+
},
343+
borderEndRadius: {
344+
values: ['none', 'sm', 'default', 'lg', 'xl', 'full', 'pill'],
345+
mapping: ['borderTopEndRadius', 'borderBottomEndRadius']
346+
},
347+
translate: {
348+
values: ['full'],
349+
mapping: ['translateX', 'translateY']
350+
},
351+
scale: {
352+
values: ['number', '${number}%'],
353+
mapping: ['scaleX', 'scaleY']
354+
},
355+
inset: {
356+
values: ['auto', 'full'],
357+
mapping: ['top', 'bottom', 'insetStart', 'insetEnd']
358+
},
359+
insetX: {
360+
values: ['auto', 'full'],
361+
mapping: ['insetStart', 'insetEnd']
362+
},
363+
insetY: {
364+
values: ['auto', 'full'],
365+
mapping: ['top', 'bottom']
366+
},
367+
placeItems: {
368+
values: ['start', 'end', 'center', 'stretch'],
369+
mapping: ['alignItems', 'justifyItems']
370+
},
371+
placeContent: {
372+
values: ['normal', 'center', 'start', 'end', 'space-between', 'space-around', 'space-evenly', 'baseline', 'stretch'],
373+
mapping: ['alignContent', 'justifyContent']
374+
},
375+
placeSelf: {
376+
values: ['auto', 'start', 'end', 'center', 'stretch', 'baseline'],
377+
mapping: ['alignSelf', 'justifySelf']
378+
},
379+
gap: {
380+
values: relativeSpacingValues,
381+
mapping: ['rowGap', 'columnGap']
382+
},
383+
size: {
384+
values: heightBaseValues,
385+
mapping: ['width', 'height']
386+
},
387+
minSize: {
388+
values: heightBaseValues,
389+
mapping: ['minWidth', 'minHeight']
390+
},
391+
maxSize: {
392+
values: [...heightBaseValues, 'none'],
393+
mapping: ['maxWidth', 'maxHeight']
394+
},
395+
overflow: {
396+
values: ['auto', 'hidden', 'clip', 'visible', 'scroll'],
397+
mapping: ['overflowX', 'overflowY']
398+
},
399+
overscrollBehavior: {
400+
values: ['auto', 'contain', 'none'],
401+
mapping: ['overscrollBehaviorX', 'overscrollBehaviorY']
402+
},
403+
gridArea: {
404+
values: ['string'],
405+
mapping: ['gridColumnStart', 'gridColumnEnd', 'gridRowStart', 'gridRowEnd']
406+
},
407+
transition: {
408+
values: ['default', 'colors', 'opacity', 'shadow', 'transform', 'all', 'none'],
409+
mapping: ['transition', 'transitionDuration', 'transitionTimingFunction']
410+
},
411+
animation: {
412+
values: ['string'],
413+
mapping: ['animation', 'animationDuration', 'animationTimingFunction']
414+
},
415+
truncate: {
416+
values: ['true'],
417+
mapping: ['overflowX', 'overflowY', 'textOverflow', 'whiteSpace']
418+
},
419+
font: {
420+
values: ['fontSize'],
421+
mapping: ['fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'color']
422+
}
343423
};
344424

345425
const conditionMapping: {[key: string]: string[]} = {
@@ -358,7 +438,8 @@ const properties: {[key: string]: {[key: string]: string[]}} = {
358438
text: textPropertyValues,
359439
effects: effectsPropertyValues,
360440
layout: layoutPropertyValues,
361-
misc: miscPropertyValues
441+
misc: miscPropertyValues,
442+
conditions: conditionMapping
362443
};
363444

364445
// TODO: will we need something specific for short hand?
@@ -400,7 +481,8 @@ const relativeLinks: {[key: string]: string} = {
400481
'text-to-visual': '#dimensions',
401482
'edge-to-text': '#dimensions',
402483
'pill': '#dimensions',
403-
'baseColors': '#colors'
484+
'baseColors': '#colors',
485+
'fontSize': '#text'
404486
}
405487

406488
// a mapping of value to mdn links that should be replaced in place
@@ -435,14 +517,20 @@ const propertyDescriptions: {[key: string]: string} = {
435517
'rotate': 'Accepts a number (treated as degrees) or a string with units (deg, rad, grad, turn).',
436518
'scaleX': 'Accepts a number or percentage string.',
437519
'scaleY': 'Accepts a number or percentage string.',
438-
'aspectRatio': 'Also accepts a ratio in the format number/number (e.g., 16/9, 4/3).'
520+
'scaleShortHand': 'Accepts a number or percentage string.',
521+
'aspectRatio': 'Also accepts a ratio in the format number/number (e.g., 16/9, 4/3).',
522+
'transitionShorthand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".',
523+
'animationShortHand': 'This shorthand explicitly defines duration as 150 and the timing function as "default".',
524+
'truncateShortHand': 'Applying this shorthand will enable text truncation.',
525+
'fontShortHand': 'The "fontSize" provided defines the values this shorthand sets on the mapped values.'
439526
};
440527

441528
interface StyleMacroPropertyDefinition {
442529
values: string[],
443530
additionalTypes?: string[],
444531
links?: {[value: string]: {href: string, isRelative?: boolean}},
445-
description?: string
532+
description?: string,
533+
mapping?: string[]
446534
}
447535

448536
export function getPropertyDefinitions(propertyCategory: string): {[key: string]: StyleMacroPropertyDefinition} {
@@ -481,3 +569,34 @@ export function getPropertyDefinitions(propertyCategory: string): {[key: string]
481569
}
482570
return result;
483571
}
572+
573+
export function getShorthandDefinitions(): {[key: string]: StyleMacroPropertyDefinition} {
574+
let result: {[key: string]: StyleMacroPropertyDefinition} = {};
575+
576+
for (let [shorthandName, shorthandDef] of Object.entries(shorthandMapping)) {
577+
let values = shorthandDef.values;
578+
let links: {[value: string]: {href: string, isRelative?: boolean}} = {};
579+
580+
for (let value of values) {
581+
if (value === 'pill' && shorthandName.includes('border')) {
582+
continue;
583+
}
584+
585+
if (mdnTypeLinks[value]) {
586+
links[value] = {href: mdnTypeLinks[value]};
587+
} else if (relativeLinks[value]) {
588+
links[value] = {href: relativeLinks[value], isRelative: true};
589+
}
590+
}
591+
592+
result[shorthandName] = {
593+
values,
594+
additionalTypes: getAdditionalTypes(shorthandDef.mapping[0]),
595+
links: Object.keys(links).length > 0 ? links : undefined,
596+
mapping: shorthandDef.mapping,
597+
description: propertyDescriptions[`${shorthandName}ShortHand`]
598+
};
599+
}
600+
601+
return result;
602+
}

0 commit comments

Comments
 (0)