@spaced-out/ui-design-system 0.3.26 → 0.3.27

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 (22) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/lib/components/ButtonDropdown/SimpleButtonDropdown.js +3 -1
  3. package/lib/components/ButtonDropdown/SimpleButtonDropdown.js.flow +4 -1
  4. package/lib/components/Dropdown/SimpleDropdown.js +3 -1
  5. package/lib/components/Dropdown/SimpleDropdown.js.flow +4 -1
  6. package/lib/components/InlineDropdown/SimpleInlineDropdown.js +3 -1
  7. package/lib/components/InlineDropdown/SimpleInlineDropdown.js.flow +4 -1
  8. package/lib/components/Menu/Menu.js.flow +3 -1
  9. package/lib/components/Menu/Menu.module.css +8 -4
  10. package/lib/components/Menu/MenuOptionButton.js +27 -3
  11. package/lib/components/Menu/MenuOptionButton.js.flow +33 -1
  12. package/lib/components/OptionButton/SimpleOptionButton.js +3 -1
  13. package/lib/components/OptionButton/SimpleOptionButton.js.flow +4 -1
  14. package/lib/components/Text/Text.js +74 -28
  15. package/lib/components/Text/Text.js.flow +74 -0
  16. package/lib/components/Text/index.js +12 -0
  17. package/lib/components/Text/index.js.flow +2 -0
  18. package/lib/components/Typeahead/SimpleTypeahead.js +3 -1
  19. package/lib/components/Typeahead/SimpleTypeahead.js.flow +4 -1
  20. package/lib/styles/typography.module.css +10 -0
  21. package/lib/types/menu.js.flow +4 -0
  22. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [0.3.27](https://github.com/spaced-out/ui-design-system/compare/v0.3.26...v0.3.27) (2025-03-06)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * added tooltip truncation in menu and dropdown labels ([#320](https://github.com/spaced-out/ui-design-system/issues/320)) ([5fe291a](https://github.com/spaced-out/ui-design-system/commit/5fe291a1c9dfd1a5e2aca91336c7f24433f5cb9e))
11
+
5
12
  ### [0.3.26](https://github.com/spaced-out/ui-design-system/compare/v0.3.25...v0.3.26) (2025-03-05)
6
13
 
7
14
 
package/lib/components/ButtonDropdown/SimpleButtonDropdown.js CHANGED
@@ -30,6 +30,7 @@ const SimpleButtonDropdownBase = (props, ref) => {
30
30
  header,
31
31
  footer,
32
32
  menuClassNames,
33
+ showLabelTooltip,
33
34
  clickAwayRef,
34
35
  ...buttonProps
35
36
  } = props;
@@ -78,7 +79,8 @@ const SimpleButtonDropdownBase = (props, ref) => {
78
79
  virtualization: menuVirtualization,
79
80
  header,
80
81
  footer,
81
- classNames: menuClassNames
82
+ classNames: menuClassNames,
83
+ showLabelTooltip
82
84
  }
83
85
  }), optionsVariant === 'checkbox' ? btnText : children);
84
86
  };
package/lib/components/ButtonDropdown/SimpleButtonDropdown.js.flow CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import * as React from 'react';
4
4
 
5
- import type {MenuClassNames} from '../../types/menu';
5
+ import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
6
6
  import type {ClickAwayRefType} from '../../utils/click-away';
7
7
  import {
8
8
  getButtonLabelFromSelectedKeys,
@@ -43,6 +43,7 @@ export type SimpleButtonDropdownProps = {
43
43
  header?: React.Node,
44
44
  footer?: React.Node,
45
45
  menuClassNames?: MenuClassNames,
46
+ showLabelTooltip?: MenuLabelTooltip,
46
47
 
47
48
  // events
48
49
  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -76,6 +77,7 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
76
77
  header,
77
78
  footer,
78
79
  menuClassNames,
80
+ showLabelTooltip,
79
81
  clickAwayRef,
80
82
  ...buttonProps
81
83
  } = props;
@@ -144,6 +146,7 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
144
146
  header,
145
147
  footer,
146
148
  classNames: menuClassNames,
149
+ showLabelTooltip,
147
150
  }}
148
151
  >
149
152
  {optionsVariant === 'checkbox' ? btnText : children}
package/lib/components/Dropdown/SimpleDropdown.js CHANGED
@@ -29,6 +29,7 @@ const SimpleDropdownBase = (props, ref) => {
29
29
  header,
30
30
  footer,
31
31
  menuClassNames,
32
+ showLabelTooltip,
32
33
  clickAwayRef,
33
34
  ...inputProps
34
35
  } = props;
@@ -78,7 +79,8 @@ const SimpleDropdownBase = (props, ref) => {
78
79
  isFluid: isMenuFluid,
79
80
  header,
80
81
  footer,
81
- classNames: menuClassNames
82
+ classNames: menuClassNames,
83
+ showLabelTooltip
82
84
  }
83
85
  }));
84
86
  };
package/lib/components/Dropdown/SimpleDropdown.js.flow CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import * as React from 'react';
4
4
 
5
- import type {MenuClassNames} from '../../types/menu';
5
+ import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
6
6
  import type {ClickAwayRefType} from '../../utils/click-away';
7
7
  import {
8
8
  getSelectedKeysFromSelectedOption,
@@ -40,6 +40,7 @@ export type SimpleDropdownProps = {
40
40
  header?: React.Node,
41
41
  footer?: React.Node,
42
42
  menuClassNames?: MenuClassNames,
43
+ showLabelTooltip?: MenuLabelTooltip,
43
44
 
44
45
  // events
45
46
  onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -71,6 +72,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
71
72
  header,
72
73
  footer,
73
74
  menuClassNames,
75
+ showLabelTooltip,
74
76
  clickAwayRef,
75
77
  ...inputProps
76
78
  } = props;
@@ -140,6 +142,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
140
142
  header,
141
143
  footer,
142
144
  classNames: menuClassNames,
145
+ showLabelTooltip,
143
146
  }}
144
147
  />
145
148
  );
package/lib/components/InlineDropdown/SimpleInlineDropdown.js CHANGED
@@ -30,6 +30,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
30
30
  header,
31
31
  footer,
32
32
  menuClassNames,
33
+ showLabelTooltip,
33
34
  clickAwayRef,
34
35
  ...buttonProps
35
36
  } = props;
@@ -78,7 +79,8 @@ const SimpleInlineDropdownBase = (props, ref) => {
78
79
  virtualization: menuVirtualization,
79
80
  header,
80
81
  footer,
81
- classNames: menuClassNames
82
+ classNames: menuClassNames,
83
+ showLabelTooltip
82
84
  }
83
85
  }), optionsVariant === 'checkbox' ? btnText : children);
84
86
  };
package/lib/components/InlineDropdown/SimpleInlineDropdown.js.flow CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import * as React from 'react';
4
4
 
5
- import type {MenuClassNames} from '../../types/menu';
5
+ import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
6
6
  import type {ClickAwayRefType} from '../../utils/click-away';
7
7
  import {
8
8
  getButtonLabelFromSelectedKeys,
@@ -37,6 +37,7 @@ export type SimpleInlineDropdownProps = {
37
37
  optionsVariant?: MenuOptionsVariant,
38
38
  allowSearch?: boolean,
39
39
  selectedKeys?: Array<string>,
40
+ showLabelTooltip?: MenuLabelTooltip,
40
41
 
41
42
  // events
42
43
  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -74,6 +75,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
74
75
  header,
75
76
  footer,
76
77
  menuClassNames,
78
+ showLabelTooltip,
77
79
  clickAwayRef,
78
80
  ...buttonProps
79
81
  } = props;
@@ -142,6 +144,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
142
144
  header,
143
145
  footer,
144
146
  classNames: menuClassNames,
147
+ showLabelTooltip,
145
148
  }}
146
149
  >
147
150
  {optionsVariant === 'checkbox' ? btnText : children}
package/lib/components/Menu/Menu.js.flow CHANGED
@@ -3,7 +3,7 @@ import * as React from 'react';
3
3
  // $FlowIssue[nonstrict-import] react-window
4
4
  import {FixedSizeList} from 'react-window';
5
5
 
6
- import type {MenuClassNames} from '../../types/menu';
6
+ import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
7
7
  import {classify} from '../../utils/classify';
8
8
  import {
9
9
  getFilteredComposeOptionsFromSearchText,
@@ -83,6 +83,8 @@ export type BaseMenuProps = {
83
83
  RESULTS?: string,
84
84
  SEARCH_PLACEHOLDER?: string,
85
85
  },
86
+ showLabelTooltip?: MenuLabelTooltip,
87
+ allowWrap?: boolean,
86
88
  };
87
89
 
