@carbon/ibm-products-styles 2.77.0-rc.0 → 2.78.0-rc.0

package/scss/components/TagSet/_carbon-imports.scss

@@ -0,0 +1,14 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// TagSet uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalBody, Search, Link, Tag, Tooltip
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/search';
+@use '@carbon/styles/scss/components/link';
+@use '@carbon/styles/scss/components/tag';
+@use '@carbon/styles/scss/components/popover';

package/scss/components/TagSet/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './carbon-imports';
+@use './tag-set';

package/scss/components/TagSet/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './tag-set';

package/scss/components/TagSet/_tag-set.scss

@@ -0,0 +1,189 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as *;
+@use '../../global/styles/mixins' as *;
+
+$block-class: #{$pkg-prefix}--tag-set;
+$block-class-overflow: #{$block-class}-overflow;
+$block-class-modal: #{$block-class}-modal;
+
+@include block-wrap($block-class) {
+  &.#{$block-class} {
+    display: block;
+    inline-size: 100%;
+  }
+
+  .#{$block-class}__space {
+    position: relative;
+    display: block;
+    inline-size: 100%;
+    white-space: nowrap;
+  }
+
+  .#{$block-class}__space--align-end {
+    text-align: end;
+  }
+
+  .#{$block-class}__space--align-center {
+    text-align: center;
+  }
+
+  .#{$block-class}__tag-container {
+    display: inline-flex; // needed to register a width
+    white-space: nowrap;
+  }
+
+  .#{$block-class}__tag-container--multiline {
+    flex-wrap: wrap;
+  }
+
+  .#{$block-class}__tag-container--hidden {
+    // This tag container is used to measure the width of all displayable tags
+    @include measuring-container;
+  }
+
+  .#{$block-class-overflow} {
+    display: inline-block;
+    vertical-align: bottom;
+    .#{$carbon-prefix}--tag.#{$carbon-prefix}--tag--interactive {
+      border: 0;
+    }
+
+    .#{$carbon-prefix}--popover .#{$carbon-prefix}--popover-content {
+      padding: $spacing-05;
+    }
+  }
+
+  .#{$block-class-overflow}--hidden {
+    overflow: hidden;
+    max-inline-size: 0;
+    visibility: hidden;
+  }
+
+  .#{$carbon-prefix}--tag {
+    margin-block-end: $spacing-03;
+    margin-inline-end: $spacing-03;
+  }
+}
+
+@include 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) {
+      block-size: 90%;
+      max-block-size: 450px;
+    }
+  }
+
+  .#{$block-class-modal}__search {
+    margin-block: $spacing-05 0;
+  }
+
+  .#{$block-class-modal}__header {
+    margin-inline-end: $spacing-05;
+    padding-inline-end: 0;
+  }
+
+  .#{$block-class-modal}__body {
+    .#{$carbon-prefix}--tag {
+      margin-block-end: $spacing-03;
+      margin-inline-end: $spacing-03;
+    }
+  }
+}
+
+@include block-wrap('#{$block-class-overflow}__tagset-popover') {
+  &.#{$block-class-overflow}__tagset-popover {
+    // removes the min width in Carbon
+    min-inline-size: initial;
+    text-align: start;
+  }
+
+  .#{$carbon-prefix}--link:active,
+  .#{$carbon-prefix}--link:active:visited,
+  .#{$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 {
+    color: $link-inverse;
+    margin-block-start: $spacing-03;
+
+    &:hover,
+    &:visited:hover {
+      color: $link-inverse-hover;
+    }
+
+    &:focus {
+      color: $focus-inverse;
+    }
+
+    &:visited {
+      color: $link-inverse;
+    }
+  }
+
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
+    .#{$carbon-prefix}--tag {
+    background-color: $background-inverse-hover;
+    // This adds spacing only for the overflow menu
+    // listing "tags" as opposed to just "labels".
+    margin-block-end: $spacing-01;
+  }
+
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default,
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default
+    .#{$carbon-prefix}--tag {
+    @include type.type-style('body-compact-01');
+
+    display: block;
+    overflow: hidden;
+    padding: 0;
+    border-radius: 0;
+    margin: 0;
+    background-color: inherit;
+    color: inherit;
+    min-block-size: initial;
+    min-inline-size: initial;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon {
+    // undo override by .#{$carbon-prefix}--tooltip button
+    padding: 0;
+  }
+
+  .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag--high-contrast {
+    background-color: $background;
+    color: $text-primary;
+  }
+
+  .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon:hover {
+    background-color: $background-hover;
+  }
+
+  .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon:focus {
+    box-shadow: inset 0 0 0 $spacing-01 $focus;
+  }
+}

package/scss/components/Tearsheet/_carbon-imports.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2022, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Tearsheets use the following Carbon components:
+// Button, ComposedModal, ModalHeader, ModalBody,
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/layer';

package/scss/components/Tearsheet/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './carbon-imports';
+@use './tearsheet';

package/scss/components/Tearsheet/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './tearsheet';