Chore: Remove styled overwrites

This commit is contained in:
Gustav Hansen 2023-05-08 12:15:44 +02:00
parent 81c9189bd7
commit b2e08defbb
2 changed files with 10 additions and 27 deletions

View File

@ -1,24 +1,18 @@
import React, { useMemo } from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { Flex } from '@strapi/design-system';
import { Box, Flex } from '@strapi/design-system';
import { PaginationContext } from './PaginationContext';
const PaginationWrapper = styled.nav``;
const PaginationList = styled(Flex)`
& > * + * {
margin-left: ${({ theme }) => theme.spaces[1]};
}
`;
export const Pagination = ({ children, label, activePage, pageCount }) => {
const paginationValue = useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
return (
<PaginationContext.Provider value={paginationValue}>
<PaginationWrapper aria-label={label}>
<PaginationList as="ul">{children}</PaginationList>
</PaginationWrapper>
<Box as="nav" aria-label={label}>
<Flex as="ul" gap={1}>
{children}
</Flex>
</Box>
</PaginationContext.Provider>
);
};

View File

@ -40,17 +40,6 @@ import PageSize from './PageSize';
import SearchAsset from './SearchAsset';
import { isSelectable } from './utils/isSelectable';
const StartBlockActions = styled(Flex)`
& > * + * {
margin-left: ${({ theme }) => theme.spaces[2]};
}
margin-left: ${({ pullRight }) => (pullRight ? 'auto' : undefined)};
`;
const EndBlockActions = styled(StartBlockActions)`
flex-shrink: 0;
`;
const TypographyMaxWidth = styled(Typography)`
max-width: 100%;
`;
@ -131,7 +120,7 @@ export const BrowseStep = ({
<Box paddingBottom={4}>
<Flex justifyContent="space-between" alignItems="flex-start">
{(assetCount > 0 || folderCount > 0 || isFiltering) && (
<StartBlockActions wrap="wrap">
<Flex gap={2} wrap="wrap">
{multiple && isGridView && (
<Flex
paddingLeft={2}
@ -157,11 +146,11 @@ export const BrowseStep = ({
appliedFilters={queryObject?.filters?.$and}
onChangeFilters={onChangeFilters}
/>
</StartBlockActions>
</Flex>
)}
{(assetCount > 0 || folderCount > 0 || isSearching) && (
<EndBlockActions pullRight>
<Flex marginLeft="auto" shrink={0}>
<ActionContainer paddingTop={1} paddingBottom={1}>
<IconButton
icon={isGridView ? <List /> : <Grid />}
@ -180,7 +169,7 @@ export const BrowseStep = ({
/>
</ActionContainer>
<SearchAsset onChangeSearch={onChangeSearch} queryValue={queryObject._q || ''} />
</EndBlockActions>
</Flex>
)}
</Flex>
</Box>