88
90
  export type MenuOptionTypes = {
package/lib/components/Menu/Menu.module.css CHANGED
@@ -151,12 +151,12 @@
151
151
  }
152
152
 
153
153
  .optionSmall {
154
- composes: buttonTextSmall from '../../styles/typography.module.css';
154
+ composes: menuTextSmall from '../../styles/typography.module.css';
155
155
  padding: spaceXSmall spaceSmall;
156
156
  }
157
157
 
158
158
  .optionMedium {
159
- composes: buttonTextMedium from '../../styles/typography.module.css';
159
+ composes: menuTextMedium from '../../styles/typography.module.css';
160
160
  padding: spaceSmall spaceSmall;
161
161
  }
162
162
 
@@ -182,6 +182,11 @@
182
182
  .option:focus {
183
183
  outline: none;
184
184
  color: colorTextPrimary;
185
+ }
186
+
187
+ .option:focus-visible {
188
+ outline: none;
189
+ color: colorTextPrimary;
185
190
  box-shadow: inset borderWidthNone borderWidthNone borderWidthNone
186
191
  borderWidthTertiary colorFocusSecondary;
187
192
  }
@@ -189,8 +194,7 @@
189
194
  .option:focus-within {
190
195
  outline: none;
191
196
  color: colorTextPrimary;
192
- box-shadow: inset borderWidthNone borderWidthNone borderWidthNone
193
- borderWidthTertiary colorFocusSecondary;
197
+ /* box-shadow: none; */
194
198
  }
195
199
 
196
200
  .option.selected {
package/lib/components/Menu/MenuOptionButton.js CHANGED
@@ -11,6 +11,7 @@ var _Checkbox = require("../Checkbox");
11
11
  var _Icon = require("../Icon");
12
12
  var _RadioButton = require("../RadioButton");
13
13
  var _Truncate = require("../Truncate");
14
+ var _TruncatedTextWithTooltip = require("../TruncatedTextWithTooltip");
14
15
  var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
15
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
17
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -31,7 +32,9 @@ const MenuOptionButton = props => {
31
32
  onTabOut,
32
33
  resolveLabel,
33
34
  resolveSecondaryLabel,
34
- style
35
+ style,
36
+ showLabelTooltip,
37
+ allowWrap = false
35
38
  } = props;
36
39
  const {
37
40
  key,
@@ -106,7 +109,7 @@ const MenuOptionButton = props => {
106
109
  className: (0, _classify.classify)(_MenuModule.default.optionTextContainer, classNames?.optionTextContainer)
107
110
  }, /*#__PURE__*/React.isValidElement(customComponent) ? customComponent : /*#__PURE__*/React.createElement("div", {
108
111
  className: (0, _classify.classify)(_MenuModule.default.optionTextLabel, classNames?.optionTextLabel)
109
- }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, resolvedLabel)), !!secondaryLabel && /*#__PURE__*/React.createElement("div", {
112
+ }, renderLabel(resolvedLabel, allowWrap, showLabelTooltip)), !!secondaryLabel && /*#__PURE__*/React.createElement("div", {
110
113
  className: _MenuModule.default.optionTextSecondaryLabel
111
114
  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, resolvedSecondaryLabel))), !!iconRight && /*#__PURE__*/React.createElement(_Icon.Icon, {
112
115
  name: iconRight,
@@ -115,4 +118,25 @@ const MenuOptionButton = props => {
115
118
  className: (0, _classify.classify)(_MenuModule.default.icon, _MenuModule.default.rightIcon)
116
119
  }));
117
120
  };
118
- exports.MenuOptionButton = MenuOptionButton;
121
+ exports.MenuOptionButton = MenuOptionButton;
122
+ const renderLabel = (label, allowWrap, showLabelTooltip) => {
123
+ if (showLabelTooltip) {
124
+ return /*#__PURE__*/React.createElement(_TruncatedTextWithTooltip.TruncatedTextWithTooltip, {
125
+ tooltip: {
126
+ bodyMaxLines: showLabelTooltip.maxLines ?? 10,
127
+ delayMotionDuration: 'normal'
128
+ },
129
+ line: 3
130
+ }, label);
131
+ }
132
+ if (allowWrap) {
133
+ return /*#__PURE__*/React.createElement(_TruncatedTextWithTooltip.TruncatedTextWithTooltip, {
134
+ tooltip: {
135
+ bodyMaxLines: 10,
136
+ delayMotionDuration: 'normal'
137
+ },
138
+ line: 3
139
+ }, label);
140
+ }
141
+ return /*#__PURE__*/React.createElement(_Truncate.Truncate, null, label);
142
+ };
package/lib/components/Menu/MenuOptionButton.js.flow CHANGED
@@ -7,6 +7,7 @@ import {Checkbox} from '../Checkbox';
7
7
  import {Icon} from '../Icon';
