@mskcc/components - npm Package Compare versions

Comparing version 2.7.1 to 2.7.2

carbon-11/components/dashboard/_index.scss

 @use 'dashboard';
 @include dashboard.msk-dashboard;
+@include dashboard.msk-dashboard-layout-sidebar;

carbon-11/components/dashboard/dashboard.scss

@@ -71,3 +71,3 @@ @use '@mskcc/themes/tokens' as tk;
         transition: all 0.3s ease-in-out;
-        box-shadow: inset -2px 0 tk.$msk--color-weak;
+        box-shadow: inset -2px 0 tk.$msk--color-border-weak;
 
@@ -74,0 +74,0 @@ &.msk-dashboard-sidebar--collapsed {

carbon-11/components/footer/footer.scss

@@ -204,5 +204,6 @@ @use '@mskcc/themes/tokens' as tk;
     // dark theme
-    .msk-theme--dark .msk-footer--logo {
+    html[data-theme='dark'] .msk-footer--logo {
         background-image: url('https://cdn.jsdelivr.net/npm/@mskcc/fundamentals@latest/dist/logo/assets/logo-primary-sans-medium-white.svg');
     }
+
     @media (prefers-color-scheme: dark) {
@@ -209,0 +210,0 @@ .msk-footer--logo {

carbon-11/components/tabs/tabs.scss

@@ -9,3 +9,3 @@ @use '@mskcc/themes/tokens' as tk;
 @mixin msk-tabs-focus {
-    &:focus {
+    &:not(.msk-tabs--tab-label-only):focus {
         box-shadow: inset 0 0 0 0.125rem c.$msk--black-100,
@@ -33,13 +33,2 @@ inset 0 0 0 calc(0.125rem + 2px) c.$msk--white-0;
             position: relative;
-
-            // &::after {
-            //     background-color: var(--#{$prefix}-border-interactive);
-            //     bottom: 0;
-            //     content: '';
-            //     height: 0.5px;
-            //     left: 0;
-            //     position: absolute;
-            //     right: 0;
-            //     z-index: 0;
-            // }
         }
@@ -72,8 +61,15 @@
 
-        // focus state
         .#{$prefix}--tabs__nav-link {
-            // --#{$prefix}-text-secondary: #{c.$msk--cool-gray-90};
-            --#{$prefix}-focus: #{c.$msk--black-100};
+            --#{$prefix}-focus: #{tk.$msk--color-border-focus-outer};
 
+            // focus state
             @include msk-tabs-focus;
+
+            // tab label only
+            &.msk-tabs--tab-label-only {
+                outline: none;
+                cursor: text;
+                color: tk.$msk--color-content-disabled;
+                border-bottom: 1px solid tk.$msk--color-border-disabled;
+            }
         }
@@ -104,2 +100,3 @@
         }
+
         //-----------------------------
@@ -111,3 +108,5 @@ // Item Hover
                 .#{$prefix}--tabs__nav-item--selected
-            ):not(.#{$prefix}--tabs__nav-item--disabled):hover {
+            ):not(.#{$prefix}--tabs__nav-item--disabled):not(
+                .msk-tabs--tab-label-only
+            ):hover {
             border-block-end: 1px solid var(--#{$prefix}-border-interactive);
@@ -117,5 +116,21 @@ background-color: tk.$msk--color-bg-action-hover;
 
+        &:not(.#{$prefix}--tabs--contained)
+            .#{$prefix}--tabs__nav-item:not(
+                .#{$prefix}--tabs__nav-item--selected
+            ):not(
+                .#{$prefix}--tabs__nav-item--disabled
+            ).msk-tabs--tab-label-only:hover {
+            border-block-end: 1px solid tk.$msk--color-border-disabled;
+            color: tk.$msk--color-content-disabled;
+        }
+
         .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item {
             margin-inline-start: 0;
         }
+        //---------------------------
+        // Tab Active
+        //---------------------------
+        .#{$prefix}--tabs__nav-link.msk-tabs--tab-label-only:active {
+            outline: none;
+        }
     }
@@ -122,0 +137,0 @@

dist/components/dashboard.css

@@ -32,2 +32,64 @@ /* ------ buttons ----- */
   overflow: auto;
+}
+.msk-dashboard-layout {
+  display: grid;
+  grid-template-areas: "header header" "sidebar content";
+  grid-template-rows: auto 1fr;
+  grid-template-columns: auto 1fr;
+  height: 100vh;
+  width: 100vw;
+  overflow: auto;
+  position: relative;
+}
+.msk-dashboard-layout .msk-header {
+  grid-area: header;
+}
+.msk-dashboard-layout--sidebar {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  background-color: var(--msk-color-bg, #ffffff);
+  overflow: auto;
+  transition: all 0.3s ease-in-out;
+  box-shadow: inset -2px 0 var(--msk-color-border-weak, #e5e0df);
+}
+.msk-dashboard-layout--sidebar.msk-dashboard-sidebar--collapsed {
+  overflow: hidden;
+}
+.msk-dashboard-layout--sidebar.msk-dashboard-sidebar--collapsed .msk-dashboard-sidebar--content {
+  opacity: 0;
+  pointer-events: none;
+}
+.msk-dashboard-layout--sidebar.msk-dashboard-sidebar--expanded .msk-dashboard-sidebar--content {
+  opacity: 1;
+  pointer-events: all;
+}
+@media (max-width: 767px) {
+  .msk-dashboard-layout--sidebar.msk-dashboard-sidebar--expanded {
+    width: 100vw !important;
+  }
+}
+.msk-dashboard-layout--sidebar .msk-dashboard-sidebar--toggle-button {
+  position: absolute;
+  right: 2px;
+  top: 0;
+  z-index: 999;
+}
+.msk-dashboard-layout--sidebar .msk-dashboard-sidebar--content {
+  transition: opacity 0.3s ease-in-out;
+}
+.msk-dashboard-layout--content {
+  grid-area: content;
+  padding: 0.5rem 0rem 0rem 1rem;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.msk-dashboard-layout--sidebar-hidden {
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+  pointer-events: none;
+}
+.msk-dashboard-layout--sidebar-container {
+  position: relative;
 }

dist/components/footer.css

@@ -247,3 +247,3 @@ /* ------ buttons ----- */
 }
-.msk-theme--dark .msk-footer--logo {
+html[data-theme=dark] .msk-footer--logo {
   background-image: url("https://cdn.jsdelivr.net/npm/@mskcc/fundamentals@latest/dist/logo/assets/logo-primary-sans-medium-white.svg");
@@ -250,0 +250,0 @@ }

dist/components/tabs.css

@@ -1625,8 +1625,14 @@ /* ------ buttons ----- */
 .cds--tabs .cds--tabs__nav-link {
-  --cds-focus: #000000;
+  --cds-focus: var(--msk-color-border-focus-outer, #000000);
 }
-.cds--tabs .cds--tabs__nav-link:focus {
+.cds--tabs .cds--tabs__nav-link:not(.msk-tabs--tab-label-only):focus {
   box-shadow: inset 0 0 0 0.125rem #000000, inset 0 0 0 calc(0.125rem + 2px) #ffffff;
   outline: none;
 }
+.cds--tabs .cds--tabs__nav-link.msk-tabs--tab-label-only {
+  outline: none;
+  cursor: text;
+  color: var(--msk-color-content-disabled, #8f8b8b);
+  border-bottom: 1px solid var(--msk-color-border-disabled, #8f8b8b);
+}
 .cds--tabs .cds--tabs__nav-item--disabled,
@@ -1647,13 +1653,20 @@ .cds--tabs .cds--tabs__nav-item--disabled:hover {
 }
-.cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):hover {
+.cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):not(.msk-tabs--tab-label-only):hover {
   border-block-end: 1px solid var(--cds-border-interactive);
   background-color: var(--msk-color-bg-action-hover, #f2f4f8);
 }
+.cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled).msk-tabs--tab-label-only:hover {
+  border-block-end: 1px solid var(--msk-color-border-disabled, #8f8b8b);
+  color: var(--msk-color-content-disabled, #8f8b8b);
+}
 .cds--tabs .cds--tabs__nav-item + .cds--tabs__nav-item {
   margin-inline-start: 0;
 }
+.cds--tabs .cds--tabs__nav-link.msk-tabs--tab-label-only:active {
+  outline: none;
+}
 /* ----- tab content ----- */
-.cds--tab-content:focus {
+.cds--tab-content:not(.msk-tabs--tab-label-only):focus {
   box-shadow: inset 0 0 0 0.125rem #000000, inset 0 0 0 calc(0.125rem + 2px) #ffffff;
   outline: none;
 }

package.json

 {
   "name": "@mskcc/components",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "description": "",
@@ -37,5 +37,5 @@ "author": "",
     "carbon-components": "10.56.0",
-    "@mskcc/colors": "2.7.1",
-    "@mskcc/fundamentals": "2.7.1",
-    "@mskcc/themes": "2.7.1"
+    "@mskcc/colors": "2.7.2",
+    "@mskcc/fundamentals": "2.7.2",
+    "@mskcc/themes": "2.7.2"
   },
@@ -59,3 +59,3 @@ "devDependencies": {
     "stylelint-order": "^6.0.3",
-    "eslint-config-msk": "2.7.1"
+    "eslint-config-msk": "2.7.2"
   },
@@ -62,0 +62,0 @@ "eslintConfig": {

New alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Fixed alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7603831

0.1%

Lines of code

168555

0.09%

Dependency changes

• + Added

  @mskcc/colors@2.7.2
  (transitive)

• + Added

  @mskcc/fundamentals@2.7.2
  (transitive)

• + Added

  @mskcc/themes@2.7.2
  (transitive)

• - Removed

  @mskcc/colors@2.7.1
  (transitive)

• - Removed

  @mskcc/fundamentals@2.7.1
  (transitive)

• - Removed

  @mskcc/themes@2.7.1
  (transitive)

• Updated

  @mskcc/colors@2.7.2

• Updated

  @mskcc/fundamentals@2.7.2

• Updated

  @mskcc/themes@2.7.2