@fibery/ui-kit 1.32.1 → 1.33.0

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/button/base-button.tsx +5 -72
  3. package/src/button/button-group.tsx +41 -60
  4. package/src/button/select-button.tsx +36 -0
  5. package/src/design-system.ts +1 -1
  6. package/src/emoji-picker/primitives/search.tsx +1 -1
  7. package/src/icons/ast/SmartFolder.ts +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fibery/ui-kit",
3
- "version": "1.32.1",
3
+ "version": "1.33.0",
4
4
  "private": false,
5
5
  "files": [
6
6
  "src/antd/styles.ts",
package/src/button/base-button.tsx CHANGED
@@ -6,18 +6,14 @@ import {iconColorVar} from "../icons/Icon";
6
6
  export type ButtonSize = "tiny" | "small" | "medium" | "large";
7
7
  export type ButtonVariant = "solid" | "outline" | "soft" | "ghost";
8
8
  export type ButtonColor = "accent" | "neutral" | "error";
9
- type PositionInGroup = "first" | "middle" | "last";
10
9
 
11
10
  export type BaseButtonProps = {
12
11
  variant?: ButtonVariant;
13
12
  color?: ButtonColor;
14
13
  pressed?: boolean;
15
-
16
- // kept for backward compatibility with old buttons. Ideally should be reprsented as a separate component (ButtonGroup/SegmentedControl)
17
- inGroup?: PositionInGroup;
18
14
  } & React.ComponentPropsWithRef<"button">;
19
15
 
20
- const baseButton = css`
16
+ export const baseButton = css`
21
17
  all: unset;
22
18
  position: relative;
23
19
  box-sizing: border-box;
@@ -44,7 +40,8 @@ const baseButton = css`
44
40
  ${iconColorVar}: var(--fibery-button-text-active-color);
45
41
  }
46
42
 
47
- &[aria-pressed="true"] {
43
+ &[aria-pressed="true"],
44
+ &[aria-expanded="true"] {
48
45
  color: var(--fibery-button-text-active-color);
49
46
  ${iconColorVar}: var(--fibery-button-text-active-color);
50
47
  background-color: var(--fibery-button-hover-color);
@@ -100,73 +97,9 @@ const getColors = (variant: ButtonVariant, color: ButtonColor) => {
100
97
  } as CSSProperties;
101
98
  };
102
99
 
103
- const buttonGroup = {
104
- first: css`
105
- &:is(&) {
106
- display: inline-flex;
107
- vertical-align: middle;
108
- border-top-right-radius: 0;
109
- border-bottom-right-radius: 0;
110
-
111
- &:not([data-variant="outline"]) + * {
112
- position: relative;
113
- :after {
114
- content: "";
115
- left: -1px;
116
- position: absolute;
117
- width: 1px;
118
- top: 4px;
119
- bottom: 4px;
120
- background-color: rgba(255, 255, 255, 0.2);
121
- }
122
- }
123
- }
124
- `,
125
- middle: css`
126
- &:is(&) {
127
- display: inline-flex;
128
- vertical-align: middle;
129
- margin-left: -1px;
130
- border-radius: 0;
131
-
132
- &:not([data-variant="outline"]) + * {
133
- position: relative;
134
- :after {
135
- content: "";
136
- left: -1px;
137
- position: absolute;
138
- width: 1px;
139
- top: 4px;
140
- bottom: 4px;
141
- background-color: rgba(255, 255, 255, 0.2);
142
- }
143
- }
144
- }
145
- `,
146
- last: css`
147
- &:is(&) {
148
- display: inline-flex;
149
- vertical-align: middle;
150
- margin-left: -1px;
151
- border-top-left-radius: 0;
152
- border-bottom-left-radius: 0;
153
- }
154
- `,
155
- };
156
-
157
100
  export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
158
101
  (
159
- {
160
- variant = "solid",
161
- color = "accent",
162
- type = "button",
163
- className,
164
- children,
165
- inGroup,
166
- style,
167
- pressed,
168
- ...buttonProps
169
- },
102
+ {variant = "solid", color = "accent", type = "button", className, children, style, pressed, ...buttonProps},
170
103
  ref
171
104
  ) => {
172
105
  const colors = getColors(variant, color);
@@ -176,7 +109,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
176
109
  style={{...colors, ...style}}
177
110
  aria-pressed={pressed || buttonProps["aria-pressed"]}
178
111
  data-variant={variant}
179
- className={cx(baseButton, inGroup && buttonGroup[inGroup], className)}
112
+ className={cx(baseButton, className)}
180
113
  ref={ref}
181
114
  // eslint-disable-next-line react/button-has-type
182
115
  type={type}
package/src/button/button-group.tsx CHANGED
@@ -1,76 +1,57 @@
1
- import {Children, cloneElement, CSSProperties, ReactElement} from "react";
2
1
  import {css, cx} from "@linaria/core";
3
- import {border} from "../design-system";
2
+ import {forwardRef} from "react";
3
+ import {baseButton} from "./base-button";
4
4
 
5
- const ordersInRowGroup = {
6
- first: css`
7
- ${{
8
- display: "inline-flex",
9
- borderRadius: `${border.radius6}px 0 0 ${border.radius6}px`,
10
- marginRight: -1,
11
- }}
12
- `,
13
- middle: css`
14
- ${{
15
- display: "inline-flex",
16
- borderRadius: border.radius0,
17
- marginRight: -1,
18
- }}
19
- `,
20
- last: css`
21
- ${{
22
- display: "inline-flex",
23
- borderRadius: `0 ${border.radius6}px ${border.radius6}px 0`,
24
- }}
25
- `,
26
- };
5
+ const buttonGroupDirection = {
6
+ row: css`
7
+ & > :not(:first-child).${baseButton}, & > :not(:first-child) .${baseButton} {
8
+ margin-left: -1px;
9
+ border-top-left-radius: 0;
10
+ border-bottom-left-radius: 0;
11
+ }
27
12
 
28
- const ordersInColumnGroup = {
29
- first: css`
30
- ${{
31
- display: "inline-flex",
32
- borderRadius: `${border.radius6}px ${border.radius6}px 0 0 `,
33
- marginBottom: -1,
34
- }}
13
+ & > :not(:last-child).${baseButton}, & > :not(:last-child) .${baseButton} {
14
+ border-top-right-radius: 0;
15
+ border-bottom-right-radius: 0;
16
+ }
35
17
  `,
36
- middle: css`
37
- ${{
38
- display: "inline-flex",
39
- borderRadius: border.radius0,
40
- marginBottom: -1,
41
- }}
42
- `,
43
- last: css`
44
- ${{
45
- display: "inline-flex",
46
- borderRadius: `0 0 ${border.radius6}px ${border.radius6}px`,
47
- }}
18
+ column: css`
19
+ & > :not(:first-child).${baseButton}, & > :not(:first-child) .${baseButton} {
20
+ margin-top: -1px;
21
+ border-top-left-radius: 0;
22
+ border-top-right-radius: 0;
23
+ }
24
+
25
+ & > :not(:last-child).${baseButton}, & > :not(:last-child) .${baseButton} {
26
+ border-bottom-left-radius: 0;
27
+ border-bottom-right-radius: 0;
28
+ }
48
29
  `,
49
30
  };
50
31
 
51
- export interface ButtonGroupProps {
52
- direction: CSSProperties["flexDirection"];
53
- children: ReactElement[];
54
- }
32
+ const buttonGroup = css`
33
+ display: flex;
34
+ align-items: flex-start;
35
+ `;
36
+
37
+ export type ButtonGroupProps = {
38
+ direction?: "row" | "column";
39
+ } & React.ComponentPropsWithoutRef<"div">;
55
40
 
56
- export function ButtonGroup({direction, children}: ButtonGroupProps) {
41
+ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(function ButtonGroup(
42
+ {direction = "row", className, style, children},
43
+ ref
44
+ ) {
57
45
  return (
58
46
  <div
47
+ ref={ref}
48
+ className={cx(buttonGroup, buttonGroupDirection[direction], className)}
59
49
  style={{
60
- display: "flex",
61
- alignItems: "flex-start",
62
50
  flexDirection: direction,
51
+ ...style,
63
52
  }}
64
53
  >
65
- {Children.map(children, (child, index) => {
66
- const inGroup = index === 0 ? "first" : index === children.length - 1 ? "last" : "middle";
67
- return cloneElement(child, {
68
- className: cx(
69
- child.props.className,
70
- direction === "row" ? ordersInRowGroup[inGroup] : ordersInColumnGroup[inGroup]
71
- ),
72
- });
73
- })}
54
+ {children}
74
55
  </div>
75
56
  );
76
- }
57
+ });
package/src/button/select-button.tsx ADDED
@@ -0,0 +1,36 @@
1
+ import {css} from "@linaria/core";
2
+ import {forwardRef} from "react";
3
+ import {space} from "../design-system";
4
+ import ArrowBottom from "../icons/react/ArrowBottom";
5
+ import {Button, ButtonProps} from "./button";
6
+
7
+ const selectIndicator = css`
8
+ margin-left: -${space.s4}px;
9
+ margin-right: -${space.s4}px;
10
+ `;
11
+
12
+ export type SelectButtonProps = {
13
+ /**
14
+ * Highlight buttons. Internally sets "aria-expanded"
15
+ * This props is not needed when used with Radix components as they manage "aria-expanded" themselves
16
+ * Should be used as an escape hatch for components like ui-kit/src/popup that don't set "aria-expanded"
17
+ */
18
+ open?: boolean;
19
+ } & Omit<ButtonProps, "iconEnd">;
20
+
21
+ export const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(function SelectButton(
22
+ {className, open, ...rest},
23
+ forwardedRef
24
+ ) {
25
+ return (
26
+ <Button
27
+ ref={forwardedRef}
28
+ aria-expanded={open}
29
+ iconEnd={<ArrowBottom className={selectIndicator} />}
30
+ variant="ghost"
31
+ color="neutral"
32
+ className={className}
33
+ {...rest}
34
+ />
35
+ );
36
+ });
package/src/design-system.ts CHANGED
@@ -887,7 +887,7 @@ export const layout = {
887
887
  menuDefaultWidth: 243,
888
888
  desktopToolbarHeight: 32,
889
889
  desktopMenuMinWidth: 240,
890
- collapsedMenuMinWidth: 48,
890
+ collapsedMenuMinWidth: 47,
891
891
  menuMinWidth: 240, //TODO: make dependency to itemHeight
892
892
  menuMaxWidth: 480,
893
893
  menuItemMinWidth: 80,
package/src/emoji-picker/primitives/search.tsx CHANGED
@@ -63,7 +63,7 @@ const searchIconCss = css`
63
63
 
64
64
  const extraActionSlotCss = css`
65
65
  background-color: var(--fibery-emoji-hover-color, ${themeVars.inputCopyBgColor});
66
- border-radius: ${space.s6}px;
66
+ border-radius: ${border.radius5}px;
67
67
  margin-right: ${space.s4}px;
68
68
  `;
69
69
 
package/src/icons/ast/SmartFolder.ts CHANGED
@@ -3,6 +3,6 @@
3
3
 
4
4
  import { IconDefinition } from '../types';
5
5
 
6
- const SmartFolder: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.586 9.219a.75.75 0 0 0-1.172-.937l-2 2.5A.75.75 0 0 0 8 12h2l-.586 1.282a.75.75 0 0 0 1.172.937l2-2.5A.75.75 0 0 0 12 10.5h-2l.586-1.281Z","fill":"#51616C","fillOpacity":0.9},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2.708 3.791a2.417 2.417 0 0 1 1.709-.708H7.5a.75.75 0 0 1 .53.22l2.28 2.28h5.273A2.417 2.417 0 0 1 18 8v6.667c0 .64-.255 1.255-.708 1.709-.274.273-.645.441-.912.537-.26.093-.572.17-.797.17H4.417A2.417 2.417 0 0 1 2 14.668V5.5c0-.64.255-1.255.708-1.709Zm1.709.792A.917.917 0 0 0 3.5 5.5v9.167a.917.917 0 0 0 .917.917h11.151c.008-.002.032-.005.072-.015a2.051 2.051 0 0 0 .472-.173.565.565 0 0 0 .12-.081.917.917 0 0 0 .268-.648V8a.917.917 0 0 0-.917-.917H10a.75.75 0 0 1-.53-.22l-2.28-2.28H4.416Z"},"children":[]}],"metadata":""}]},"name":"smart-folder"};
6
+ const SmartFolder: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.586 9.219a.75.75 0 0 0-1.172-.937l-2 2.5A.75.75 0 0 0 8 12h2l-.586 1.282a.75.75 0 0 0 1.172.937l2-2.5A.75.75 0 0 0 12 10.5h-2l.586-1.281Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2.708 3.791a2.417 2.417 0 0 1 1.709-.708H7.5a.75.75 0 0 1 .53.22l2.28 2.28h5.273A2.417 2.417 0 0 1 18 8v6.667c0 .64-.255 1.255-.708 1.709-.274.273-.645.441-.912.537-.26.093-.572.17-.797.17H4.417A2.417 2.417 0 0 1 2 14.668V5.5c0-.64.255-1.255.708-1.709Zm1.709.792A.917.917 0 0 0 3.5 5.5v9.167a.917.917 0 0 0 .917.917h11.151c.008-.002.032-.005.072-.015a2.051 2.051 0 0 0 .472-.173.565.565 0 0 0 .12-.081.917.917 0 0 0 .268-.648V8a.917.917 0 0 0-.917-.917H10a.75.75 0 0 1-.53-.22l-2.28-2.28H4.416Z"},"children":[]}],"metadata":""}]},"name":"smart-folder"};
7
7
 
8
8
  export default SmartFolder;