8
8
  import {RadioButton} from '../RadioButton';
9
9
  import {Truncate} from '../Truncate';
10
+ import {TruncatedTextWithTooltip} from '../TruncatedTextWithTooltip';
10
11
 
11
12
  import type {BaseMenuProps, MenuOption} from './Menu';
12
13
 
@@ -37,6 +38,8 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
37
38
  resolveLabel,
38
39
  resolveSecondaryLabel,
39
40
  style,
41
+ showLabelTooltip,
42
+ allowWrap = false,
40
43
  } = props;
41
44
  const {
42
45
  key,
@@ -145,7 +148,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
145
148
  classNames?.optionTextLabel,
146
149
  )}
147
150
  >
148
- <Truncate>{resolvedLabel}</Truncate>
151
+ {renderLabel(resolvedLabel, allowWrap, showLabelTooltip)}
149
152
  </div>
150
153
  )}
151
154
 
@@ -167,3 +170,32 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
167
170
  </UnstyledButton>
168
171
  );
169
172
  };
173
+
174
+ const renderLabel = (label, allowWrap, showLabelTooltip) => {
175
+ if (showLabelTooltip) {
176
+ return (
177
+ <TruncatedTextWithTooltip
178
+ tooltip={{
179
+ bodyMaxLines: showLabelTooltip.maxLines ?? 10,
180
+ delayMotionDuration: 'normal',
181
+ }}
182
+ line={3}
183
+ >
184
+ {label}
185
+ </TruncatedTextWithTooltip>
186
+ );
187
+ }
188
+
189
+ if (allowWrap) {
190
+ return (
191
+ <TruncatedTextWithTooltip
192
+ tooltip={{bodyMaxLines: 10, delayMotionDuration: 'normal'}}
193
+ line={3}
194
+ >
195
+ {label}
196
+ </TruncatedTextWithTooltip>
197
+ );
198
+ }
199
+
200
+ return <Truncate>{label}</Truncate>;
201
+ };
package/lib/components/OptionButton/SimpleOptionButton.js CHANGED
@@ -32,6 +32,7 @@ const SimpleOptionButtonBase = (props, ref) => {
32
32
  header,
33
33
  footer,
34
34
  menuClassNames,
35
+ showLabelTooltip,
35
36
  clickAwayRef,
36
37
  ...buttonProps
37
38
  } = props;
@@ -77,7 +78,8 @@ const SimpleOptionButtonBase = (props, ref) => {
77
78
  virtualization: menuVirtualization,
78
79
  header,
79
80
  footer,
80
- classNames: menuClassNames
81
+ classNames: menuClassNames,
82
+ showLabelTooltip
81
83
  }
82
84
  }), children);
83
85
  };
package/lib/components/OptionButton/SimpleOptionButton.js.flow CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import * as React from 'react';
4
4
 
5
- import type {MenuClassNames} from '../../types/menu';
5
+ import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
6
6
  import type {ClickAwayRefType} from '../../utils/click-away';
7
7
  import {getSelectedKeysFromSelectedOption} from '../../utils/menu';
8
8
  import type {ButtonProps} from '../Button';
@@ -45,6 +45,7 @@ export type SimpleOptionButtonProps = {
45
45
  header?: React.Node,
46
46
  footer?: React.Node,
47
47
  menuClassNames?: MenuClassNames,
48
+ showLabelTooltip?: MenuLabelTooltip,
48
49
 
49
50
  // events
50
51
  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -81,6 +82,7 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
81
82
  header,
82
83
  footer,
83
84
  menuClassNames,
85
+ showLabelTooltip,
84
86
  clickAwayRef,
85
87
  ...buttonProps
86
88
  } = props;
@@ -141,6 +143,7 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
141
143
  header,
142
144
  footer,
143
145
  classNames: menuClassNames,
146
+ showLabelTooltip,
144
147
  }}
145
148
  >
146
149
  {children}
