Skip to content

Feature/2 add badges#26

Open
Shoaibv2 wants to merge 3 commits intomainfrom
feature/2-add-badges
Open

Feature/2 add badges#26
Shoaibv2 wants to merge 3 commits intomainfrom
feature/2-add-badges

Conversation

@Shoaibv2
Copy link
Copy Markdown
Member

Fixes #2

@Shoaibv2 Shoaibv2 requested a review from ranajahanzaib April 14, 2022 09:32
@Shoaibv2 Shoaibv2 changed the title Feature/2 add badges #26 Feature/2 add badges Apr 14, 2022
@ranajahanzaib
Copy link
Copy Markdown
Contributor

@aftabrehan please review.

Copy link
Copy Markdown
Member

@aftabrehan aftabrehan left a comment

Choose a reason for hiding this comment

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

Looks good to me. 👍

Just a minor changes. Good work. 💯

Comment thread apps/views/pages/Badges.tsx Outdated
Comment on lines +1 to +15
import { Badge, PillBadges, ButtonBadges } from "kbs-core";

function Badges() {
return (
<div>
<Badge variant="primary" label="Primary" />
<Badge variant="Seconday" label="Badge" />
<Badge variant="Dark h1" label="Badge" />
<PillBadges variant="primary" label="Primary" />
<ButtonBadges buttonvariant="primary" labelvariant="light" label="2" />
</div>
);
}

export default Badges;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Move this in badge.ts 🙏

Use first letter capital only for components name, and just write your code in .ts file. Thanks!

</span>
);
}
export default PillBadges;
Copy link
Copy Markdown
Member

@aftabrehan aftabrehan Apr 14, 2022

Choose a reason for hiding this comment

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

Rename this file as BadgePill.tsx. 👉

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This makes much sense.

import Badge from "./components/Badge";
import PillBadges from "./components/PillBadges";
import ButtonBadges from "./components/ButtonBadge";
export { Button, type ButtonProps } from "./Button";
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

It's a good practice to have an empty line between imports & exports. 👍

Suggested change
export { Button, type ButtonProps } from "./Button";
export { Button, type ButtonProps } from "./Button";

</button>
);
}
export default ButtonBadges;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Can be it renamed as BadgeButton.tsx.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

ok

@@ -0,0 +1,9 @@
function ButtonBadges(props: any) {
return (
<button type="button" className={`btn btn-${props.buttonvariant}`}>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Use camelCase.

Suggested change
<button type="button" className={`btn btn-${props.buttonvariant}`}>
<button type="button" className={`btn btn-${props.buttonVariant}`}>

return (
<button type="button" className={`btn btn-${props.buttonvariant}`}>
Notifications
<span className={`badge bg-${props.labelvariant}`}>{props.label}</span>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Again...

Suggested change
<span className={`badge bg-${props.labelvariant}`}>{props.label}</span>
<span className={`badge bg-${props.labelVariant}`}>{props.label}</span>

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.

Add Badges Component

3 participants