fix: Replace index() sass function with map-get()

[remydenton]

Jira

http://vjira2:8080/browse/BDS-660 (follow up to #987).

Summary

Fixes a sass syntax error in introduced as part of the button radius updates in #987

Details

@mikemai2awesome pointed out that some button corners had lost their radius, e.g.

https://boltdesignsystem-tsabjixlew.now.sh/pattern-lab/?p=components-custom-element-buttons
https://boltdesignsystem-tsabjixlew.now.sh/pattern-lab/?p=components-video-show-meta-title-and-duration
https://boltdesignsystem-tsabjixlew.now.sh/pattern-lab/?p=components-video-injection-test

should be

I'm stumped as to how the existing syntax worked for other buttons as clearly map-get() is the correct sass function, not index().

How to test

View the URLs above in the build branch for this PR and confirm the corners have a 3px radius.

[bolt-bot]

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

• Branch link: https://fix-BDS-660-rounded-corner-sass-syntax.boltdesignsystem.com
• Permalink: https://boltdesignsystem-uwptmtqslf.now.sh

• Commit built: c696076
• Travis build

[mikemai2awesome]

Ok, good catch.

[sghoweri]

I’m confused. If grabbing a border radius design token needs to be more complex than a flat variable (ie Sass Map) why don’t we have a simple bolt-border-radius Sass function + mixin that grabs the correct value from our collection of values we store in a Sass Map?... basically, are we actually solving the right problem here?

I feel like this sort of gotcha could happen again elsewhere (if we aren’t super careful) if we don’t have a simple tool to help grab the correct value, consistently.

Thoughts?

CC @mikemai2awesome @danielamorse

[remydenton]

Do we have any examples of that elsewhere? I feel like it's already bordering on over-engineered. I really think if just using the right sass function is all that's really needed.

[mikemai2awesome]

@remydenton @sghoweri

I see, so we should be using map like this, create a function for it:

$bolt-breakpoints: (
  xxsmall:  320px,
  xsmall:   400px,
  small:    600px,
  medium:   800px,
  large:    1000px,
  xlarge:   1200px,
  xxlarge:  1400px,
  xxxlarge: 1920px
);

@function bolt-breakpoint($name) {
  @return map-get($bolt-breakpoints, $name);
}

[sghoweri]

@remydenton @sghoweri

I see, so we should be using map like this, create a function for it:

$bolt-breakpoints: (
  xxsmall:  320px,
  xsmall:   400px,
  small:    600px,
  medium:   800px,
  large:    1000px,
  xlarge:   1200px,
  xxlarge:  1400px,
  xxxlarge: 1920px
);

@function bolt-breakpoint($name) {
  @return map-get($bolt-breakpoints, $name);
}

Exactly. And I agree that anything more complicated than @mikemai2awesome’s breakpoint example is over-engineered.

That said, I’d also argue that consistent implementations are also important for us to keep in mind.

For example, are we consistently organizing our design decisions via Sass Maps, exporting that Sass Map data via JSON, and providing tools like a Sass functions and utility classes to help use those design decisions? 😉

[remydenton]

Sorry it took me two weeks to get to this 😥. Anyway, hopefully my last commit is satisfactory and we can move this along. Can you have a look @sghoweri?

[sghoweri]

Sorry it took me two weeks to get to this 😥. Anyway, hopefully my last commit is satisfactory and we can move this along. Can you have a look @sghoweri?

No worries @remydenton! That last update you pushed up looks good to me 🙂

If / when the need arises to move this helper function up a level to Bolt Core, most of the work is already done. Thanks!