feat: Screwdriver style mixin for Bootstrap buttons #1082
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Context
Create a style mixin for bootstrap buttons so that we can incrementally adopt a consistent standard on button styles on the new UI.
Objective
Setting the primary and outline button styles based on bootstrap ember buttons (i.e.,
BsButton
components).Primary button:
![Screenshot 2024-07-03 at 17-06-53 New Pipeline Events Show](https://private-user-images.githubusercontent.com/157658916/345651711-a62391de-d6fe-4593-95c7-05902d41eddd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg3ODgzMjYsIm5iZiI6MTczODc4ODAyNiwicGF0aCI6Ii8xNTc2NTg5MTYvMzQ1NjUxNzExLWE2MjM5MWRlLWQ2ZmUtNDU5My05NWM3LTA1OTAyZDQxZWRkZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwNVQyMDQwMjZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00ODhjZTNjNTAzY2Q4OGQ1ZTAzOTY4NzU2NmJlMTMwZjM2YWM0MDlhZTFiYmJiMTBjMWI1N2M1MjBmYjQ2NGE0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.hLwbEOF05X3_-U8CAmJWxcPfjCErQPfb0wsU_Le3c4Q)
![Screenshot 2024-07-03 at 17-07-07 New Pipeline Events Show](https://private-user-images.githubusercontent.com/157658916/345651720-8425deb0-aa55-49a1-932a-395c58790954.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg3ODgzMjYsIm5iZiI6MTczODc4ODAyNiwicGF0aCI6Ii8xNTc2NTg5MTYvMzQ1NjUxNzIwLTg0MjVkZWIwLWFhNTUtNDlhMS05MzJhLTM5NWM1ODc5MDk1NC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwNVQyMDQwMjZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hZDM4NDE0Njg2NzZiYzViMmRlNjAzNThlMGNlMjU0NTVhOGU1YzRlZGZlMzk2NjhiMTljYjYxN2E4OTRhNWFmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.0uGR1vhrzruRbVM7jYOve6p9xmHkVxouQN_Q7A8Nrkg)
![Screenshot 2024-07-03 at 17-08-15 New Pipeline Events Show](https://private-user-images.githubusercontent.com/157658916/345651723-85f4f400-4a98-4c63-b5fa-125a1bd6d910.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg3ODgzMjYsIm5iZiI6MTczODc4ODAyNiwicGF0aCI6Ii8xNTc2NTg5MTYvMzQ1NjUxNzIzLTg1ZjRmNDAwLTRhOTgtNGM2My1iNWZhLTEyNWExYmQ2ZDkxMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwNVQyMDQwMjZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODYwY2UxNjdlZGM3MjI0Zjc1NTYwNmQyODAyN2U4ZTM2ZGMzNzQ1Nzg2YjE3MjRiMGU3ODQ5Y2QzYmIzYjhmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.4JJUZH4cR9JNZyUHy6czSKVok0a42jEo2cpvY1M-Jz4)
![Screenshot 2024-07-03 at 17-08-24 New Pipeline Events Show](https://private-user-images.githubusercontent.com/157658916/345651730-856a9199-b6f6-4132-bffa-26ef9e8ca44a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg3ODgzMjYsIm5iZiI6MTczODc4ODAyNiwicGF0aCI6Ii8xNTc2NTg5MTYvMzQ1NjUxNzMwLTg1NmE5MTk5LWI2ZjYtNDEzMi1iZmZhLTI2ZWY5ZThjYTQ0YS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwNVQyMDQwMjZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yMTU0MmQ3MzQwN2E1MWE0NzQ5NzQ4N2ZiNWEwNTQxZmE4MTRlNWJhNjExYmRlMDcyOTBiODE2MzJkYThiMDMwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.iaBUmLbDttRmUE2lyvs8KN8OCbc2l_QEJORu-xYppGQ)
Primary button hover state:
Primary button as outline style (note that the button background color is actually transparent hence the slight grey color in the attached screenshot):
Primary button as outline hover state:
References
screwdriver-cd/screwdriver#3200
License
I confirm that this contribution is made under the terms of the license found in the root directory of this repository's source tree and that I have the authority necessary to make this contribution on behalf of its copyright owner.