diff --git a/.changeset/wise-bats-crash.md b/.changeset/wise-bats-crash.md new file mode 100644 index 00000000..9cb8c426 --- /dev/null +++ b/.changeset/wise-bats-crash.md @@ -0,0 +1,5 @@ +--- +'@kubed/components': patch +--- + +1. fix: improve entity expand feature. diff --git a/packages/components/src/Entity/Entity.story.tsx b/packages/components/src/Entity/Entity.story.tsx index bef0d65d..ce6b3b93 100644 --- a/packages/components/src/Entity/Entity.story.tsx +++ b/packages/components/src/Entity/Entity.story.tsx @@ -60,8 +60,13 @@ export const EntityExpand = () => { width: 100%; height: 300px; `; + + const onCardClick = (e) => { + e.stopPropagation(); + }; + const expandContent = ( - + @@ -78,6 +83,12 @@ export const EntityExpand = () => { + + rocksdbpvc} /> + + + + ); }; diff --git a/packages/components/src/Entity/Entity.tsx b/packages/components/src/Entity/Entity.tsx index 491639f6..62f80b03 100644 --- a/packages/components/src/Entity/Entity.tsx +++ b/packages/components/src/Entity/Entity.tsx @@ -1,8 +1,6 @@ import React from 'react'; import styled, { css } from 'styled-components'; -import cx from 'classnames'; -import { useToggle } from '@kubed/hooks'; -import { Dropdown } from '../Dropdown/Dropdown'; +import { Dropdown, DropdownProps } from '../Dropdown/Dropdown'; import { Field } from './Field'; import { DefaultProps, KubedTheme } from '../theme'; import forwardRef from '../utils/forwardRef'; @@ -41,7 +39,7 @@ const EntityWrapper = styled('div')` cursor: ${({ expandable }) => (expandable ? 'pointer' : null)}; &:hover, - &.is-expand { + &[aria-expanded='true'] { ${({ hoverable, theme }) => getHoverStyle(hoverable, theme)}; } `; @@ -87,6 +85,9 @@ export interface EntityProps extends DefaultProps { /** Gap between children */ gap?: number; + + /** Props of expand */ + expandProps?: Omit; } export const Entity = forwardRef( @@ -99,19 +100,11 @@ export const Entity = forwardRef( bordered = true, expandable = false, expandContent, + expandProps, ...rest }, ref ) => { - const [expand, setExpand] = useToggle(false, [true, false]); - - const handleExpand = (e) => { - e.stopPropagation(); - if (expandable) { - setExpand(!expand); - } - }; - if (expandable) { return ( @@ -123,15 +116,10 @@ export const Entity = forwardRef( className="entity-dropdown" maxWidth="100%" offset={[0, -3]} + placement="bottom" + {...expandProps} > - + {children} @@ -143,14 +131,7 @@ export const Entity = forwardRef( } return ( - + {children}