@zendeskgarden/react-typography 9.11.0 → 9.11.1

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.
Files changed (15) hide show
  1. package/dist/esm/styled/StyledBlockquote.js +1 -1
  2. package/dist/esm/styled/StyledCode.js +1 -1
  3. package/dist/esm/styled/StyledCodeBlock.js +1 -1
  4. package/dist/esm/styled/StyledCodeBlockContainer.js +1 -1
  5. package/dist/esm/styled/StyledCodeBlockLine.js +1 -1
  6. package/dist/esm/styled/StyledCodeBlockToken.js +1 -1
  7. package/dist/esm/styled/StyledEllipsis.js +1 -1
  8. package/dist/esm/styled/StyledFont.js +1 -1
  9. package/dist/esm/styled/StyledIcon.js +1 -1
  10. package/dist/esm/styled/StyledKbd.js +8 -3
  11. package/dist/esm/styled/StyledList.js +2 -2
  12. package/dist/esm/styled/StyledListItem.js +2 -2
  13. package/dist/esm/styled/StyledParagraph.js +1 -1
  14. package/dist/index.cjs.js +22 -17
  15. package/package.json +3 -3
package/dist/esm/styled/StyledBlockquote.js CHANGED
@@ -11,7 +11,7 @@ import { THEME_SIZES } from './StyledFont.js';
11
11
  const COMPONENT_ID = 'typography.blockquote';
12
12
  const StyledBlockquote = styled.blockquote.attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.11.0'
