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

New group rounded feature and small color fix control themes #49

Merged
merged 5 commits into from
Nov 15, 2020
Merged

New group rounded feature and small color fix control themes #49

merged 5 commits into from
Nov 15, 2020

Conversation

FlorianWoelki
Copy link
Contributor

Description

Sorry for so much PR's :D

I've added a common use case for actual rounding group tags. I think it should be pretty useful for some use cases. Furthermore, there are rounded tags so why not having grouped rounded tags ;)

In addition, I've added the primary color to the control themes. This fix resolved that primary colored closing tags are not clickable.

Type of change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • This change requires a documentation update

How Has This Been Tested?

You can see the result of the new rounded grouping tags in the image below:
image

  1. tag container without grouped or rounded
  2. grouped tag container
  3. grouped and rounded tag container

Copy link
Owner

@Spiderpig86 Spiderpig86 left a comment

Choose a reason for hiding this comment

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

Overall, thanks for the new addition of the tags. I see you're hard at work on adding some new things which are welcome. Please address the comments and I'll review again.

border-radius: 0;
&.group-tags {
/* Round first and last tag in the grouped tags */
&.group-rounded {
Copy link
Owner

Choose a reason for hiding this comment

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

To try to stick to BEM naming conventions moving forward, we should name this group-tags--rounded.

@hound hound bot deleted a comment from Spiderpig86 Nov 14, 2020
@hound hound bot deleted a comment from Spiderpig86 Nov 14, 2020
@hound hound bot deleted a comment from Spiderpig86 Nov 14, 2020
@hound hound bot deleted a comment from Spiderpig86 Nov 14, 2020
@hound hound bot deleted a comment from Spiderpig86 Nov 14, 2020
@hound hound bot deleted a comment from Spiderpig86 Nov 14, 2020
@hound hound bot deleted a comment from Spiderpig86 Nov 14, 2020
@hound hound bot deleted a comment from Spiderpig86 Nov 14, 2020
@hound hound bot deleted a comment from Spiderpig86 Nov 14, 2020
@hound hound bot deleted a comment from FlorianWoelki Nov 14, 2020
}

&:last-child {
border-radius: 0 290486px 290486px 0;
Copy link

Choose a reason for hiding this comment

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

Shorthands of length 4 are not allowed. Value was 0 290486px 290486px 0

// Round first and last tag in the grouped tags
&--rounded .tag {
&:first-child {
border-radius: 290486px 0 0 290486px;
Copy link

Choose a reason for hiding this comment

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

Shorthands of length 4 are not allowed. Value was 290486px 0 0 290486px

}

&:last-child {
border-radius: 0 0.25rem 0.25rem 0;
Copy link

Choose a reason for hiding this comment

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

Shorthands of length 4 are not allowed. Value was 0 0.25rem 0.25rem 0

&:not(:first-child):not(:last-child) {
border-radius: 0;
&:first-child {
border-radius: 0.25rem 0 0 0.25rem;
Copy link

Choose a reason for hiding this comment

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

Shorthands of length 4 are not allowed. Value was 0.25rem 0 0 0.25rem

&.group-tags {
.tag,
&--rounded .tag {
margin-right: 0 !important;
Copy link

Choose a reason for hiding this comment

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

!important should not be used

@@ -151,19 +151,33 @@
}

/* Used for grouping tags together */
&.group-tags .tag {
margin-right: 0 !important;
&.group-tags {
Copy link

Choose a reason for hiding this comment

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

Line should be indented 2 spaces, but was indented 4 spaces

Copy link
Owner

@Spiderpig86 Spiderpig86 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!

@Spiderpig86 Spiderpig86 merged commit 8efe36e into Spiderpig86:master Nov 15, 2020
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