chore: update dataset count badge and tash icon sizing (#15608)

* update trash icon size

* changed badge icon `height` to `16px` (using `gridUnits` and centered text inside via `line-height`

* changed badge icon `height` to `16px` (using `gridUnits`), centered text inside via `line-height`, alignedItems inside div w/flex
This commit is contained in:
Andrew Bastian 2021-07-09 07:33:25 -07:00 committed by GitHub
parent 367d47bec5
commit ee8b1ed15a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 3 deletions

View File

@ -352,7 +352,6 @@ export default class CRUDCollection extends React.PureComponent<
aria-label="Delete item" aria-label="Delete item"
className="pointer" className="pointer"
data-test="crud-delete-icon" data-test="crud-delete-icon"
css={{ fontSize: '18px' }}
role="button" role="button"
tabIndex={0} tabIndex={0}
onClick={this.deleteItem.bind(this, record.id)} onClick={this.deleteItem.bind(this, record.id)}

View File

@ -87,6 +87,14 @@ const StyledTableTabs = styled(Tabs)`
} }
`; `;
const StyledBadge = styled(Badge)`
.ant-badge-count {
line-height: ${({ theme }) => theme.gridUnit * 4}px;
height: ${({ theme }) => theme.gridUnit * 4}px;
margin-left: ${({ theme }) => theme.gridUnit}px;
}
`;
const EditLockContainer = styled.div` const EditLockContainer = styled.div`
font-size: ${supersetTheme.typography.sizes.s}px; font-size: ${supersetTheme.typography.sizes.s}px;
display: flex; display: flex;
@ -117,8 +125,12 @@ DATASOURCE_TYPES_ARR.forEach(o => {
function CollectionTabTitle({ title, collection }) { function CollectionTabTitle({ title, collection }) {
return ( return (
<div data-test={`collection-tab-${title}`}> <div
{title} <Badge count={collection ? collection.length : 0} showZero /> css={{ display: 'flex', alignItems: 'center' }}
data-test={`collection-tab-${title}`}
>
{title}{' '}
<StyledBadge count={collection ? collection.length : 0} showZero />
</div> </div>
); );
} }