@carbon/ibm-products 2.0.0-rc.10 → 2.0.0-rc.11

package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss

@@ -0,0 +1,87 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2022
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+// stylelint-disable carbon/layout-token-use
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/layout' as *;
+
+@use '../../../../global/styles/project-settings' as c4p-settings;
+@use '../variables';
+
+$action-set-height: rem(64px);
+
+.#{variables.$block-class}-filter-flyout__container {
+  position: relative;
+}
+
+.#{variables.$block-class}-filter-flyout {
+  position: absolute;
+  top: $spacing-09;
+  right: 0;
+  display: none;
+  width: rem(642px);
+  background-color: $layer-02;
+  box-shadow: 0 1px rem(8px) 0 rgba(0, 0, 0, 0.25);
+}
+
+.#{variables.$block-class}-filter-flyout--open {
+  display: grid;
+}
+
+.#{variables.$block-class}-filter-flyout--batch {
+  min-height: rem(346px);
+  grid-template-rows: 1fr rem(48px);
+}
+
+.#{variables.$block-class}-filter-flyout--instant {
+  min-height: rem(282px);
+  grid-template-rows: 1fr;
+}
+
+.#{variables.$block-class}-filter-flyout__inner-container {
+  padding: $spacing-05 $spacing-05 $spacing-09 $spacing-05;
+}
+
+.#{variables.$block-class}-filter-flyout__inner-container::before {
+  position: absolute;
+  top: rem(-7px);
+  right: 1px;
+  display: block;
+  width: rem(46px);
+  height: rem(15px);
+  background-color: $layer-02;
+  content: '';
+}
+
+.#{variables.$block-class}-filter-flyout__title {
+  display: block;
+  @include type-style('heading-compact-01');
+
+  margin-bottom: $spacing-06;
+}
+
+.#{variables.$block-class}-filter-flyout__filters {
+  display: grid;
+  gap: rem(16px) rem(32px);
+  grid-template-columns: 1fr 1fr;
+}
+
+// Carbon overrides
+.#{variables.$block-class}-filter-flyout__trigger--open.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--icon-only {
+  position: relative;
+  background-color: $layer-02;
+  box-shadow: 0 1px rem(8px) 0 rgba(0, 0, 0, 0.25);
+}
+
+.#{variables.$block-class}-filter-flyout
+  .#{c4p-settings.$carbon-prefix}--fieldset {
+  margin-bottom: 0;
+}

package/scss/components/FilterSummary/_filter-summary.scss

@@ -0,0 +1,20 @@
+//
+// Copyright IBM Corp. 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 '../../global/styles/project-settings' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+$block-class: #{$pkg-prefix}--filter-summary;
+
+.#{$block-class} {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: $spacing-03;
+  border-top: 1px solid $border-subtle-01;
+  background: $layer-01;
+}

package/scss/components/FilterSummary/_index.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+// An index file is most useful when you have multiple components
+
+@use './filter-summary';

package/scss/components/FilterSummary/_storybook-styles.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.
+//
+#root {
+  width: 100%;
+}
+
+.preview-position-fix {
+  max-width: 700px;
+  margin: 0 auto;
+}

package/scss/components/_index.scss

@@ -23,6 +23,7 @@
 @use './EmptyStates';
 @use './ExportModal';
 @use './ExpressiveCard';
+@use './FilterSummary/index';
 @use './HTTPErrors';
 @use './ImportModal';
 @use './ModifiedTabs';