Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Chip #11

Merged
merged 9 commits into from
Apr 14, 2021
Merged

Add Chip #11

merged 9 commits into from
Apr 14, 2021

Conversation

MarikTar
Copy link
Contributor

@MarikTar MarikTar commented Apr 7, 2021

@MarikTar MarikTar self-assigned this Apr 7, 2021
packages/react-components/src/Chip/chip.tsx Outdated Show resolved Hide resolved
/**
* Used to render icon elements inside the Chip
*/
icon?: React.ReactNode;
Copy link
Collaborator

Choose a reason for hiding this comment

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

For now, use the icon from mockups and don't allow to change the icon using props.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Please remove icon prop.

packages/react-components/src/Chip/chip.tsx Outdated Show resolved Hide resolved
packages/react-components/src/Chip/chip.tsx Show resolved Hide resolved
@donskov donskov added the invalid This doesn't seem right label Apr 8, 2021
@MarikTar MarikTar removed the invalid This doesn't seem right label Apr 8, 2021
/**
* Used to render icon elements inside the Chip
*/
icon?: React.ReactNode;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Please remove icon prop.

dataTestId?: string;
};

type ChipProps = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Now Chip component can use props from HTMLButtonElement, but you forgot to add ...other props to your root element.

[stylesEffects()]: !selected || !isChoice,
[className]: !!className,
})}
tabIndex={selected && isChoice ? -1 : 1}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Need to use tabIndex from props for default state.


type ChipProps = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>;

const stylesBase = () => css({
Copy link
Collaborator

Choose a reason for hiding this comment

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

Chip it's an inline component (from mockup):

image

Current solution broken with multiple elements:
image

@donskov donskov added the invalid This doesn't seem right label Apr 9, 2021
@MarikTar MarikTar removed the invalid This doesn't seem right label Apr 14, 2021
@donskov donskov merged commit ce65956 into main Apr 14, 2021
@donskov donskov deleted the add-chip branch April 14, 2021 11:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants