diff --git a/packages/fuselage/src/components/Button/Button.styles.scss b/packages/fuselage/src/components/Button/Button.styles.scss index 8f1a2c02fd..f712bc03a8 100644 --- a/packages/fuselage/src/components/Button/Button.styles.scss +++ b/packages/fuselage/src/components/Button/Button.styles.scss @@ -35,12 +35,7 @@ @mixin click-animation() { @include on-active { - > * { - transform: translateY(1px); - } - } - @include on-pressed { - > * { + > *:not(div[role='status']) { transform: translateY(1px); } } diff --git a/packages/fuselage/src/components/Button/IconButton.stories.tsx b/packages/fuselage/src/components/Button/IconButton.stories.tsx index 4868e7f721..7df37dc131 100644 --- a/packages/fuselage/src/components/Button/IconButton.stories.tsx +++ b/packages/fuselage/src/components/Button/IconButton.stories.tsx @@ -1,3 +1,4 @@ +import { css } from '@rocket.chat/css-in-js'; import { Title, Subtitle, @@ -11,6 +12,8 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react'; import React from 'react'; import { PropsVariationSection } from '../../../.storybook/helpers'; +import { Badge } from '../Badge'; +import Box from '../Box/Box'; import { ButtonGroup } from '../ButtonGroup'; import { IconButton } from './IconButton'; @@ -212,3 +215,21 @@ export const _IconButtonDanger: ComponentStory = () => ( export const _IconButtonSecondaryDanger: ComponentStory< typeof IconButton > = () => ; + +export const _IconButtonWithBadge: ComponentStory = () => ( + + + + 2 + + + +);