Skip to content

Commit

Permalink
fix(Tag): Update tag focus state (#1582)
Browse files Browse the repository at this point in the history
  • Loading branch information
@silvalaura
silvalaura authored Nov 20, 2024
1 parent ba8e05b commit 6a8ed21
Show file tree
Hide file tree
Showing 4 changed files with 322 additions and 170 deletions.
5 changes: 5 additions & 0 deletions .changeset/tag-focus.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'react-magma-dom': patch
---

fix(Tag): Update tag focus state
339 changes: 184 additions & 155 deletions packages/react-magma-dom/src/components/Tag/Tag.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,80 +3,117 @@ import { Card, CardBody } from '../Card';
import { AccountCircleIcon } from 'react-magma-icons';
import { Story, Meta } from '@storybook/react/types-6-0';
import { Tag, TagColor, TagProps, TagSize } from '.';
import { Button } from '../Button';

const Template: Story<TagProps> = args => (
<>
<>
<Tag {...args}>Default</Tag>
<Tag {...args} color={TagColor.primary}>
Primary
</Tag>
<Tag {...args} color={TagColor.highContrast}>
High Contrast
</Tag>
<Tag {...args} color={TagColor.lowContrast}>
Low Contrast
</Tag>
</>
<p>
<Tag {...args} icon={<AccountCircleIcon />}>
Default Icon
</Tag>
<Tag {...args} icon={<AccountCircleIcon />} color={TagColor.primary}>
Primary Icon
</Tag>
<Tag {...args} icon={<AccountCircleIcon />} color={TagColor.highContrast}>
High Contrast Icon
</Tag>
<Tag {...args} icon={<AccountCircleIcon />} color={TagColor.lowContrast}>
Low Contrast Icon
</Tag>
</p>
<p>
<Tag {...args} size={TagSize.small}>
Default Small
</Tag>
<Tag {...args} size={TagSize.small} color={TagColor.primary}>
Primary Small
</Tag>
<Tag {...args} size={TagSize.small} color={TagColor.highContrast}>
High Contrast Small
</Tag>
<Tag {...args} size={TagSize.small} color={TagColor.lowContrast}>
Low Contrast Small
</Tag>
</p>
<p>
<Tag {...args} icon={<AccountCircleIcon />} size={TagSize.small}>
Default Small Icon
</Tag>
<Tag
{...args}
icon={<AccountCircleIcon />}
size={TagSize.small}
color={TagColor.primary}
>
Primary Small Icon
</Tag>
<Tag
{...args}
icon={<AccountCircleIcon />}
size={TagSize.small}
color={TagColor.highContrast}
>
High Contrast Small Icon
</Tag>
<Tag
{...args}
icon={<AccountCircleIcon />}
size={TagSize.small}
color={TagColor.lowContrast}
>
Low Contrast Small Icon
</Tag>
</p>
</>
);
const Template: Story<TagProps> = args => {
return (
<Card isInverse={args.isInverse}>
<CardBody>
<p>
<Tag {...args}>Default</Tag>
<Tag {...args} color={TagColor.primary}>
Primary
</Tag>
<Tag {...args} color={TagColor.highContrast}>
High Contrast
</Tag>
<Tag {...args} color={TagColor.lowContrast}>
Low Contrast
</Tag>
</p>
<p>
<Tag {...args} icon={<AccountCircleIcon />}>
Default Icon
</Tag>
<Tag {...args} icon={<AccountCircleIcon />} color={TagColor.primary}>
Primary Icon
</Tag>
<Tag
{...args}
icon={<AccountCircleIcon />}
color={TagColor.highContrast}
>
High Contrast Icon
</Tag>
<Tag
{...args}
icon={<AccountCircleIcon />}
color={TagColor.lowContrast}
>
Low Contrast Icon
</Tag>
</p>
<p>
<Tag {...args} size={TagSize.small}>
Default Small
</Tag>
<Tag {...args} size={TagSize.small} color={TagColor.primary}>
Primary Small
</Tag>
<Tag {...args} size={TagSize.small} color={TagColor.highContrast}>
High Contrast Small
</Tag>
<Tag {...args} size={TagSize.small} color={TagColor.lowContrast}>
Low Contrast Small
</Tag>
</p>
<p>
<Tag {...args} icon={<AccountCircleIcon />} size={TagSize.small}>
Default Small Icon
</Tag>
<Tag
{...args}
icon={<AccountCircleIcon />}
size={TagSize.small}
color={TagColor.primary}
>
Primary Small Icon
</Tag>
<Tag
{...args}
icon={<AccountCircleIcon />}
size={TagSize.small}
color={TagColor.highContrast}
>
High Contrast Small Icon
</Tag>
<Tag
{...args}
icon={<AccountCircleIcon />}
size={TagSize.small}
color={TagColor.lowContrast}
>
Low Contrast Small Icon
</Tag>
</p>
<p>
<Tag
size={args.size}
color={args.color}
isInverse={args.isInverse}
disabled={args.disabled}
onClick={() => {
console.log('clicked');
}}
>
Clickable Tag
</Tag>
<Tag
size={args.size}
color={args.color}
isInverse={args.isInverse}
disabled={args.disabled}
onDelete={() => {
console.log('clicked');
}}
>
Deletetable Tag
</Tag>
</p>
</CardBody>
</Card>
);
};

export default {
title: 'Tag',
Expand Down Expand Up @@ -108,103 +145,95 @@ export default {
} as Meta;

export const Default = Template.bind({});
Default.args = {};

export const Disabled = Template.bind({});
Disabled.args = {
disabled: true,
};

export const Inverse = Template.bind({});
Inverse.args = {
isInverse: true,
Default.args = {
disabled: false,
isInverse: false,
};

export const InverseDisabled = Template.bind({});
InverseDisabled.args = {
isInverse: true,
disabled: true,
};

Inverse.decorators = [
Story => (
<Card isInverse>
<CardBody>
<Story />
</CardBody>
</Card>
),
];
InverseDisabled.decorators = [
Story => (
<Card isInverse>
<CardBody>
<Story />
</CardBody>
</Card>
),
];

export const OnClick = args => {
const [counter, setCounter] = React.useState<number>(0);
function updateCounter() {
setCounter(count => count + 1);
}
return (
<>
<p>
<strong>Counter: </strong> <span>{counter}</span>
</p>
<Tag {...args} onClick={updateCounter}>
Text Label
</Tag>
</>
<Card isInverse={args.isInverse}>
<CardBody>
<p>
<strong>Counter: </strong> <span>{counter}</span>
</p>
<Tag {...args} onClick={updateCounter}>
Text Label
</Tag>
</CardBody>
</Card>
);
};
OnClick.args = {};

export const WithDelete = args => {
const [isVisible, setIsVisible] = React.useState(true);
const [isVisibleDefault, setIsVisibleDefault] = React.useState(true);
const [isVisibleIcon, setIsVisibleIcon] = React.useState(true);
const [isVisibleSmall, setIsVisibleSmall] = React.useState(true);
const [isVisibleSmallIcon, setIsVisibleSmallIcon] = React.useState(true);

function deleteMe() {
setIsVisible(false);
}
return (
<>
<p>
{isVisible && (
<Tag {...args} onDelete={deleteMe}>
Delete
</Tag>
)}
</p>
<p>
{isVisible && (
<Tag {...args} onDelete={deleteMe} icon={<AccountCircleIcon />}>
Delete Icon
</Tag>
)}
</p>
<p>
{isVisible && (
<Tag size={TagSize.small} {...args} onDelete={deleteMe}>
Delete Small
</Tag>
)}
</p>
<p>
{isVisible && (
<Tag
size={TagSize.small}
{...args}
onDelete={deleteMe}
icon={<AccountCircleIcon />}
>
Delete Icon Small
</Tag>
)}
</p>
</>
<Card isInverse={args.isInverse}>
<CardBody>
<p>
{isVisibleDefault && (
<Tag {...args} onDelete={() => setIsVisibleDefault(false)}>
Delete
</Tag>
)}
</p>
<p>
{isVisibleIcon && (
<Tag
{...args}
onDelete={() => setIsVisibleIcon(false)}
icon={<AccountCircleIcon />}
>
Delete Icon
</Tag>
)}
</p>
<p>
{isVisibleSmall && (
<Tag
size={TagSize.small}
{...args}
onDelete={() => setIsVisibleSmall(false)}
>
Delete Small
</Tag>
)}
</p>
<p>
{isVisibleSmallIcon && (
<Tag
size={TagSize.small}
{...args}
onDelete={() => setIsVisibleSmallIcon(false)}
icon={<AccountCircleIcon />}
>
Delete Icon Small
</Tag>
)}
</p>

<Button
isInverse={args.isInverse}
onClick={() => {
setIsVisibleDefault(true);
setIsVisibleIcon(true);
setIsVisibleSmall(true);
setIsVisibleSmallIcon(true);
}}
>
Make all tags visible
</Button>
</CardBody>
</Card>
);
};

Expand Down
Loading

2 comments on commit 6a8ed21

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://next--upbeat-sinoussi-f675aa.netlify.app

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app

Please sign in to comment.