Support row_gutter in IE

[remydenton]

Jira

http://vjira2:8080/browse/BDS-719

Summary

Adds support for the grid component's row_gutter parameter in IE 11.
Adds demos for grid component row_gutter and vinset

Details

Notes:

• I did not add CSS for row_gutter=none since it works by default.

Questions that should be resolved before merging:

• Is it correct to use the $bolt-spacing-values variable for the scss loop?
• vinset doesn't appear to work as I would have expected in the examples (pattern-lab/?p=components-grid-row-vinset-variations). Namely, It only adds an inset to the bottom of the grid. Am I doing something wrong or is this a separate bug?

How to test

• On the this branch, go to /pattern-lab/?p=components-grid-row-gutter-variations
• Confirm that the row gutter have parity between IE-11 and other modern browsers

[bolt-bot]

⚡ PR built on Travis and deployed a now preview here:

• Branch link: https://feature-BDS-719-grid-row-spacing.boltdesignsystem.com
• Permalink: https://boltdesignsystem-bgrxmsmxvp.now.sh

• Commit built: 235b44a
• Travis build

[sghoweri]

vinset doesn't appear to work as I would have expected in the examples (pattern-lab/?p=components-grid-row-vinset-variations). Namely, It only adds an inset to the bottom of the grid. Am I doing something wrong or is this a separate bug?

@remydenton try updating your PL examples to have each of your <bolt-grid-item>'s have a row-start of 2 instead of 1

[sghoweri]

Is it correct to use the $bolt-spacing-values variable for the scss loop?

@remydenton since we need to loop through all the spacing size options and the values of those options are 1:1 here, I'd say yes it is correct.

If we needed to add or adjust which values are in this Sass map then instead I'd suggest creating a new local variable that takes the global spacing sizes and changes things out as needed.

Make sense?

[sghoweri]

@remydenton check out my comments and make sure this all makes sense and answers your couple points you brought up.

This looks good to me otherwise!

[remydenton]

@sghoweri, thanks for the responses. I'm clear on everything except for the row-start of 2 part.

Are you saying that instead of the rows being 1, 2, and 2 in the demos, they should be 2, 3, and 4? And any usage of grid that uses inset needs to know that it shouldn't use row 1 (while any usage of grid that does not have inset should use row 1)?

I'm hoping I'm just misunderstanding-- if that's true, it feels quite complex.

[remydenton]

@sghoweri, please have a look at my most recent commit.

The part that doesn't feel right is that a grid with vinset=none actually needs to have different row numbering (i.e. starting at 1 for the first row) than grids with a specified vinset (i.e. starting at 2). Thoughts?