@spaced-out/ui-design-system 0.0.55 → 0.0.57

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 (9) hide show
  1. package/.storybook/preview-head.html +1 -0
  2. package/CHANGELOG.md +14 -0
  3. package/lib/components/ButtonDropdown/ButtonDropdown.js +7 -6
  4. package/lib/components/ButtonDropdown/ButtonDropdown.js.flow +92 -88
  5. package/lib/components/Icon/Icon.js +4 -3
  6. package/lib/components/Icon/Icon.js.flow +35 -28
  7. package/lib/components/OptionButton/OptionButton.js +1 -1
  8. package/lib/components/OptionButton/OptionButton.js.flow +1 -1
  9. package/package.json +1 -1
package/.storybook/preview-head.html CHANGED
@@ -101,6 +101,7 @@
101
101
 
102
102
  #root {
103
103
  font-family: initial;
104
+ background: #fafafa;
104
105
  }
105
106
 
106
107
  #docs-root {
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
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.0.57](https://github.com/spaced-out/ui-design-system/compare/v0.0.56...v0.0.57) (2023-03-24)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * button dropdown ref and rightIcon changes ([#82](https://github.com/spaced-out/ui-design-system/issues/82)) ([c2a85b2](https://github.com/spaced-out/ui-design-system/commit/c2a85b212932583430ebdd9c4d31fdb1bcb8cd9d))
11
+
12
+ ### [0.0.56](https://github.com/spaced-out/ui-design-system/compare/v0.0.55...v0.0.56) (2023-03-23)
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * consistent color in stories ([5a4a927](https://github.com/spaced-out/ui-design-system/commit/5a4a9270150e89114fc77db396e89a2cd0faf990))
18
+
5
19
  ### [0.0.55](https://github.com/spaced-out/ui-design-system/compare/v0.0.54...v0.0.55) (2023-03-23)
6
20
 
7
21
 
package/lib/components/ButtonDropdown/ButtonDropdown.js CHANGED
@@ -26,7 +26,7 @@ const ANCHOR_POSITION_TYPE = Object.freeze({
26
26
  bottomEnd: 'bottom-end'
27
27
  });
28
28
  exports.ANCHOR_POSITION_TYPE = ANCHOR_POSITION_TYPE;
29
- const ButtonDropdown = _ref => {
29
+ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
30
30
  let {
31
31
  anchorPosition = 'bottom-start',
32
32
  size,
@@ -38,11 +38,12 @@ const ButtonDropdown = _ref => {
38
38
  onMenuClose,
39
39
  children,
40
40
  iconRightName,
41
- iconRightType,
41
+ iconRightType = 'solid',
42
42
  isFluid,
43
43
  ...restButtonProps
44
44
  } = _ref;
45
- const menuBtnRef = React.useRef();
45
+ const menuBtnRef = React.useRef(null);
46
+ React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
46
47
  const {
47
48
  x,
48
49
  y,
@@ -74,8 +75,8 @@ const ButtonDropdown = _ref => {
74
75
  }, classNames?.dropdownContainer),
75
76
  ref: menuBtnRef
76
77
  }, /*#__PURE__*/React.createElement(_Button.Button, _extends({}, restButtonProps, {
77
- iconRightName: children ? isOpen ? 'caret-up' : 'caret-down' : iconRightName ? iconRightName : isOpen ? 'caret-up' : 'caret-down',
78
- iconRightType: children ? 'solid' : iconRightType,
78
+ iconRightName: children ? iconRightName || (isOpen ? 'caret-up' : 'caret-down') : iconRightName,
79
+ iconRightType: iconRightType,
79
80
  disabled: disabled,
80
81
  size: size,
81
82
  ref: reference,
@@ -107,5 +108,5 @@ const ButtonDropdown = _ref => {
107
108
  size: menu.size || size
108
109
  }))));
109
110
  });
110
- };
111
+ });
111
112
  exports.ButtonDropdown = ButtonDropdown;
package/lib/components/ButtonDropdown/ButtonDropdown.js.flow CHANGED
@@ -52,97 +52,101 @@ export type ButtonDropdownProps = {
52
52
  ...
53
53
  };
54
54
 
