Skip to content

Commit

Permalink
refactor: ui tweak to make badge position fixed (#232)
Browse files Browse the repository at this point in the history 
* chore: ui tweak

* chore: amend css property

* chore: amend stories file
  • Loading branch information
@ss-dimasm
ss-dimasm authored Dec 6, 2024
1 parent f37b6dd commit 1e4977d
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 46 deletions.
86 changes: 53 additions & 33 deletions src/components/bottom-bar-item/__tests__/__snapshots__/bottom-bar-item.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,20 @@ exports[`BottomBarItem > should render the component as HTMLAnchorElement with a
<DocumentFragment>
<a
aria-current="page"
class="mocked-styled-3 el-anchor-bottom-bar-item-container"
class="mocked-styled-4 el-anchor-bottom-bar-item-container"
href="#"
>
<div
class="mocked-styled-0 el-bottom-bar-item-icon"
role="presentation"
class="mocked-styled-2 el-bottom-bar-item-content"
>
<span>
icon
</span>
<div
class="mocked-styled-0 el-bottom-bar-item-icon"
role="presentation"
>
<span>
icon
</span>
</div>
</div>
<span
class="mocked-styled-1 el-bottom-bar-item-label"
Expand All @@ -27,16 +31,20 @@ exports[`BottomBarItem > should render the component as HTMLAnchorElement with a
exports[`BottomBarItem > should render the component as HTMLAnchorElement with default state 1`] = `
<DocumentFragment>
<a
class="mocked-styled-3 el-anchor-bottom-bar-item-container"
class="mocked-styled-4 el-anchor-bottom-bar-item-container"
href="#"
>
<div
class="mocked-styled-0 el-bottom-bar-item-icon"
role="presentation"
class="mocked-styled-2 el-bottom-bar-item-content"
>
<span>
icon
</span>
<div
class="mocked-styled-0 el-bottom-bar-item-icon"
role="presentation"
>
<span>
icon
</span>
</div>
</div>
<span
class="mocked-styled-1 el-bottom-bar-item-label"
Expand All @@ -51,15 +59,19 @@ exports[`BottomBarItem > should render the component as HTMLButtonElement with a
<DocumentFragment>
<button
aria-current="true"
class="mocked-styled-4 el-button-bottom-bar-item-container"
class="mocked-styled-5 el-button-bottom-bar-item-container"
>
<div
class="mocked-styled-0 el-bottom-bar-item-icon"
role="presentation"
class="mocked-styled-2 el-bottom-bar-item-content"
>
<span>
icon
</span>
<div
class="mocked-styled-0 el-bottom-bar-item-icon"
role="presentation"
>
<span>
icon
</span>
</div>
</div>
<span
class="mocked-styled-1 el-bottom-bar-item-label"
Expand All @@ -74,24 +86,28 @@ exports[`BottomBarItem > should render the component as HTMLButtonElement with b
<DocumentFragment>
<button
aria-current="true"
class="mocked-styled-4 el-button-bottom-bar-item-container"
class="mocked-styled-5 el-button-bottom-bar-item-container"
>
<div
class="mocked-styled-0 el-bottom-bar-item-icon"
role="presentation"
class="mocked-styled-2 el-bottom-bar-item-content"
>
<span>
icon
</span>
<div
class="mocked-styled-0 el-bottom-bar-item-icon"
role="presentation"
>
<span>
icon
</span>
</div>
<span
class="mocked-styled-3 el-bottom-bar-item-badge"
/>
</div>
<span
class="mocked-styled-1 el-bottom-bar-item-label"
>
Label
</span>
<span
class="mocked-styled-2 el-bottom-bar-item-badge"
/>
</button>
</DocumentFragment>
`;
Expand All @@ -100,15 +116,19 @@ exports[`BottomBarItem > should render the component as HTMLButtonElement with d
<DocumentFragment>
<button
aria-current="true"
class="mocked-styled-4 el-button-bottom-bar-item-container"
class="mocked-styled-5 el-button-bottom-bar-item-container"
>
<div
class="mocked-styled-0 el-bottom-bar-item-icon"
role="presentation"
class="mocked-styled-2 el-bottom-bar-item-content"
>
<span>
icon
</span>
<div
class="mocked-styled-0 el-bottom-bar-item-icon"
role="presentation"
>
<span>
icon
</span>
</div>
</div>
<span
class="mocked-styled-1 el-bottom-bar-item-label"
Expand Down
15 changes: 10 additions & 5 deletions src/components/bottom-bar-item/bottom-bar-item.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Icon } from '../icon'
import {
ElAnchorBottomBarItemContainer,
ElBottomBarItemBadge,
ElBottomBarItemContent,
ElBottomBarItemIcon,
ElBottomBarItemLabel,
ElButtonBottomBarItemContainer,
Expand Down Expand Up @@ -96,9 +97,11 @@ export const StyleAnchorUsage: Story = {
</ElAnchorBottomBarItemContainer>

<ElAnchorBottomBarItemContainer href={args.href} aria-current={undefined} className="el-mx5">
<ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
<ElBottomBarItemContent>
<ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
<ElBottomBarItemBadge />
</ElBottomBarItemContent>
<ElBottomBarItemLabel>{args?.children}</ElBottomBarItemLabel>
<ElBottomBarItemBadge role="status" />
</ElAnchorBottomBarItemContainer>
</FlexContainer>
)
Expand All @@ -124,9 +127,11 @@ export const StyleButtonUsage: Story = {
</ElButtonBottomBarItemContainer>

<ElButtonBottomBarItemContainer onClick={action('handleClick')} aria-current={undefined} className="el-mx5">
<ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
<ElBottomBarItemLabel>{args?.children}</ElBottomBarItemLabel>
<ElBottomBarItemBadge role="status" />
<ElBottomBarItemContent>
<ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
<ElBottomBarItemBadge />
</ElBottomBarItemContent>
<ElBottomBarItemLabel>{args?.children}</ElBottomBarItemLabel>{' '}
</ElButtonBottomBarItemContainer>
</FlexContainer>
)
Expand Down
13 changes: 9 additions & 4 deletions src/components/bottom-bar-item/bottom-bar-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { AnchorHTMLAttributes, ButtonHTMLAttributes, FC, MouseEventHandler,
import {
ElAnchorBottomBarItemContainer,
ElBottomBarItemBadge,
ElBottomBarItemContent,
ElBottomBarItemIcon,
ElBottomBarItemLabel,
ElButtonBottomBarItemContainer,
Expand Down Expand Up @@ -68,19 +69,23 @@ export const BottomBarItem: FC<BottomBarItemProps> = (props) => {

return (
<ElButtonBottomBarItemContainer {...rest} aria-current={isActive ? 'true' : undefined}>
<ElBottomBarItemIcon role="presentation">{icon}</ElBottomBarItemIcon>
<ElBottomBarItemContent>
<ElBottomBarItemIcon role="presentation">{icon}</ElBottomBarItemIcon>
{hasBadge && <ElBottomBarItemBadge />}
</ElBottomBarItemContent>
<ElBottomBarItemLabel>{children}</ElBottomBarItemLabel>
{hasBadge && <ElBottomBarItemBadge />}
</ElButtonBottomBarItemContainer>
)
} else {
const { isActive, icon, hasBadge, children, ...rest } = props ?? {}

return (
<ElAnchorBottomBarItemContainer {...rest} aria-current={isActive ? 'page' : undefined}>
<ElBottomBarItemIcon role="presentation">{icon}</ElBottomBarItemIcon>
<ElBottomBarItemContent>
<ElBottomBarItemIcon role="presentation">{icon}</ElBottomBarItemIcon>
{hasBadge && <ElBottomBarItemBadge />}
</ElBottomBarItemContent>
<ElBottomBarItemLabel>{children}</ElBottomBarItemLabel>
{hasBadge && <ElBottomBarItemBadge />}
</ElAnchorBottomBarItemContainer>
)
}
Expand Down
13 changes: 9 additions & 4 deletions src/components/bottom-bar-item/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,16 @@ export const ElBottomBarItemLabel = styled.span`
const baseStyles = `
background-color: var(--fill-white, white);
outline: none;
width: 44px;
width: 44px;
border: var(--border-none, 0);
display: flex;
cursor: pointer;
padding: var(--space-half, 2px) var(--space-none, 0px);
padding: var(--space-half, 2px) var(--space-none, 0px);
flex-direction: column;
align-items: center;
gap: var(--space-half, 2px);
position: relative;
flex: 1 0 0;
color: var(--icon-secondary, #607890);
Expand All @@ -39,10 +40,14 @@ const baseStyles = `
}
`

export const ElBottomBarItemContent = styled.div`
position: relative;
`

export const ElBottomBarItemBadge = styled.span`
position: absolute;
top: 1px;
right: 6px;
top: -3px;
right: -3px;
width: var(--size-2, 8px);
height: var(--size-2, 8px);
background-color: var(--icon-error, #f01830);
Expand Down

0 comments on commit 1e4977d

Please sign in to comment.