[Media Object] Mixins not functioning in flex mode

[marcusmoore]

How can we reproduce this bug?

Assuming we are compiling our assets

1. Enable flex mode via instructions here
2. Create a new component using the SASS mixins (media-object-container and media-object-section())
3. Create page with an example code from docs and created component

What did you expect to happen?
The output from the example code and the component code would be the same.

What happened instead?
The required .main-section is overridden by the compiled media object mixin.

The

Test case:
Here is a gist with my code and some screenshots demonstrating the issue:

Desktop

Mobile

[marcusmoore]

I may have fixed part of the problem by adding flex: 1 1 0px; manually:

.MediaObject {
  @include media-object-container;


  &__section{
    @include media-object-section();

    &--main{
      // Pulled from _media_object.scss
      @if $global-flexbox {
          flex: 1 1 0px;
      }
    }
  }
}

[rafibomb]

I don't think there is any flex mode set up for this component. Should be straight forward to add it though.

[kball]

@rafibomb I see you added help wanted so going to assume assigning it to yourself doesn't mean you don't want someone to take it... @marcusmoore would you like to take a crack at a PR to address this?

[marcusmoore]

@kball Unfortunately I don't have the time right now. I can take a look in a few weeks if it's still open but I can't commit to it right now.

[Martskin]

I took a swing at refactoring the Media Object mixins here: #10679

[brettsmason]

This looks like the PR addressing this was successfully merged into core so closing this.