@atlaskit/primitives 1.4.3 → 1.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/constellation/responsive/usage.mdx +1 -1
- package/dist/cjs/components/internal/surface-provider.js +27 -0
- package/dist/cjs/components/text.js +131 -0
- package/dist/cjs/xcss/style-maps.partial.js +90 -3
- package/dist/es2019/components/internal/surface-provider.js +19 -0
- package/dist/es2019/components/text.js +127 -0
- package/dist/es2019/xcss/style-maps.partial.js +72 -1
- package/dist/esm/components/internal/surface-provider.js +19 -0
- package/dist/esm/components/text.js +128 -0
- package/dist/esm/xcss/style-maps.partial.js +72 -1
- package/dist/types/components/internal/surface-provider.d.ts +15 -0
- package/dist/types/components/text.d.ts +57 -0
- package/dist/types/xcss/style-maps.partial.d.ts +94 -0
- package/dist/types-ts4.5/components/internal/surface-provider.d.ts +15 -0
- package/dist/types-ts4.5/components/text.d.ts +63 -0
- package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +94 -0
- package/package.json +4 -3
- package/scripts/codegen-styles.tsx +12 -0
- package/scripts/typography-codegen-template.tsx +107 -0
package/CHANGELOG.md
CHANGED
|
@@ -6,7 +6,7 @@ order: 2
|
|
|
6
6
|
|
|
7
7
|
## Media query helpers
|
|
8
8
|
|
|
9
|
-
The media query helper object `media.above[breakpoint]` maps to our [breakpoints](/components/
|
|
9
|
+
The media query helper object `media.above[breakpoint]` maps to our [breakpoints](/components/primitives/responsive/breakpoints/examples) as a media query for use in CSS-in-JS. `media.above[breakpoint]` targets all viewports **above** (larger than) the min-width of a given breakpoint
|
|
10
10
|
|
|
11
11
|
These responsive helpers are designed be used in conjunction with [xcss](/components/primitives/xcss). It is recommended that both are used when available as this uses our media queries to allow for safe, responsive styling.
|
|
12
12
|
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useSurface = exports.SurfaceContext = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
/**
|
|
9
|
+
* __Surface context__
|
|
10
|
+
*
|
|
11
|
+
* A surface context provides context information on the current background (if set).
|
|
12
|
+
*/
|
|
13
|
+
var SurfaceContext = /*#__PURE__*/(0, _react.createContext)('elevation.surface');
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* __useSurface__
|
|
17
|
+
*
|
|
18
|
+
* Return the current surface. If no parent sets a surface color it falls back to the default surface.
|
|
19
|
+
*
|
|
20
|
+
* @see SurfaceContext
|
|
21
|
+
*/
|
|
22
|
+
exports.SurfaceContext = SurfaceContext;
|
|
23
|
+
var useSurface = function useSurface() {
|
|
24
|
+
return (0, _react.useContext)(SurfaceContext);
|
|
25
|
+
};
|
|
26
|
+
exports.useSurface = useSurface;
|
|
27
|
+
SurfaceContext.displayName = 'SurfaceProvider';
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
+
var _react = require("react");
|
|
11
|
+
var _react2 = require("@emotion/react");
|
|
12
|
+
var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
|
|
13
|
+
var _styleMaps = require("../xcss/style-maps.partial");
|
|
14
|
+
var _excluded = ["children"];
|
|
15
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
|
|
17
|
+
// import surfaceColorMap from '../internal/color-map';
|
|
18
|
+
|
|
19
|
+
// import { useSurface } from './internal/surface-provider';
|
|
20
|
+
var asAllowlist = ['span', 'p', 'strong', 'em', 'label'];
|
|
21
|
+
var variantStyles = _objectSpread(_objectSpread({}, _styleMaps.bodyTextStylesMap), _styleMaps.uiTextStylesMap);
|
|
22
|
+
var textAlignMap = {
|
|
23
|
+
center: (0, _react2.css)({
|
|
24
|
+
textAlign: 'center'
|
|
25
|
+
}),
|
|
26
|
+
end: (0, _react2.css)({
|
|
27
|
+
textAlign: 'end'
|
|
28
|
+
}),
|
|
29
|
+
start: (0, _react2.css)({
|
|
30
|
+
textAlign: 'start'
|
|
31
|
+
})
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
// p tag has padding on top in css-reset. dont know if we want to add it here
|
|
35
|
+
var baseStyles = (0, _react2.css)({
|
|
36
|
+
margin: "var(--ds-space-0, 0px)",
|
|
37
|
+
padding: "var(--ds-space-0, 0px)"
|
|
38
|
+
});
|
|
39
|
+
var truncateStyles = (0, _react2.css)({
|
|
40
|
+
overflow: 'hidden',
|
|
41
|
+
textOverflow: 'ellipsis',
|
|
42
|
+
whiteSpace: 'nowrap'
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
// TODO
|
|
46
|
+
// const asElementStyles: Record<AsElement, SerializedStyles> = {
|
|
47
|
+
// abbr: css({
|
|
48
|
+
// borderBottom: `1px ${token('color.border', '#ccc')} dotted`,
|
|
49
|
+
// cursor: 'help',
|
|
50
|
+
// }),
|
|
51
|
+
// };
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
|
|
55
|
+
*/
|
|
56
|
+
// const useColor = (colorProp: TextColor): NonNullable<TextColor> => {
|
|
57
|
+
// const surface = useSurface();
|
|
58
|
+
// const inverseTextColor =
|
|
59
|
+
// surfaceColorMap[surface as keyof typeof surfaceColorMap];
|
|
60
|
+
|
|
61
|
+
// /**
|
|
62
|
+
// * Where the color of the surface is inverted we override the user choice
|
|
63
|
+
// * as there is no valid choice that is not covered by the override.
|
|
64
|
+
// */
|
|
65
|
+
// const color = inverseTextColor ?? colorProp;
|
|
66
|
+
|
|
67
|
+
// return color;
|
|
68
|
+
// };
|
|
69
|
+
|
|
70
|
+
var HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false);
|
|
71
|
+
var useHasTextAncestor = function useHasTextAncestor() {
|
|
72
|
+
return (0, _react.useContext)(HasTextAncestorContext);
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* __Text__
|
|
77
|
+
*
|
|
78
|
+
* Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
|
|
79
|
+
* This includes considerations for text attributes such as color, font size, font weight, and line height.
|
|
80
|
+
* It renders a `span` by default.
|
|
81
|
+
*
|
|
82
|
+
* @internal
|
|
83
|
+
*/
|
|
84
|
+
var Text = function Text(_ref) {
|
|
85
|
+
var children = _ref.children,
|
|
86
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
87
|
+
var asElement = props.as,
|
|
88
|
+
_props$shouldTruncate = props.shouldTruncate,
|
|
89
|
+
shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
|
|
90
|
+
textAlign = props.textAlign,
|
|
91
|
+
testId = props.testId,
|
|
92
|
+
id = props.id,
|
|
93
|
+
variant = props.variant;
|
|
94
|
+
var Component = asElement;
|
|
95
|
+
if (!Component) {
|
|
96
|
+
if (variant.includes('body')) {
|
|
97
|
+
Component = 'p';
|
|
98
|
+
} else {
|
|
99
|
+
// ui text and default => span
|
|
100
|
+
Component = 'span';
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
(0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
|
|
104
|
+
// const color = useColor(colorProp!);
|
|
105
|
+
var isWrapped = useHasTextAncestor();
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* If the text is already wrapped and applies no props we can just
|
|
109
|
+
* render the children directly as a fragment.
|
|
110
|
+
*/
|
|
111
|
+
if (isWrapped && Object.keys(props).length === 0) {
|
|
112
|
+
return (0, _react2.jsx)(_react.Fragment, null, children);
|
|
113
|
+
}
|
|
114
|
+
var component = (0, _react2.jsx)(Component
|
|
115
|
+
// style={UNSAFE_style}
|
|
116
|
+
, {
|
|
117
|
+
css: [baseStyles, variant && variantStyles[variant],
|
|
118
|
+
// color && textColorMap[color],
|
|
119
|
+
// colorProp && textColorMap[colorProp],
|
|
120
|
+
shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign]],
|
|
121
|
+
"data-testid": testId,
|
|
122
|
+
id: id
|
|
123
|
+
}, children);
|
|
124
|
+
return isWrapped ?
|
|
125
|
+
// no need to re-apply context if the text is already wrapped
|
|
126
|
+
component : (0, _react2.jsx)(HasTextAncestorContext.Provider, {
|
|
127
|
+
value: true
|
|
128
|
+
}, component);
|
|
129
|
+
};
|
|
130
|
+
var _default = Text;
|
|
131
|
+
exports.default = _default;
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.paddingStylesMap = exports.layerMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = void 0;
|
|
7
|
+
exports.uiTextStylesMap = exports.uiTextMap = exports.textColorStylesMap = exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.paddingStylesMap = exports.lineHeightStylesMap = exports.lineHeightMap = exports.layerMap = exports.headingTextStylesMap = exports.headingTextMap = exports.fontWeightStylesMap = exports.fontWeightMap = exports.fontSizeStylesMap = exports.fontSizeMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.bodyTextStylesMap = exports.bodyTextMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
/**
|
|
@@ -413,11 +413,82 @@ var borderRadiusMap = {
|
|
|
413
413
|
'border.radius.400': "var(--ds-border-radius-400, 16px)",
|
|
414
414
|
'border.radius.circle': "var(--ds-border-radius-circle, 32032px)"
|
|
415
415
|
};
|
|
416
|
+
exports.borderRadiusMap = borderRadiusMap;
|
|
417
|
+
/**
|
|
418
|
+
* @codegenEnd
|
|
419
|
+
*/
|
|
420
|
+
|
|
421
|
+
/**
|
|
422
|
+
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
423
|
+
* @codegen <<SignedSource::752c1b8bdc7db62e519dd729222d57ad>>
|
|
424
|
+
* @codegenId typography
|
|
425
|
+
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
426
|
+
* @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "heading", "ui"]
|
|
427
|
+
* @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
|
|
428
|
+
* @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
|
|
429
|
+
*/
|
|
430
|
+
var fontSizeMap = {
|
|
431
|
+
'font.size.050': "var(--ds-font-size-050, 11px)",
|
|
432
|
+
'font.size.075': "var(--ds-font-size-075, 12px)",
|
|
433
|
+
'font.size.100': "var(--ds-font-size-100, 14px)",
|
|
434
|
+
'font.size.200': "var(--ds-font-size-200, 16px)",
|
|
435
|
+
'font.size.300': "var(--ds-font-size-300, 20px)",
|
|
436
|
+
'font.size.400': "var(--ds-font-size-400, 24px)",
|
|
437
|
+
'font.size.500': "var(--ds-font-size-500, 29px)",
|
|
438
|
+
'font.size.600': "var(--ds-font-size-600, 35px)"
|
|
439
|
+
};
|
|
440
|
+
exports.fontSizeMap = fontSizeMap;
|
|
441
|
+
var fontWeightMap = {
|
|
442
|
+
'font.weight.bold': "var(--ds-font-weight-bold, 700)",
|
|
443
|
+
'font.weight.medium': "var(--ds-font-weight-medium, 500)",
|
|
444
|
+
'font.weight.regular': "var(--ds-font-weight-regular, 400)",
|
|
445
|
+
'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
|
|
446
|
+
};
|
|
447
|
+
exports.fontWeightMap = fontWeightMap;
|
|
448
|
+
var fontFamilyMap = {
|
|
449
|
+
'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
450
|
+
'font.family.brand': "var(--ds-font-family-brand, Charlie Sans)",
|
|
451
|
+
'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
452
|
+
'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
453
|
+
'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
454
|
+
'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
|
|
455
|
+
};
|
|
456
|
+
exports.fontFamilyMap = fontFamilyMap;
|
|
457
|
+
var lineHeightMap = {
|
|
458
|
+
'font.lineHeight.1': "var(--ds-font-lineHeight-1, 1)",
|
|
459
|
+
'font.lineHeight.100': "var(--ds-font-lineHeight-100, 16px)",
|
|
460
|
+
'font.lineHeight.200': "var(--ds-font-lineHeight-200, 20px)",
|
|
461
|
+
'font.lineHeight.300': "var(--ds-font-lineHeight-300, 24px)",
|
|
462
|
+
'font.lineHeight.400': "var(--ds-font-lineHeight-400, 28px)",
|
|
463
|
+
'font.lineHeight.500': "var(--ds-font-lineHeight-500, 32px)",
|
|
464
|
+
'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
|
|
465
|
+
};
|
|
466
|
+
exports.lineHeightMap = lineHeightMap;
|
|
467
|
+
var bodyTextMap = {
|
|
468
|
+
body: "var(--ds-font-body, normal 400 14px/20px var(--ds-font-family-body))",
|
|
469
|
+
'body.lg': "var(--ds-font-body-lg, normal 400 16px/24px var(--ds-font-family-body))",
|
|
470
|
+
'body.sm': "var(--ds-font-body-sm, normal 400 11px/20px var(--ds-font-family-body))"
|
|
471
|
+
};
|
|
472
|
+
exports.bodyTextMap = bodyTextMap;
|
|
473
|
+
var headingTextMap = {
|
|
474
|
+
'heading.lg': "var(--ds-font-heading-lg, normal 500 24px/28px var(--ds-font-family-heading))",
|
|
475
|
+
'heading.md': "var(--ds-font-heading-md, normal 500 20px/24px var(--ds-font-family-heading))",
|
|
476
|
+
'heading.sm': "var(--ds-font-heading-sm, normal 600 16px/20px var(--ds-font-family-heading))",
|
|
477
|
+
'heading.xl': "var(--ds-font-heading-xl, normal 600 29px/32px var(--ds-font-family-heading))",
|
|
478
|
+
'heading.xs': "var(--ds-font-heading-xs, normal 600 14px/16px var(--ds-font-family-heading))",
|
|
479
|
+
'heading.xxl': "var(--ds-font-heading-xxl, normal 500 35px/40px var(--ds-font-family-heading))",
|
|
480
|
+
'heading.xxs': "var(--ds-font-heading-xxs, normal 600 12px/16px var(--ds-font-family-heading))"
|
|
481
|
+
};
|
|
482
|
+
exports.headingTextMap = headingTextMap;
|
|
483
|
+
var uiTextMap = {
|
|
484
|
+
ui: "var(--ds-font-ui, normal 400 14px/1 var(--ds-font-family-body))",
|
|
485
|
+
'ui.sm': "var(--ds-font-ui-sm, normal 400 11px/1 var(--ds-font-family-body))"
|
|
486
|
+
};
|
|
416
487
|
|
|
417
488
|
/**
|
|
418
489
|
* @codegenEnd
|
|
419
490
|
*/
|
|
420
|
-
exports.
|
|
491
|
+
exports.uiTextMap = uiTextMap;
|
|
421
492
|
// Generate maps for Box props. backgroundColor, padding, etc
|
|
422
493
|
var spacingProperties = [
|
|
423
494
|
// Used by Box
|
|
@@ -441,4 +512,20 @@ var spaceStylesMap = spacingProperties.reduce(function (styleMap, spacingPropert
|
|
|
441
512
|
}, {});
|
|
442
513
|
exports.spaceStylesMap = spaceStylesMap;
|
|
443
514
|
var backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
|
|
444
|
-
exports.backgroundColorStylesMap = backgroundColorStylesMap;
|
|
515
|
+
exports.backgroundColorStylesMap = backgroundColorStylesMap;
|
|
516
|
+
var textColorStylesMap = getSerializedStylesMap('color', textColorMap);
|
|
517
|
+
exports.textColorStylesMap = textColorStylesMap;
|
|
518
|
+
var fontSizeStylesMap = getSerializedStylesMap('fontSize', fontSizeMap);
|
|
519
|
+
exports.fontSizeStylesMap = fontSizeStylesMap;
|
|
520
|
+
var fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
|
|
521
|
+
exports.fontWeightStylesMap = fontWeightStylesMap;
|
|
522
|
+
var fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
|
|
523
|
+
exports.fontFamilyStylesMap = fontFamilyStylesMap;
|
|
524
|
+
var lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);
|
|
525
|
+
exports.lineHeightStylesMap = lineHeightStylesMap;
|
|
526
|
+
var headingTextStylesMap = getSerializedStylesMap('font', headingTextMap);
|
|
527
|
+
exports.headingTextStylesMap = headingTextStylesMap;
|
|
528
|
+
var bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
|
|
529
|
+
exports.bodyTextStylesMap = bodyTextStylesMap;
|
|
530
|
+
var uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
|
|
531
|
+
exports.uiTextStylesMap = uiTextStylesMap;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { createContext, useContext } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* __Surface context__
|
|
4
|
+
*
|
|
5
|
+
* A surface context provides context information on the current background (if set).
|
|
6
|
+
*/
|
|
7
|
+
export const SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* __useSurface__
|
|
11
|
+
*
|
|
12
|
+
* Return the current surface. If no parent sets a surface color it falls back to the default surface.
|
|
13
|
+
*
|
|
14
|
+
* @see SurfaceContext
|
|
15
|
+
*/
|
|
16
|
+
export const useSurface = () => {
|
|
17
|
+
return useContext(SurfaceContext);
|
|
18
|
+
};
|
|
19
|
+
SurfaceContext.displayName = 'SurfaceProvider';
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { createContext, Fragment, useContext } from 'react';
|
|
3
|
+
import { css, jsx } from '@emotion/react';
|
|
4
|
+
import invariant from 'tiny-invariant';
|
|
5
|
+
import { bodyTextStylesMap
|
|
6
|
+
|
|
7
|
+
// textColorStylesMap,
|
|
8
|
+
, uiTextStylesMap } from '../xcss/style-maps.partial';
|
|
9
|
+
|
|
10
|
+
// import surfaceColorMap from '../internal/color-map';
|
|
11
|
+
|
|
12
|
+
// import { useSurface } from './internal/surface-provider';
|
|
13
|
+
const asAllowlist = ['span', 'p', 'strong', 'em', 'label'];
|
|
14
|
+
const variantStyles = {
|
|
15
|
+
...bodyTextStylesMap,
|
|
16
|
+
...uiTextStylesMap
|
|
17
|
+
};
|
|
18
|
+
const textAlignMap = {
|
|
19
|
+
center: css({
|
|
20
|
+
textAlign: 'center'
|
|
21
|
+
}),
|
|
22
|
+
end: css({
|
|
23
|
+
textAlign: 'end'
|
|
24
|
+
}),
|
|
25
|
+
start: css({
|
|
26
|
+
textAlign: 'start'
|
|
27
|
+
})
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
// p tag has padding on top in css-reset. dont know if we want to add it here
|
|
31
|
+
const baseStyles = css({
|
|
32
|
+
margin: "var(--ds-space-0, 0px)",
|
|
33
|
+
padding: "var(--ds-space-0, 0px)"
|
|
34
|
+
});
|
|
35
|
+
const truncateStyles = css({
|
|
36
|
+
overflow: 'hidden',
|
|
37
|
+
textOverflow: 'ellipsis',
|
|
38
|
+
whiteSpace: 'nowrap'
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
// TODO
|
|
42
|
+
// const asElementStyles: Record<AsElement, SerializedStyles> = {
|
|
43
|
+
// abbr: css({
|
|
44
|
+
// borderBottom: `1px ${token('color.border', '#ccc')} dotted`,
|
|
45
|
+
// cursor: 'help',
|
|
46
|
+
// }),
|
|
47
|
+
// };
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
|
|
51
|
+
*/
|
|
52
|
+
// const useColor = (colorProp: TextColor): NonNullable<TextColor> => {
|
|
53
|
+
// const surface = useSurface();
|
|
54
|
+
// const inverseTextColor =
|
|
55
|
+
// surfaceColorMap[surface as keyof typeof surfaceColorMap];
|
|
56
|
+
|
|
57
|
+
// /**
|
|
58
|
+
// * Where the color of the surface is inverted we override the user choice
|
|
59
|
+
// * as there is no valid choice that is not covered by the override.
|
|
60
|
+
// */
|
|
61
|
+
// const color = inverseTextColor ?? colorProp;
|
|
62
|
+
|
|
63
|
+
// return color;
|
|
64
|
+
// };
|
|
65
|
+
|
|
66
|
+
const HasTextAncestorContext = /*#__PURE__*/createContext(false);
|
|
67
|
+
const useHasTextAncestor = () => useContext(HasTextAncestorContext);
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* __Text__
|
|
71
|
+
*
|
|
72
|
+
* Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
|
|
73
|
+
* This includes considerations for text attributes such as color, font size, font weight, and line height.
|
|
74
|
+
* It renders a `span` by default.
|
|
75
|
+
*
|
|
76
|
+
* @internal
|
|
77
|
+
*/
|
|
78
|
+
const Text = ({
|
|
79
|
+
children,
|
|
80
|
+
...props
|
|
81
|
+
}) => {
|
|
82
|
+
const {
|
|
83
|
+
as: asElement,
|
|
84
|
+
// color: colorProp,
|
|
85
|
+
shouldTruncate = false,
|
|
86
|
+
textAlign,
|
|
87
|
+
testId,
|
|
88
|
+
id,
|
|
89
|
+
variant
|
|
90
|
+
} = props;
|
|
91
|
+
let Component = asElement;
|
|
92
|
+
if (!Component) {
|
|
93
|
+
if (variant.includes('body')) {
|
|
94
|
+
Component = 'p';
|
|
95
|
+
} else {
|
|
96
|
+
// ui text and default => span
|
|
97
|
+
Component = 'span';
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
invariant(asAllowlist.includes(Component), `@atlaskit/ds-explorations: Text received an invalid "as" value of "${Component}"`);
|
|
101
|
+
// const color = useColor(colorProp!);
|
|
102
|
+
const isWrapped = useHasTextAncestor();
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* If the text is already wrapped and applies no props we can just
|
|
106
|
+
* render the children directly as a fragment.
|
|
107
|
+
*/
|
|
108
|
+
if (isWrapped && Object.keys(props).length === 0) {
|
|
109
|
+
return jsx(Fragment, null, children);
|
|
110
|
+
}
|
|
111
|
+
const component = jsx(Component
|
|
112
|
+
// style={UNSAFE_style}
|
|
113
|
+
, {
|
|
114
|
+
css: [baseStyles, variant && variantStyles[variant],
|
|
115
|
+
// color && textColorMap[color],
|
|
116
|
+
// colorProp && textColorMap[colorProp],
|
|
117
|
+
shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign]],
|
|
118
|
+
"data-testid": testId,
|
|
119
|
+
id: id
|
|
120
|
+
}, children);
|
|
121
|
+
return isWrapped ?
|
|
122
|
+
// no need to re-apply context if the text is already wrapped
|
|
123
|
+
component : jsx(HasTextAncestorContext.Provider, {
|
|
124
|
+
value: true
|
|
125
|
+
}, component);
|
|
126
|
+
};
|
|
127
|
+
export default Text;
|
|
@@ -392,6 +392,69 @@ export const borderRadiusMap = {
|
|
|
392
392
|
'border.radius.400': "var(--ds-border-radius-400, 16px)",
|
|
393
393
|
'border.radius.circle': "var(--ds-border-radius-circle, 32032px)"
|
|
394
394
|
};
|
|
395
|
+
/**
|
|
396
|
+
* @codegenEnd
|
|
397
|
+
*/
|
|
398
|
+
/**
|
|
399
|
+
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
400
|
+
* @codegen <<SignedSource::752c1b8bdc7db62e519dd729222d57ad>>
|
|
401
|
+
* @codegenId typography
|
|
402
|
+
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
403
|
+
* @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "heading", "ui"]
|
|
404
|
+
* @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
|
|
405
|
+
* @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
|
|
406
|
+
*/
|
|
407
|
+
export const fontSizeMap = {
|
|
408
|
+
'font.size.050': "var(--ds-font-size-050, 11px)",
|
|
409
|
+
'font.size.075': "var(--ds-font-size-075, 12px)",
|
|
410
|
+
'font.size.100': "var(--ds-font-size-100, 14px)",
|
|
411
|
+
'font.size.200': "var(--ds-font-size-200, 16px)",
|
|
412
|
+
'font.size.300': "var(--ds-font-size-300, 20px)",
|
|
413
|
+
'font.size.400': "var(--ds-font-size-400, 24px)",
|
|
414
|
+
'font.size.500': "var(--ds-font-size-500, 29px)",
|
|
415
|
+
'font.size.600': "var(--ds-font-size-600, 35px)"
|
|
416
|
+
};
|
|
417
|
+
export const fontWeightMap = {
|
|
418
|
+
'font.weight.bold': "var(--ds-font-weight-bold, 700)",
|
|
419
|
+
'font.weight.medium': "var(--ds-font-weight-medium, 500)",
|
|
420
|
+
'font.weight.regular': "var(--ds-font-weight-regular, 400)",
|
|
421
|
+
'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
|
|
422
|
+
};
|
|
423
|
+
export const fontFamilyMap = {
|
|
424
|
+
'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
425
|
+
'font.family.brand': "var(--ds-font-family-brand, Charlie Sans)",
|
|
426
|
+
'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
427
|
+
'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
428
|
+
'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
429
|
+
'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
|
|
430
|
+
};
|
|
431
|
+
export const lineHeightMap = {
|
|
432
|
+
'font.lineHeight.1': "var(--ds-font-lineHeight-1, 1)",
|
|
433
|
+
'font.lineHeight.100': "var(--ds-font-lineHeight-100, 16px)",
|
|
434
|
+
'font.lineHeight.200': "var(--ds-font-lineHeight-200, 20px)",
|
|
435
|
+
'font.lineHeight.300': "var(--ds-font-lineHeight-300, 24px)",
|
|
436
|
+
'font.lineHeight.400': "var(--ds-font-lineHeight-400, 28px)",
|
|
437
|
+
'font.lineHeight.500': "var(--ds-font-lineHeight-500, 32px)",
|
|
438
|
+
'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
|
|
439
|
+
};
|
|
440
|
+
export const bodyTextMap = {
|
|
441
|
+
body: "var(--ds-font-body, normal 400 14px/20px var(--ds-font-family-body))",
|
|
442
|
+
'body.lg': "var(--ds-font-body-lg, normal 400 16px/24px var(--ds-font-family-body))",
|
|
443
|
+
'body.sm': "var(--ds-font-body-sm, normal 400 11px/20px var(--ds-font-family-body))"
|
|
444
|
+
};
|
|
445
|
+
export const headingTextMap = {
|
|
446
|
+
'heading.lg': "var(--ds-font-heading-lg, normal 500 24px/28px var(--ds-font-family-heading))",
|
|
447
|
+
'heading.md': "var(--ds-font-heading-md, normal 500 20px/24px var(--ds-font-family-heading))",
|
|
448
|
+
'heading.sm': "var(--ds-font-heading-sm, normal 600 16px/20px var(--ds-font-family-heading))",
|
|
449
|
+
'heading.xl': "var(--ds-font-heading-xl, normal 600 29px/32px var(--ds-font-family-heading))",
|
|
450
|
+
'heading.xs': "var(--ds-font-heading-xs, normal 600 14px/16px var(--ds-font-family-heading))",
|
|
451
|
+
'heading.xxl': "var(--ds-font-heading-xxl, normal 500 35px/40px var(--ds-font-family-heading))",
|
|
452
|
+
'heading.xxs': "var(--ds-font-heading-xxs, normal 600 12px/16px var(--ds-font-family-heading))"
|
|
453
|
+
};
|
|
454
|
+
export const uiTextMap = {
|
|
455
|
+
ui: "var(--ds-font-ui, normal 400 14px/1 var(--ds-font-family-body))",
|
|
456
|
+
'ui.sm': "var(--ds-font-ui-sm, normal 400 11px/1 var(--ds-font-family-body))"
|
|
457
|
+
};
|
|
395
458
|
|
|
396
459
|
/**
|
|
397
460
|
* @codegenEnd
|
|
@@ -419,4 +482,12 @@ export const spaceStylesMap = spacingProperties.reduce((styleMap, spacingPropert
|
|
|
419
482
|
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
|
|
420
483
|
return styleMap;
|
|
421
484
|
}, {});
|
|
422
|
-
export const backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
|
|
485
|
+
export const backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
|
|
486
|
+
export const textColorStylesMap = getSerializedStylesMap('color', textColorMap);
|
|
487
|
+
export const fontSizeStylesMap = getSerializedStylesMap('fontSize', fontSizeMap);
|
|
488
|
+
export const fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
|
|
489
|
+
export const fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
|
|
490
|
+
export const lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);
|
|
491
|
+
export const headingTextStylesMap = getSerializedStylesMap('font', headingTextMap);
|
|
492
|
+
export const bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
|
|
493
|
+
export const uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { createContext, useContext } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* __Surface context__
|
|
4
|
+
*
|
|
5
|
+
* A surface context provides context information on the current background (if set).
|
|
6
|
+
*/
|
|
7
|
+
export var SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* __useSurface__
|
|
11
|
+
*
|
|
12
|
+
* Return the current surface. If no parent sets a surface color it falls back to the default surface.
|
|
13
|
+
*
|
|
14
|
+
* @see SurfaceContext
|
|
15
|
+
*/
|
|
16
|
+
export var useSurface = function useSurface() {
|
|
17
|
+
return useContext(SurfaceContext);
|
|
18
|
+
};
|
|
19
|
+
SurfaceContext.displayName = 'SurfaceProvider';
|