package/lib/components/Text/Text.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboSmall = exports.JumboMedium = exports.JumboLarge = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmallUnderline = exports.ButtonTextSmall = exports.ButtonTextMediumUnderline = exports.ButtonTextMedium = exports.ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmall = exports.BodySmallBold = exports.BodySmall = exports.BodyMediumBold = exports.BodyMedium = exports.BodyLargeBold = exports.BodyLarge = void 0;
6
+ exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.MenuTextSmall = exports.MenuTextMedium = exports.JumboSmall = exports.JumboMedium = exports.JumboLarge = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmallUnderline = exports.ButtonTextSmall = exports.ButtonTextMediumUnderline = exports.ButtonTextMedium = exports.ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmall = exports.BodySmallBold = exports.BodySmall = exports.BodyMediumBold = exports.BodyMedium = exports.BodyLargeBold = exports.BodyLarge = void 0;
7
7
  var React = _interopRequireWildcard(require("react"));
8
8
  var _typography = require("../../types/typography");
9
9
  var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -269,7 +269,7 @@ const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
269
269
  }) : children);
270
270
  });
271
271
  exports.ButtonTextSmall = ButtonTextSmall;
272
- const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
272
+ const MenuTextMedium = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
273
273
  let {
274
274
  color = _typography.TEXT_COLORS.primary,
275
275
  children,
@@ -280,6 +280,52 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
280
280
  highlightWithBackground,
281
281
  ...props
282
282
  } = _ref12;
283
+ return /*#__PURE__*/React.createElement("span", _extends({}, props, {
284
+ className: (0, _classify.default)(_typographyModule.default.menuTextMedium, _typographyModule.default[color], className),
285
+ ref: ref
286
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
287
+ text: children,
288
+ highlight: highlightString,
289
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
290
+ highlightClassName: highlightedTextClassName,
291
+ highlightWithBackground: highlightWithBackground
292
+ }) : children);
293
+ });
294
+ exports.MenuTextMedium = MenuTextMedium;
295
+ const MenuTextSmall = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
296
+ let {
297
+ color = _typography.TEXT_COLORS.primary,
298
+ children,
299
+ className,
300
+ highlightedTextClassName,
301
+ highlightString,
302
+ caseSensitiveHighlighting,
303
+ highlightWithBackground,
304
+ ...props
305
+ } = _ref13;
306
+ return /*#__PURE__*/React.createElement("span", _extends({}, props, {
307
+ className: (0, _classify.default)(_typographyModule.default.menuTextSmall, _typographyModule.default[color], className),
308
+ ref: ref
309
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
310
+ text: children,
311
+ highlight: highlightString,
312
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
313
+ highlightClassName: highlightedTextClassName,
314
+ highlightWithBackground: highlightWithBackground
315
+ }) : children);
316
+ });
317
+ exports.MenuTextSmall = MenuTextSmall;
318
+ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
319
+ let {
320
+ color = _typography.TEXT_COLORS.primary,
321
+ children,
322
+ className,
323
+ highlightedTextClassName,
324
+ highlightString,
325
+ caseSensitiveHighlighting,
326
+ highlightWithBackground,
327
+ ...props
328
+ } = _ref14;
283
329
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
284
330
  className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className),
285
331
  ref: ref
@@ -292,7 +338,7 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
292
338
  }) : children);
293
339
  });
294
340
  exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
295
- const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
341
+ const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
296
342
  let {
297
343
  color = _typography.TEXT_COLORS.primary,
298
344
  children,
@@ -302,7 +348,7 @@ const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) =>
302
348
  caseSensitiveHighlighting,
303
349
  highlightWithBackground,
304
350
  ...props
305
- } = _ref13;
351
+ } = _ref15;
306
352
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
307
353
  className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default.underline, _typographyModule.default[color], className),
308
354
  ref: ref
@@ -315,7 +361,7 @@ const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) =>
315
361
  }) : children);
316
362
  });
317
363
  exports.ButtonTextMediumUnderline = ButtonTextMediumUnderline;
318
- const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
364
+ const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
319
365
  let {
320
366
  color = _typography.TEXT_COLORS.primary,
321
367
  children,
@@ -325,7 +371,7 @@ const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) =>
325
371
  caseSensitiveHighlighting,
326
372
  highlightWithBackground,
327
373
  ...props
328
- } = _ref14;
374
+ } = _ref16;
329
375
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
330
376
  className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
331
377
  ref: ref
@@ -338,7 +384,7 @@ const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) =>
338
384
  }) : children);
