Bootstrap: (v4 beta) some changes are missing in the npm package

Created on 30 Aug 2017 · 13Comments · Source: twbs/bootstrap

I use npm install [email protected] to download Bootstrap into my local repo.
I found some changes are missing for some components eg:
_porgress.scss via npm install:

@keyframes progress-bar-stripes {
  from { background-position: $progress-height 0; }
  to { background-position: 0 0; }
}

.progress {
  display: flex;
  height: $progress-height;
  overflow: hidden; // force rounded corners by cropping it
  font-size: $progress-font-size;
  background-color: $progress-bg;
  @include border-radius($progress-border-radius);
}

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $progress-bar-color;
  background-color: $progress-bar-bg;
}

.progress-bar-striped {
  @include gradient-striped();
  background-size: $progress-height $progress-height;
}

.progress-bar-animated {
  animation: progress-bar-stripes $progress-bar-animation-timing;
}

_porgress.scss in the Bootstrap Repo v4.0.0-beta:
https://github.com/twbs/bootstrap/blob/v4.0.0-beta/scss/_progress.scss

@keyframes progress-bar-stripes {
  from { background-position: $progress-height 0; }
  to { background-position: 0 0; }
}

.progress {
  display: flex;
  overflow: hidden; // force rounded corners by cropping it
  font-size: $progress-font-size;
  line-height: $progress-height;
  text-align: center;
  background-color: $progress-bg;
  @include border-radius($progress-border-radius);
  @include box-shadow($progress-box-shadow);
}

.progress-bar {
  height: $progress-height;
  line-height: $progress-height;
  color: $progress-bar-color;
  background-color: $progress-bar-bg;
  @include transition($progress-bar-transition);
}

.progress-bar-striped {
  @include gradient-striped();
  background-size: $progress-height $progress-height;
}

.progress-bar-animated {
  animation: progress-bar-stripes $progress-bar-animation-timing;
}

You can find some styling and variables eg: line-height and @include transition($progress-bar-transition) are missing in the npm package.

Does anyone have the same issue with me?

confirmed meta v4

Source

changLiuUNSW

👍5

Most helpful comment

I imagine I just had the wrong git history locally. Beta 2 hopefully this week.

mdo on 3 Oct 2017

👍2

All 13 comments

Yep, I have the same issue.

danimalweb on 31 Aug 2017

Any updates on this?

changLiuUNSW on 3 Sep 2017

I have a similar issue with the _input-group.scss file.

In the Github repo:
https://github.com/twbs/bootstrap/blob/v4.0.0-beta/scss/_input-group.scss

.input-group-btn {
  position: relative;
  // Jankily prevent input button groups from wrapping with `white-space` and
  // `font-size` in combination with `inline-block` on buttons.
  font-size: 0;
  white-space: nowrap;

  // Negative margin for spacing, position for bringing hovered/focused/actived
  // element above the siblings.
  > .btn {
    position: relative;

    + .btn {
      margin-left: (-$input-btn-border-width);
    }

    // Bring the "active" button to the front
    @include hover-focus-active {
      z-index: 3;
    }
  }

  // Negative margin to only have a single, shared border between the two
  &:not(:last-child) {
    > .btn,
    > .btn-group {
      margin-right: (-$input-btn-border-width);
    }
  }
  &:not(:first-child) {
    > .btn,
    > .btn-group {
      z-index: 2;
      margin-left: (-$input-btn-border-width);
      // Because specificity
      @include hover-focus-active {
        z-index: 3;
      }
    }
  }
}

In the npm repo

.input-group-btn {
  position: relative;
  // Jankily prevent input button groups from wrapping with `white-space` and
  // `font-size` in combination with `inline-block` on buttons.
  font-size: 0;
  white-space: nowrap;

  // Negative margin for spacing, position for bringing hovered/focused/actived
  // element above the siblings.
  > .btn {
    position: relative;
    /*****************************************************************
    SHOULD NOT BE THERE
    ******************************************************************
    background-clip: padding-box;
    border: $input-btn-border-width solid $input-group-btn-border-color;
    *****************************************************************
    ******************************************************************/
    + .btn {
      margin-left: (-$input-btn-border-width);
    }

    // Bring the "active" button to the front
    @include hover-focus-active {
      z-index: 3;
    }
  }

  // Negative margin to only have a single, shared border between the two
  &:not(:last-child) {
    > .btn,
    > .btn-group {
      margin-right: (-$input-btn-border-width);
    }
  }
  &:not(:first-child) {
    > .btn,
    > .btn-group {
      z-index: 2;
      margin-left: (-$input-btn-border-width);
      // Because specificity
      @include hover-focus-active {
        z-index: 3;
      }
    }
  }
}

sbtnh on 6 Sep 2017

👍1

In the NPM repository, this commit does not yet exist:
https://github.com/twbs/bootstrap/commit/70ca04bbdca2c61679c8ce28a61021754bacffb9

diego-rlima on 9 Sep 2017

I was wondering why my colored input-group buttons had weird borders.
button
Would love an update as to when this will be fixed. Have a site launching soon that we want to use Beta on, but we're thinking about reverting back to Alpha 6.

hmhrex on 18 Sep 2017

👍1

Actually there is a lot differing. Here is the full list of scss files:

I generated it this way:

npm install [email protected]
git clone https://github.com/twbs/bootstrap.git
cd bootstrap
git checkout v4.0.0-beta
diff -qr scss ../node_modules/bootstrap/scss

Output

Files node_modules/bootstrap/scss/_breadcrumb.scss and bootstrap/scss/_breadcrumb.scss differ
Files node_modules/bootstrap/scss/_custom-forms.scss and bootstrap/scss/_custom-forms.scss differ
Files node_modules/bootstrap/scss/_forms.scss and bootstrap/scss/_forms.scss differ
Files node_modules/bootstrap/scss/_input-group.scss and bootstrap/scss/_input-group.scss differ
Files node_modules/bootstrap/scss/_modal.scss and bootstrap/scss/_modal.scss differ
Files node_modules/bootstrap/scss/_progress.scss and bootstrap/scss/_progress.scss differ
Files node_modules/bootstrap/scss/_reboot.scss and bootstrap/scss/_reboot.scss differ
Files node_modules/bootstrap/scss/_variables.scss and bootstrap/scss/_variables.scss differ
Files node_modules/bootstrap/scss/utilities/_borders.scss and bootstrap/scss/utilities/_borders.scss differ
Files node_modules/bootstrap/scss/utilities/_position.scss and bootstrap/scss/utilities/_position.scss differ
Files node_modules/bootstrap/scss/utilities/_spacing.scss and bootstrap/scss/utilities/_spacing.scss differ
Files node_modules/bootstrap/scss/utilities/_text.scss and bootstrap/scss/utilities/_text.scss differ

It would be really great if this is fixed soon. Especially the fact that the docs are not matching the deployed artifacts is quite unfortunate.