@coinbase/cds-web 9.4.2 → 9.4.3
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.
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
|
+
## 9.4.3 (6/23/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🐞 Fixes
|
|
14
|
+
|
|
15
|
+
- Fix: Add `activeBackground` and `activeColor` props to alpha `TabbedChips`. `activeBackground` sets a custom chip background color when active (replacing the default `invertColorScheme` behavior); `activeColor` sets a custom chip label text color when active. [[#766](https://github.com/coinbase/cds/pull/766)]
|
|
16
|
+
|
|
11
17
|
## 9.4.2 (6/23/2026 PST)
|
|
12
18
|
|
|
13
19
|
#### 🐞 Fixes
|
|
@@ -4,6 +4,7 @@ import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
|
|
|
4
4
|
import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
|
|
5
5
|
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
|
|
6
6
|
import type { ChipProps } from '../../chips/ChipProps';
|
|
7
|
+
import { type MediaChipBaseProps } from '../../chips/MediaChip';
|
|
7
8
|
import { type HStackDefaultElement, type HStackProps } from '../../layout/HStack';
|
|
8
9
|
import { type TabsBaseProps, type TabsProps } from '../../tabs/Tabs';
|
|
9
10
|
export type TabbedChipProps<TabId extends string = string> = Omit<
|
|
@@ -12,6 +13,15 @@ export type TabbedChipProps<TabId extends string = string> = Omit<
|
|
|
12
13
|
> &
|
|
13
14
|
TabValue<TabId> & {
|
|
14
15
|
Component?: React.FC<Omit<ChipProps, 'children'> & TabValue<TabId>>;
|
|
16
|
+
/**
|
|
17
|
+
* Custom background color applied to the chip when it is the active tab.
|
|
18
|
+
* When set, takes precedence over the default `invertColorScheme` behavior.
|
|
19
|
+
*/
|
|
20
|
+
activeBackground?: MediaChipBaseProps['background'];
|
|
21
|
+
/**
|
|
22
|
+
* Custom foreground color applied to the chip label when it is the active tab.
|
|
23
|
+
*/
|
|
24
|
+
activeColor?: MediaChipBaseProps['color'];
|
|
15
25
|
};
|
|
16
26
|
export type TabbedChipsBaseProps<TabId extends string = string> = Omit<
|
|
17
27
|
TabsBaseProps<TabId>,
|
|
@@ -20,6 +30,7 @@ export type TabbedChipsBaseProps<TabId extends string = string> = Omit<
|
|
|
20
30
|
| 'tabs'
|
|
21
31
|
| 'onActiveTabElementChange'
|
|
22
32
|
| 'activeBackground'
|
|
33
|
+
| 'activeColor'
|
|
23
34
|
> & {
|
|
24
35
|
TabComponent?: React.FC<TabbedChipProps<TabId>>;
|
|
25
36
|
TabsActiveIndicatorComponent?: TabsProps<TabId>['TabsActiveIndicatorComponent'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../../src/alpha/tabbed-chips/TabbedChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AACnG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../../src/alpha/tabbed-chips/TabbedChips.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const _excluded = ["label", "id"],
|
|
1
|
+
const _excluded = ["label", "id", "activeBackground", "activeColor", "color"],
|
|
2
2
|
_excluded2 = ["tabs", "activeTab", "onChange", "TabComponent", "testID", "background", "gap", "previousArrowAccessibilityLabel", "nextArrowAccessibilityLabel", "width", "TabsActiveIndicatorComponent", "disabled", "compact", "styles", "classNames", "autoScrollOffset"];
|
|
3
3
|
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; }
|
|
4
4
|
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; }
|
|
@@ -22,7 +22,10 @@ const scrollContainerCss = "scrollContainerCss-skg9ycj";
|
|
|
22
22
|
const DefaultTabComponent = _ref => {
|
|
23
23
|
let {
|
|
24
24
|
label = '',
|
|
25
|
-
id
|
|
25
|
+
id,
|
|
26
|
+
activeBackground,
|
|
27
|
+
activeColor,
|
|
28
|
+
color
|
|
26
29
|
} = _ref,
|
|
27
30
|
tabProps = _objectWithoutProperties(_ref, _excluded);
|
|
28
31
|
const {
|
|
@@ -45,7 +48,9 @@ const DefaultTabComponent = _ref => {
|
|
|
45
48
|
return /*#__PURE__*/_jsx(MediaChip, _objectSpread(_objectSpread({
|
|
46
49
|
ref: chipRef,
|
|
47
50
|
"aria-selected": isActive,
|
|
48
|
-
|
|
51
|
+
background: isActive && activeBackground ? activeBackground : undefined,
|
|
52
|
+
color: isActive && activeColor ? activeColor : color,
|
|
53
|
+
invertColorScheme: isActive && !activeBackground,
|
|
49
54
|
onClick: handleClick,
|
|
50
55
|
role: "tab",
|
|
51
56
|
width: "max-content"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-web",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.3",
|
|
4
4
|
"description": "Coinbase Design System - Web",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -219,7 +219,7 @@
|
|
|
219
219
|
"react-dom": "^18.0.0 || ~19.1.2"
|
|
220
220
|
},
|
|
221
221
|
"dependencies": {
|
|
222
|
-
"@coinbase/cds-common": "^9.4.
|
|
222
|
+
"@coinbase/cds-common": "^9.4.3",
|
|
223
223
|
"@coinbase/cds-icons": "^5.19.0",
|
|
224
224
|
"@coinbase/cds-illustrations": "^4.43.0",
|
|
225
225
|
"@coinbase/cds-lottie-files": "^3.3.4",
|