55
- export const ButtonDropdown = ({
56
- anchorPosition = 'bottom-start',
57
- size,
58
- onOptionSelect,
59
- menu,
60
- classNames,
61
- disabled,
62
- onMenuOpen,
63
- onMenuClose,
64
- children,
65
- iconRightName,
66
- iconRightType,
67
- isFluid,
68
- ...restButtonProps
69
- }: ButtonDropdownProps): React.Node => {
70
- const menuBtnRef = React.useRef();
71
- const {x, y, reference, floating, strategy} = useFloating({
72
- strategy: 'absolute',
73
- placement: anchorPosition,
74
- whileElementsMounted: autoUpdate,
75
- middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
76
- });
55
+ export const ButtonDropdown: React$AbstractComponent<
56
+ ButtonDropdownProps,
57
+ HTMLDivElement,
58
+ > = React.forwardRef<ButtonDropdownProps, HTMLDivElement>(
59
+ (
60
+ {
61
+ anchorPosition = 'bottom-start',
62
+ size,
63
+ onOptionSelect,
64
+ menu,
65
+ classNames,
66
+ disabled,
67
+ onMenuOpen,
68
+ onMenuClose,
69
+ children,
70
+ iconRightName,
71
+ iconRightType = 'solid',
72
+ isFluid,
73
+ ...restButtonProps
74
+ }: ButtonDropdownProps,
75
+ forwardRef,
76
+ ) => {
77
+ const menuBtnRef = React.useRef(null);
78
+ React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
79
+ const {x, y, reference, floating, strategy} = useFloating({
80
+ strategy: 'absolute',
81
+ placement: anchorPosition,
82
+ whileElementsMounted: autoUpdate,
83
+ middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
84
+ });
77
85
 
78
- const onMenuToggle = (isOpen: boolean) => {
79
- isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
80
- };
86
+ const onMenuToggle = (isOpen: boolean) => {
87
+ isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
88
+ };
81
89
 
82
- return (
83
- <ClickAway onChange={onMenuToggle}>
84
- {({isOpen, onOpen, cancelNext, clickAway}) => (
85
- <div
86
- data-testid="ButtonDropdown"
87
- className={classify(
88
- css.buttonDropdownContainer,
89
- {
90
- [css.isFluid]: isFluid === true,
91
- },
92
- classNames?.dropdownContainer,
93
- )}
94
- ref={menuBtnRef}
95
- >
96
- <Button
97
- {...restButtonProps}
98
- iconRightName={
99
- children
100
- ? isOpen
101
- ? 'caret-up'
102
- : 'caret-down'
103
- : iconRightName
104
- ? iconRightName
105
- : isOpen
106
- ? 'caret-up'
107
- : 'caret-down'
108
- }
109
- iconRightType={children ? 'solid' : iconRightType}
110
- disabled={disabled}
111
- size={size}
112
- ref={reference}
113
- onClick={(e) => {
114
- e.stopPropagation();
115
- onOpen();
116
- }}
117
- isFluid={isFluid}
118
- classNames={{wrapper: classNames?.buttonWrapper}}
90
+ return (
91
+ <ClickAway onChange={onMenuToggle}>
92
+ {({isOpen, onOpen, cancelNext, clickAway}) => (
93
+ <div
94
+ data-testid="ButtonDropdown"
95
+ className={classify(
96
+ css.buttonDropdownContainer,
97
+ {
98
+ [css.isFluid]: isFluid === true,
99
+ },
100
+ classNames?.dropdownContainer,
101
+ )}
102
+ ref={menuBtnRef}
119
103
  >
120
- {children}
121
- </Button>
122
- {isOpen && menu && (
123
- <div
124
- onClickCapture={cancelNext}
125
- ref={floating}
126
- style={{
127
- display: 'flex',
128
- position: strategy,
129
- top: y ?? spaceNone,
130
- left: x ?? spaceNone,
131
- ...(isFluid && {width: sizeFluid}),
104
+ <Button
105
+ {...restButtonProps}
106
+ iconRightName={
107
+ children
108
+ ? iconRightName || (isOpen ? 'caret-up' : 'caret-down')
109
+ : iconRightName
110
+ }
111
+ iconRightType={iconRightType}
112
+ disabled={disabled}
113
+ size={size}
114
+ ref={reference}
115
+ onClick={(e) => {
116
+ e.stopPropagation();
117
+ onOpen();
132
118
  }}
119
+ isFluid={isFluid}
120
+ classNames={{wrapper: classNames?.buttonWrapper}}
133
121
  >
134
- <Menu
135
- {...menu}
136
- onSelect={(option) => {
137
- onOptionSelect && onOptionSelect(option);
138
- clickAway();
122
+ {children}
123
+ </Button>
124
+
125
+ {isOpen && menu && (
126
+ <div
127
+ onClickCapture={cancelNext}
128
+ ref={floating}
129
+ style={{
130
+ display: 'flex',
131
+ position: strategy,
132
+ top: y ?? spaceNone,
133
+ left: x ?? spaceNone,
134
+ ...(isFluid && {width: sizeFluid}),
139
135
  }}
140
- size={menu.size || size}
141
- />
142
- </div>
143
- )}
144
- </div>
145
- )}
146
- </ClickAway>
147
- );
148
- };
136
+ >
137
+ <Menu
138
+ {...menu}
139
+ onSelect={(option) => {
140
+ onOptionSelect && onOptionSelect(option);
141
+ clickAway();
142
+ }}
143
+ size={menu.size || size}
144
+ />
145
+ </div>
146
+ )}
147
+ </div>
148
+ )}
149
+ </ClickAway>
150
+ );
151
+ },
152
+ );
package/lib/components/Icon/Icon.js CHANGED
@@ -20,7 +20,7 @@ const ICON_SIZE = Object.freeze({
20
20
  medium: 'medium'
21
21
  });
22
22
  exports.ICON_SIZE = ICON_SIZE;
23
- const Icon = _ref => {
23
+ const Icon = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
24
24
  let {
25
25
  type = 'regular',
26
26
  name = '',
@@ -32,11 +32,12 @@ const Icon = _ref => {
32
32
  } = _ref;
33
33
  return /*#__PURE__*/React.createElement(React.Fragment, null, !!name && /*#__PURE__*/React.createElement("div", {
34
34
  className: (0, _classify.default)(_typographyModule.default.centerAlignFlex, _typographyModule.default[`${size}Icon`], _typographyModule.default[color], className),
35
- onClick: onClick
35
+ onClick: onClick,
36
+ ref: forwardRef
36
37
  }, /*#__PURE__*/React.createElement("i", {
37
38
  className: (0, _classify.default)(`fa-${type} fa-${name} `, {
38
39
  ['fa-swap-opacity']: swapOpacity
39
40
  })
40
41
  })));
41
- };
42
+ });
42
43
  exports.Icon = Icon;
package/lib/components/Icon/Icon.js.flow CHANGED
@@ -32,32 +32,39 @@ export type IconProps = {
32
32
  swapOpacity?: boolean,
33
33
  };
34
34
 
35
- export const Icon = ({
36
- type = 'regular',
37
- name = '',
38
- size = 'medium',
39
- color = TEXT_COLORS.primary,
40
- className,
41
- onClick,
42
- swapOpacity,
43
- }: IconProps): React.Node => (
44
- <>
45
- {!!name && (
46
- <div
47
- className={classify(
48
- typographyStyle.centerAlignFlex,
49
- typographyStyle[`${size}Icon`],
50
- typographyStyle[color],
51
- className,
35
+ export const Icon: React$AbstractComponent<IconProps, HTMLDivElement> =
36
+ React.forwardRef<IconProps, HTMLDivElement>(
37
+ (
38
+ {
39
+ type = 'regular',
40
+ name = '',
41
+ size = 'medium',
42
+ color = TEXT_COLORS.primary,
43
+ className,
44
+ onClick,
45
+ swapOpacity,
46
+ }: IconProps,
47
+ forwardRef,
48
+ ) => (
49
+ <>
50
+ {!!name && (
51
+ <div
52
+ className={classify(
53
+ typographyStyle.centerAlignFlex,
54
+ typographyStyle[`${size}Icon`],
55
+ typographyStyle[color],
56
+ className,
57
+ )}
58
+ onClick={onClick}
59
+ ref={forwardRef}
60
+ >
61
+ <i
62
+ className={classify(`fa-${type} fa-${name} `, {
63
+ ['fa-swap-opacity']: swapOpacity,
64
+ })}
65
+ />
66
+ </div>
52
67
  )}
53
- onClick={onClick}
54
- >
55
- <i
56
- className={classify(`fa-${type} fa-${name} `, {
57
- ['fa-swap-opacity']: swapOpacity,
58
- })}
59
- />
60
- </div>
61
- )}
62
- </>
63
- );
68
+ </>
69
+ ),
70
+ );
package/lib/components/OptionButton/OptionButton.js CHANGED
@@ -49,7 +49,7 @@ const OptionButton = _ref => {
49
49
  }, children), /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
50
50
  anchorPosition: anchorPosition,
51
51
  ariaLabel: ariaLabel,
52
- iconRightName: iconName,
52
+ iconLeftName: iconName,
53
53
  classNames: {
54
54
  buttonWrapper: _OptionButtonModule.default.rightButton,
55
55
  dropdownContainer: _OptionButtonModule.default.dropDownContainer
package/lib/components/OptionButton/OptionButton.js.flow CHANGED
@@ -60,7 +60,7 @@ export const OptionButton = ({
60
60
  <ButtonDropdown
61
61
  anchorPosition={anchorPosition}
62
62
  ariaLabel={ariaLabel}
63
- iconRightName={iconName}
63
+ iconLeftName={iconName}
64
64
  classNames={{
65
65
  buttonWrapper: css.rightButton,
66
66
  dropdownContainer: css.dropDownContainer,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaced-out/ui-design-system",
3
- "version": "0.0.55",
3
+ "version": "0.0.57",
4
4
  "main": "index.js",
5
5
  "description": "Sense UI components library",
6
6
  "author": {