@zohodesk/components 1.0.0-temp-252.3 → 1.0.0-temp-252.4

package/lib/v1/helpers/colorHelpers/paletteUtilities.README.md

@@ -71,7 +71,7 @@ Per color (`default`, `grey`, `blue`, `green`, `orange`, `red`, `yellow`):
 | `.active\:text-{color}:active` | Active state |
 | `.selected\:text-{color}` | Selected state |
 
-**Special:** `.text-default-filled` (+ hover/focus/active/selected) — uses `--zdt_v1_palette_default_filled_text` for filled default backgrounds.
+**Special:** `.text-brand-filled` (+ hover/focus/active/selected) — uses `--zdt_v1_palette_default_filled_text` for filled default backgrounds.
 
 **Utility classes:** `.text-transparent`, `.text-white`, `.text-black`
 
@@ -204,7 +204,7 @@ Returns a text CSS class from `textColor.module.css`.
 
 | Parameter | Type | Required | Description |
 |-----------|------|----------|-------------|
-| `textTone` | `string` | Yes | Text tone (`default`, `grey`, `blue`, `green`, `orange`, `red`, `yellow`, `white`, `black`, `default-filled`) |
+| `textTone` | `string` | Yes | Text tone (`brand`, `grey`, `blue`, `green`, `orange`, `red`, `yellow`, `white`, `black`, `brand-filled`) |
 | `state` | `string` | No | State prefix (`hover`, `focus`, `active`, `selected`). Omit for base class. |
 
 > **Note:** `textTone` has no `isLighter` equivalent. Use `filledTextTone` (e.g. `white`) directly when needed.
@@ -214,7 +214,7 @@ Returns a text CSS class from `textColor.module.css`.
 ```javascript
 getTextClass({ textTone: 'green' })                    // → paletteTextStyle['text-green']
 getTextClass({ state: 'hover', textTone: 'white' })    // → paletteTextStyle['hover:text-white']
-getTextClass({ textTone: 'default-filled' })            // → paletteTextStyle['text-default-filled']
+getTextClass({ textTone: 'brand-filled' })               // → paletteTextStyle['text-brand-filled']
 ```
 
 #### `getBorderClass({ state?, tone, isLighter? })`
@@ -254,7 +254,7 @@ import getPaletteClasses from './colorHelper';
 
 | Palette | Tone (bg/border) | Text Tone | Filled Text Tone |
 |---------|-------------------|-----------|-------------------|
-| `default` | `default` | `default` | `default-filled` |
+| `default` | `brand` | `brand` | `brand-filled` |
 | `primary` | `blue` | `blue` | `white` |
 | `secondary` | `grey` | `grey` | `white` |
 | `danger` | `red` | `red` | `white` |
@@ -267,7 +267,8 @@ Unknown palettes return `DUMMY_OBJECT` (empty frozen object).
 | Parameter | Values | Effect |
 |-----------|--------|--------|
 | `palette` | `default` \| `primary` \| `secondary` \| `danger` \| `success` | Selects the color tone config from `PALETTE_CONFIG` |
-| `bgAppearance` | `'none'` \| `'filled'` \| other | `'filled'` → base bg + state bg; `'none'` → no bg, no state bg, no filled text logic; other → no base bg but state bg + filled text logic |
+| `bgAppearance` | `'none'` \| `'default'` \| other | `'default'` → base bg + state bg; `'none'` → no bg, no state bg, no filled text logic; other → no base bg but state bg + filled text logic |
+| `isSelected` | `boolean` | `true` → folds selected-state classes into `bg`, `text`, and `border` (replaces their resting values with the `selected` state class) |
 | `borderAppearance` | `'none'` \| `'onHover'` \| other | `'none'` → transparent base, no state borders; `'onHover'` → transparent base, with state borders; other → visible base + state borders |
 | `paletteShade` | `'lighter'` \| other | `'lighter'` → `-light` variant for bg and base border; also keeps text as `textTone` instead of `filledTextTone` |
 
@@ -277,33 +278,30 @@ The text color depends on both `bgAppearance` and `paletteShade`:
 
 | Condition | Base text (`text`) | State text (`hoverText`, etc.) |
 |---|---|---|
