feat: add new variants to Tabs component and fix nested links (#2222)

* fix: refactoring Tabs component * refactor: refactoring after review * feat: added styles for tab pills * refactor: style refactoring * refactor: transfer Tabs from react-bootstrap * refactor: tabs refactoring * refactor: deleted BaseTabs * refactor: code refactoring * refactor: added tests * refactor: refactoring after review * refactor: refactoring styles and code
openedx · May 17, 2023 · 6118e2c · 6118e2c
1 parent d40a284
commit 6118e2c
Show file tree

Hide file tree

Showing 9 changed files with 356 additions and 52 deletions.
diff --git a/src/Nav/Nav.scss b/src/Nav/Nav.scss
@@ -1,4 +1,5 @@
 @import "variables";
+@import "mixins";
 
 // Base class
 //
@@ -37,23 +38,126 @@
 // Tabs
 //
 
+.pgn__tabs {
+  &.nav-pills .nav-link {
+    border: $nav-pills-link-border-width solid $nav-pills-link-border-color;
+
+    &:focus {
+      @include nav-tabs-link-focus($nav-tabs-link-focus-border-color);
+    }
+
+    &:hover {
+      border-color: $nav-tabs-link-hover-border-color;
+      background-color: $nav-tabs-link-hover-bg;
+    }
+
+    &.active,
+    .nav-item.show .nav-link {
+      color: $nav-pills-link-active-color;
+      background-color: $nav-pills-link-active-bg;
+      border-color: $nav-pills-link-active-bg;
+
+      &:focus {
+        @include nav-tabs-link-focus($nav-tabs-link-focus-border-color);
+      }
+    }
+  }
+
+  &.nav-inverse-pills {
+    + .tab-content {
+      color: $nav-inverse-pills-tab-content-color;
+    }
+
+    .nav-link {
+      color: $nav-inverse-pills-link-color;
+      border: $nav-inverse-pills-link-border-width solid $nav-inverse-pills-link-border-color;
+
+      &:hover {
+        background-color: $nav-inverse-pills-link-hover-bg;
+      }
+
+      &:focus {
+        @include nav-tabs-link-focus($nav-inverse-pills-link-focus-color);
+      }
+
+      &.disabled {
+        opacity: .5;
+      }
+    }
+
+    .nav-link.active,
+    .nav-item.show .nav-link {
+      background-color: $nav-inverse-pills-link-active-bg;
+      color: $nav-inverse-pills-link-active-color;
+      border-color: $nav-inverse-pills-link-active-border-color;
+
+      &:hover {
+        background-color: $nav-inverse-pills-link-active-hover-bg;
+        color: $nav-inverse-pills-link-active-hover-color;
+        border-color: $nav-inverse-pills-link-active-hover-border-color;
+      }
+
+      &:focus:hover {
+        background-color: $nav-inverse-pills-link-active-focus-hover-bg;
+        color: $nav-inverse-pills-link-active-focus-color;
+        border-color: $nav-inverse-pills-link-active-focus-border-color;
+      }
+    }
+  }
+
+  &.nav-inverse-tabs {
+    + .tab-content {
+      color: $nav-inverse-tabs-tab-content-color;
+    }
+
+    .nav-link {
+      color: $nav-inverse-tabs-link-color;
+      border-bottom: $nav-tabs-border-width solid $nav-inverse-tabs-link-border-bottom-color;
+
+      &:hover {
+        background-color: $nav-inverse-tabs-link-hover-bg;
+      }
+
+      &:focus {
+        @include nav-tabs-link-focus($nav-inverse-tabs-link-focus-bg);
+      }
+
+      &.disabled {
+        opacity: .5;
+      }
+    }
+
+    .nav-link.active,
+    .nav-item.show .nav-link {
+      border-bottom: $nav-inverse-tabs-link-active-border-bottom-width solid $nav-inverse-tabs-link-active-border-color;
+      background-color: $nav-inverse-tabs-link-active-bg;
+
+      &:hover {
+        background-color: $nav-inverse-tabs-link-active-hover-bg;
+      }
+    }
+  }
+}
+
 .nav-tabs {
   border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 
   .nav-link {
-    margin-bottom: -$nav-tabs-border-width;
-    border-top: $nav-tabs-border-width solid transparent;
-    border-bottom: $nav-tabs-border-width solid transparent;
-    border-left: none;
-    border-right: none;
+    margin-bottom: calc(#{$nav-tabs-border-width} * -1);
+    border: $nav-tabs-border-width solid $nav-tabs-link-border-color;
+    border-bottom-width: $nav-tabs-link-border-bottom-width;
 
     @include border-top-radius($nav-tabs-border-radius);
 
-    @include hover-focus {
+    &:hover {
       border-color: $nav-tabs-link-hover-border-color;
       background-color: $nav-tabs-link-hover-bg;
     }
 
+    &:focus {
+      @include nav-tabs-link-focus($nav-tabs-link-focus-border-color);
+    }
+
     &.disabled {
       color: $nav-link-disabled-color;
       background-color: transparent;
@@ -66,11 +170,19 @@
     color: $nav-tabs-link-active-color;
     background-color: $nav-tabs-link-active-bg;
     border-color: $nav-tabs-link-active-border-color;
+
+    &:hover {
+      background-color: $nav-tabs-link-hover-bg;
+    }
+
+    &:focus {
+      @include nav-tabs-link-focus($nav-tabs-link-focus-border-color);
+    }
   }
 
   .dropdown-menu {
     // Make dropdown border overlap tab border
-    margin-top: -$nav-tabs-border-width;
+    margin-top: calc(#{$nav-tabs-border-width} * -1);
 
     // Remove the top rounded corners here since there is a hard edge above the menu
     @include border-top-radius(0);

diff --git a/src/Nav/_mixins.scss b/src/Nav/_mixins.scss
@@ -0,0 +1,16 @@
+@mixin nav-tabs-link-focus($border-color) {
+  position: relative;
+  outline: 0;
+  z-index: map-get($map: $indexes, $key: 1);
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: calc(#{$nav-tabs-link-distance-to-border} * -1);
+    right: calc(#{$nav-tabs-link-distance-to-border} * -1);
+    bottom: calc(#{$nav-tabs-link-distance-to-border} * -1);
+    left: calc(#{$nav-tabs-link-distance-to-border} * -1);
+    border: solid $nav-tabs-border-width $border-color;
+    border-radius: $nav-tabs-border-radius;
+  }
+}
diff --git a/src/Nav/_variables.scss b/src/Nav/_variables.scss
@@ -1,23 +1,52 @@
 // Navs
 
-$nav-link-padding-y:                .5rem !default;
-$nav-link-padding-x:                1rem !default;
-$nav-link-color:                    $gray-700 !default;
-$nav-link-disabled-color:           $gray-300 !default;
-$nav-link-font-weight:              500 !default;
+$nav-link-padding-y:                               .5rem !default;
+$nav-link-padding-x:                               1rem !default;
+$nav-link-color:                                   $gray-700 !default;
+$nav-link-disabled-color:                          $gray-300 !default;
+$nav-link-font-weight:                             500 !default;
 
-$nav-tabs-border-color:             $light-400 !default;
-$nav-tabs-border-width:             2px !default;
-$nav-tabs-border-radius:            0 !default;
-$nav-tabs-link-hover-border-color:  transparent transparent $nav-tabs-border-color !default;
-$nav-tabs-link-hover-bg:            $light-400 !default;
-$nav-tabs-link-active-color:        $primary-500 !default;
-$nav-tabs-link-active-bg:           $body-bg !default;
-$nav-tabs-link-active-border-color: transparent transparent $primary-500 !default;
+$nav-tabs-border-color:                            $light-400 !default;
+$nav-tabs-border-width:                            2px !default;
+$nav-tabs-border-radius:                           0 !default;
+$nav-tabs-link-hover-border-color:                 transparent transparent $nav-tabs-border-color !default;
+$nav-tabs-link-hover-bg:                           $light-400 !default;
+$nav-tabs-link-active-color:                       $primary-500 !default;
+$nav-tabs-link-active-bg:                          transparent !default;
+$nav-tabs-link-active-border-color:                transparent transparent $primary-500 !default;
+$nav-tabs-link-focus-border-color:                 $nav-tabs-link-active-color !default;
+$nav-tabs-link-distance-to-border:                 .313rem !default;
+$nav-tabs-link-border-bottom-width:                .188rem !default;
+$nav-tabs-link-border-color:                       transparent !default;
 
-$nav-pills-border-radius:           $border-radius !default;
-$nav-pills-link-active-color:       $component-active-color !default;
-$nav-pills-link-active-bg:          $component-active-bg !default;
+$nav-pills-border-radius:                          $border-radius !default;
+$nav-pills-link-active-color:                      $component-active-color !default;
+$nav-pills-link-active-bg:                         $component-active-bg !default;
+$nav-pills-link-border-color:                      $nav-tabs-border-color !default;
+$nav-pills-link-border-width:                      1px !default;
 
-$nav-divider-color:                 theme-color("gray", "background") !default;
-$nav-divider-margin-y:              calc($spacer / 2) !default;
+$nav-inverse-pills-link-color:                     $white !default;
+$nav-inverse-pills-link-border-color:              $dark-300 !default;
+$nav-inverse-pills-link-hover-bg:                  $nav-inverse-pills-link-border-color !default;
+$nav-inverse-pills-link-focus-color:               $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-bg:                 $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-color:              $primary-500 !default;
+$nav-inverse-pills-link-active-border-color:       $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-hover-bg:           $nav-inverse-pills-link-border-color !default;
+$nav-inverse-pills-link-active-hover-color:        $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-hover-border-color: $nav-inverse-pills-link-border-color !default;
+$nav-inverse-pills-link-active-focus-hover-bg:     $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-focus-color:        $nav-inverse-pills-link-active-color !default;
+$nav-inverse-pills-link-active-focus-border-color: $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-border-width:              $nav-pills-link-border-width !default;
+$nav-inverse-pills-tab-content-color:              $nav-inverse-pills-link-color !default;
+
+$nav-inverse-tabs-link-color:                      $white !default;
+$nav-inverse-tabs-link-border-bottom-color:        $dark-300 !default;
+$nav-inverse-tabs-link-hover-bg:                   $nav-inverse-tabs-link-border-bottom-color !default;
+$nav-inverse-tabs-link-active-hover-bg:            transparent !default;
+$nav-inverse-tabs-link-focus-bg:                   $nav-inverse-tabs-link-color !default;
+$nav-inverse-tabs-link-active-border-color:        $nav-inverse-tabs-link-color !default;
+$nav-inverse-tabs-link-active-bg:                  $nav-inverse-tabs-link-hover-bg !default;
+$nav-inverse-tabs-link-active-border-bottom-width: $nav-tabs-link-border-bottom-width !default;
+$nav-inverse-tabs-tab-content-color:               $nav-inverse-tabs-link-color !default;
diff --git a/src/Tabs/README.md b/src/Tabs/README.md
@@ -23,7 +23,11 @@ notes: |
 ## Uncontrolled usage
 
 ```jsx live
-<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
+<Tabs
+  variant="tabs"
+  defaultActiveKey="profile"
+  id="uncontrolled-tab-example"
+>
   <Tab eventKey="home" title="Home">
     Hello I am the first panel.
   </Tab>
@@ -102,6 +106,50 @@ notes: |
 </Tabs>
 ```
 
+## Inverse-Pills usage
+
+```jsx live
+<Stack className="bg-dark-700 p-4">
+  <Tabs
+    variant="inverse-pills"
+    defaultActiveKey="profile"
+    id="uncontrolled-pills-tab-example"
+  >
+    <Tab eventKey="home" title="Home">
+      Hello I am the first panel.
+    </Tab>
+    <Tab eventKey="profile" title="Profile">
+      Hello I am the second panel.
+    </Tab>
+    <Tab eventKey="contact" title="Contact" disabled>
+      Hello I am third first panel.
+    </Tab>
+  </Tabs>
+</Stack>
+```
+
+## Inverse Tabs usage
+
+```jsx live
+<Stack className="bg-dark-700 p-4">
+  <Tabs
+    variant="inverse-tabs"
+    defaultActiveKey="profile"
+    id="uncontrolled-pills-tab-example"
+  >
+    <Tab eventKey="home" title="Home">
+      Hello I am the first panel.
+    </Tab>
+    <Tab eventKey="profile" title="Profile">
+      Hello I am the second panel.
+    </Tab>
+    <Tab eventKey="contact" title="Contact" disabled>
+      Hello I am third first panel.
+    </Tab>
+  </Tabs>
+</Stack>
+```
+
 ## With notification
 
 ```jsx live
@@ -140,7 +188,11 @@ notes: |
 ### Responsive support
 
 ```jsx live
-<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
+<Tabs
+  variant="tabs"
+  defaultActiveKey="profile"
+  id="uncontrolled-tab-example"
+>
   <Tab eventKey="home" title="Home">
     Hello I am the first panel.
   </Tab>