339
385
  });
340
386
  exports.ButtonTextSmallUnderline = ButtonTextSmallUnderline;
341
- const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
387
+ const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
342
388
  let {
343
389
  color = _typography.TEXT_COLORS.primary,
344
390
  children,
@@ -348,7 +394,7 @@ const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref
348
394
  caseSensitiveHighlighting,
349
395
  highlightWithBackground,
350
396
  ...props
351
- } = _ref15;
397
+ } = _ref17;
352
398
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
353
399
  className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
354
400
  ref: ref
@@ -361,7 +407,7 @@ const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref
361
407
  }) : children);
362
408
  });
363
409
  exports.ButtonTextExtraSmallUnderline = ButtonTextExtraSmallUnderline;
364
- const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
410
+ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
365
411
  let {
366
412
  color = _typography.TEXT_COLORS.primary,
367
413
  children,
@@ -371,7 +417,7 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
371
417
  caseSensitiveHighlighting,
372
418
  highlightWithBackground,
373
419
  ...props
374
- } = _ref16;
420
+ } = _ref18;
375
421
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
376
422
  className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
377
423
  ref: ref
@@ -384,7 +430,7 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
384
430
  }) : children);
385
431
  });
386
432
  exports.FormInputMedium = FormInputMedium;
387
- const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
433
+ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
388
434
  let {
389
435
  color = _typography.TEXT_COLORS.primary,
390
436
  children,
@@ -394,7 +440,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
394
440
  caseSensitiveHighlighting,
395
441
  highlightWithBackground,
396
442
  ...props
397
- } = _ref17;
443
+ } = _ref19;
398
444
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
399
445
  className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
400
446
  ref: ref
@@ -407,7 +453,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
407
453
  }) : children);
408
454
  });
409
455
  exports.FormInputSmall = FormInputSmall;
410
- const BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
456
+ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
411
457
  let {
412
458
  color = _typography.TEXT_COLORS.primary,
413
459
  children,
@@ -417,7 +463,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
417
463
  caseSensitiveHighlighting,
418
464
  highlightWithBackground,
419
465
  ...props
420
- } = _ref18;
466
+ } = _ref20;
421
467
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
422
468
  className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
423
469
  ref: ref
@@ -430,7 +476,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
430
476
  }) : children);
431
477
  });
432
478
  exports.BodyLarge = BodyLarge;
433
- const BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
479
+ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
434
480
  let {
435
481
  color = _typography.TEXT_COLORS.primary,
436
482
  children,
@@ -440,7 +486,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
440
486
  caseSensitiveHighlighting,
441
487
  highlightWithBackground,
442
488
  ...props
443
- } = _ref19;
489
+ } = _ref21;
444
490
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
445
491
  className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
446
492
  ref: ref
@@ -453,7 +499,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
453
499
  }) : children);
454
500
  });
455
501
  exports.BodyMedium = BodyMedium;
456
- const BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
502
+ const BodySmall = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
457
503
  let {
458
504
  color = _typography.TEXT_COLORS.primary,
459
505
  children,
@@ -463,7 +509,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
463
509
  caseSensitiveHighlighting,
464
510
  highlightWithBackground,
465
511
  ...props
466
- } = _ref20;
512
+ } = _ref22;
467
513
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
468
514
  className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
469
515
  ref: ref
@@ -476,7 +522,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
476
522
  }) : children);
477
523
  });
478
524
  exports.BodySmall = BodySmall;
479
- const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
525
+ const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
480
526
  let {
481
527
  color = _typography.TEXT_COLORS.primary,
482
528
  children,
@@ -486,7 +532,7 @@ const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
486
532
  caseSensitiveHighlighting,
487
533
  highlightWithBackground,
488
534
  ...props
489
- } = _ref21;
535
+ } = _ref23;
490
536
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
491
537
  className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default.bold, _typographyModule.default[color], className),
492
538
  ref: ref
@@ -499,7 +545,7 @@ const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
499
545
  }) : children);
500
546
  });
501
547
  exports.BodyLargeBold = BodyLargeBold;
502
- const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
548
+ const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
503
549
  let {
504
550
  color = _typography.TEXT_COLORS.primary,
505
551
  children,
@@ -509,7 +555,7 @@ const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
509
555
  caseSensitiveHighlighting,
510
556
  highlightWithBackground,
511
557
  ...props
512
- } = _ref22;
558
+ } = _ref24;
513
559
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
514
560
  className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default.bold, _typographyModule.default[color], className),
