diff --git a/packages/@react-aria/utils/src/mergeProps.ts b/packages/@react-aria/utils/src/mergeProps.ts index 95116d08e59..47319f2d1e3 100644 --- a/packages/@react-aria/utils/src/mergeProps.ts +++ b/packages/@react-aria/utils/src/mergeProps.ts @@ -23,7 +23,7 @@ type PropsArg = Props | null | undefined; // taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379 type TupleTypes = { [P in keyof T]: T[P] } extends { [key: number]: infer V } ? NullToObject : never; type NullToObject = T extends (null | undefined) ? {} : T; - + type UnionToIntersection = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never; /** @@ -34,10 +34,10 @@ type UnionToIntersection = (U extends any ? (k: U) => void : never) extends ( * @param args - Multiple sets of props to merge together. */ export function mergeProps(...args: T): UnionToIntersection> { - // Start with a base clone of the last argument. This is a lot faster than starting + // Start with a base clone of the first argument. This is a lot faster than starting // with an empty object and adding properties as we go. - let result: Props = {...args[args.length - 1]}; - for (let i = args.length - 2; i >= 0; i--) { + let result: Props = {...args[0]}; + for (let i = 1; i < args.length; i++) { let props = args[i]; for (let key in props) { let a = result[key]; @@ -53,7 +53,7 @@ export function mergeProps(...args: T): UnionToIntersectio key.charCodeAt(2) >= /* 'A' */ 65 && key.charCodeAt(2) <= /* 'Z' */ 90 ) { - result[key] = chain(b, a); + result[key] = chain(a, b); // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check } else if ( @@ -61,12 +61,12 @@ export function mergeProps(...args: T): UnionToIntersectio typeof a === 'string' && typeof b === 'string' ) { - result[key] = clsx(b, a); + result[key] = clsx(a, b); } else if (key === 'id' && a && b) { - result.id = mergeIds(b, a); + result.id = mergeIds(a, b); // Override others - } else if (a === undefined) { - result[key] = b; + } else { + result[key] = b !== undefined ? b : a; } } } diff --git a/packages/@react-spectrum/s2/chromatic/ColorSwatchPicker.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorSwatchPicker.stories.tsx index b5c3d697b92..68ee34d4200 100644 --- a/packages/@react-spectrum/s2/chromatic/ColorSwatchPicker.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/ColorSwatchPicker.stories.tsx @@ -10,9 +10,12 @@ * governing permissions and limitations under the License. */ +import {ColorSwatch} from '../src/ColorSwatch'; import {ColorSwatchPicker} from '../src/ColorSwatchPicker'; -import {Example, ManySwatches} from '../stories/ColorSwatchPicker.stories'; +import {Example} from '../stories/ColorSwatchPicker.stories'; import type {Meta} from '@storybook/react'; +import {style} from '../style' with {type: 'macro'}; + const meta: Meta = { component: ColorSwatchPicker, @@ -24,4 +27,39 @@ const meta: Meta = { export default meta; -export {Example, ManySwatches}; +export {Example}; + +let colors = [ + '#b3e5c2', + '#71fa78', + '#51a358', + '#0346d4', + '#6f975c', + '#d1239a', + '#70f72d', + '#36f556', + '#470a97', + '#1c0aa4', + '#3500c0', + '#dcd549', + '#bfb405', + '#710ac9', + '#342c8f', + '#858af4', + '#133c2b', + '#14dbac', + '#41696c', + '#f28686', + '#58f9a5', + '#ff8553', + '#7cf5c3', + '#bb6b41' +]; + +export const ManySwatches = (args: any) => ( + + {colors.map((color) => { + return ; + })} + +); diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index a9865abd4a6..f95e3d46236 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -120,7 +120,7 @@ "postpack": "git checkout -- package.json" }, "devDependencies": { - "@adobe/spectrum-tokens": "^13.0.0-beta.53", + "@adobe/spectrum-tokens": "^13.0.0-beta.56", "@parcel/macros": "^2.13.0", "@react-aria/test-utils": "1.0.0-alpha.3", "@testing-library/dom": "^10.1.0", diff --git a/packages/dev/parcel-transformer-s2-icon/package.json b/packages/dev/parcel-transformer-s2-icon/package.json index d45fece9e38..95a7750aee5 100644 --- a/packages/dev/parcel-transformer-s2-icon/package.json +++ b/packages/dev/parcel-transformer-s2-icon/package.json @@ -6,7 +6,7 @@ "parcel": "^2.0.0" }, "dependencies": { - "@adobe/spectrum-tokens": "^13.0.0-beta.53", + "@adobe/spectrum-tokens": "^13.0.0-beta.56", "@parcel/plugin": "^2.0.0", "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", diff --git a/yarn.lock b/yarn.lock index f451f575ae5..b506396ae2d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -145,10 +145,10 @@ __metadata: languageName: unknown linkType: soft -"@adobe/spectrum-tokens@npm:^13.0.0-beta.53": - version: 13.0.0-beta.53 - resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.53" - checksum: 10c0/e9968e211aec06cb6af1fbc29712cafa79f0b971b4c22882c6a65f14ea8fb23afe2c81f8bbfd377bbde4332cb1dbdc873e6a32a2cc6e3933592eb5724a6ce471 +"@adobe/spectrum-tokens@npm:^13.0.0-beta.56": + version: 13.0.0-beta.56 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.56" + checksum: 10c0/473a7e3cfb9317862584045b31c16e67122512f310c490c8cb9e11c1d200bbd78f79885e970e16034b375c19f2a27da27397a4ba3ee0cec1a8424a34582a85ad languageName: node linkType: hard @@ -7775,7 +7775,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-spectrum/parcel-transformer-s2-icon@workspace:packages/dev/parcel-transformer-s2-icon" dependencies: - "@adobe/spectrum-tokens": "npm:^13.0.0-beta.53" + "@adobe/spectrum-tokens": "npm:^13.0.0-beta.56" "@parcel/plugin": "npm:^2.0.0" "@svgr/core": "npm:^8.1.0" "@svgr/plugin-jsx": "npm:^8.1.0" @@ -7894,7 +7894,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-spectrum/s2@workspace:packages/@react-spectrum/s2" dependencies: - "@adobe/spectrum-tokens": "npm:^13.0.0-beta.53" + "@adobe/spectrum-tokens": "npm:^13.0.0-beta.56" "@parcel/macros": "npm:^2.13.0" "@react-aria/collections": "npm:3.0.0-alpha.7" "@react-aria/focus": "npm:^3.19.1"