Skip to content

Commit 83262ef

Browse files
LFDanLuLFDanLu
committed
add relative links so basecolors and various dimension strings link back to the visual
1 parent 4c94cd0 commit 83262ef

File tree

2 files changed

+77
-51
lines changed

2 files changed

+77
-51
lines changed

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

Lines changed: 47 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,6 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
// Properties that extend from baseColors
14-
const baseColorProperties = new Set([
15-
'color', 'backgroundColor', 'borderColor', 'outlineColor', 'fill', 'stroke'
16-
]);
17-
1813
// Properties that use PercentageProperty (accept LengthPercentage in addition to mapped values)
1914
const percentageProperties = new Set([
2015
'top', 'left', 'bottom', 'right',
@@ -67,7 +62,7 @@ const fontSize = [
6762
];
6863

6964
const colorPropertyValues: {[key: string]: string[]} = {
70-
color: ['accent', 'neutral', 'neutral-subdued', 'negative', 'disabled', 'heading', 'title', 'body', 'detail', 'code', 'auto'],
65+
color: ['accent', 'neutral', 'neutral-subdued', 'negative', 'disabled', 'heading', 'title', 'body', 'detail', 'code', 'auto', 'baseColors'],
7166
backgroundColor: [
7267
'accent', 'accent-subtle', 'neutral', 'neutral-subdued', 'neutral-subtle',
7368
'negative', 'negative-subtle', 'informative', 'informative-subtle',
@@ -81,18 +76,18 @@ const colorPropertyValues: {[key: string]: string[]} = {
8176
'magenta', 'magenta-subtle', 'pink', 'pink-subtle',
8277
'turquoise', 'turquoise-subtle', 'cinnamon', 'cinnamon-subtle',
8378
'brown', 'brown-subtle', 'silver', 'silver-subtle',
84-
'disabled', 'base', 'layer-1', 'layer-2', 'pasteboard', 'elevated'
79+
'disabled', 'base', 'layer-1', 'layer-2', 'pasteboard', 'elevated', 'baseColors'
8580
],
86-
borderColor: ['negative', 'disabled'],
87-
outlineColor: ['focus-ring'],
81+
borderColor: ['negative', 'disabled', 'baseColors'],
82+
outlineColor: ['focus-ring', 'baseColors'],
8883
fill: [
8984
'none', 'currentColor',
9085
'accent', 'neutral', 'negative', 'informative', 'positive', 'notice',
9186
'gray', 'red', 'orange', 'yellow', 'chartreuse', 'celery', 'green',
9287
'seafoam', 'cyan', 'blue', 'indigo', 'purple', 'fuchsia', 'magenta',
93-
'pink', 'turquoise', 'cinnamon', 'brown', 'silver'
88+
'pink', 'turquoise', 'cinnamon', 'brown', 'silver', 'baseColors'
9489
],
95-
stroke: ['none', 'currentColor']
90+
stroke: ['none', 'currentColor', 'baseColors']
9691
};
9792

9893
const dimensionsPropertyValues: {[key: string]: string[]} = {
@@ -170,7 +165,6 @@ const textPropertyValues: {[key: string]: string[]} = {
170165
boxDecorationBreak: ['slice', 'clone']
171166
};
172167

173-
174168
const effectsPropertyValues: {[key: string]: string[]} = {
175169
boxShadow: ['emphasized', 'elevated', 'dragged', 'none'],
176170
filter: ['emphasized', 'elevated', 'dragged', 'none'],
@@ -370,13 +364,10 @@ const properties: {[key: string]: {[key: string]: string[]}} = {
370364
// TODO: will we need something specific for short hand?
371365
// TODO: see if there are any others that we will need to add additional shared types for
372366
// this is less additional types and more that we want to represent the below as a type link
367+
// special custom types that should be appended to the property but need special handling (render a type popover)
373368
export function getAdditionalTypes(propertyName: string): string[] {
374369
let types: string[] = [];
375370

376-
if (baseColorProperties.has(propertyName)) {
377-
types.push('baseColors');
378-
}
379-
380371
if (baseSpacingProperties.has(propertyName)) {
381372
types.push('baseSpacing');
382373
}
@@ -401,57 +392,82 @@ export const spacingTypeValues = {
401392
negativeSpacing: negativeBaseSpacingValues
402393
};
403394

395+
// opted NOT to link to Fonts from 'ui', 'code', etc since the visual example
396+
// is so close to the area in the table where those are rendered
397+
const relativeLinks: {[key: string]: string} = {
398+
'text-to-control': '#dimensions',
399+
'text-to-visual': '#dimensions',
400+
'edge-to-text': '#dimensions',
401+
'pill': '#dimensions',
402+
'baseColors': '#colors'
403+
}
404+
404405
const mdnTypeLinks: {[key: string]: string} = {
405406
'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+
'number': 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number'
407408
};
408409

409-
const mdnPropertyLinks: {[key: string]: {[value: string]: string}} = {
410+
const mdnPropertyLinks: {[key: string]: {[value: string]: {href: string, isRelative?: boolean}}} = {
410411
'flexShrink': {
411-
'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink'
412+
'number': {
413+
href: 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink',
414+
}
412415
},
413416
'flexGrow': {
414-
'number': 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow'
417+
'number': {
418+
href: 'https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow'
419+
}
415420
},
416421
'gridColumnStart': {
417-
'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start'
422+
'string': {
423+
href: 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start'
424+
}
418425
},
419426
'gridColumnEnd': {
420-
'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end'
427+
'string': {
428+
href: 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end'
429+
}
421430
},
422431
'gridRowStart': {
423-
'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start'
432+
'string': {
433+
href: 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start'
434+
}
424435
},
425436
'gridRowEnd': {
426-
'string': 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end'
437+
'string': {
438+
href: 'https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end'
439+
}
427440
}
428441
};
429442

430443
interface StyleMacroPropertyDefinition {
431444
values: string[],
432445
additionalTypes?: string[],
433-
links?: {[value: string]: string}
446+
links?: {[value: string]: {href: string, isRelative?: boolean}}
434447
}
435448

436449
export function getPropertyDefinitions(propertyCategory: string): {[key: string]: StyleMacroPropertyDefinition} {
437450
let result: {[key: string]: StyleMacroPropertyDefinition} = {};
438451
let propertiesMapping = properties[propertyCategory] || {};
439452

440453
for (let [name, values] of Object.entries(propertiesMapping)) {
441-
let links: {[value: string]: string} = {};
454+
let links: {[value: string]: {href: string, isRelative?: boolean}} = {};
442455

443456
if (mdnPropertyLinks[name]) {
444457
links = {...mdnPropertyLinks[name]};
445458
values = [Object.keys(links)[0]];
446459
} else {
447460
// see if the property has any common types that should link to MDN instead
448461
for (let value of values) {
462+
// make sure not to overwrite number in sizing properties and pill in other sections aka effects
463+
if ((value === 'number' && sizingProperties.has(name)) || (value === 'pill' && propertyCategory !== 'dimensions') ) {
464+
continue;
465+
}
466+
449467
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];
468+
links[value] = {href: mdnTypeLinks[value]};
469+
} else if (relativeLinks[value]) {
470+
links[value] = {href: relativeLinks[value], isRelative: true};
455471
}
456472
}
457473
}

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

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -697,10 +697,6 @@ function TemplateLiteral({elements}: TTemplate) {
697697
}
698698

699699
const styleMacroTypeLinks = {
700-
'baseColors': {
701-
// TODO: will need to have this link work somehow
702-
description: 'A base set of colors defined by Spectrum. Contains a various global and semantic colors as well as high contrast color values for accessibility high contrast mode. See [above](#colors) for more info.'
703-
},
704700
'baseSpacing': {
705701
description: 'Base spacing values in pixels, following a 4px grid. Will be converted to rem.',
706702
body: (
@@ -738,7 +734,8 @@ const styleMacroTypeLinks = {
738734
interface StyleMacroTypePopoverProps {
739735
typeName: string,
740736
description: ReactNode,
741-
body?: ReactNode
737+
body?: ReactNode,
738+
link?: string
742739
}
743740

744741
function StyleMacroTypePopover({typeName, description, body}: StyleMacroTypePopoverProps) {
@@ -757,7 +754,7 @@ function StyleMacroTypePopover({typeName, description, body}: StyleMacroTypePopo
757754
interface StyleMacroPropertyDefinition {
758755
values: string[],
759756
additionalTypes?: string[],
760-
links?: {[value: string]: string}
757+
links?: {[value: string]: {href: string, isRelative?: boolean}}
761758
}
762759

763760
interface StyleMacroPropertiesProps {
@@ -795,21 +792,38 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
795792
<React.Fragment key={i}>
796793
{i > 0 && <Punctuation>{' | '}</Punctuation>}
797794
{links[value] ? (
798-
<ColorLink href={links[value]} type="variable" rel="noreferrer" target="_blank">{value}</ColorLink>
795+
<ColorLink
796+
href={links[value].href}
797+
type="variable"
798+
rel={links[value].isRelative ? undefined : "noreferrer"}
799+
target={links[value].isRelative ? undefined : "_blank"}>
800+
{value}
801+
</ColorLink>
799802
) : (
800803
<span className={codeStyles.string}>'{value}'</span>
801804
)}
802805
</React.Fragment>
803806
))}
804-
{propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => (
805-
<React.Fragment key={`type-${i}`}>
806-
{(values.length > 0 || i > 0) && <Punctuation>{' | '}</Punctuation>}
807-
{styleMacroTypeLinks[typeName] ?
808-
<StyleMacroTypePopover typeName={typeName} description={styleMacroTypeLinks[typeName].description} body={styleMacroTypeLinks[typeName].body} /> :
809-
undefined
810-
}
811-
</React.Fragment>
812-
))}
807+
{propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => {
808+
let typeLink = styleMacroTypeLinks[typeName];
809+
return (
810+
<React.Fragment key={`type-${i}`}>
811+
{(values.length > 0 || i > 0) && <Punctuation>{' | '}</Punctuation>}
812+
{typeLink ? (
813+
// only if the type link has a description and/or body do we want to render the type popover
814+
// this is to make things like baseColor
815+
typeLink.link && !typeLink.description && !typeLink.body ? (
816+
<ColorLink href={typeLink.link} type="variable">{typeName}</ColorLink>
817+
) : (
818+
<StyleMacroTypePopover
819+
typeName={typeName}
820+
description={typeLink.description}
821+
body={typeLink.body} />
822+
)
823+
) : undefined}
824+
</React.Fragment>
825+
);
826+
})}
813827
</code>
814828
</TableCell>
815829
</TableRow>
@@ -820,10 +834,6 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
820834
);
821835
}
822836

823-
824-
// TODO: for the below, will need to figure out how to get the same kind of mdx styling in the popover
825-
// TODO: for the baseColors, either link up or expose a type that displays the visual colors in the popover
826-
// for some reason trying to render the S2 colors example into the popover crashes the build?
827837
// same for spacing, perhaps do the type that contains the same explaination, and remove the text blob
828838
// TODO: add to the table a description col span 2 to describe what things like aspectRatio and such accept (aka This takes a). this exists in the Prop table so look there
829839

0 commit comments

Comments
 (0)