search

momentum-design / momentum-ui

Momentum UI is a collection of UI libraries for implementing Momentum Design into web applications and websites.
https://momentum.design
MIT License
199 stars 204 forks source link

Button - button-color() mixin not producing valid CSS #981

Closed d-silvas closed 3 years ago

d-silvas commented 3 years ago

Issue Type

Bug Report

Component or Pattern Affected

Button

Expected Behavior

When using the button-color() mixin and not passing in a value for $border-color, I expect it to output valid CSS.

Current Behavior

The button-color() mixin produces the following output after a production build (when CSS files are minified):

border-color: var(--null,);

which is invalid CSS.

Possible Solution

Looks like one of the null values was not fixed in this PR: https://github.com/momentum-design/momentum-ui/pull/924. Raised PR https://github.com/momentum-design/momentum-ui/pull/982

Steps to Reproduce (for bugs)

  1. Use the button color mixin like follows: 
    
@import '~@momentum-ui/core/scss/components/button/mixins';

.my-class { @include button-color($border: 1px); }


then compile and minify the code.

## Context
<!--- How has this issue affected you? What are you trying to accomplish? -->
<!--- Providing context helps us come up with a solution that is most useful in the real world -->
We use @momentum-ui/core/ in our project.

## Your Environment
<!--- Include as many relevant details about the environment you experienced the bug in -->
* Library: <!-- Core, React, Angular, Icons, AngularJS--> Core
* Version used: <!-- i.e. 9.1.2 --> 19.15.3
* Browser Name and version: <!-- Chrome 71, Firefox 63, etc. --> Chrome 91
* Operating System and version: <!-- macOS 10.14.2 , Windows 10, Android, etc. -->Windows 10
* Link to your project:
d-silvas commented 3 years ago

Closing, will use

@include button-color(
    $border: 1px,
    $border-color: grey
)

in our project