-| `bgAppearance: 'filled'` + default shade | `filledTextTone` (e.g. `white`) | `filledTextTone` |
-| `bgAppearance: 'filled'` + `'lighter'` shade | `textTone` (e.g. `blue`) | `textTone` |
+| `bgAppearance: 'default'` + default shade | `filledTextTone` (e.g. `white`) | `filledTextTone` |
+| `bgAppearance: 'default'` + `'lighter'` shade | `textTone` (e.g. `blue`) | `textTone` |
 | `bgAppearance:` other (not `'none'`) + default shade | `textTone` | `filledTextTone` |
 | `bgAppearance:` other (not `'none'`) + `'lighter'` shade | `textTone` | `textTone` |
 | `bgAppearance: 'none'` | `textTone` | `textTone` |
 
-> **Key insight:** `baseTextTone = isFilledBg && !isLighter ? filledTextTone : textTone`. `stateTextTone = hasBgState && !isLighter ? filledTextTone : textTone`. This means state text can differ from base text when `bgAppearance` is not `'filled'` but also not `'none'`.
+> **Key insight:** `baseTextTone = isFilledBg && !isLighter ? filledTextTone : textTone`. `stateTextTone = hasBgState && !isLighter ? filledTextTone : textTone`. This means state text can differ from base text when `bgAppearance` is not `'default'` but also not `'none'`.
 
 #### Return Value
 
 ```javascript
 {
-  bg,             // getBgClass({ tone, isLighter }) — only if bgAppearance === 'filled'
-  hoverBg,        // getBgClass({ state: 'hover', tone, isLighter }) — if bgAppearance !== 'none'
-  focusBg,        // getBgClass({ state: 'focus', tone, isLighter }) — if bgAppearance !== 'none'
-  activeBg,       // getBgClass({ state: 'active', tone, isLighter }) — if bgAppearance !== 'none'
-  selectedBg,     // getBgClass({ state: 'selected', tone, isLighter }) — if bgAppearance !== 'none'
-  text,           // getTextClass({ textTone: baseTextTone })
-  hoverText,      // getTextClass({ state: 'hover', textTone: stateTextTone })
-  focusText,      // getTextClass({ state: 'focus', textTone: stateTextTone })
-  activeText,     // getTextClass({ state: 'active', textTone: stateTextTone })
-  selectedText,   // getTextClass({ state: 'selected', textTone: stateTextTone })
-  border,         // 'border-transparent' if onHover/none — else getBorderClass({ tone, isLighter })
-  hoverBorder,    // getBorderClass({ state: 'hover', tone }) — if borderAppearance !== 'none'
-  focusBorder,    // getBorderClass({ state: 'focus', tone }) — if borderAppearance !== 'none'
-  activeBorder,   // getBorderClass({ state: 'active', tone }) — if borderAppearance !== 'none'
-  selectedBorder  // getBorderClass({ state: 'selected', tone }) — if borderAppearance !== 'none'
+  bg,          // isSelected → selected bg (if bgAppearance !== 'none'); else base bg (only if bgAppearance === 'default')
+  hoverBg,     // getBgClass({ state: 'hover', tone, isLighter }) — if bgAppearance !== 'none'
+  focusBg,     // getBgClass({ state: 'focus', tone, isLighter }) — if bgAppearance !== 'none'
+  activeBg,    // getBgClass({ state: 'active', tone, isLighter }) — if bgAppearance !== 'none'
+  text,        // isSelected → selected text class; else getTextClass({ textTone: baseTextTone })
+  hoverText,   // getTextClass({ state: 'hover', textTone: stateTextTone })
+  focusText,   // getTextClass({ state: 'focus', textTone: stateTextTone })
+  activeText,  // getTextClass({ state: 'active', textTone: stateTextTone })
+  border,      // isSelected → selected border (if borderAppearance !== 'none'); else resting border
+  hoverBorder, // getBorderClass({ state: 'hover', tone }) — if borderAppearance !== 'none'
+  focusBorder, // getBorderClass({ state: 'focus', tone }) — if borderAppearance !== 'none'
+  activeBorder // getBorderClass({ state: 'active', tone }) — if borderAppearance !== 'none'
 }
 ```
 
