Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-21 13:47:39 +02:00
Code Issues Projects Releases Wiki Activity

chore: fix weird button styling (#10113)

Browse Source
This commit is contained in:
Thomas Heartman 2025-06-11 14:07:24 +02:00 committed by GitHub
parent ddb5ffb955
commit 0e818c54ad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 62 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.test.tsx
View File

@ -41,7 +41,7 @@ test('Enabled new token button when limits, version and permission allow for it'
await waitFor(async () => {
const button = await screen.findByText('Create token');
expect(button).not.toBeDisabled();
expect(button).not.toHaveAttribute('aria-disabled');
});
});
@ -54,5 +54,5 @@ test('Token limit reached', async () => {
await screen.findByText('You have reached the limit for API tokens');
const button = await screen.findByText('Create token');
expect(button).toBeDisabled();
expect(button).toHaveAttribute('aria-disabled', 'true');
});

2
frontend/src/component/common/ApiTokenTable/CreateApiTokenButton/CreateApiTokenButton.test.tsx
View File

@ -57,6 +57,6 @@ test('should not allow you to create API tokens when you have reached the limit'
await waitFor(async () => {
const button = await screen.findByRole('button');
expect(button).toBeDisabled();
expect(button).toHaveAttribute('aria-disabled', 'true');
});
});

34
frontend/src/component/common/PermissionButton/PermissionButton.tsx
View File

@ -15,6 +15,9 @@ import {
const StyledButton = styled(Button)({
justifySelf: 'start',
alignSelf: 'start',
'&.Mui-disabled': {
pointerEvents: 'auto',
},
});
export interface IPermissionButtonProps extends Omit<ButtonProps, 'title'> {
@ -96,10 +99,12 @@ const BasePermissionButton = React.forwardRef<
environmentId,
tooltipProps,
hideLockIcon,
className,
...rest
},
ref,
) => {
const disableButton = disabled || !access;
const id = useId();
const endIcon = getEndIcon(access, rest.endIcon, hideLockIcon);
@ -109,20 +114,21 @@ const BasePermissionButton = React.forwardRef<
title={formatAccessText(access, tooltipProps?.title)}
arrow
>
<span>
<StyledButton
ref={ref}
onClick={onClick}
disabled={disabled || !access}
aria-labelledby={id}
variant={variant}
color={color}
{...rest}
endIcon={endIcon}
>
{children}
</StyledButton>
</span>
<StyledButton
ref={ref}
onClick={disableButton ? undefined : onClick}
aria-disabled={disableButton || undefined}
aria-labelledby={id}
variant={variant}
color={color}
className={
disableButton ? `${className} Mui-disabled` : className
}
{...rest}
endIcon={endIcon}
>
{children}
</StyledButton>
</TooltipResolver>
);
},

2
frontend/src/component/environments/CreateEnvironment/CreateEnvironment.test.tsx
View File

@ -31,7 +31,7 @@ test('show limit reached info', async () => {
const createButton = await screen.findByText('Create environment', {
selector: 'button',
});
expect(createButton).toBeDisabled();
expect(createButton).toHaveAttribute('aria-disabled', 'true');
});
test('show approaching limit info', async () => {

2
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.test.tsx
View File

@ -61,6 +61,6 @@ describe('FeatureOverviewEnvironment', () => {
);
const button = await screen.findByText('Add strategy');
expect(button).toBeDisabled();
expect(button).toHaveAttribute('aria-disabled', 'true');
});
});

10
frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.test.tsx
View File

@ -29,7 +29,10 @@ describe('FeatureTypeForm', () => {
);
expect(screen.getByLabelText('Expected lifetime')).toBeDisabled();
expect(screen.getByLabelText("doesn't expire")).toBeDisabled();
expect(screen.getByText('Save feature flag type')).toBeDisabled();
expect(screen.getByText('Save feature flag type')).toHaveAttribute(
'aria-disabled',
'true',
);
});
it('should check "doesn\'t expire" when lifetime is 0', () => {
@ -87,6 +90,9 @@ describe('FeatureTypeForm', () => {
loading={false}
/>,
);
expect(screen.getByText('Save feature flag type')).toBeDisabled();
expect(screen.getByText('Save feature flag type')).toHaveAttribute(
'aria-disabled',
'true',
);
});
});

2
frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.test.tsx
View File

@ -46,5 +46,5 @@ test('Project limit reached', async () => {
const button = await screen.findByRole('button', {
name: 'Create project',
});
expect(button).toBeDisabled();
expect(button).toHaveAttribute('aria-disabled', 'true');
});

2
frontend/src/component/project/Project/Import/Import.test.tsx
View File

@ -148,5 +148,5 @@ test('Show validation errors', async () => {
await screen.findByText('itemF');
const importButton = screen.getByText('Import configuration');
expect(importButton).toBeDisabled();
expect(importButton).toHaveAttribute('aria-disabled', 'true');
});

4
frontend/src/component/project/ProjectList/ProjectList.test.tsx
View File

@ -26,10 +26,10 @@ test('Enabled new project button when version and permission allow for it and li
});
const button = await screen.findByText('New project');
expect(button).toBeDisabled();
expect(button).toHaveAttribute('aria-disabled', 'true');
await waitFor(async () => {
const button = await screen.findByText('New project');
expect(button).not.toBeDisabled();
expect(button).not.toHaveAttribute('aria-disabled', 'true');
});
});

52
frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
View File

@ -73,33 +73,31 @@ exports[`renders an empty list correctly 1`] = `
<hr
className="MuiDivider-root MuiDivider-middle MuiDivider-vertical css-1cqsk4j-MuiDivider-root"
/>
<span>
<button
aria-labelledby="useId-0"
className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1ind840-MuiButtonBase-root-MuiButton-root"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
New tag type
<span
className="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</span>
<button
aria-labelledby="useId-0"
className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-9qsbea-MuiButtonBase-root-MuiButton-root"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
New tag type
<span
className="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>