515
561
  ref: ref
@@ -522,7 +568,7 @@ const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
522
568
  }) : children);
523
569
  });
524
570
  exports.BodyMediumBold = BodyMediumBold;
525
- const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
571
+ const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
526
572
  let {
527
573
  color = _typography.TEXT_COLORS.primary,
528
574
  children,
@@ -532,7 +578,7 @@ const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
532
578
  caseSensitiveHighlighting,
533
579
  highlightWithBackground,
534
580
  ...props
535
- } = _ref23;
581
+ } = _ref25;
536
582
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
537
583
  className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default.bold, _typographyModule.default[color], className),
538
584
  ref: ref
@@ -545,7 +591,7 @@ const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
545
591
  }) : children);
546
592
  });
547
593
  exports.BodySmallBold = BodySmallBold;
548
- const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
594
+ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref26, ref) => {
549
595
  let {
550
596
  color = _typography.TEXT_COLORS.primary,
551
597
  children,
@@ -555,7 +601,7 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
555
601
  caseSensitiveHighlighting,
556
602
  highlightWithBackground,
557
603
  ...props
558
- } = _ref24;
604
+ } = _ref26;
559
605
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
560
606
  className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
561
607
  ref: ref
@@ -568,7 +614,7 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
568
614
  }) : children);
569
615
  });
570
616
  exports.FormLabelMedium = FormLabelMedium;
571
- const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
617
+ const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref27, ref) => {
572
618
  let {
573
619
  color = _typography.TEXT_COLORS.primary,
574
620
  children,
@@ -578,7 +624,7 @@ const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
578
624
  caseSensitiveHighlighting,
579
625
  highlightWithBackground,
580
626
  ...props
581
- } = _ref25;
627
+ } = _ref27;
582
628
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
583
629
  className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className),
584
630
  ref: ref
package/lib/components/Text/Text.js.flow CHANGED
@@ -452,6 +452,80 @@ export const ButtonTextSmall: React$AbstractComponent<
452
452
  ),
453
453
  );
454
454
 
455
+ export const MenuTextMedium: React$AbstractComponent<
456
+ TextProps,
457
+ HTMLSpanElement,
458
+ > = React.forwardRef<TextProps, HTMLSpanElement>(
459
+ (
460
+ {
461
+ color = TEXT_COLORS.primary,
462
+ children,
463
+ className,
464
+ highlightedTextClassName,
465
+ highlightString,
466
+ caseSensitiveHighlighting,
467
+ highlightWithBackground,
468
+ ...props
469
+ }: TextProps,
470
+ ref,
471
+ ): React.Node => (
472
+ <span
473
+ {...props}
474
+ className={classify(css.menuTextMedium, css[color], className)}
475
+ ref={ref}
476
+ >
477
+ {!!highlightString?.length && typeof children === 'string' ? (
478
+ <HighlightText
479
+ text={children}
480
+ highlight={highlightString}
481
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
482
+ highlightClassName={highlightedTextClassName}
483
+ highlightWithBackground={highlightWithBackground}
484
+ />
485
+ ) : (
486
+ children
487
+ )}
488
+ </span>
489
+ ),
490
+ );
491
+
492
+ export const MenuTextSmall: React$AbstractComponent<
493
+ TextProps,
494
+ HTMLSpanElement,
495
+ > = React.forwardRef<TextProps, HTMLSpanElement>(
496
+ (
497
+ {
498
+ color = TEXT_COLORS.primary,
499
+ children,
500
+ className,
501
+ highlightedTextClassName,
502
+ highlightString,
503
+ caseSensitiveHighlighting,
504
+ highlightWithBackground,
505
+ ...props
506
+ }: TextProps,
507
+ ref,
508
+ ): React.Node => (
509
+ <span
510
+ {...props}
511
+ className={classify(css.menuTextSmall, css[color], className)}
512
+ ref={ref}
513
+ >
514
+ {!!highlightString?.length && typeof children === 'string' ? (
515
+ <HighlightText
516
+ text={children}
517
+ highlight={highlightString}
518
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
519
+ highlightClassName={highlightedTextClassName}
520
+ highlightWithBackground={highlightWithBackground}
521
+ />
522
+ ) : (
523
+ children
524
+ )}
525
+ </span>
526
+ ),
527
+ );
528
+
455
529
  export const ButtonTextExtraSmall: React$AbstractComponent<
