feat(tagoverflow): remove TagOverflow dependency on TagSet (carbon-de…

…sign-system#4929) * feat(tagoverflow): generate default file structure for TagOverflow component * chore(tagoverflow): update gallery to include example of tagoverflow component * feat(tagoverflow): component functionality implementation * fix(tagoverflow): too many re-renders * fix(tagoverflow): container width updated to according to story definition * fix(tagoverflow) : story title and id updated as per issue 4529 * test(tagoverflow) : initial unit tests * chore(tagoverflow): prettier * test(tagoverflow): added some more unit tests * fix(tagoverflow): all tags are getting displayed for a second during initial load * fix(tagoverflow): storybook config changes in accordance with issue 4561 * fix(tagoverflow): accessibility isssue elements with duplicate id exists * fix(tagoverflow): merge conflict * test(tagoverflow): some more unit tests * feat(tagoverflow): multiline support * fix(tagoverflow): typo, self closing tag and array length check * fix(tagoverflow): spellcheck * fix(tagoverflow): remove autogenerated comments * fix(tagoverflow): change config for useravatar background color * fix(tagoverflow): pass tagType added as a prop * fix(tagoverflow): test case failure * fix(tagoverflow): rename itemTemplate to tagComponent * fix(tag-overflow): optimize custom template rendering logic * fix(tagoverflow): remove logic for setting default tag type as blue * feat(tagoverflow): remove dependecy on Tagset component * fix(tagoverflow): update story names and use id as key instead of index * fix(tagoverflow): use evt for event refs and remove unwanted useffect * fix(tagoverflow): remove unnecessary template strings * fix(tagoverflow): remove filter logic from render method * fix(tagoverflow): accessibility violation * feat(tagoverflow): support align prop * fix(tagoverflow): containingElementRef,measurementOffset,onTagChange * fix(tagoverflow): unit test * fix(tagoverflow): unit tests --------- Co-authored-by: Sinta Augustine <[email protected]> Co-authored-by: Matt Gallo <[email protected]>
dbrugger · May 15, 2024 · 7b1bcdc · 7b1bcdc
1 parent 26818a5
commit 7b1bcdc
Show file tree

Hide file tree

Showing 8 changed files with 869 additions and 210 deletions.
diff --git a/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss b/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss
@@ -9,6 +9,9 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
 
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
@@ -20,15 +23,26 @@
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
+$block-class-overflow: #{$block-class}-popover;
+$block-class-modal: #{$block-class}-modal;
 
 .#{$block-class} {
   display: flex;
   width: 100%;
   min-width: $spacing-12;
   align-items: center;
+  justify-content: flex-start;
   white-space: nowrap;
 }
 
+.#{$block-class}--align-end {
+  justify-content: flex-end;
+}
+
+.#{$block-class}--align-center {
+  justify-content: center;
+}
+
 .#{$block-class}--multiline {
   flex-wrap: wrap;
 }
@@ -53,3 +67,146 @@ $block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
   display: inline-block;
   max-width: $spacing-09;
 }
+
+.#{$block-class-overflow} {
+  display: inline-block;
+  vertical-align: bottom;
+  .#{c4p-settings.$carbon-prefix}--tag.#{c4p-settings.$carbon-prefix}--tag--interactive {
+    border: 0;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--popover
+    .#{c4p-settings.$carbon-prefix}--popover-content {
+    padding: $spacing-05;
+  }
+}
+
+.#{$block-class-overflow}--hidden {
+  overflow: hidden;
+  max-width: 0;
+  visibility: hidden;
+}
+
+@include mixins.block-wrap('#{$block-class-overflow}__el') {
+  &.#{$block-class-overflow}__el {
+    // removes the min width in Carbon
+    min-width: initial;
+    text-align: left;
+  }
+
+  .#{$block-class-overflow}__trigger {
+    font-family: inherit;
+  }
+
+  .#{$block-class-overflow}__show-all-tags-link.#{c4p-settings.$carbon-prefix}--link:visited {
+    display: inline-block;
+    margin: $spacing-03 0 $spacing-02; // to match the tags
+    color: $link-inverse;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--link:active,
+  .#{c4p-settings.$carbon-prefix}--link:active:visited,
+  .#{c4p-settings.$carbon-prefix}--link:active:visited:hover {
+    color: $text-inverse;
+  }
+
+  .#{$block-class-overflow}__tag-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .#{$block-class-overflow}__show-all-tags-link {
+    margin-top: $spacing-03;
+    color: $link-inverse;
+  }
+
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
+    .#{c4p-settings.$carbon-prefix}--tag {
+    background-color: $background-inverse-hover;
+  }
+
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default,
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default
+    .#{c4p-settings.$carbon-prefix}--tag {
+    @include type.type-style('body-compact-01');
+
+    display: block;
+    overflow: hidden;
+    min-width: initial;
+    min-height: initial;
+    padding: 0;
+    border-radius: 0;
+    margin: 0;
+    background-color: inherit;
+    color: inherit;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$block-class-overflow}__tag
+    .#{c4p-settings.$carbon-prefix}--tag__close-icon {
+    // undo override by .#{c4p-settings.$carbon-prefix}--tooltip button
+    padding: 0;
+  }
+
+  .#{$block-class-overflow}__tag
+    .#{c4p-settings.$carbon-prefix}--tag--high-contrast {
+    background-color: $background;
+    color: $text-primary;
+  }
+
+  .#{$block-class-overflow}__tag
+    .#{c4p-settings.$carbon-prefix}--tag__close-icon:hover {
+    background-color: $background-hover;
+  }
+
+  .#{$block-class-overflow}__tag
+    .#{c4p-settings.$carbon-prefix}--tag__close-icon:focus {
+    box-shadow: inset 0 0 0 $spacing-01 $focus;
+  }
+}
+
+@include mixins.block-wrap('#{$block-class-modal}') {
+  &.#{$block-class-modal} {
+    // not to be overridden by use in tag set
+    text-align: initial;
+    white-space: initial;
+  }
+
+  .#{$block-class-modal}__container {
+    @include breakpoint(md) {
+      height: 90%;
+      max-height: 450px;
+    }
+  }
+
+  .#{$block-class-modal}__search {
+    margin-top: $spacing-05;
+    margin-bottom: 0;
+  }
+
+  &.#{$block-class-modal} .#{$block-class-modal}__fade {
+    position: relative;
+    margin-right: $spacing-05;
+    margin-left: $spacing-05;
+  }
+
+  .#{$block-class-modal}__body {
+    padding-bottom: $spacing-06;
+  }
+
+  .#{$block-class-modal}__header {
+    padding-right: 0;
+    margin-right: $spacing-05;
+  }
+
+  &.#{$block-class-modal} .#{$block-class-modal}__fade::after {
+    position: absolute;
+    top: calc(-1 * #{$spacing-11});
+    left: 0;
+    width: 100%;
+    height: $spacing-07;
+    background: linear-gradient(to bottom, transparent, $layer-01);
+    content: '';
+  }
+}