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

[border_css_util] implement css helper class #10057

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

scherler
Copy link
Contributor

@scherler scherler commented Dec 13, 2024

This PR will provide CSS helper classes to add borders. It is similar to https://weekly.ci.jenkins.io/design-library/Spacing/ but takes more the way https://tailwindcss.com/docs/border-width works e.g. jenkins-border-t-3 will create a top border of 3 px

follow up pr will be created for https://weekly.ci.jenkins.io/design-library

Testing done

After compile you can change the source code to

    <div class="jenkins-border-t-4">
      Hello border
    </div>
    <div class="jenkins-border-dashed jenkins-border-b jenkins-border-t jenkins-border-blue">
      Hello border
    </div>
    <div class="jenkins-border jenkins-border-green">
      Hello border
    </div>

image

Proposed changelog entries

CSS helper classes to add borders in the spirit of the jenkins-!-spacing

Proposed upgrade guidelines

N/A

Submitter checklist

Preview Give feedback

Desired reviewers

@mention

Before the changes are marked as ready-for-merge:

Maintainer checklist

Preview Give feedback

@alecharp alecharp added the web-ui The PR includes WebUI changes which may need special expertise label Dec 13, 2024
@krisstern krisstern requested a review from janfaracik December 13, 2024 16:33
@janfaracik
Copy link
Contributor

janfaracik commented Dec 13, 2024

Hey, thanks!

Is there a specific use case for these utils? Curious, wondering if it should be like the colours where we have a base palette but then a semantic set on top of them with specific meaning.

@scherler
Copy link
Contributor Author

Mainly I was looking into this because of yui-button has borders but jenkins-button does not, some of our designs need those borders. Regarding the semantics I can implement that

@janfaracik
Copy link
Contributor

Mainly I was looking into this because of yui-button has borders but jenkins-button does not, some of our designs need those borders. Regarding the semantics I can implement that

Ah gotcha. Is there any chance you could share a pic of what those buttons look like? Might be worth making a new type of button rather than a util library if its limited to that.

@scherler
Copy link
Contributor Author

yui-button-image
this image shows a typical use case.

@scherler
Copy link
Contributor Author

... to be honest (but that is me loving CSS util classes) I think the border helper is much more versatile and it is in the spirit of the spacing util classes

@scherler
Copy link
Contributor Author

scherler commented Dec 16, 2024

I have created a PoC

  • Analyze now = .jenkins-button--primary-inverted
  • Turn off = .jenkins-button--danger
  • Download = .jenkins-button--success

.jenkins-button--primary-inverted {
  color: var(--btn-secondary-color) !important;
  border: 2px solid var(--btn-secondary-border);
  border-radius: 4px;
  font-weight: bold;
  font-size: var(--font-size-xs);
  &::before {
      background: transparent !important;
    }
    
    &:not(:disabled) {
        &:hover {
            border: 2px solid var(--accent-color) !important;
            color: var(--accent-color) !important;
    }

    &:active,
    &:focus-visible {
      &::before {
        opacity: 0.8;
      }

      &::after {
        box-shadow: 0 0 0 0.33rem var(--accent-color);
        opacity: 0.2;
      }
    }
  }
}

.jenkins-button--danger {
  color: var(--white) !important;
  background-color: var(--destructive-color);
  border-color: var(--destructive-color);
  font-weight: bold;
  font-size: var(--font-size-xs);
  
  &:not(:disabled) {
    &:hover,
    &:focus {
        color: var(--white);
        background-color: var(--danger-hover);
        border-color: var(--danger-hover);
    }
  }
  
  &:focus {
    box-shadow: 0 0 0 0.2rem var(--danger-active);
  }
  
  &:active {
    color: var(--white);
    background-color: var(--danger-active);
    border-color: var(--danger-active);
  }
}

.jenkins-button--success {
  color: var(--white) !important;
  background-color: var(--success-color);
  border-color: var(--success-color);
  font-weight: bold;
  font-size: var(--font-size-xs);
  
  &:not(:disabled) {
    &:hover,
    &:focus {
        color: var(--white);
        background-color: var(--light-green);
        border-color: var(--light-green);
    }
  }
  
  &:focus {
    box-shadow: 0 0 0 0.2rem var(--light-green);
  }
  
  &:active {
    color: var(--white);
    background-color: var(--light-green);
    border-color: var(--light-green);
  }
}

@scherler
Copy link
Contributor Author

created an alternative PR #10061

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
web-ui The PR includes WebUI changes which may need special expertise
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants