Tyk ui v2 updates (#150)

* tyk ui v2 fixes * tyk ui 2.0.2
TykTechnologies · Aug 11, 2020 · 39c0b56 · 39c0b56
1 parent 0c610e6
commit 39c0b56
Show file tree

Hide file tree

Showing 28 changed files with 79 additions and 47 deletions.
diff --git a/lib/index.css b/lib/index.css
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.js.map b/lib/index.js.map
diff --git a/lib/sass/common/sass/form.scss b/lib/sass/common/sass/form.scss
@@ -201,9 +201,15 @@
     color: $form-control-placeholder-color;
   }
 
-  &:focus {
+  &:focus,
+  &:active {
     outline: none;
-    border: $form-control-border-focus;
+    border: $form-control-border-focus !important;
+
+    + .tyk-input-group__addon {
+      border: $form-control-border-focus !important;
+      border-left: none !important;
+    }
   }
 
   &__help-block {
@@ -233,7 +239,7 @@ select {
 
   > button {
     margin-left: 10px;
-    margin-bottom: map-get($spacing, 'md');
+    margin-bottom: map-get($spacing, 'base');
   }
 }
 
@@ -278,6 +284,6 @@ select {
 
   > .tyk-button {
     margin-left: map-get($spacing, 'md');
-    margin-bottom: map-get($spacing, 'md');
+    margin-bottom: map-get($spacing, 'base');
   }
 }
diff --git a/lib/sass/common/sass/typography.scss b/lib/sass/common/sass/typography.scss
@@ -48,7 +48,7 @@ strong {
   font-family: $font-family-bold;
 }
 
-a {
+a:not(.tyk-button) {
   cursor: pointer;
   color: $text-color;
   font-family: $font-family-regular;
@@ -60,6 +60,10 @@ a {
   + a {
     margin-left: 5px;
   }
+
+  i {
+    font-size: 9px
+  }
 }
 
 p,
@@ -113,13 +117,17 @@ label {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  &--underline {
+    text-decoration: underline;
+  }
 }
 
 td.text-ellipsis {
   max-width: 250px;
 }
 
 .section-title {
+  font-family: $headings-font-family-bold;
   margin-bottom: 5px;
 
   .tyk-icon {

diff --git a/lib/sass/common/sass/variables.scss b/lib/sass/common/sass/variables.scss
@@ -174,7 +174,7 @@ $form-control-disabled-border: $general-border-width solid theme-color('default'
 $form-control-placeholder-color: #A2A2CC !default;
 $form-control-disabled-background-color: theme-color('default', 'light') !default;
 $form-control-disabled-color: $text-color !default;
-$form-control-border-focus: 2px solid theme-color('default', 'base') !default;
+$form-control-border-focus: 2px solid theme-color('success', 'base') !default;
 $form-control-placeholder-font-family: $font-family-medium !default;
 $form-control-error-colour: theme-color('danger', 'dark') !default;
 $form-default-color: theme-color('default', 'light') !default;

diff --git a/lib/sass/components/NavBar/sass/variables.scss b/lib/sass/components/NavBar/sass/variables.scss
@@ -1,5 +1,5 @@
 $nav-bar-background-color: white !default;
-$nav-bar-text-color: $text-color !default;
+$nav-bar-text-color: theme-color('default', 'base') !default;
 $nav-bar-padding-left: 265px !default;
 $nav-bar-animate-left: 245px !default;
 $nav-bar-top-padding: map-get($spacing, 'sm') !default;

diff --git a/lib/sass/components/Panel/sass/Panel.scss b/lib/sass/components/Panel/sass/Panel.scss
@@ -47,7 +47,7 @@
       padding: $padding-y-blank-panel-header $padding-x-panel-header;
       @include panel-variant(
         white,
-        $text-color
+        theme-color('default', 'base')
       );
     }
   }

diff --git a/lib/sass/components/Pill/sass/Pill.scss b/lib/sass/components/Pill/sass/Pill.scss
@@ -3,6 +3,7 @@
   border-radius: $general-border-radius;
   display: inline-flex;
   font-size: text-scale('xs');
+  line-height: 19px;
   margin: $pill-margin;
   padding: 6px map-get($spacing, 'base');
   font-family: $font-family-medium;

diff --git a/lib/sass/components/Table/sass/Table.scss b/lib/sass/components/Table/sass/Table.scss
@@ -47,7 +47,7 @@
     }
 
     > tbody tr:hover {
-      background: theme-color('background', 'light');
+      background: rgba(theme-color('background', 'light'), 0.4);
     }
 
     > tbody td {
@@ -141,7 +141,7 @@
 }
 
 .header-sort {
-  padding-left: map-get($spacing, 'sm');
+  padding-left: 3px;
   padding-top: map-get($spacing, 'xs');
   vertical-align: middle;
 }

diff --git a/lib/sass/components/Table/sass/variables.scss b/lib/sass/components/Table/sass/variables.scss
@@ -1,5 +1,5 @@
-$table-th-padding: map-get($spacing, 'sm') !default;
-$table-td-padding-y: map-get($spacing, 'sm') !default;
-$table-td-padding-x: map-get($spacing, 'xs') !default;
-$table-first-last-padding: 25px !default;
+$table-th-padding: map-get($spacing, 'base') map-get($spacing, 'sm') !default;
+$table-td-padding-y: map-get($spacing, 'xs') !default;
+$table-td-padding-x: map-get($spacing, 'sm') !default;
+$table-first-last-padding: 20px !default;
 $table-pagination-padding: map-get($spacing, 'md') 25px !default;
diff --git a/lib/sass/components/Toggle/sass/Toggle.scss b/lib/sass/components/Toggle/sass/Toggle.scss
@@ -306,8 +306,8 @@
     @include button-size(
       calc(#{$padding-y-button-sm} + 2px),
       calc(#{$padding-x-button-sm} + 2px),
-      text-scale('sm'),
-      $line-height-button-sm,
+      text-scale('xs'),
+      line-height('xs'),
       $button-border-radius
     )
   }

diff --git a/lib/tyk-ui.css b/lib/tyk-ui.css
diff --git a/lib/tyk-ui.js b/lib/tyk-ui.js
diff --git a/lib/tyk-ui.js.map b/lib/tyk-ui.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Tyk UI - ui reusable components",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/common/sass/form.scss b/src/common/sass/form.scss
@@ -201,9 +201,15 @@
     color: $form-control-placeholder-color;
   }
 
-  &:focus {
+  &:focus,
+  &:active {
     outline: none;
-    border: $form-control-border-focus;
+    border: $form-control-border-focus !important;
+
+    + .tyk-input-group__addon {
+      border: $form-control-border-focus !important;
+      border-left: none !important;
+    }
   }
 
   &__help-block {
@@ -233,7 +239,7 @@ select {
 
   > button {
     margin-left: 10px;
-    margin-bottom: map-get($spacing, 'md');
+    margin-bottom: map-get($spacing, 'base');
   }
 }
 
@@ -278,6 +284,6 @@ select {
 
   > .tyk-button {
     margin-left: map-get($spacing, 'md');
-    margin-bottom: map-get($spacing, 'md');
+    margin-bottom: map-get($spacing, 'base');
   }
 }
diff --git a/src/common/sass/typography.scss b/src/common/sass/typography.scss
@@ -48,7 +48,7 @@ strong {
   font-family: $font-family-bold;
 }
 
-a {
+a:not(.tyk-button) {
   cursor: pointer;
   color: $text-color;
   font-family: $font-family-regular;
@@ -60,6 +60,10 @@ a {
   + a {
     margin-left: 5px;
   }
+
+  i {
+    font-size: 9px
+  }
 }
 
 p,
@@ -113,13 +117,17 @@ label {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  &--underline {
+    text-decoration: underline;
+  }
 }
 
 td.text-ellipsis {
   max-width: 250px;
 }
 
 .section-title {
+  font-family: $headings-font-family-bold;
   margin-bottom: 5px;
 
   .tyk-icon {

diff --git a/src/common/sass/variables.scss b/src/common/sass/variables.scss
@@ -174,7 +174,7 @@ $form-control-disabled-border: $general-border-width solid theme-color('default'
 $form-control-placeholder-color: #A2A2CC !default;
 $form-control-disabled-background-color: theme-color('default', 'light') !default;
 $form-control-disabled-color: $text-color !default;
-$form-control-border-focus: 2px solid theme-color('default', 'base') !default;
+$form-control-border-focus: 2px solid theme-color('success', 'base') !default;
 $form-control-placeholder-font-family: $font-family-medium !default;
 $form-control-error-colour: theme-color('danger', 'dark') !default;
 $form-default-color: theme-color('default', 'light') !default;

diff --git a/src/components/Button/js/Button.js b/src/components/Button/js/Button.js
@@ -11,6 +11,7 @@ const Button = React.forwardRef((props, ref) => {
     customButton,
     children,
     iconType,
+    iconFamily,
     iconPosition,
     iconOnly,
     id,
@@ -54,7 +55,7 @@ const Button = React.forwardRef((props, ref) => {
 
     return (
       (iconType && iPos === position)
-        ? <Icon type={iconType} />
+        ? <Icon family={iconFamily} type={iconType} />
         : null
     );
   };
@@ -148,6 +149,7 @@ Button.propTypes = {
   id: PropTypes.string,
   href: PropTypes.string,
   iconPosition: PropTypes.string, // left or right
+  iconFamily: PropTypes.string,
   iconOnly: PropTypes.bool,
   iconType: PropTypes.string,
   noStyle: PropTypes.bool,

diff --git a/src/components/NavBar/js/NavBar.js b/src/components/NavBar/js/NavBar.js
@@ -54,12 +54,12 @@ export default class NavBar extends PureComponent {
                   <h1>{ title }</h1>
                   {
                     subtitle
-                      ? <p className="font-family-regular">{subtitle}</p>
+                      ? <p className="font-family-medium">{subtitle}</p>
                       : null
                   }
                 </div>
               )
-              : null
+              : subtitle && <p className="font-family-medium">{subtitle}</p>
           }
           <div className="tyk-nav-bar__container">
             {

diff --git a/src/components/NavBar/sass/variables.scss b/src/components/NavBar/sass/variables.scss
@@ -1,5 +1,5 @@
 $nav-bar-background-color: white !default;
-$nav-bar-text-color: $text-color !default;
+$nav-bar-text-color: theme-color('default', 'base') !default;
 $nav-bar-padding-left: 265px !default;
 $nav-bar-animate-left: 245px !default;
 $nav-bar-top-padding: map-get($spacing, 'sm') !default;

diff --git a/src/components/Panel/sass/Panel.scss b/src/components/Panel/sass/Panel.scss
@@ -47,7 +47,7 @@
       padding: $padding-y-blank-panel-header $padding-x-panel-header;
       @include panel-variant(
         white,
-        $text-color
+        theme-color('default', 'base')
       );
     }
   }

diff --git a/src/components/Pill/sass/Pill.scss b/src/components/Pill/sass/Pill.scss
@@ -3,6 +3,7 @@
   border-radius: $general-border-radius;
   display: inline-flex;
   font-size: text-scale('xs');
+  line-height: 19px;
   margin: $pill-margin;
   padding: 6px map-get($spacing, 'base');
   font-family: $font-family-medium;

diff --git a/src/components/Table/sass/Table.scss b/src/components/Table/sass/Table.scss
@@ -47,7 +47,7 @@
     }
 
     > tbody tr:hover {
-      background: theme-color('background', 'light');
+      background: rgba(theme-color('background', 'light'), 0.4);
     }
 
     > tbody td {
@@ -141,7 +141,7 @@
 }
 
 .header-sort {
-  padding-left: map-get($spacing, 'sm');
+  padding-left: 3px;
   padding-top: map-get($spacing, 'xs');
   vertical-align: middle;
 }

diff --git a/src/components/Table/sass/variables.scss b/src/components/Table/sass/variables.scss
@@ -1,5 +1,5 @@
-$table-th-padding: map-get($spacing, 'sm') !default;
-$table-td-padding-y: map-get($spacing, 'sm') !default;
-$table-td-padding-x: map-get($spacing, 'xs') !default;
-$table-first-last-padding: 25px !default;
+$table-th-padding: map-get($spacing, 'base') map-get($spacing, 'sm') !default;
+$table-td-padding-y: map-get($spacing, 'xs') !default;
+$table-td-padding-x: map-get($spacing, 'sm') !default;
+$table-first-last-padding: 20px !default;
 $table-pagination-padding: map-get($spacing, 'md') 25px !default;
diff --git a/src/components/Toggle/index.js b/src/components/Toggle/index.js
@@ -328,17 +328,17 @@ export default class TestToggle extends Component {
               <Toggle.Item
                 label="short"
                 name="option"
-                value="option1"
+                value="FE team 1"
               />
               <Toggle.Item
                 label="medium name"
-                name="option"
-                value="option2"
+                name="FE team "
+                value="FE team 2"
               />
               <Toggle.Item
                 label="very long long name"
-                name="option"
-                value="option3"
+                name="FE team "
+                value="FE team 3s"
               />
             </Toggle>
             <br />

diff --git a/src/components/Toggle/sass/Toggle.scss b/src/components/Toggle/sass/Toggle.scss
@@ -306,8 +306,8 @@
     @include button-size(
       calc(#{$padding-y-button-sm} + 2px),
       calc(#{$padding-x-button-sm} + 2px),
-      text-scale('sm'),
-      $line-height-button-sm,
+      text-scale('xs'),
+      line-height('xs'),
       $button-border-radius
     )
   }