Problem/Motivation

We need those utilities for progress bootstrap 4 components, like progress component.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Comments

CTaPByK created an issue. See original summary.

njagojevic’s picture

Assigned: Unassigned » njagojevic
CTaPByK’s picture

Title: Import utility classes for background, spacing and sizing in BS Bootstrap theme » Import progress component and utility classes for background and sizing BS Bootstrap theme
Issue summary: View changes
pivica’s picture

CTaPByK’s picture

Status: Active » Needs review
StatusFileSize
new4.1 KB
new22.87 KB

I play last night a bit with this and here is the patch. @njagojevic can fix things if needed.

This screenshot is for demo content, patch: https://www.drupal.org/node/2875260#comment-12110557

njagojevic’s picture

StatusFileSize
new25.45 KB
new28.85 KB
new7.79 KB

Added some margin between bars:

diff --git a/themes/bs_bootstrap/js/bootstrap/tether.min.js b/themes/bs_bootstrap/js/bootstrap/tether.min.js
deleted file mode 100644
index d16b9b1..0000000
--- a/themes/bs_bootstrap/js/bootstrap/tether.min.js
+++ /dev/null

IMO this occurs because not all gulp tusks were run with previous commit.

njagojevic’s picture

Assigned: njagojevic » Unassigned
pivica’s picture

Status: Needs review » Needs work
  1. +++ b/themes/bs_bootstrap/bs_bootstrap.libraries.yml
    @@ -12,6 +12,7 @@ global-styling:
    +      css/components/progress.css: {}
    

    Why not make a new library from this?

  2. diff --git a/themes/bs_bootstrap/js/bootstrap/tether.min.js b/themes/bs_bootstrap/js/bootstrap/tether.min.js
    deleted file mode 100644
    

    Was this removed on puprose or by accident?

  3. +++ b/themes/bs_bootstrap/sass/base/util.scss
    @@ -1,3 +1,5 @@
    +@import "bootstrap/scss/utilities/background";
    +@import "bootstrap/scss/utilities/sizing";
    

    Not too happy that we are adding this globally. Do we need to use background and sizing utilities for something else or only for progress component for now? If it's only for progress component then it's better to move this two utilities in progress SASS for now.

  4. +++ b/themes/bs_bootstrap/sass/components/progress.scss
    @@ -0,0 +1,6 @@
    +  margin-bottom: 1rem;
    

    We should use $spacer-y variable here. Also, this could go to partial so it's easier for an override in child themes when needed - similarly how we are defining other partials.

njagojevic’s picture

Status: Needs work » Needs review
StatusFileSize
new29.92 KB
new3.74 KB

Applied all suggestions from #8 comment.

pivica’s picture

Status: Needs review » Needs work
+++ b/themes/bs_bootstrap/sass/components/progress.scss
@@ -0,0 +1,5 @@
+@import "bootstrap/scss/utilities/background";
+@import "bootstrap/scss/utilities/sizing";

Are we adding background and sizing here because it's needed for progress component or we are adding it here because we need it for p_c_b implementation. If this is not dependency on progress component and if we are doing it because of p_c_b implementation then i think we should move this two to separate utils libraries probably, maybe?

We could add it to bs_bootstrap/util, create new lib or add it to two separate libs, not sure. Also, there is sass/base/util.scss here for global util classes... damn it ;)

At least let us figure the facts first - is progress dependent on this two utils or not?

Thoughts?

njagojevic’s picture

We need those utilities for p_c_b implementation, not only for progress component.

Progress in p_c_b is implemented by using this two utils.

IMO they should go to global util class.

pivica’s picture

Okey lets then not complicate stuff too much for now and let us just add it to sass/base/util.scss i guess with a comment note why these two sass files are included.

Later when we switch to libraries support we can refactor this.

Sounds OK?

njagojevic’s picture

Status: Needs work » Needs review
StatusFileSize
new4.41 KB
new4.61 KB

Sounds OK to me. Moved these utilities to sass/base/util.scss.

pivica’s picture

Status: Needs review » Needs work

Nice, one last minor thing and then we are good to go ;)

+++ b/themes/bs_bootstrap/sass/base/util.scss
@@ -1,3 +1,8 @@
+// These two files are included to support only progress Bootstrap component for now
+// @todo With moving assets to libraries (https://www.drupal.org/node/2890739) this should be refactored

80 char limit for comments and dot on the end of a sentence is missing for both lines.

njagojevic’s picture

Status: Needs work » Needs review
StatusFileSize
new819 bytes
new4.62 KB

Fixed :-)

  • pivica committed 88afd73 on 8.x-1.x authored by njagojevic
    Issue #2882813 by njagojevic, CTaPByK, pivica: Import progress component...
pivica’s picture

Status: Needs review » Fixed

Thx, committed.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.