Skip to content

Commit

Permalink
fix: ColorPicker hex precision (ant-design#50843)
Browse files Browse the repository at this point in the history
* test: test driven

* fix: format logic

* chore: comment

* chore: rm useless lint rule

* chore: rm useless lint rule

* chore: rm useless lint rule

* chore: rm useless lint rule
  • Loading branch information
zombieJ authored Sep 13, 2024
1 parent 22fb6f6 commit ce13565
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 4 deletions.
6 changes: 5 additions & 1 deletion biome.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,11 @@
"noAccumulatingSpread": "off"
},
"a11y": {
"useKeyWithClickEvents": "off"
"noAriaHiddenOnFocusable": "off",
"noLabelWithoutControl": "off",
"useFocusableInteractive": "off",
"useKeyWithClickEvents": "off",
"useSemanticElements": "off"
}
}
},
Expand Down
12 changes: 12 additions & 0 deletions components/color-picker/__tests__/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -936,4 +936,16 @@ describe('ColorPicker', () => {
});
});
});

it('input precision', async () => {
const onChange = jest.fn();
const { container } = render(<ColorPicker open onChange={onChange} />);

fireEvent.change(container.querySelector('.ant-color-picker-hex-input input')!, {
target: { value: '2ddcb4' },
});

const onChangeColor = onChange.mock.calls[0][0];
expect(onChangeColor.toHexString()).toBe('#2ddcb4');
});
});
15 changes: 12 additions & 3 deletions components/color-picker/util.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,18 @@ export const getColorAlpha = (color: AggregationColor) => getRoundNumber(color.t

/** Return the color whose `alpha` is 1 */
export const genAlphaColor = (color: AggregationColor, alpha?: number) => {
const hsba = color.toHsb();
hsba.a = alpha || 1;
return generateColor(hsba);
const rgba = color.toRgb();

// Color from hsb input may get `rgb` is (0/0/0) when `hsb.b` is 0
// So if rgb is empty, we should get from hsb
if (!rgba.r && !rgba.g && !rgba.b) {
const hsba = color.toHsb();
hsba.a = alpha || 1;
return generateColor(hsba);
}

rgba.a = alpha || 1;
return generateColor(rgba);
};

/**
Expand Down

0 comments on commit ce13565

Please sign in to comment.