@coinbase/cds-web 8.30.0 → 8.30.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 (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dts/navigation/Sidebar.d.ts +42 -0
  3. package/dts/navigation/Sidebar.d.ts.map +1 -1
  4. package/esm/navigation/Sidebar.js +15 -3
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.30.1 (12/12/2025 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Add classNames and styles to sidebar. [[#239](https://github.com/coinbase/cds/pull/239)]
16
+
11
17
  ## 8.30.0 (12/12/2025 PST)
12
18
 
13
19
  #### 🚀 Updates
package/dts/navigation/Sidebar.d.ts CHANGED
@@ -30,6 +30,48 @@ export type SidebarBaseProps = BoxBaseProps & {
30
30
  */
31
31
  renderEnd?: (isCollapsed: boolean) => React.ReactNode;
32
32
  variant?: 'default' | 'condensed';
33
+ /**
34
+ * Custom class names for the sidebar components.
35
+ */
36
+ classNames?: {
37
+ /**
38
+ * Custom class name for the root sidebar container.
39
+ */
40
+ root?: string;
41
+ /**
42
+ * Custom class name for the logo container.
43
+ */
44
+ logo?: string;
45
+ /**
46
+ * Custom class name for the content container (children list).
47
+ */
48
+ content?: string;
49
+ /**
50
+ * Custom class name for the end container (renderEnd).
51
+ */
52
+ end?: string;
53
+ };
54
+ /**
55
+ * Custom styles for the sidebar components.
56
+ */
57
+ styles?: {
58
+ /**
59
+ * Custom style for the root sidebar container.
60
+ */
61
+ root?: React.CSSProperties;
62
+ /**
63
+ * Custom style for the logo container.
64
+ */
65
+ logo?: React.CSSProperties;
66
+ /**
67
+ * Custom style for the content container (children list).
68
+ */
69
+ content?: React.CSSProperties;
70
+ /**
71
+ * Custom style for the end container (renderEnd).
72
+ */
73
+ end?: React.CSSProperties;
74
+ };
33
75
  };
34
76
  export type SidebarProps = SidebarBaseProps & Omit<BoxProps<SidebarDefaultElement>, 'children'>;
35
77
  export declare const Sidebar: React.FC<SidebarProps>;
package/dts/navigation/Sidebar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/navigation/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAKvD,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAU,MAAM,WAAW,CAAC;AAK1E,eAAO,MAAM,qBAAqB,QAAQ,CAAC;AAE3C,MAAM,MAAM,qBAAqB,GAAG,OAAO,qBAAqB,CAAC;AAgCjE,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG;IAC5C;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC,WAAW,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACxE;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACtD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEhG,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoG1C,CAAC"}
1
+ {"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/navigation/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAMvD,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAU,MAAM,WAAW,CAAC;AAK1E,eAAO,MAAM,qBAAqB,QAAQ,CAAC;AAE3C,MAAM,MAAM,qBAAqB,GAAG,OAAO,qBAAqB,CAAC;AAgCjE,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG;IAC5C;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC,WAAW,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACxE;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACtD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B;;WAEG;QACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC3B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEhG,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkH1C,CAAC"}
package/esm/navigation/Sidebar.js CHANGED
@@ -1,4 +1,4 @@
1
- const _excluded = ["logo", "children", "collapsed", "autoCollapse", "testID", "renderEnd", "accessibilityLabel", "width", "variant"];
1
+ const _excluded = ["logo", "children", "collapsed", "autoCollapse", "testID", "renderEnd", "accessibilityLabel", "width", "variant", "className", "classNames", "style", "styles"];
2
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -8,6 +8,7 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
8
8
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
9
9
  import React, { Children, memo, useMemo } from 'react';
10
10
  import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
11
+ import { cx } from '../cx';
11
12
  import { useDimensions } from '../hooks/useDimensions';
12
13
  import { Box, VStack } from '../layout';
13
14
  import { breakpoints } from '../styles/media';
@@ -42,7 +43,11 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
42
43
  renderEnd,
43
44
  accessibilityLabel = 'Sidebar',
44
45
  width,
45
- variant = 'default'
46
+ variant = 'default',
47
+ className,
48
+ classNames,
49
+ style,
50
+ styles
46
51
  } = _ref,
47
52
  props = _objectWithoutProperties(_ref, _excluded);
48
53
  const {
@@ -83,6 +88,7 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
83
88
  as: sidebarDefaultElement,
84
89
  background: "bg",
85
90
  bottom: "0",
91
+ className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
86
92
  height: "100%",
87
93
  justifyContent: "space-between",
88
94
  left: "0",
@@ -90,6 +96,7 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
90
96
  paddingX: variant === 'default' ? 2 : 1.5,
91
97
  paddingY: 2,
92
98
  position: "sticky",
99
+ style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
93
100
  testID: testID,
94
101
  top: "0",
95
102
  width: width !== null && width !== void 0 ? width : computedWidth,
@@ -97,18 +104,23 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
97
104
  }, props), {}, {
98
105
  children: [/*#__PURE__*/_jsxs(VStack, {
99
106
  children: [logo && /*#__PURE__*/_jsx(VStack, _objectSpread(_objectSpread({}, logoContainerProps), {}, {
107
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.logo,
108
+ style: styles === null || styles === void 0 ? void 0 : styles.logo,
100
109
  testID: "sidebar-logo",
101
110
  children: typeof logo === 'function' ? logo(!!computedCollapse) : logo
102
111
  })), /*#__PURE__*/_jsx(VStack, {
103
112
  as: "ul",
104
- className: ulCss,
113
+ className: cx(ulCss, classNames === null || classNames === void 0 ? void 0 : classNames.content),
105
114
  gap: 0.5,
106
115
  marginStart: variant === 'default' ? -0.5 : undefined,
116
+ style: styles === null || styles === void 0 ? void 0 : styles.content,
107
117
  children: liWrappedChildren
108
118
  })]
109
119
  }), !!renderEnd && /*#__PURE__*/_jsx(Box, {
110
120
  alignSelf: variant === 'default' ? 'flex-start' : 'center',
121
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.end,
111
122
  paddingTop: 4,
123
+ style: styles === null || styles === void 0 ? void 0 : styles.end,
112
124
  testID: "sidebar-end",
113
125
  children: renderEnd(!!computedCollapse)
114
126
  })]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.30.0",
3
+ "version": "8.30.1",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -147,7 +147,7 @@
147
147
  "react-dom": "^18.3.1"
148
148
  },
149
149
  "dependencies": {
150
- "@coinbase/cds-common": "^8.30.0",
150
+ "@coinbase/cds-common": "^8.30.1",
151
151
  "@coinbase/cds-icons": "^5.8.0",
152
152
  "@coinbase/cds-illustrations": "^4.29.0",
153
153
  "@coinbase/cds-lottie-files": "^3.3.3",