From 525b9570fd84b145b95312dd78578da8e7c6dd45 Mon Sep 17 00:00:00 2001 From: Sahil Johari Date: Wed, 22 Feb 2023 17:07:58 -0800 Subject: [PATCH 1/8] pivot stack initial setup --- css/src/components/index.scss | 1 + css/src/components/pivot-stack.scss | 449 ++++++++++++++++++++++++++++ site/src/components/pivot-stack.md | 13 + 3 files changed, 463 insertions(+) create mode 100644 css/src/components/pivot-stack.scss create mode 100644 site/src/components/pivot-stack.md diff --git a/css/src/components/index.scss b/css/src/components/index.scss index 2db92a557..37d992d3c 100644 --- a/css/src/components/index.scss +++ b/css/src/components/index.scss @@ -13,6 +13,7 @@ @import './notification.scss'; @import './icon.scss'; @import './image.scss'; +@import './pivot-stack.scss'; @import './popover.scss'; @import './pagination.scss'; @import './table.scss'; diff --git a/css/src/components/pivot-stack.scss b/css/src/components/pivot-stack.scss new file mode 100644 index 000000000..e17507d63 --- /dev/null +++ b/css/src/components/pivot-stack.scss @@ -0,0 +1,449 @@ +@use 'sass:math'; + +$nav-bar-height: 54px !default; +$nav-bar-font-size-mobile: 0.875rem !default; +$nav-bar-font-size-desktop: 1rem !default; +$nav-bar-horizontal-spacing: 0.5rem !default; + +$nav-bar-button-color: $text !default; +$nav-bar-button-hover-background-color: $body-background-medium !default; +$nav-bar-button-hover-color: $text !default; +$nav-bar-button-active-background-color: $body-background-medium !default; + +$nav-bar-button-tag-margin: math.div(0.75rem, 3) !default; + +$nav-bar-chevron-font-size: 0.75rem !default; +$nav-bar-chevron-color: $text-subtle !default; + +$nav-bar-hover-bottom-thickness: math.div(0.25rem, 2) !default; +$nav-bar-border-bottom-style-hover: 2px solid $nav-bar-button-hover-color !default; + +$nav-bar-mobile-background-color: $body-background !default; + +$nav-bar-submenu-button-padding: 0.5rem 1rem !default; + +@mixin uhf-mobile { + @media screen and (max-width: $uhf-tablet-1px) { + @content; + } +} + +@mixin uhf-tablet { + @media screen and (min-width: $uhf-tablet), print { + @content; + } +} + +@mixin uhf-desktop { + @media screen and (min-width: $uhf-desktop), print { + @content; + } +} + +@mixin uhf-widescreen { + @media screen and (min-width: $uhf-widescreen), print { + @content; + } +} + +.nav-bar { + position: relative; + display: flex; + align-items: stretch; + height: $nav-bar-height; + min-height: $nav-bar-height; + justify-content: space-between; + padding-#{$user-left}: 0; + padding-#{$user-right}: 0; + + box-sizing: border-box; + width: 100%; + + @include uhf-tablet { + padding-inline: $uhf-gap; + padding-left: $uhf-gap; + } + + @include uhf-widescreen { + padding-#{$user-left}: $uhf-widescreen-gap; + padding-#{$user-right}: $uhf-widescreen-gap; + } + + .dropdown-menu { + background-color: $nav-bar-button-hover-background-color; + + .nav-bar-button { + &.dropdown-trigger { + width: 100%; + } + + &:hover, + &.focus-visible { + background-color: $nav-bar-button-active-background-color; + text-decoration: underline !important; + width: 100%; + } + } + } + + > .nav-bar-brand { + padding-#{$user-left}: 1.125em; + + > .nav-bar-button { + padding-#{$user-left}: 0 !important; + } + + @include tablet { + padding-#{$user-left}: 0 !important; + } + } +} + +.nav-bar-nav { + display: none; + @include tablet { + display: flex; + } + align-items: stretch; +} + +.nav-bar-nav-list { + display: flex; + align-items: stretch; +} + +.nav-bar-item { + display: flex; + align-items: center; + flex-shrink: 0; + + &.has-spacing { + margin: 0 $nav-bar-horizontal-spacing; + } + + &.is-category { + margin: 0 $nav-bar-horizontal-spacing; + + > .nav-bar-button { + .tag { + margin-bottom: $nav-bar-button-tag-margin; + } + } + > .is-title { + padding-left: $nav-bar-horizontal-spacing; + } + + &:before { + content: ''; + display: inline-block; + height: $spacing-4; + border-left: 2px solid $text-subtle; + margin-#{$user-left}: $nav-bar-horizontal-spacing; + margin-#{$user-right}: 2 * $nav-bar-horizontal-spacing; + } + } +} + +.nav-bar-search { + display: flex; + align-items: center; + flex-grow: 1; + flex-shrink: 1; + padding-#{$user-left}: 0.25rem; + margin-#{$user-right}: 0; + + @include tablet { + padding: 0; + flex-grow: 0; + flex-shrink: 0; + } + + @include desktop { + margin-#{$user-right}: 0.25rem; + } + + &.is-expanded { + padding-#{$user-left}: 0; + + @include mobile { + flex-grow: 0; + flex-shrink: 0; + } + } + + .nav-bar-search-form { + display: flex; + padding-#{$user-left}: 0.25rem; + + @include tablet { + padding-#{$user-left}: 0; + } + } + + .nav-bar-button { + width: 100%; + + @include tablet { + max-width: 120px; + } + + @include desktop { + max-width: 75px; + } + } +} + +.nav-bar-button { + display: flex; + align-items: center; + justify-content: center; + + align-self: stretch; + flex-shrink: 0; + flex-grow: 0; + + min-width: 54px; + padding: 0 $nav-bar-horizontal-spacing; + + background-color: transparent; // override button default + color: $nav-bar-button-color; + border: none; // override button default + + text-decoration: none !important; + white-space: nowrap; + font-size: $nav-bar-font-size-mobile; + line-height: normal; + cursor: pointer; + @include unselectable; + outline-offset: -1 * $focus-width !important; // inset focus outline. + + .dropdown-menu &, + .nav-bar-mobile-nav & { + justify-content: flex-start; + } + + .nav-bar-mobile-nav & { + padding: $nav-bar-horizontal-spacing * 2; + } + + &:active, + &.is-active, + &:hover, + &.focus-visible { + color: $nav-bar-button-hover-color; + + &.has-hover-underline:not([aria-expanded='true']) { + > :first-child { + position: relative; + + &:after { + content: ''; + display: block; + position: absolute; + border-bottom: $nav-bar-border-bottom-style-hover; + left: 0; + right: 0; + bottom: -#{$nav-bar-hover-bottom-thickness}; + } + } + } + } + + &:visited { + color: $nav-bar-button-color; + } + + &.dropdown-trigger[aria-expanded='true'] { + background-color: $nav-bar-button-hover-background-color; + } + + .dropdown-menu & { + padding: $nav-bar-submenu-button-padding; + } + + &.is-title { + font-size: $nav-bar-font-size-desktop; + word-break: break-word; + padding: 0; + background-color: $body-background; + line-height: normal; + + @include tablet { + font-size: $font-size-6; + font-weight: 600; + line-height: 1.125; + margin: 0; + padding: 0 $nav-bar-horizontal-spacing; + } + } + + .tag { + margin-bottom: $nav-bar-button-tag-margin; + vertical-align: middle; + font-weight: inherit; + } + + &.has-external-link-indicator { + @include external-indicator-flex; + } +} + +.nav-bar-menu-title { + padding-left: $nav-bar-horizontal-spacing; + padding-bottom: 0.25rem; + font-weight: 600; +} + +.nav-bar-search-form-expander { + width: 100%; + height: 100%; + justify-content: flex-end; + + @include tablet { + justify-content: center; + } + + &.is-expanded { + padding: 0; + } + + .nav-bar-button { + padding: 1rem; + height: 100%; + justify-content: flex-end; + + @include tablet { + justify-content: center; + } + + &.is-expanded { + margin-#{$user-left}: 0.25rem; + padding: 1rem; + justify-content: center; + + .nav-bar-button-text { + padding: 0.25rem 0; + + @include tablet { + padding: 0; + } + } + } + } +} + +.nav-bar-button-chevron { + margin-#{$user-left}: auto; + padding-#{$user-left}: math.div($nav-bar-horizontal-spacing, 2); + font-size: $nav-bar-chevron-font-size; + color: $nav-bar-chevron-color; + + .dropdown-menu & { + padding-#{$user-left}: $nav-bar-horizontal-spacing * 2; + } + + .docon { + vertical-align: sub; + } +} + +.nav-bar-brand { + display: flex; +} + +// a sentinel... when it has shrunk to zero width we know we need +// to collapse items into the "more" menu. +.nav-bar-spacer { + display: none; + + @include tablet { + display: block; + } + flex-grow: 1; + flex-shrink: 1; +} + +.nav-bar-logo { + width: 108px; + height: 23px; +} + +.nav-bar-burger { + border: none; + outline-offset: -1 * $focus-width !important; // inset focus outline. + padding: 0; + height: 0; + @include hamburger($nav-bar-height); + + @include tablet { + display: none; + } + + &:hover { + background-color: $nav-bar-mobile-background-color; + } + + .nav-bar-burger-label { + overflow: hidden; + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + margin: -1px; + padding: 0; + } +} + +.nav-bar-list { + display: flex; +} + +.nav-bar-profile { + padding-#{$user-left}: 0.25rem; + font-size: $nav-bar-font-size-mobile; + display: none; + align-items: center; + flex-shrink: 0; + + @include tablet { + display: flex; + } + + .docs-sign-in { + color: $primary; + border: 1px solid transparent; + border-radius: 2px; + height: 2.25em; + line-height: 1.5; + padding-bottom: calc(0.375em - 1px); + padding-left: 0.75em; + padding-right: 0.75em; + padding-top: calc(0.375em - 1px); + position: relative; + align-self: center; + + &:hover { + background-color: $nav-bar-button-hover-background-color; + } + } +} + +.nav-bar-mobile-nav { + background-color: $nav-bar-mobile-background-color; +} + +.nav-bar-mobile-nav-list { + .nav-bar-mobile-nav-list { + margin-#{$user-left}: $nav-bar-horizontal-spacing * 2; + } +} + +.nav-bar-mobile-nav-item { + display: flex; + flex-direction: column; + + > .nav-bar-button { + .tag { + margin-#{$user-left}: $nav-bar-button-tag-margin; + } + } +} diff --git a/site/src/components/pivot-stack.md b/site/src/components/pivot-stack.md new file mode 100644 index 000000000..13a77a658 --- /dev/null +++ b/site/src/components/pivot-stack.md @@ -0,0 +1,13 @@ +--- +title: Pivot Stack +description: Pivot Stack component in the Atlas Design System +template: standard +figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Fnode-id%3D2373%253A7743%26t%3DsDMM7LXwbJhYa2fx-1 +classType: Component +classPrefixes: + - pivot-stack +--- + +# Pivot Stack + +Pivot Stack is a layout component that provides a tabbed interface to display multiple views of a page. From 30de98d35a26d9471d9ec59e19d1d6acb7828fad Mon Sep 17 00:00:00 2001 From: Sahil Johari Date: Fri, 24 Feb 2023 16:54:40 -0800 Subject: [PATCH 2/8] added styling - first pass --- css/src/components/pivot-stack.scss | 448 ++++++---------------------- site/src/components/pivot-stack.md | 24 ++ 2 files changed, 117 insertions(+), 355 deletions(-) diff --git a/css/src/components/pivot-stack.scss b/css/src/components/pivot-stack.scss index e17507d63..9a3e413d0 100644 --- a/css/src/components/pivot-stack.scss +++ b/css/src/components/pivot-stack.scss @@ -1,105 +1,42 @@ @use 'sass:math'; -$nav-bar-height: 54px !default; -$nav-bar-font-size-mobile: 0.875rem !default; -$nav-bar-font-size-desktop: 1rem !default; -$nav-bar-horizontal-spacing: 0.5rem !default; +$ps-height: 54px !default; +$ps-font-size-mobile: $font-size-8 !default; +$ps-font-size-desktop: $font-size-7 !default; +$ps-horizontal-spacing: $spacer-3 !default; -$nav-bar-button-color: $text !default; -$nav-bar-button-hover-background-color: $body-background-medium !default; -$nav-bar-button-hover-color: $text !default; -$nav-bar-button-active-background-color: $body-background-medium !default; +$ps-button-color: $text !default; +$ps-button-hover-background-color: $body-background-medium !default; +$ps-button-hover-color: $text !default; +$ps-button-active-background-color: $body-background-medium !default; -$nav-bar-button-tag-margin: math.div(0.75rem, 3) !default; +$ps-button-tag-margin: math.div($font-size-9, 3) !default; -$nav-bar-chevron-font-size: 0.75rem !default; -$nav-bar-chevron-color: $text-subtle !default; +$ps-chevron-font-size: $font-size-9 !default; +$ps-chevron-color: $text-subtle !default; -$nav-bar-hover-bottom-thickness: math.div(0.25rem, 2) !default; -$nav-bar-border-bottom-style-hover: 2px solid $nav-bar-button-hover-color !default; +$ps-hover-bottom-thickness: math.div($spacer-2, 2) !default; +$ps-border-bottom-style-hover: 2px solid $primary !default; -$nav-bar-mobile-background-color: $body-background !default; +$ps-mobile-background-color: $body-background !default; -$nav-bar-submenu-button-padding: 0.5rem 1rem !default; +$ps-submenu-button-padding: $spacer-3 $spacer-5 !default; -@mixin uhf-mobile { - @media screen and (max-width: $uhf-tablet-1px) { - @content; - } -} - -@mixin uhf-tablet { - @media screen and (min-width: $uhf-tablet), print { - @content; - } -} - -@mixin uhf-desktop { - @media screen and (min-width: $uhf-desktop), print { - @content; - } -} - -@mixin uhf-widescreen { - @media screen and (min-width: $uhf-widescreen), print { - @content; - } -} - -.nav-bar { - position: relative; +.pivot-stack { display: flex; - align-items: stretch; - height: $nav-bar-height; - min-height: $nav-bar-height; justify-content: space-between; + align-items: stretch; + position: relative; + height: $ps-height; + min-height: $ps-height; padding-#{$user-left}: 0; padding-#{$user-right}: 0; box-sizing: border-box; width: 100%; - - @include uhf-tablet { - padding-inline: $uhf-gap; - padding-left: $uhf-gap; - } - - @include uhf-widescreen { - padding-#{$user-left}: $uhf-widescreen-gap; - padding-#{$user-right}: $uhf-widescreen-gap; - } - - .dropdown-menu { - background-color: $nav-bar-button-hover-background-color; - - .nav-bar-button { - &.dropdown-trigger { - width: 100%; - } - - &:hover, - &.focus-visible { - background-color: $nav-bar-button-active-background-color; - text-decoration: underline !important; - width: 100%; - } - } - } - - > .nav-bar-brand { - padding-#{$user-left}: 1.125em; - - > .nav-bar-button { - padding-#{$user-left}: 0 !important; - } - - @include tablet { - padding-#{$user-left}: 0 !important; - } - } } -.nav-bar-nav { +.pivot-stack-nav { display: none; @include tablet { display: flex; @@ -107,93 +44,84 @@ $nav-bar-submenu-button-padding: 0.5rem 1rem !default; align-items: stretch; } -.nav-bar-nav-list { +.pivot-stack-nav-list { display: flex; align-items: stretch; } -.nav-bar-item { +.pivot-stack-item { display: flex; align-items: center; flex-shrink: 0; &.has-spacing { - margin: 0 $nav-bar-horizontal-spacing; + margin: 0 $ps-horizontal-spacing; } &.is-category { - margin: 0 $nav-bar-horizontal-spacing; + margin: 0 $ps-horizontal-spacing; - > .nav-bar-button { + > .pivot-stack-button { .tag { - margin-bottom: $nav-bar-button-tag-margin; + margin-bottom: $ps-button-tag-margin; } } > .is-title { - padding-left: $nav-bar-horizontal-spacing; + padding-left: $ps-horizontal-spacing; } &:before { content: ''; display: inline-block; - height: $spacing-4; + height: $spacer-7; border-left: 2px solid $text-subtle; - margin-#{$user-left}: $nav-bar-horizontal-spacing; - margin-#{$user-right}: 2 * $nav-bar-horizontal-spacing; + margin-#{$user-left}: $ps-horizontal-spacing; + margin-#{$user-right}: 2 * $ps-horizontal-spacing; } } -} -.nav-bar-search { - display: flex; - align-items: center; - flex-grow: 1; - flex-shrink: 1; - padding-#{$user-left}: 0.25rem; - margin-#{$user-right}: 0; + // &:hover { + // background-color: $body-background-medium; - @include tablet { - padding: 0; - flex-grow: 0; - flex-shrink: 0; - } - - @include desktop { - margin-#{$user-right}: 0.25rem; - } + // &.has-hover-bg:not([aria-expanded='true']) { + // > :first-child, + // &.is-active { + // position: relative; - &.is-expanded { - padding-#{$user-left}: 0; + // &:after { + // content: ''; + // display: block; + // position: absolute; + // border-bottom: $ps-border-bottom-style-hover; + // left: 0; + // right: 0; + // bottom: -#{$ps-hover-bottom-thickness}; + // } + // } + // } + // } - @include mobile { - flex-grow: 0; - flex-shrink: 0; - } - } - - .nav-bar-search-form { - display: flex; - padding-#{$user-left}: 0.25rem; - - @include tablet { - padding-#{$user-left}: 0; - } - } - - .nav-bar-button { - width: 100%; - - @include tablet { - max-width: 120px; - } - - @include desktop { - max-width: 75px; + &:active, + &.is-active:not([aria-expanded='true']), + &.focus-visible:not([aria-expanded='true']) { + color: $ps-button-hover-color; + > :first-child { + position: relative; + + &:after { + content: ''; + display: block; + position: absolute; + border-bottom: $ps-border-bottom-style-hover; + left: 0; + right: 0; + bottom: -#{$ps-hover-bottom-thickness}; + } } } } -.nav-bar-button { +.pivot-stack-button { display: flex; align-items: center; justify-content: center; @@ -203,247 +131,57 @@ $nav-bar-submenu-button-padding: 0.5rem 1rem !default; flex-grow: 0; min-width: 54px; - padding: 0 $nav-bar-horizontal-spacing; + padding: 0 $ps-horizontal-spacing; background-color: transparent; // override button default - color: $nav-bar-button-color; + color: $ps-button-color; border: none; // override button default text-decoration: none !important; white-space: nowrap; - font-size: $nav-bar-font-size-mobile; + font-size: $ps-font-size-mobile; line-height: normal; cursor: pointer; @include unselectable; outline-offset: -1 * $focus-width !important; // inset focus outline. .dropdown-menu &, - .nav-bar-mobile-nav & { + .pivot-stack-mobile-nav & { justify-content: flex-start; } - .nav-bar-mobile-nav & { - padding: $nav-bar-horizontal-spacing * 2; + .pivot-stack-mobile-nav & { + padding: $ps-horizontal-spacing * 2; } - &:active, - &.is-active, - &:hover, - &.focus-visible { - color: $nav-bar-button-hover-color; - - &.has-hover-underline:not([aria-expanded='true']) { - > :first-child { - position: relative; - - &:after { - content: ''; - display: block; - position: absolute; - border-bottom: $nav-bar-border-bottom-style-hover; - left: 0; - right: 0; - bottom: -#{$nav-bar-hover-bottom-thickness}; - } - } - } - } + // &:active, + // &.is-active:not([aria-expanded='true']), + // &.focus-visible:not([aria-expanded='true']) { + // color: $ps-button-hover-color; + // > :first-child { + // position: relative; + + // &:after { + // content: ''; + // display: block; + // position: absolute; + // border-bottom: $ps-border-bottom-style-hover; + // left: 0; + // right: 0; + // bottom: -#{$ps-hover-bottom-thickness}; + // } + // } + // } &:visited { - color: $nav-bar-button-color; + color: $ps-button-color; } &.dropdown-trigger[aria-expanded='true'] { - background-color: $nav-bar-button-hover-background-color; - } - - .dropdown-menu & { - padding: $nav-bar-submenu-button-padding; - } - - &.is-title { - font-size: $nav-bar-font-size-desktop; - word-break: break-word; - padding: 0; - background-color: $body-background; - line-height: normal; - - @include tablet { - font-size: $font-size-6; - font-weight: 600; - line-height: 1.125; - margin: 0; - padding: 0 $nav-bar-horizontal-spacing; - } - } - - .tag { - margin-bottom: $nav-bar-button-tag-margin; - vertical-align: middle; - font-weight: inherit; - } - - &.has-external-link-indicator { - @include external-indicator-flex; - } -} - -.nav-bar-menu-title { - padding-left: $nav-bar-horizontal-spacing; - padding-bottom: 0.25rem; - font-weight: 600; -} - -.nav-bar-search-form-expander { - width: 100%; - height: 100%; - justify-content: flex-end; - - @include tablet { - justify-content: center; - } - - &.is-expanded { - padding: 0; + background-color: $ps-button-hover-background-color; } - .nav-bar-button { - padding: 1rem; - height: 100%; - justify-content: flex-end; - - @include tablet { - justify-content: center; - } - - &.is-expanded { - margin-#{$user-left}: 0.25rem; - padding: 1rem; - justify-content: center; - - .nav-bar-button-text { - padding: 0.25rem 0; - - @include tablet { - padding: 0; - } - } - } - } -} - -.nav-bar-button-chevron { - margin-#{$user-left}: auto; - padding-#{$user-left}: math.div($nav-bar-horizontal-spacing, 2); - font-size: $nav-bar-chevron-font-size; - color: $nav-bar-chevron-color; - .dropdown-menu & { - padding-#{$user-left}: $nav-bar-horizontal-spacing * 2; - } - - .docon { - vertical-align: sub; - } -} - -.nav-bar-brand { - display: flex; -} - -// a sentinel... when it has shrunk to zero width we know we need -// to collapse items into the "more" menu. -.nav-bar-spacer { - display: none; - - @include tablet { - display: block; - } - flex-grow: 1; - flex-shrink: 1; -} - -.nav-bar-logo { - width: 108px; - height: 23px; -} - -.nav-bar-burger { - border: none; - outline-offset: -1 * $focus-width !important; // inset focus outline. - padding: 0; - height: 0; - @include hamburger($nav-bar-height); - - @include tablet { - display: none; - } - - &:hover { - background-color: $nav-bar-mobile-background-color; - } - - .nav-bar-burger-label { - overflow: hidden; - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - margin: -1px; - padding: 0; - } -} - -.nav-bar-list { - display: flex; -} - -.nav-bar-profile { - padding-#{$user-left}: 0.25rem; - font-size: $nav-bar-font-size-mobile; - display: none; - align-items: center; - flex-shrink: 0; - - @include tablet { - display: flex; - } - - .docs-sign-in { - color: $primary; - border: 1px solid transparent; - border-radius: 2px; - height: 2.25em; - line-height: 1.5; - padding-bottom: calc(0.375em - 1px); - padding-left: 0.75em; - padding-right: 0.75em; - padding-top: calc(0.375em - 1px); - position: relative; - align-self: center; - - &:hover { - background-color: $nav-bar-button-hover-background-color; - } - } -} - -.nav-bar-mobile-nav { - background-color: $nav-bar-mobile-background-color; -} - -.nav-bar-mobile-nav-list { - .nav-bar-mobile-nav-list { - margin-#{$user-left}: $nav-bar-horizontal-spacing * 2; - } -} - -.nav-bar-mobile-nav-item { - display: flex; - flex-direction: column; - - > .nav-bar-button { - .tag { - margin-#{$user-left}: $nav-bar-button-tag-margin; - } + padding: $ps-submenu-button-padding; } } diff --git a/site/src/components/pivot-stack.md b/site/src/components/pivot-stack.md index 13a77a658..e07666eb3 100644 --- a/site/src/components/pivot-stack.md +++ b/site/src/components/pivot-stack.md @@ -11,3 +11,27 @@ classPrefixes: # Pivot Stack Pivot Stack is a layout component that provides a tabbed interface to display multiple views of a page. + +```html +
+ +
+``` From d69e83e0bffd4ddfe9e314a295ffcef35c16d6d0 Mon Sep 17 00:00:00 2001 From: Sahil Johari Date: Tue, 7 Mar 2023 15:09:10 -0800 Subject: [PATCH 3/8] basic active and hover behavior --- css/src/components/pivot-stack.scss | 65 ++++++++++------------------- site/src/components/pivot-stack.md | 48 ++++++++++++--------- 2 files changed, 50 insertions(+), 63 deletions(-) diff --git a/css/src/components/pivot-stack.scss b/css/src/components/pivot-stack.scss index 9a3e413d0..d220f91ab 100644 --- a/css/src/components/pivot-stack.scss +++ b/css/src/components/pivot-stack.scss @@ -80,32 +80,9 @@ $ps-submenu-button-padding: $spacer-3 $spacer-5 !default; } } - // &:hover { - // background-color: $body-background-medium; - - // &.has-hover-bg:not([aria-expanded='true']) { - // > :first-child, - // &.is-active { - // position: relative; - - // &:after { - // content: ''; - // display: block; - // position: absolute; - // border-bottom: $ps-border-bottom-style-hover; - // left: 0; - // right: 0; - // bottom: -#{$ps-hover-bottom-thickness}; - // } - // } - // } - // } - - &:active, - &.is-active:not([aria-expanded='true']), - &.focus-visible:not([aria-expanded='true']) { - color: $ps-button-hover-color; - > :first-child { + &:hover { + background-color: $body-background-medium; + &.is-active { position: relative; &:after { @@ -154,24 +131,24 @@ $ps-submenu-button-padding: $spacer-3 $spacer-5 !default; padding: $ps-horizontal-spacing * 2; } - // &:active, - // &.is-active:not([aria-expanded='true']), - // &.focus-visible:not([aria-expanded='true']) { - // color: $ps-button-hover-color; - // > :first-child { - // position: relative; - - // &:after { - // content: ''; - // display: block; - // position: absolute; - // border-bottom: $ps-border-bottom-style-hover; - // left: 0; - // right: 0; - // bottom: -#{$ps-hover-bottom-thickness}; - // } - // } - // } + :active &, + .is-active:not([aria-expanded='true']) &, + .focus-visible:not([aria-expanded='true']) & { + color: $ps-button-hover-color; + position: relative; + font-weight: $weight-semibold; + + &:after { + content: ''; + display: block; + position: absolute; + border-bottom: $ps-border-bottom-style-hover; + left: 0; + right: 0; + bottom: -#{$ps-hover-bottom-thickness}; + margin: 0 $ps-horizontal-spacing; + } + } &:visited { color: $ps-button-color; diff --git a/site/src/components/pivot-stack.md b/site/src/components/pivot-stack.md index e07666eb3..fce7539c3 100644 --- a/site/src/components/pivot-stack.md +++ b/site/src/components/pivot-stack.md @@ -14,24 +14,34 @@ Pivot Stack is a layout component that provides a tabbed interface to display mu ```html
- +
``` From 553d2cdb3b38e2824d271e5bd6a134ba336fbc68 Mon Sep 17 00:00:00 2001 From: Sahil Johari Date: Tue, 7 Mar 2023 16:48:24 -0800 Subject: [PATCH 4/8] variable cleanup --- css/src/components/pivot-stack.scss | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/css/src/components/pivot-stack.scss b/css/src/components/pivot-stack.scss index d220f91ab..dd89a5661 100644 --- a/css/src/components/pivot-stack.scss +++ b/css/src/components/pivot-stack.scss @@ -7,19 +7,12 @@ $ps-horizontal-spacing: $spacer-3 !default; $ps-button-color: $text !default; $ps-button-hover-background-color: $body-background-medium !default; -$ps-button-hover-color: $text !default; -$ps-button-active-background-color: $body-background-medium !default; $ps-button-tag-margin: math.div($font-size-9, 3) !default; -$ps-chevron-font-size: $font-size-9 !default; -$ps-chevron-color: $text-subtle !default; - $ps-hover-bottom-thickness: math.div($spacer-2, 2) !default; $ps-border-bottom-style-hover: 2px solid $primary !default; -$ps-mobile-background-color: $body-background !default; - $ps-submenu-button-padding: $spacer-3 $spacer-5 !default; .pivot-stack { @@ -81,7 +74,7 @@ $ps-submenu-button-padding: $spacer-3 $spacer-5 !default; } &:hover { - background-color: $body-background-medium; + background-color: $ps-button-hover-background-color; &.is-active { position: relative; @@ -134,7 +127,6 @@ $ps-submenu-button-padding: $spacer-3 $spacer-5 !default; :active &, .is-active:not([aria-expanded='true']) &, .focus-visible:not([aria-expanded='true']) & { - color: $ps-button-hover-color; position: relative; font-weight: $weight-semibold; From 815633fe3d5e622fff75e168f436aa88559a4a84 Mon Sep 17 00:00:00 2001 From: Sahil Johari Date: Tue, 21 Mar 2023 15:45:19 -0700 Subject: [PATCH 5/8] lint fixes --- css/src/components/pivot-stack.scss | 151 ++++++++++++++-------------- 1 file changed, 75 insertions(+), 76 deletions(-) diff --git a/css/src/components/pivot-stack.scss b/css/src/components/pivot-stack.scss index dd89a5661..645af6c1e 100644 --- a/css/src/components/pivot-stack.scss +++ b/css/src/components/pivot-stack.scss @@ -17,16 +17,15 @@ $ps-submenu-button-padding: $spacer-3 $spacer-5 !default; .pivot-stack { display: flex; - justify-content: space-between; - align-items: stretch; position: relative; + align-items: stretch; + justify-content: space-between; + box-sizing: border-box; + width: 100%; height: $ps-height; min-height: $ps-height; padding-#{$user-left}: 0; padding-#{$user-right}: 0; - - box-sizing: border-box; - width: 100%; } .pivot-stack-nav { @@ -34,6 +33,7 @@ $ps-submenu-button-padding: $spacer-3 $spacer-5 !default; @include tablet { display: flex; } + align-items: stretch; } @@ -42,78 +42,26 @@ $ps-submenu-button-padding: $spacer-3 $spacer-5 !default; align-items: stretch; } -.pivot-stack-item { - display: flex; - align-items: center; - flex-shrink: 0; - - &.has-spacing { - margin: 0 $ps-horizontal-spacing; - } - - &.is-category { - margin: 0 $ps-horizontal-spacing; - - > .pivot-stack-button { - .tag { - margin-bottom: $ps-button-tag-margin; - } - } - > .is-title { - padding-left: $ps-horizontal-spacing; - } - - &:before { - content: ''; - display: inline-block; - height: $spacer-7; - border-left: 2px solid $text-subtle; - margin-#{$user-left}: $ps-horizontal-spacing; - margin-#{$user-right}: 2 * $ps-horizontal-spacing; - } - } - - &:hover { - background-color: $ps-button-hover-background-color; - &.is-active { - position: relative; - - &:after { - content: ''; - display: block; - position: absolute; - border-bottom: $ps-border-bottom-style-hover; - left: 0; - right: 0; - bottom: -#{$ps-hover-bottom-thickness}; - } - } - } -} - .pivot-stack-button { + @include unselectable; + display: flex; + flex-grow: 0; + flex-shrink: 0; align-items: center; - justify-content: center; - align-self: stretch; - flex-shrink: 0; - flex-grow: 0; - + justify-content: center; min-width: 54px; padding: 0 $ps-horizontal-spacing; - + border: none; // override button default + outline-offset: -1 * $focus-width !important; // inset focus outline. background-color: transparent; // override button default color: $ps-button-color; - border: none; // override button default - - text-decoration: none !important; - white-space: nowrap; font-size: $ps-font-size-mobile; line-height: normal; + text-decoration: none !important; + white-space: nowrap; cursor: pointer; - @include unselectable; - outline-offset: -1 * $focus-width !important; // inset focus outline. .dropdown-menu &, .pivot-stack-mobile-nav & { @@ -124,33 +72,84 @@ $ps-submenu-button-padding: $spacer-3 $spacer-5 !default; padding: $ps-horizontal-spacing * 2; } + &:visited { + color: $ps-button-color; + } + + &.dropdown-trigger[aria-expanded='true'] { + background-color: $ps-button-hover-background-color; + } + + .dropdown-menu & { + padding: $ps-submenu-button-padding; + } + :active &, .is-active:not([aria-expanded='true']) &, .focus-visible:not([aria-expanded='true']) & { position: relative; font-weight: $weight-semibold; - &:after { - content: ''; + &::after { display: block; position: absolute; - border-bottom: $ps-border-bottom-style-hover; - left: 0; right: 0; bottom: -#{$ps-hover-bottom-thickness}; + left: 0; margin: 0 $ps-horizontal-spacing; + border-bottom: $ps-border-bottom-style-hover; + content: ''; } } +} - &:visited { - color: $ps-button-color; +.pivot-stack-item { + display: flex; + flex-shrink: 0; + align-items: center; + + &.has-spacing { + margin: 0 $ps-horizontal-spacing; } - &.dropdown-trigger[aria-expanded='true'] { - background-color: $ps-button-hover-background-color; + &.is-category { + margin: 0 $ps-horizontal-spacing; + + > .pivot-stack-button { + .tag { + margin-bottom: $ps-button-tag-margin; + } + } + + > .is-title { + padding-left: $ps-horizontal-spacing; + } + + &::before { + display: inline-block; + height: $spacer-7; + border-left: 2px solid $text-subtle; + content: ''; + margin-#{$user-left}: $ps-horizontal-spacing; + margin-#{$user-right}: 2 * $ps-horizontal-spacing; + } } - .dropdown-menu & { - padding: $ps-submenu-button-padding; + &:hover { + background-color: $ps-button-hover-background-color; + + &.is-active { + position: relative; + + &::after { + display: block; + position: absolute; + right: 0; + bottom: -#{$ps-hover-bottom-thickness}; + left: 0; + border-bottom: $ps-border-bottom-style-hover; + content: ''; + } + } } } From 73df49cd5e2ce81d908b2a4e379784b9fbba8150 Mon Sep 17 00:00:00 2001 From: Sahil Johari Date: Tue, 21 Mar 2023 16:51:22 -0700 Subject: [PATCH 6/8] added icon variant --- css/src/components/pivot-stack.scss | 10 ++- site/src/components/pivot-stack.md | 123 +++++++++++++++++++++------- 2 files changed, 103 insertions(+), 30 deletions(-) diff --git a/css/src/components/pivot-stack.scss b/css/src/components/pivot-stack.scss index 645af6c1e..804286833 100644 --- a/css/src/components/pivot-stack.scss +++ b/css/src/components/pivot-stack.scss @@ -1,6 +1,6 @@ @use 'sass:math'; -$ps-height: 54px !default; +$ps-height: 44px !default; $ps-font-size-mobile: $font-size-8 !default; $ps-font-size-desktop: $font-size-7 !default; $ps-horizontal-spacing: $spacer-3 !default; @@ -63,6 +63,14 @@ $ps-submenu-button-padding: $spacer-3 $spacer-5 !default; white-space: nowrap; cursor: pointer; + > .icon:first-child { + margin-right: $spacer-2; + } + + > .icon:last-child { + margin-left: $spacer-2; + } + .dropdown-menu &, .pivot-stack-mobile-nav & { justify-content: flex-start; diff --git a/site/src/components/pivot-stack.md b/site/src/components/pivot-stack.md index fce7539c3..32bd281bf 100644 --- a/site/src/components/pivot-stack.md +++ b/site/src/components/pivot-stack.md @@ -12,36 +12,101 @@ classPrefixes: Pivot Stack is a layout component that provides a tabbed interface to display multiple views of a page. +## Usage + +Here is an example of a standard pivot stack usage. + ```html
- +
``` + +### With icons + +Pivot stack buttons can be decorated with custom icons for a more elaborate representation. Here is an example. + +```html +
+

With leading icons

+
+ +
+
+
+

With trailing icons

+
+ +
+
+``` From 294e29942fca1810c059ae1da3b0534918016a99 Mon Sep 17 00:00:00 2001 From: Sahil Johari Date: Fri, 21 Apr 2023 11:38:41 -0700 Subject: [PATCH 7/8] added large variant --- css/src/components/pivot-stack.scss | 12 ++++-- site/src/components/pivot-stack.md | 57 +++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 3 deletions(-) diff --git a/css/src/components/pivot-stack.scss b/css/src/components/pivot-stack.scss index 804286833..55ca87d97 100644 --- a/css/src/components/pivot-stack.scss +++ b/css/src/components/pivot-stack.scss @@ -1,9 +1,12 @@ @use 'sass:math'; $ps-height: 44px !default; -$ps-font-size-mobile: $font-size-8 !default; +$ps-font-size-large: $font-size-6 !default; $ps-font-size-desktop: $font-size-7 !default; +$ps-font-size-mobile: $font-size-8 !default; + $ps-horizontal-spacing: $spacer-3 !default; +$ps-submenu-button-padding: $spacer-3 $spacer-5 !default; $ps-button-color: $text !default; $ps-button-hover-background-color: $body-background-medium !default; @@ -13,8 +16,6 @@ $ps-button-tag-margin: math.div($font-size-9, 3) !default; $ps-hover-bottom-thickness: math.div($spacer-2, 2) !default; $ps-border-bottom-style-hover: 2px solid $primary !default; -$ps-submenu-button-padding: $spacer-3 $spacer-5 !default; - .pivot-stack { display: flex; position: relative; @@ -42,6 +43,7 @@ $ps-submenu-button-padding: $spacer-3 $spacer-5 !default; align-items: stretch; } +// TODO: add styling for "pressed" state .pivot-stack-button { @include unselectable; @@ -109,6 +111,10 @@ $ps-submenu-button-padding: $spacer-3 $spacer-5 !default; content: ''; } } + + &.is-large { + font-size: $ps-font-size-large; + } } .pivot-stack-item { diff --git a/site/src/components/pivot-stack.md b/site/src/components/pivot-stack.md index 32bd281bf..a207deddf 100644 --- a/site/src/components/pivot-stack.md +++ b/site/src/components/pivot-stack.md @@ -110,3 +110,60 @@ Pivot stack buttons can be decorated with custom icons for a more elaborate repr ``` + +### With larger buttons + +Another variant of the Pivot stack is with bigger buttons. All you need to do is add the `is-large` class to the pivot stack button element. Here is an example. + +```html +
+
+ +
+
+
+

With icons

+
+ +
+
+``` From b618104702809ac9cf69d2c454214d9be7a0d112 Mon Sep 17 00:00:00 2001 From: Sahil Johari Date: Fri, 21 Apr 2023 11:42:30 -0700 Subject: [PATCH 8/8] update with latest atlas --- css/src/components/pivot-stack.scss | 1 + package-lock.json | 16 ++++++++-------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/css/src/components/pivot-stack.scss b/css/src/components/pivot-stack.scss index 55ca87d97..989b3ef39 100644 --- a/css/src/components/pivot-stack.scss +++ b/css/src/components/pivot-stack.scss @@ -44,6 +44,7 @@ $ps-border-bottom-style-hover: 2px solid $primary !default; } // TODO: add styling for "pressed" state + .pivot-stack-button { @include unselectable; diff --git a/package-lock.json b/package-lock.json index 504afcc30..617a9ea42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,7 @@ }, "css": { "name": "@microsoft/atlas-css", - "version": "3.30.0", + "version": "3.31.0", "license": "MIT", "devDependencies": { "@microsoft/stylelint-config-atlas": "4.0.2", @@ -96,7 +96,7 @@ }, "integration": { "name": "@microsoft/atlas-integration", - "version": "1.3.0", + "version": "1.4.0", "license": "ISC", "devDependencies": { "@axe-core/playwright": "^4.6.1", @@ -11328,10 +11328,10 @@ }, "plugins/parcel-transformer-markdown-html": { "name": "@microsoft/parcel-transformer-markdown-html", - "version": "2.6.0", + "version": "2.6.1", "license": "MIT", "dependencies": { - "@microsoft/atlas-css": "^3.30.0", + "@microsoft/atlas-css": "^3.31.0", "@parcel/plugin": "^2.8.3", "@parcel/utils": "^2.8.3", "front-matter": "^4.0.2", @@ -11359,13 +11359,13 @@ }, "site": { "name": "@microsoft/atlas-site", - "version": "0.36.0", + "version": "0.37.0", "license": "MIT", "dependencies": { "@microsoft/atlas-js": "^1.5.5" }, "devDependencies": { - "@microsoft/atlas-css": "^3.30.0", + "@microsoft/atlas-css": "^3.31.0", "@microsoft/parcel-transformer-markdown-html": "^2.6.0", "@parcel/transformer-sass": "^2.8.3", "@typescript-eslint/eslint-plugin": "^5.58.0", @@ -12280,7 +12280,7 @@ "@microsoft/atlas-site": { "version": "file:site", "requires": { - "@microsoft/atlas-css": "^3.30.0", + "@microsoft/atlas-css": "^3.31.0", "@microsoft/atlas-js": "^1.5.5", "@microsoft/parcel-transformer-markdown-html": "^2.6.0", "@parcel/transformer-sass": "^2.8.3", @@ -12312,7 +12312,7 @@ "@microsoft/parcel-transformer-markdown-html": { "version": "file:plugins/parcel-transformer-markdown-html", "requires": { - "@microsoft/atlas-css": "^3.30.0", + "@microsoft/atlas-css": "^3.31.0", "@parcel/plugin": "^2.8.3", "@parcel/utils": "^2.8.3", "front-matter": "^4.0.2",