456
530
  TextProps,
457
531
  HTMLSpanElement,
package/lib/components/Text/index.js CHANGED
@@ -117,6 +117,18 @@ Object.defineProperty(exports, "JumboSmall", {
117
117
  return _Text.JumboSmall;
118
118
  }
119
119
  });
120
+ Object.defineProperty(exports, "MenuTextMedium", {
121
+ enumerable: true,
122
+ get: function () {
123
+ return _Text.MenuTextMedium;
124
+ }
125
+ });
126
+ Object.defineProperty(exports, "MenuTextSmall", {
127
+ enumerable: true,
128
+ get: function () {
129
+ return _Text.MenuTextSmall;
130
+ }
131
+ });
120
132
  Object.defineProperty(exports, "SubTitleExtraSmall", {
121
133
  enumerable: true,
122
134
  get: function () {
package/lib/components/Text/index.js.flow CHANGED
@@ -22,6 +22,8 @@ export {
22
22
  JumboLarge,
23
23
  JumboMedium,
24
24
  JumboSmall,
25
+ MenuTextMedium,
26
+ MenuTextSmall,
25
27
  SubTitleExtraSmall,
26
28
  SubTitleLarge,
27
29
  SubTitleMedium,
package/lib/components/Typeahead/SimpleTypeahead.js CHANGED
@@ -29,6 +29,7 @@ const SimpleTypeaheadBase = (props, ref) => {
29
29
  footer,
30
30
  menuClassNames,
31
31
  clickAwayRef,
32
+ showLabelTooltip,
32
33
  allowInternalFilter = true,
33
34
  ...inputProps
34
35
  } = props;
@@ -79,7 +80,8 @@ const SimpleTypeaheadBase = (props, ref) => {
79
80
  virtualization: menuVirtualization,
80
81
  header,
81
82
  footer,
82
- classNames: menuClassNames
83
+ classNames: menuClassNames,
84
+ showLabelTooltip
83
85
  },
84
86
  clickAwayRef: clickAwayRef
85
87
  }));
package/lib/components/Typeahead/SimpleTypeahead.js.flow CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import * as React from 'react';
4
4
 
5
- import type {MenuClassNames} from '../../types/menu';
5
+ import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
6
6
  import type {ClickAwayRefType} from '../../utils/click-away';
7
7
  import {getTextLabelFromSelectedKeys} from '../../utils/menu';
8
8
  import type {InputProps} from '../Input';
@@ -36,6 +36,7 @@ export type SimpleTypeaheadProps = {
36
36
  header?: React.Node,
37
37
  footer?: React.Node,
38
38
  menuClassNames?: MenuClassNames,
39
+ showLabelTooltip?: MenuLabelTooltip,
39
40
 
40
41
  // events
41
42
  onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -71,6 +72,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
71
72
  footer,
72
73
  menuClassNames,
73
74
  clickAwayRef,
75
+ showLabelTooltip,
74
76
  allowInternalFilter = true,
75
77
  ...inputProps
76
78
  } = props;
@@ -140,6 +142,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
140
142
  header,
141
143
  footer,
142
144
  classNames: menuClassNames,
145
+ showLabelTooltip,
143
146
  }}
144
147
  clickAwayRef={clickAwayRef}
145
148
  />
package/lib/styles/typography.module.css CHANGED
@@ -137,6 +137,16 @@
137
137
  letter-spacing: fontLetterSpacing1;
138
138
  }
139
139
 
140
+ .menuTextMedium {
141
+ composes: buttonTextMedium;
142
+ line-height: fontLineHeight130;
143
+ }
144
+
145
+ .menuTextSmall {
146
+ composes: buttonTextSmall;
147
+ letter-spacing: fontLineHeight130;
148
+ }
149
+
140
150
  .formInputMedium {
141
151
  composes: baseType;
142
152
  font-size: fontSize14;
package/lib/types/menu.js.flow CHANGED
@@ -9,3 +9,7 @@ export type MenuClassNames = $ReadOnly<{
9
9
  header?: string,
10
10
  footer?: string,
11
11
  }>;
12
+
13
+ export type MenuLabelTooltip = {
14
+ maxLines?: number,
15
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaced-out/ui-design-system",
3
- "version": "0.3.26",
3
+ "version": "0.3.27",
4
4
  "main": "index.js",
5
5
  "description": "Sense UI components library",
6
6
  "author": {