IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ColorPicker: Allow to use in form (#69405)

Browse Source 
* ColorPicker: Allow to use in form

* Fix typecheck
This commit is contained in:
Pierre Baumard 2023-07-04 10:08:04 +02:00 committed by GitHub
parent 80c432e524
commit 3ab4d77008
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/grafana-ui/src/components/ColorPicker/ColorPicker.test.tsx
View File

@ -1,3 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import renderer from 'react-test-renderer';
@ -11,6 +13,17 @@ describe('ColorPicker', () => {
).toBeTruthy();
});
it('should not have buttons with default submit type', async () => {
render(<ColorPicker color="blue" enableNamedColors onChange={() => {}} />);
const mainButton = screen.getAllByRole('button');
expect(mainButton.length).toBe(1);
mainButton.forEach((button) => expect(button).toHaveAttribute('type', 'button'));
await userEvent.click(mainButton[0]);
const buttons = screen.getAllByRole('button');
expect(buttons.length).toBe(35);
buttons.forEach((button) => expect(button).toHaveAttribute('type', 'button'));
});
it('renders custom trigger when supplied', () => {
const div = renderer
.create(

6
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
View File

@ -100,7 +100,7 @@ class UnThemedColorPickerPopover<T extends CustomPickersDescriptor> extends Comp
<>
{Object.keys(customPickers).map((key) => {
return (
<button className={this.getTabClassName(key)} onClick={this.onTabChange(key)} key={key}>
<button className={this.getTabClassName(key)} onClick={this.onTabChange(key)} key={key} type="button">
{customPickers[key].name}
</button>
);
@ -120,10 +120,10 @@ class UnThemedColorPickerPopover<T extends CustomPickersDescriptor> extends Comp
*/}
<div tabIndex={-1} className={styles.colorPickerPopover}>
<div className={styles.colorPickerPopoverTabs}>
<button className={this.getTabClassName('palette')} onClick={this.onTabChange('palette')}>
<button className={this.getTabClassName('palette')} onClick={this.onTabChange('palette')} type="button">
Colors
</button>
<button className={this.getTabClassName('spectrum')} onClick={this.onTabChange('spectrum')}>
<button className={this.getTabClassName('spectrum')} onClick={this.onTabChange('spectrum')} type="button">
Custom
</button>
{this.renderCustomPickerTabs()}

2
packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
View File

@ -34,7 +34,7 @@ export const ColorSwatch = React.forwardRef<HTMLDivElement, Props>(
return (
<div ref={ref} className={styles.wrapper} data-testid={selectors.components.ColorSwatch.name} {...otherProps}>
{hasLabel && <span className={styles.label}>{label}</span>}
<button className={styles.swatch} {...focusProps} aria-label={colorLabel} />
<button className={styles.swatch} {...focusProps} aria-label={colorLabel} type="button" />
</div>
);
}