14
+ 'data-garden-version': '9.11.1'
15
15
  }).withConfig({
16
16
  displayName: "StyledBlockquote",
17
17
  componentId: "sc-1tt3ye0-0"
package/dist/esm/styled/StyledCode.js CHANGED
@@ -50,7 +50,7 @@ const colorStyles = _ref => {
50
50
  };
51
51
  const StyledCode = styled(StyledFont).attrs({
52
52
  'data-garden-id': COMPONENT_ID,
53
- 'data-garden-version': '9.11.0',
53
+ 'data-garden-version': '9.11.1',
54
54
  as: 'code',
55
55
  $isMonospace: true
56
56
  }).withConfig({
package/dist/esm/styled/StyledCodeBlock.js CHANGED
@@ -24,7 +24,7 @@ const colorStyles = _ref => {
24
24
  };
25
25
  const StyledCodeBlock = styled.pre.attrs({
26
26
  'data-garden-id': COMPONENT_ID,
27
- 'data-garden-version': '9.11.0'
27
+ 'data-garden-version': '9.11.1'
28
28
  }).withConfig({
29
29
  displayName: "StyledCodeBlock",
30
30
  componentId: "sc-5wky57-0"
package/dist/esm/styled/StyledCodeBlockContainer.js CHANGED
@@ -10,7 +10,7 @@ import { focusStyles, componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID = 'typography.codeblock_container';
11
11
  const StyledCodeBlockContainer = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.11.0'
13
+ 'data-garden-version': '9.11.1'
14
14
  }).withConfig({
15
15
  displayName: "StyledCodeBlockContainer",
16
16
  componentId: "sc-14zgbfw-0"
package/dist/esm/styled/StyledCodeBlockLine.js CHANGED
@@ -86,7 +86,7 @@ const lineNumberStyles = _ref2 => {
86
86
  };
87
87
  const StyledCodeBlockLine = styled(StyledFont).attrs({
88
88
  'data-garden-id': COMPONENT_ID,
89
- 'data-garden-version': '9.11.0',
89
+ 'data-garden-version': '9.11.1',
90
90
  as: 'code',
91
91
  $isMonospace: true
92
92
  }).withConfig({
package/dist/esm/styled/StyledCodeBlockToken.js CHANGED
@@ -171,7 +171,7 @@ const colorStyles = _ref => {
171
171
  };
172
172
  const StyledCodeBlockToken = styled.span.attrs({
173
173
  'data-garden-id': COMPONENT_ID,
174
- 'data-garden-version': '9.11.0'
174
+ 'data-garden-version': '9.11.1'
175
175
  }).withConfig({
176
176
  displayName: "StyledCodeBlockToken",
177
177
  componentId: "sc-1hkshdq-0"
package/dist/esm/styled/StyledEllipsis.js CHANGED
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID = 'typography.ellipsis';
11
11
  const StyledEllipsis = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.11.0'
13
+ 'data-garden-version': '9.11.1'
14
14
  }).withConfig({
15
15
  displayName: "StyledEllipsis",
16
16
  componentId: "sc-1u4uqmy-0"
package/dist/esm/styled/StyledFont.js CHANGED
@@ -67,7 +67,7 @@ const fontStyles = _ref => {
67
67
  };
68
68
  const StyledFont = styled.div.attrs({
69
69
  'data-garden-id': COMPONENT_ID,
70
- 'data-garden-version': '9.11.0'
70
+ 'data-garden-version': '9.11.1'
71
71
  }).withConfig({
72
72
  displayName: "StyledFont",
73
73
  componentId: "sc-1iildbo-0"
package/dist/esm/styled/StyledIcon.js CHANGED
@@ -15,7 +15,7 @@ const sizeStyles = props => {
15
15
  };
16
16
  const StyledIcon = styled(StyledBaseIcon).attrs({
17
17
  'data-garden-id': COMPONENT_ID,
18
- 'data-garden-version': '9.11.0'
18
+ 'data-garden-version': '9.11.1'
19
19
  }).withConfig({
20
20
  displayName: "StyledIcon",
21
21
  componentId: "sc-10rfb5b-0"
package/dist/esm/styled/StyledKbd.js CHANGED
@@ -15,33 +15,38 @@ const sizeStyles = _ref => {
15
15
  theme,
16
16
  $size
17
17
  } = _ref;
18
+ let minWidth;
18
19
  let paddingHorizontal;
19
20
  let paddingVertical = '0';
20
21
  switch ($size) {
21
22
  case 'small':
23
+ minWidth = math(`${theme.lineHeights.sm} - 1px`);
22
24
  paddingHorizontal = `${theme.space.base}px`;
23
25
  break;
24
26
  case 'medium':
27
+ minWidth = math(`${theme.lineHeights.md} - 1px`);
25
28
  paddingHorizontal = `${theme.space.base * 1.5}px`;
26
29
  break;
27
30
  case 'large':
31
+ minWidth = math(`${theme.lineHeights.lg} - 1px`);
28
32
  paddingHorizontal = `${theme.space.base * 1.75}px`;
29
33
  break;
30
34
  default:
35
+ minWidth = 'calc(1.2em + 3px)';
31
36
  paddingHorizontal = `${stripUnit(math(`${theme.space.base * 1.5} / (${theme.fontSizes.md} - 1px)`))}em`;
32
37
  paddingVertical = '1.5px';
33
38
  break;
34
39
  }
35
40
  const padding = `${paddingVertical} ${paddingHorizontal}`;
36
- return css(["&&{padding:", ";}"], padding);
41
+ return css(["&&{box-sizing:border-box;padding:", ";min-width:", ";}"], padding, minWidth);
37
42
  };
38
43
  const StyledKbd = styled(StyledCode).attrs({
39
44
  'data-garden-id': COMPONENT_ID,
40
- 'data-garden-version': '9.11.0',
45
+ 'data-garden-version': '9.11.1',
41
46
  as: 'kbd'
42
47
  }).withConfig({
43
48
  displayName: "StyledKbd",
44
49
  componentId: "sc-1gzk2wp-0"
45
- })(["display:inline-block;direction:ltr;", ";", ";"], sizeStyles, componentStyles);
50
+ })(["display:inline-block;direction:ltr;text-align:center;font-family:sans-serif;", ";", ";"], sizeStyles, componentStyles);
46
51
 
47
52
  export { StyledKbd };
package/dist/esm/styled/StyledList.js CHANGED
@@ -14,7 +14,7 @@ const listStyles = props => {
14
14
  const ORDERED_ID = 'typography.ordered_list';
15
15
  const StyledOrderedList = styled.ol.attrs({
16
16
  'data-garden-id': ORDERED_ID,
17
- 'data-garden-version': '9.11.0'
17
+ 'data-garden-version': '9.11.1'
18
18
  }).withConfig({
19
19
  displayName: "StyledList__StyledOrderedList",
20
20
  componentId: "sc-jdbsfi-0"
@@ -22,7 +22,7 @@ const StyledOrderedList = styled.ol.attrs({
22
22
  const UNORDERED_ID = 'typography.unordered_list';
23
23
  const StyledUnorderedList = styled.ul.attrs({
24
24
  'data-garden-id': UNORDERED_ID,
25
- 'data-garden-version': '9.11.0'
25
+ 'data-garden-version': '9.11.1'
26
26
  }).withConfig({
27
27
  displayName: "StyledList__StyledUnorderedList",
28
28
  componentId: "sc-jdbsfi-1"
package/dist/esm/styled/StyledListItem.js CHANGED
@@ -21,7 +21,7 @@ const listItemStyles = props => {
21
21
  const ORDERED_ID = 'typography.ordered_list_item';
22
22
  const StyledOrderedListItem = styled(StyledFont).attrs({
23
23
  'data-garden-id': ORDERED_ID,
24
- 'data-garden-version': '9.11.0',
24
+ 'data-garden-version': '9.11.1',
25
25
  as: 'li'
26
26
  }).withConfig({
27
27
  displayName: "StyledListItem__StyledOrderedListItem",
@@ -34,7 +34,7 @@ StyledOrderedListItem.defaultProps = {
34
34
  const UNORDERED_ID = 'typography.unordered_list_item';
35
35
  const StyledUnorderedListItem = styled(StyledFont).attrs({
36
36
  'data-garden-id': UNORDERED_ID,
37
- 'data-garden-version': '9.11.0',
37
+ 'data-garden-version': '9.11.1',
38
38
  as: 'li'
39
39
  }).withConfig({
40
40
  displayName: "StyledListItem__StyledUnorderedListItem",
package/dist/esm/styled/StyledParagraph.js CHANGED
@@ -11,7 +11,7 @@ import { THEME_SIZES } from './StyledFont.js';
11
11
  const COMPONENT_ID = 'typography.paragraph';
12
12
  const StyledParagraph = styled.p.attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.11.0'
14
+ 'data-garden-version': '9.11.1'
15
15
  }).withConfig({
16
16
  displayName: "StyledParagraph",
17
17
  componentId: "sc-zkuftz-0"
package/dist/index.cjs.js CHANGED
@@ -86,7 +86,7 @@ const fontStyles = _ref => {
86
86
  };
87
87
  const StyledFont = styled__default.default.div.attrs({
88
88
  'data-garden-id': COMPONENT_ID$a,
89
- 'data-garden-version': '9.11.0'
89
+ 'data-garden-version': '9.11.1'
90
90
  }).withConfig({
91
91
  displayName: "StyledFont",
92
92
  componentId: "sc-1iildbo-0"
@@ -98,7 +98,7 @@ StyledFont.defaultProps = {
98
98
  const COMPONENT_ID$9 = 'typography.blockquote';
99
99
  const StyledBlockquote = styled__default.default.blockquote.attrs({
100
100
  'data-garden-id': COMPONENT_ID$9,
101
- 'data-garden-version': '9.11.0'
101
+ 'data-garden-version': '9.11.1'
102
102
  }).withConfig({
103
103
  displayName: "StyledBlockquote",
104
104
  componentId: "sc-1tt3ye0-0"
@@ -149,7 +149,7 @@ const colorStyles$3 = _ref => {
149
149
  };
150
150
  const StyledCode = styled__default.default(StyledFont).attrs({
151
151
  'data-garden-id': COMPONENT_ID$8,
152
- 'data-garden-version': '9.11.0',
152
+ 'data-garden-version': '9.11.1',
153
153
  as: 'code',
154
154
  $isMonospace: true
155
155
  }).withConfig({
@@ -179,7 +179,7 @@ const colorStyles$2 = _ref => {
179
179
  };
180
180
  const StyledCodeBlock = styled__default.default.pre.attrs({
181
181
  'data-garden-id': COMPONENT_ID$7,
182
- 'data-garden-version': '9.11.0'
182
+ 'data-garden-version': '9.11.1'
183
183
  }).withConfig({
184
184
  displayName: "StyledCodeBlock",
185
185
  componentId: "sc-5wky57-0"
@@ -188,7 +188,7 @@ const StyledCodeBlock = styled__default.default.pre.attrs({
188
188
  const COMPONENT_ID$6 = 'typography.codeblock_container';
189
189
  const StyledCodeBlockContainer = styled__default.default.div.attrs({
190
190
  'data-garden-id': COMPONENT_ID$6,
191
- 'data-garden-version': '9.11.0'
191
+ 'data-garden-version': '9.11.1'
192
192
  }).withConfig({
193
193
  displayName: "StyledCodeBlockContainer",
194
194
  componentId: "sc-14zgbfw-0"
@@ -274,7 +274,7 @@ const lineNumberStyles = _ref2 => {
274
274
  };
275
275
  const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
276
276
  'data-garden-id': COMPONENT_ID$5,
277
- 'data-garden-version': '9.11.0',
277
+ 'data-garden-version': '9.11.1',
278
278
  as: 'code',
279
279
  $isMonospace: true
280
280
  }).withConfig({
@@ -445,7 +445,7 @@ const colorStyles = _ref => {
445
445
  };
446
446
  const StyledCodeBlockToken = styled__default.default.span.attrs({
447
447
  'data-garden-id': COMPONENT_ID$4,
448
- 'data-garden-version': '9.11.0'
448
+ 'data-garden-version': '9.11.1'
449
449
  }).withConfig({
450
450
  displayName: "StyledCodeBlockToken",
451
451
  componentId: "sc-1hkshdq-0"
@@ -454,7 +454,7 @@ const StyledCodeBlockToken = styled__default.default.span.attrs({
454
454
  const COMPONENT_ID$3 = 'typography.ellipsis';
455
455
  const StyledEllipsis = styled__default.default.div.attrs({
456
456
  'data-garden-id': COMPONENT_ID$3,
457
- 'data-garden-version': '9.11.0'
457
+ 'data-garden-version': '9.11.1'
458
458
  }).withConfig({
459
459
  displayName: "StyledEllipsis",
460
460
  componentId: "sc-1u4uqmy-0"
@@ -468,7 +468,7 @@ const sizeStyles$1 = props => {
468
468
  };
469
469
  const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
470
470
  'data-garden-id': COMPONENT_ID$2,
471
- 'data-garden-version': '9.11.0'
471
+ 'data-garden-version': '9.11.1'
472
472
  }).withConfig({
473
473
  displayName: "StyledIcon",
474
474
  componentId: "sc-10rfb5b-0"
@@ -480,34 +480,39 @@ const sizeStyles = _ref => {
480
480
  theme,
481
481
  $size
482
482
  } = _ref;
483
+ let minWidth;
483
484
  let paddingHorizontal;
484
485
  let paddingVertical = '0';
485
486
  switch ($size) {
486
487
  case 'small':
488
+ minWidth = polished.math(`${theme.lineHeights.sm} - 1px`);
487
489
  paddingHorizontal = `${theme.space.base}px`;
488
490
  break;
489
491
  case 'medium':
492
+ minWidth = polished.math(`${theme.lineHeights.md} - 1px`);
490
493
  paddingHorizontal = `${theme.space.base * 1.5}px`;
491
494
  break;
492
495
  case 'large':
496
+ minWidth = polished.math(`${theme.lineHeights.lg} - 1px`);
493
497
  paddingHorizontal = `${theme.space.base * 1.75}px`;
494
498
  break;
495
499
  default:
500
+ minWidth = 'calc(1.2em + 3px)';
496
501
  paddingHorizontal = `${polished.stripUnit(polished.math(`${theme.space.base * 1.5} / (${theme.fontSizes.md} - 1px)`))}em`;
497
502
  paddingVertical = '1.5px';
498
503
  break;
499
504
  }
500
505
  const padding = `${paddingVertical} ${paddingHorizontal}`;
501
- return styled.css(["&&{padding:", ";}"], padding);
506
+ return styled.css(["&&{box-sizing:border-box;padding:", ";min-width:", ";}"], padding, minWidth);
502
507
  };
503
508
  const StyledKbd = styled__default.default(StyledCode).attrs({
504
509
  'data-garden-id': COMPONENT_ID$1,
505
- 'data-garden-version': '9.11.0',
510
+ 'data-garden-version': '9.11.1',
506
511
  as: 'kbd'
507
512
  }).withConfig({
508
513
  displayName: "StyledKbd",
509
514
  componentId: "sc-1gzk2wp-0"
510
- })(["display:inline-block;direction:ltr;", ";", ";"], sizeStyles, reactTheming.componentStyles);
515
+ })(["display:inline-block;direction:ltr;text-align:center;font-family:sans-serif;", ";", ";"], sizeStyles, reactTheming.componentStyles);
511
516
 
512
517
  const listStyles = props => {
513
518
  const rtl = props.theme.rtl;
@@ -516,7 +521,7 @@ const listStyles = props => {
516
521
  const ORDERED_ID$1 = 'typography.ordered_list';
517
522
  const StyledOrderedList = styled__default.default.ol.attrs({
518
523
  'data-garden-id': ORDERED_ID$1,
519
- 'data-garden-version': '9.11.0'
524
+ 'data-garden-version': '9.11.1'
520
525
  }).withConfig({
521
526
  displayName: "StyledList__StyledOrderedList",
522
527
  componentId: "sc-jdbsfi-0"
@@ -524,7 +529,7 @@ const StyledOrderedList = styled__default.default.ol.attrs({
524
529
  const UNORDERED_ID$1 = 'typography.unordered_list';
525
530
  const StyledUnorderedList = styled__default.default.ul.attrs({
526
531
  'data-garden-id': UNORDERED_ID$1,
527
- 'data-garden-version': '9.11.0'
532
+ 'data-garden-version': '9.11.1'
528
533
  }).withConfig({
529
534
  displayName: "StyledList__StyledUnorderedList",
530
535
  componentId: "sc-jdbsfi-1"
@@ -541,7 +546,7 @@ const listItemStyles = props => {
541
546
  const ORDERED_ID = 'typography.ordered_list_item';
542
547
  const StyledOrderedListItem = styled__default.default(StyledFont).attrs({
543
548
  'data-garden-id': ORDERED_ID,
544
- 'data-garden-version': '9.11.0',
549
+ 'data-garden-version': '9.11.1',
545
550
  as: 'li'
546
551
  }).withConfig({
547
552
  displayName: "StyledListItem__StyledOrderedListItem",
@@ -554,7 +559,7 @@ StyledOrderedListItem.defaultProps = {
554
559
  const UNORDERED_ID = 'typography.unordered_list_item';
555
560
  const StyledUnorderedListItem = styled__default.default(StyledFont).attrs({
556
561
  'data-garden-id': UNORDERED_ID,
557
- 'data-garden-version': '9.11.0',
562
+ 'data-garden-version': '9.11.1',
558
563
  as: 'li'
559
564
  }).withConfig({
560
565
  displayName: "StyledListItem__StyledUnorderedListItem",
@@ -568,7 +573,7 @@ StyledUnorderedListItem.defaultProps = {
568
573
  const COMPONENT_ID = 'typography.paragraph';
569
574
  const StyledParagraph = styled__default.default.p.attrs({
570
575
  'data-garden-id': COMPONENT_ID,
571
- 'data-garden-version': '9.11.0'
576
+ 'data-garden-version': '9.11.1'
572
577
  }).withConfig({
573
578
  displayName: "StyledParagraph",
574
579
  componentId: "sc-zkuftz-0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-typography",
3
- "version": "9.11.0",
3
+ "version": "9.11.1",
4
4
  "description": "Components relating to typography in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
33
33
  "styled-components": "^5.3.1 || ^6.0.0"
34
34
  },
35
35
  "devDependencies": {
36
- "@zendeskgarden/react-theming": "^9.11.0"
36
+ "@zendeskgarden/react-theming": "^9.11.1"
37
37
  },
38
38
  "keywords": [
39
39
  "components",
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "zendeskgarden:src": "src/index.ts",
48
- "gitHead": "1bde0483c654e7fc3482c7b95741147a01073ef9"
48
+ "gitHead": "c45a8893e0ed1fd9f1cf257b2badf6bbeae90bc0"
49
49
  }