yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-26 22:54:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13505 from strapi/features/ML-folder-toggle

Browse Source 
SelectTree: Improve styles, a11y and UX
This commit is contained in:
Gustav Hansen 2022-06-14 12:11:05 +02:00 committed by GitHub
commit 7f3b6eb950
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/helper-plugin/lib/src/components/ReactSelect/components/DropdownIndicator.js
View File

@ -9,7 +9,7 @@ export const CarretBox = styled(IconBox)`
border: none;
svg {
width: ${6 / 16}rem;
width: ${9 / 16}rem;
}
`;

2
packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap
View File

@ -299,7 +299,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
}
.c20 svg {
width: 0.375rem;
width: 0.5625rem;
}
.c12 {

2
packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
View File

@ -729,7 +729,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
}
.c43 svg {
width: 0.375rem;
width: 0.5625rem;
}
.c2 {

2
packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
View File

@ -729,7 +729,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
}
.c43 svg {
width: 0.375rem;
width: 0.5625rem;
}
.c2 {

2
packages/core/upload/admin/src/components/EditFolderDialog/tests/__snapshots__/EditFolderDialog.test.js.snap
View File

@ -457,7 +457,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
}
.c27 svg {
width: 0.375rem;
width: 0.5625rem;
}
.c12 {

26
packages/core/upload/admin/src/components/SelectTree/Option.js
View File

@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import React from 'react';
import { useIntl } from 'react-intl';
import { components } from 'react-select';
import styled from 'styled-components';
@ -10,12 +11,19 @@ import { Typography } from '@strapi/design-system/Typography';
import ChevronUp from '@strapi/icons/ChevronUp';
import ChevronDown from '@strapi/icons/ChevronDown';
const ToggleButton = styled.button`
const ToggleButton = styled(Flex)`
align-self: flex-end;
margin-left: auto;
height: ${pxToRem(22)};
width: ${pxToRem(28)};
&:hover,
&:focus {
background-color: ${({ theme }) => theme.colors.primary200};
}
`;
const Option = ({ children, data, selectProps, ...props }) => {
const { formatMessage } = useIntl();
const { depth, value, children: options } = data;
const { maxDisplayDepth, openValues, onOptionToggle } = selectProps;
const isOpen = openValues.includes(value);
@ -24,15 +32,23 @@ const Option = ({ children, data, selectProps, ...props }) => {
<>
<components.Option {...props}>
<Flex alignItems="start">
<Typography textColor="neutral800">
<span style={{ paddingLeft: `${Math.min(depth, maxDisplayDepth) * 10}px` }}>
<Typography textColor="neutral800" ellipsis>
<span style={{ paddingLeft: `${Math.min(depth, maxDisplayDepth) * 14}px` }}>
{children}
</span>
</Typography>
{options?.length > 0 && (
<ToggleButton
type="button"
aria-label={formatMessage({
id: 'app.utils.toggle',
defaultMessage: 'Toggle',
})}
as="button"
alignItems="center"
hasRadius
justifyContent="center"
marginLeft="auto"
onClick={event => {
event.preventDefault();
event.stopPropagation();

4
packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
View File

@ -45,7 +45,7 @@ Object {
}
.c2 svg {
width: 0.375rem;
width: 0.5625rem;
}
<body>
@ -146,7 +146,7 @@ Object {
class=" css-1hb7zxy-IndicatorsContainer"
>
<button
class="sc-iuqRDJ sc-cVEUmN sc-ksDcAU cuYSdT gplmCH hyBOQL"
class="sc-iuqRDJ sc-cVEUmN sc-ksDcAU cuYSdT gplmCH cPFMHe"
type="button"
>
<svg

2
packages/core/upload/admin/src/components/SelectTree/utils/flattenTree.js
View File

@ -1,4 +1,4 @@
export default function flattenTree(tree, parent, depth = 1) {
export default function flattenTree(tree, parent, depth = 0) {
return tree.flatMap(item =>
item.children
? [{ ...item, parent: parent?.value, depth }, ...flattenTree(item.children, item, depth + 1)]

10
packages/core/upload/admin/src/components/SelectTree/utils/tests/__snapshots__/flattenTree.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`flattenTree flattens the passed tree structure properly 1`] = `
Array [
Object {
"depth": 1,
"depth": 0,
"label": "Folder 1",
"parent": undefined,
"value": "f-1",
@ -25,13 +25,13 @@ Array [
"value": "f-2-2",
},
],
"depth": 1,
"depth": 0,
"label": "Folder 2",
"parent": undefined,
"value": "f-2",
},
Object {
"depth": 2,
"depth": 1,
"label": "Folder 2-1",
"parent": "f-2",
"value": "f-2-1",
@ -43,13 +43,13 @@ Array [
"value": "f-2-2-1",
},
],
"depth": 2,
"depth": 1,
"label": "Folder 2-2",
"parent": "f-2",
"value": "f-2-2",
},
Object {
"depth": 3,
"depth": 2,
"label": "Folder 2-2-1",
"parent": "f-2-2",
"value": "f-2-2-1",