@@ -314,13 +312,13 @@ The text color depends on both `bgAppearance` and `paletteShade`:
 ```javascript
 const classes = getPaletteClasses({
   palette: 'primary',
-  bgAppearance: 'filled',
+  bgAppearance: 'default',
   borderAppearance: 'visible',
   paletteShade: 'default',
 });
-// classes.bg           → 'bg-blue'           (filled + default shade)
+// classes.bg           → 'bg-blue'           (bgAppearance: 'default' + default shade)
 // classes.hoverBg      → 'hover:bg-blue'
-// classes.text         → 'text-white'        (filledTextTone — filled + not lighter)
+// classes.text         → 'text-white'        (filledTextTone — bgAppearance: 'default' + not lighter)
 // classes.hoverText    → 'hover:text-white'  (filledTextTone — hasBgState + not lighter)
 // classes.border       → 'border-blue'       (visible appearance)
 // classes.hoverBorder  → 'hover:border-blue'
@@ -331,11 +329,11 @@ const classes = getPaletteClasses({
 ```javascript
 const classes = getPaletteClasses({
   palette: 'danger',
-  bgAppearance: 'filled',
+  bgAppearance: 'default',
   borderAppearance: 'none',
   paletteShade: 'lighter',
 });
-// classes.bg           → 'bg-red-light'      (filled + lighter shade)
+// classes.bg           → 'bg-red-light'      (bgAppearance: 'default' + lighter shade)
 // classes.hoverBg      → 'hover:bg-red-light'
 // classes.text         → 'text-red'          (textTone — lighter shade overrides filledTextTone)
 // classes.hoverText    → 'hover:text-red'    (textTone — lighter shade)
