@coinbase/cds-mobile 8.17.2 → 8.17.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dts/media/Avatar.d.ts +3 -2
  3. package/dts/media/Avatar.d.ts.map +1 -1
  4. package/esm/media/RemoteImage.js +4 -4
  5. package/esm/media/__stories__/Avatar.stories.js +125 -81
  6. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.17.4 (10/27/2025 PST)
12
+
13
+ This is an artificial version bump with no new change.
14
+
15
+ ## 8.17.3 (10/21/2025 PST)
16
+
17
+ #### 🐞 Fixes
18
+
19
+ - Fix avatar hexagon shape. [[#107](https://github.com/coinbase/cds/pull/107)]
20
+
11
21
  ## 8.17.2 ((10/16/2025, 03:16 PM PST))
12
22
 
13
23
  This is an artificial version bump with no new change.
package/dts/media/Avatar.d.ts CHANGED
@@ -17,8 +17,9 @@ export type AvatarBaseProps = SharedProps &
17
17
  alt?: string;
18
18
  /** Absolute url to the image that should be shown in the Avatar. If no src is provided then a generic fallback image is used. */
19
19
  src?: string;
20
- /** Shape of Avatar.
21
- * Note: If the shape is a hexagon, do not use name.
20
+ /**
21
+ * Shape of Avatar.
22
+ * @note If the shape is a hexagon, do not use name.
22
23
  */
23
24
  shape?: AvatarShape;
24
25
  /** Size for a given avatar. */
package/dts/media/Avatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/media/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EACV,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQnD,eAAO,MAAM,qBAAqB,gCAAgC,CAAC;AAEnE,eAAO,MAAM,gBAAgB,4iDAC8gD,CAAC;AAE5iD,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,sHAAsH;IACtH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iIAAiI;IACjI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kCAAkC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,oGAAoG;IACpG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEvE,eAAO,MAAM,MAAM,yJAcd,WAAW,6CA0Hf,CAAC"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/media/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EACV,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQnD,eAAO,MAAM,qBAAqB,gCAAgC,CAAC;AAEnE,eAAO,MAAM,gBAAgB,4iDAC8gD,CAAC;AAE5iD,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,sHAAsH;IACtH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iIAAiI;IACjI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kCAAkC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,oGAAoG;IACpG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEvE,eAAO,MAAM,MAAM,yJAcd,WAAW,6CA0Hf,CAAC"}
package/esm/media/RemoteImage.js CHANGED
@@ -39,12 +39,12 @@ const HexagonClipPath = _ref => {
39
39
  } = _ref,
40
40
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
41
41
  return /*#__PURE__*/_jsxs(Svg, _extends({}, props, {
42
- viewBox: "0 0 66 62",
42
+ viewBox: "0 0 16 16",
43
43
  children: [/*#__PURE__*/_jsx(Defs, {
44
44
  children: /*#__PURE__*/_jsx(ClipPath, {
45
45
  id: "hex-hw-shapeclip-clipconfig",
46
46
  children: /*#__PURE__*/_jsx(Path, {
47
- d: "M63.4372 22.8624C66.2475 27.781 66.2475 33.819 63.4372 38.7376L54.981 53.5376C52.1324 58.5231 46.8307 61.6 41.0887 61.6H24.4562C18.7142 61.6 13.4125 58.5231 10.564 53.5376L2.10774 38.7376C-0.702577 33.819 -0.702582 27.781 2.10774 22.8624L10.564 8.06243C13.4125 3.07687 18.7142 0 24.4562 0H41.0887C46.8307 0 52.1324 3.07686 54.981 8.06242L63.4372 22.8624Z"
47
+ d: "M15.4855 6.0242C16.1715 7.24852 16.1715 8.75148 15.4855 9.97581L13.4213 13.6598C12.7259 14.9008 11.4317 15.6667 10.0301 15.6667H5.96994C4.56828 15.6667 3.2741 14.9008 2.57874 13.6598L0.514515 9.97581C-0.171504 8.75148 -0.171505 7.24852 0.514514 6.0242L2.57874 2.34022C3.2741 1.09922 4.56828 0.333336 5.96994 0.333336H10.0301C11.4317 0.333336 12.7259 1.09922 13.4213 2.34022L15.4855 6.0242Z"
48
48
  })
49
49
  })
50
50
  }), image]
@@ -155,9 +155,9 @@ export const RemoteImage = /*#__PURE__*/memo(function RemoteImage(_ref2) {
155
155
  accessible: isAccessible,
156
156
  image: /*#__PURE__*/_jsx(SvgImage, {
157
157
  clipPath: "url(#hex-hw-shapeclip-clipconfig)",
158
- height: "100%",
158
+ height: 16,
159
159
  href: source,
160
- width: "100%",
160
+ width: 16,
161
161
  x: 0,
162
162
  y: 0
163
163
  })
package/esm/media/__stories__/Avatar.stories.js CHANGED
@@ -8,6 +8,7 @@ import { Avatar } from '../Avatar';
8
8
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
9
  const image = 'https://avatars.slack-edge.com/2019-12-09/865473396980_e8c83b072b452e4d03f7_192.jpg';
10
10
  const names = ['Sneezy', 'Happy', 'Sleepy', 'Doc', 'Bashful', 'Grumpy', 'Dopey', 'Lilo', 'Stitch'];
11
+ const sizes = ['s', 'm', 'l', 'xl', 'xxl', 'xxxl'];
11
12
  const FallbackColored = () => {
12
13
  return /*#__PURE__*/_jsx(HStack, {
13
14
  alignItems: "center",
@@ -27,93 +28,139 @@ const colorSchemes = Object.keys(colorSchemeMap);
27
28
  const AvatarScreen = () => {
28
29
  return /*#__PURE__*/_jsxs(ExampleScreen, {
29
30
  children: [/*#__PURE__*/_jsx(Example, {
30
- title: "Normal",
31
- children: /*#__PURE__*/_jsxs(HStack, {
32
- alignItems: "center",
33
- flexWrap: "wrap",
31
+ title: "Normal - Default",
32
+ children: /*#__PURE__*/_jsxs(VStack, {
34
33
  gap: 2,
35
- children: [/*#__PURE__*/_jsx(Avatar, {
36
- accessibilityLabel: "",
37
- src: image
38
- }), /*#__PURE__*/_jsx(Avatar, {
39
- accessibilityLabel: "",
40
- name: "Happy",
41
- shape: "square",
42
- src: image
43
- }), /*#__PURE__*/_jsx(Avatar, {
44
- accessibilityLabel: "",
45
- name: "Grumpy",
46
- shape: "hexagon",
47
- src: image
48
- }), /*#__PURE__*/_jsx(Avatar, {
49
- accessibilityLabel: "",
50
- borderColor: "bgPositive",
51
- name: "Sleepy",
52
- src: image
53
- }), /*#__PURE__*/_jsx(Avatar, {
54
- accessibilityLabel: "",
55
- name: "Bashful",
56
- size: "m",
57
- src: image
58
- }), /*#__PURE__*/_jsx(Avatar, {
59
- accessibilityLabel: "",
60
- name: "Grumpy",
61
- size: "l",
62
- src: image
63
- }), /*#__PURE__*/_jsx(Avatar, {
64
- accessibilityLabel: "",
65
- name: "Grumpy",
66
- size: "xl",
67
- src: image
68
- }), /*#__PURE__*/_jsx(Avatar, {
69
- accessibilityLabel: "",
70
- name: "Grumpy",
71
- size: "xxl",
72
- src: image
73
- }), /*#__PURE__*/_jsx(Avatar, {
74
- accessibilityLabel: "",
75
- name: "Grumpy",
76
- size: "xxxl",
77
- src: image
34
+ children: [/*#__PURE__*/_jsx(HStack, {
35
+ alignItems: "center",
36
+ flexWrap: "wrap",
37
+ gap: 2,
38
+ children: sizes.map(size => /*#__PURE__*/_jsx(Avatar, {
39
+ accessibilityLabel: "",
40
+ alt: "",
41
+ size: size,
42
+ src: image
43
+ }, size))
44
+ }), /*#__PURE__*/_jsx(HStack, {
45
+ alignItems: "center",
46
+ flexWrap: "wrap",
47
+ gap: 2,
48
+ children: sizes.map(size => /*#__PURE__*/_jsx(Avatar, {
49
+ accessibilityLabel: "",
50
+ alt: "",
51
+ shape: "square",
52
+ size: size,
53
+ src: image
54
+ }, size))
55
+ }), /*#__PURE__*/_jsx(HStack, {
56
+ alignItems: "center",
57
+ flexWrap: "wrap",
58
+ gap: 2,
59
+ children: sizes.map(size => /*#__PURE__*/_jsx(Avatar, {
60
+ accessibilityLabel: "",
61
+ alt: "",
62
+ shape: "hexagon",
63
+ size: size,
64
+ src: image
65
+ }, size))
78
66
  })]
79
67
  })
80
68
  }), /*#__PURE__*/_jsx(Example, {
81
- title: "Fallback Image",
82
- children: /*#__PURE__*/_jsxs(HStack, {
83
- alignItems: "center",
84
- flexWrap: "wrap",
69
+ title: "Normal - With borderColor",
70
+ children: /*#__PURE__*/_jsxs(VStack, {
85
71
  gap: 2,
86
- children: [/*#__PURE__*/_jsx(Avatar, {
87
- accessibilityLabel: ""
88
- }), /*#__PURE__*/_jsx(Avatar, {
89
- accessibilityLabel: "",
90
- shape: "square"
91
- }), /*#__PURE__*/_jsx(Avatar, {
92
- accessibilityLabel: "",
93
- shape: "hexagon"
94
- }), /*#__PURE__*/_jsx(Avatar, {
95
- accessibilityLabel: "",
96
- borderColor: "bgPositive"
97
- }), /*#__PURE__*/_jsx(Avatar, {
98
- accessibilityLabel: "",
99
- size: "m"
100
- }), /*#__PURE__*/_jsx(Avatar, {
101
- accessibilityLabel: "",
102
- size: "l"
103
- }), /*#__PURE__*/_jsx(Avatar, {
104
- accessibilityLabel: "",
105
- size: "xl"
106
- }), /*#__PURE__*/_jsx(Avatar, {
107
- accessibilityLabel: "",
108
- size: "xxl"
109
- }), /*#__PURE__*/_jsx(Avatar, {
110
- accessibilityLabel: "",
111
- size: "xxxl"
72
+ children: [/*#__PURE__*/_jsx(HStack, {
73
+ alignItems: "center",
74
+ flexWrap: "wrap",
75
+ gap: 2,
76
+ children: sizes.map(size => /*#__PURE__*/_jsx(Avatar, {
77
+ accessibilityLabel: "",
78
+ alt: "",
79
+ borderColor: "bgPositive",
80
+ size: size,
81
+ src: image
82
+ }, size))
83
+ }), /*#__PURE__*/_jsx(HStack, {
84
+ alignItems: "center",
85
+ flexWrap: "wrap",
86
+ gap: 2,
87
+ children: sizes.map(size => /*#__PURE__*/_jsx(Avatar, {
88
+ accessibilityLabel: "",
89
+ alt: "",
90
+ borderColor: "bgPositive",
91
+ shape: "square",
92
+ size: size,
93
+ src: image
94
+ }, size))
95
+ })]
96
+ })
97
+ }), /*#__PURE__*/_jsx(Example, {
98
+ title: "Fallback Image - Default",
99
+ children: /*#__PURE__*/_jsxs(VStack, {
100
+ gap: 2,
101
+ children: [/*#__PURE__*/_jsx(HStack, {
102
+ alignItems: "center",
103
+ flexWrap: "wrap",
104
+ gap: 2,
105
+ children: sizes.map(size => /*#__PURE__*/_jsx(Avatar, {
106
+ accessibilityLabel: "",
107
+ alt: "",
108
+ size: size
109
+ }, size))
110
+ }), /*#__PURE__*/_jsx(HStack, {
111
+ alignItems: "center",
112
+ flexWrap: "wrap",
113
+ gap: 2,
114
+ children: sizes.map(size => /*#__PURE__*/_jsx(Avatar, {
115
+ accessibilityLabel: "",
116
+ alt: "",
117
+ shape: "square",
118
+ size: size
119
+ }, size))
120
+ }), /*#__PURE__*/_jsx(HStack, {
121
+ alignItems: "center",
122
+ flexWrap: "wrap",
123
+ gap: 2,
124
+ children: sizes.map(size => /*#__PURE__*/_jsx(Avatar, {
125
+ accessibilityLabel: "",
126
+ alt: "",
127
+ shape: "hexagon",
128
+ size: size
129
+ }, size))
130
+ })]
131
+ })
132
+ }), /*#__PURE__*/_jsx(Example, {
133
+ title: "Fallback Image - With borderColor",
134
+ children: /*#__PURE__*/_jsxs(VStack, {
135
+ gap: 2,
136
+ children: [/*#__PURE__*/_jsx(HStack, {
137
+ alignItems: "center",
138
+ flexWrap: "wrap",
139
+ gap: 2,
140
+ children: sizes.map(size => /*#__PURE__*/_jsx(Avatar, {
141
+ accessibilityLabel: "",
142
+ alt: "",
143
+ borderColor: "bgPositive",
144
+ size: size
145
+ }, size))
146
+ }), /*#__PURE__*/_jsx(HStack, {
147
+ alignItems: "center",
148
+ flexWrap: "wrap",
149
+ gap: 2,
150
+ children: sizes.map(size => /*#__PURE__*/_jsx(Avatar, {
151
+ accessibilityLabel: "",
152
+ alt: "",
153
+ borderColor: "bgPositive",
154
+ shape: "square",
155
+ size: size
156
+ }, size))
112
157
  })]
113
158
  })
114
159
  }), /*#__PURE__*/_jsx(Example, {
115
160
  title: "Color Schemes",
116
161
  children: /*#__PURE__*/_jsx(HStack, {
162
+ alignItems: "center",
163
+ flexWrap: "wrap",
117
164
  gap: 2,
118
165
  children: colorSchemes.map(colorScheme => /*#__PURE__*/_jsx(Avatar, {
119
166
  accessibilityLabel: "",
@@ -124,10 +171,7 @@ const AvatarScreen = () => {
124
171
  })
125
172
  }), /*#__PURE__*/_jsx(Example, {
126
173
  title: "Fallback Colored",
127
- children: /*#__PURE__*/_jsx(VStack, {
128
- gap: 2,
129
- children: /*#__PURE__*/_jsx(FallbackColored, {})
130
- })
174
+ children: /*#__PURE__*/_jsx(FallbackColored, {})
131
175
  })]
132
176
  });
133
177
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mobile",
3
- "version": "8.17.2",
3
+ "version": "8.17.4",
4
4
  "description": "Coinbase Design System - Mobile",
5
5
  "repository": {
6
6
  "type": "git",
@@ -150,9 +150,9 @@
150
150
  "react-native-svg": "^14.1.0"
151
151
  },
152
152
  "dependencies": {
153
- "@coinbase/cds-common": "^8.17.2",
154
- "@coinbase/cds-icons": "^5.4.2",
155
- "@coinbase/cds-illustrations": "^4.24.0",
153
+ "@coinbase/cds-common": "^8.17.4",
154
+ "@coinbase/cds-icons": "^5.5.0",
155
+ "@coinbase/cds-illustrations": "^4.25.0",
156
156
  "@coinbase/cds-lottie-files": "^3.3.2",
157
157
  "@coinbase/cds-utils": "^2.3.3",
158
158
  "@floating-ui/react-native": "^0.10.5",