QA/ Wysiwyg link button size (#11441)

* attempt to fix link svg in wysiwyg

* fixed more label button

* fixed tests
This commit is contained in:
ronronscelestes 2021-11-02 18:00:31 +01:00 committed by GitHub
parent 61b7748dad
commit a10953ffb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 12 deletions

View File

@ -18,7 +18,13 @@ import Image from '@strapi/icons/Picture';
import Link from '@strapi/icons/Link'; import Link from '@strapi/icons/Link';
import Quote from '@strapi/icons/Quote'; import Quote from '@strapi/icons/Quote';
import More from '@strapi/icons/More'; import More from '@strapi/icons/More';
import { MainButtons, CustomIconButton, MoreButton, IconButtonGroupMargin } from './WysiwygStyles'; import {
MainButtons,
CustomIconButton,
MoreButton,
IconButtonGroupMargin,
CustomLinkIconButton,
} from './WysiwygStyles';
const WysiwygNav = ({ const WysiwygNav = ({
editorRef, editorRef,
@ -75,7 +81,7 @@ const WysiwygNav = ({
/> />
</MainButtons> </MainButtons>
<MoreButton disabled ref={buttonMoreRef} id="more" label="more" icon={<More />} /> <MoreButton disabled ref={buttonMoreRef} id="more" label="More" icon={<More />} />
</Flex> </Flex>
<Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview"> <Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview">
@ -135,7 +141,7 @@ const WysiwygNav = ({
ref={buttonMoreRef} ref={buttonMoreRef}
onClick={onTogglePopover} onClick={onTogglePopover}
id="more" id="more"
label="more" label="More"
icon={<More />} icon={<More />}
/> />
{visiblePopover && ( {visiblePopover && (
@ -179,7 +185,7 @@ const WysiwygNav = ({
name="Image" name="Image"
icon={<Image />} icon={<Image />}
/> />
<CustomIconButton <CustomLinkIconButton
onClick={() => onActionClick('Link', editorRef, onTogglePopover)} onClick={() => onActionClick('Link', editorRef, onTogglePopover)}
id="Link" id="Link"
label="Link" label="Link"

View File

@ -21,6 +21,13 @@ export const CustomIconButton = styled(IconButton)`
} }
`; `;
export const CustomLinkIconButton = styled(CustomIconButton)`
svg {
width: ${8 / 16}rem;
height: ${8 / 16}rem;
}
`;
export const MainButtons = styled(IconButtonGroup)` export const MainButtons = styled(IconButtonGroup)`
margin-left: ${({ theme }) => theme.spaces[4]}; margin-left: ${({ theme }) => theme.spaces[4]};
`; `;

View File

@ -770,10 +770,6 @@ describe('Admin | containers | RoleCreatePage', () => {
background: #d9d8ff; background: #d9d8ff;
} }
.c40:hover:not([aria-disabled='true']) svg path {
fill: #4945ff;
}
.c47 { .c47 {
background: transparent; background: transparent;
border: none; border: none;
@ -861,6 +857,10 @@ describe('Admin | containers | RoleCreatePage', () => {
height: 5.5rem; height: 5.5rem;
} }
.c44:hover svg path {
fill: #4945ff;
}
@media (max-width:68.75rem) { @media (max-width:68.75rem) {
.c20 { .c20 {
grid-column: span; grid-column: span;

View File

@ -853,10 +853,6 @@ describe('Admin | containers | RoleEditPage', () => {
background: #d9d8ff; background: #d9d8ff;
} }
.c47:hover:not([aria-disabled='true']) svg path {
fill: #4945ff;
}
.c54 { .c54 {
background: transparent; background: transparent;
border: none; border: none;
@ -944,6 +940,10 @@ describe('Admin | containers | RoleEditPage', () => {
height: 5.5rem; height: 5.5rem;
} }
.c51:hover svg path {
fill: #4945ff;
}
@media (max-width:68.75rem) { @media (max-width:68.75rem) {
.c27 { .c27 {
grid-column: span; grid-column: span;