@@ -365,11 +363,11 @@ const classes = getPaletteClasses({
 ```javascript
 const classes = getPaletteClasses({
   palette: 'primary',
-  bgAppearance: 'hover-fill',  // any value that isn't 'none' or 'filled'
+  bgAppearance: 'hover-fill',  // any value that isn't 'none' or 'default'
   borderAppearance: 'visible',
   paletteShade: 'default',
 });
-// classes.bg           → undefined            (not 'filled' → no base bg)
+// classes.bg           → undefined            (not 'default' → no base bg)
 // classes.hoverBg      → 'hover:bg-blue'     (not 'none' → state bg present)
 // classes.text         → 'text-blue'          (baseTextTone — not filled, so textTone)
 // classes.hoverText    → 'hover:text-white'   (stateTextTone — hasBgState + not lighter → filledTextTone!)
@@ -379,6 +377,8 @@ const classes = getPaletteClasses({
 
 > This shows a key behavior: the base text is the normal tone, but **state text switches to `filledTextTone`** because the hover/state background will be filled (dark).
 
+> **Note on `isSelected`:** Pass `isSelected: true` to fold the selected state into `bg`, `text`, and `border`. Instead of the resting class, each returns its `selected:` variant class. There are no separate `selectedBg`/`selectedText`/`selectedBorder` return keys.
+
 ---
 
 ## Behavior Summary

package/lib/v1/{Button/_shared → shared}/Loader/Loader.js

@@ -7,20 +7,20 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Loader_v1Module = _interopRequireDefault(require("./Loader_v1.module.css"));
-
 var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
 var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
+var _Loader_v1Module = _interopRequireDefault(require("./Loader_v1.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var Loader = function Loader(props) {
   var customClass = props.customClass;
-  var _customClass$customWr = customClass.customWrapperClass,
-      customWrapperClass = _customClass$customWr === void 0 ? '' : _customClass$customWr;
+  var _customClass$wrapper = customClass.wrapper,
+      wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: "".concat(_Loader_v1Module["default"].spinner, " ").concat(customWrapperClass),
+    className: "".concat(_Loader_v1Module["default"].spinner, " ").concat(wrapper),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/lib/v1/{Button/_shared → shared}/Loader/__tests__/Loader.spec.js

@@ -18,7 +18,7 @@ describe('Loader', function () {
   test('renders with customClass', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
       customClass: {
-        customWrapperClass: 'my-custom-class'
+        wrapper: 'my-custom-class'
       }
     })),
         asFragment = _render2.asFragment;

package/lib/v1/{Button/_shared/SuccessTick → shared/Loader}/props/defaultProps.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
+var _constant = require("@zohodesk/utils/es/constantProps/constant");
+
 var defaultProps = {
-  customClass: {}
+  customClass: _constant.DUMMY_OBJECT
 };
 var _default = defaultProps;
 exports["default"] = _default;

package/lib/v1/{Button/_shared → shared}/Loader/props/propTypes.js

@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var propTypes = {
   customClass: _propTypes["default"].shape({
-    customWrapperClass: _propTypes["default"].string
+    wrapper: _propTypes["default"].string
   })
 };
 var _default = propTypes;

package/lib/v1/{Button/_shared → shared}/SuccessTick/SuccessTick.js

@@ -7,20 +7,20 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _SuccessTick_v1Module = _interopRequireDefault(require("./SuccessTick_v1.module.css"));
-
 var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
 var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
+var _SuccessTick_v1Module = _interopRequireDefault(require("./SuccessTick_v1.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var SuccessTick = function SuccessTick(props) {
   var customClass = props.customClass;
-  var _customClass$customWr = customClass.customWrapperClass,
-      customWrapperClass = _customClass$customWr === void 0 ? '' : _customClass$customWr;
+  var _customClass$wrapper = customClass.wrapper,
+      wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: "".concat(_SuccessTick_v1Module["default"].tick, " ").concat(customWrapperClass),
+    className: "".concat(_SuccessTick_v1Module["default"].tick, " ").concat(wrapper),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/lib/v1/{Button/_shared → shared}/SuccessTick/__tests__/SuccessTick.spec.js

@@ -18,7 +18,7 @@ describe('SuccessTick', function () {
   test('renders with customClass', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], {
       customClass: {
-        customWrapperClass: 'my-custom-class'
+        wrapper: 'my-custom-class'
       }
     })),
         asFragment = _render2.asFragment;

package/lib/v1/{Button/_shared/Loader → shared/SuccessTick}/props/defaultProps.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
+var _constant = require("@zohodesk/utils/es/constantProps/constant");
+
 var defaultProps = {
-  customClass: {}
+  customClass: _constant.DUMMY_OBJECT
 };
 var _default = defaultProps;
 exports["default"] = _default;

package/lib/v1/{Button/_shared → shared}/SuccessTick/props/propTypes.js

@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var propTypes = {
   customClass: _propTypes["default"].shape({
-    customWrapperClass: _propTypes["default"].string
+    wrapper: _propTypes["default"].string
   })
 };
 var _default = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-252.3",
+  "version": "1.0.0-temp-252.4",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -82,7 +82,7 @@
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.9",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.1",
+    "@zohodesk/icons": "1.3.3",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/svg": "1.3.5",
     "@zohodesk/utils": "1.3.16",
@@ -91,7 +91,7 @@
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
     "@zohodesk/react-cli": "1.1.27",
-    "@zohodesk/client_build_tool": "0.0.20",
+    "@zohodesk/client_build_tool": "0.0.23",
     "color": "4.2.3",
     "@dot-system/css-utility": "0.1.1"
   },
@@ -102,7 +102,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.3.1",
+    "@zohodesk/icons": "1.3.3",
     "@zohodesk/variables": "1.3.1",
     "@zohodesk/svg": "1.3.5",
     "@zohodesk/virtualizer": "1.0.13",

package/es/v1/Button/_shared/Loader/props/defaultProps.js

@@ -1,4 +0,0 @@
-const defaultProps = {
-  customClass: {}
-};
-export default defaultProps;

package/es/v1/Button/_shared/SuccessTick/props/defaultProps.js

@@ -1,4 +0,0 @@
-const defaultProps = {
-  customClass: {}
-};
-export default defaultProps;