Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Tearsheet ai #4215

Merged
merged 9 commits into from
Feb 19, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -2756,6 +2756,12 @@ p.c4p--about-modal__copyright-text:first-child {
max-height: calc(100% - 3rem);
transform: translate3d(0, min(95vh, 500px), 0);
}
.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container {
border: 1px solid transparent;
/* override carbon ai removing background gradient */
background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
}
.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
}
Expand Down Expand Up @@ -2853,8 +2859,11 @@ p.c4p--about-modal__copyright-text:first-child {
.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-nav {
padding: 1.5rem 2rem 0;
}
.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
padding-right: 4rem;
.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header {
padding-right: 5rem;
}
.c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
margin-right: 3rem;
}
.c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
max-width: 80%;
Expand Down Expand Up @@ -2907,6 +2916,9 @@ p.c4p--about-modal__copyright-text:first-child {
overflow: auto;
flex-grow: 1;
}
.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__main {
background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
}
.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
Expand Down Expand Up @@ -2945,6 +2957,9 @@ p.c4p--about-modal__copyright-text:first-child {
.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
background: var(--cds-background, #ffffff);
}
.c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
inset-inline-end: 0;
}

.c4p--create-tearsheet-narrow .cds--modal-header__heading,
.c4p--create-tearsheet-narrow .cds--modal-header__label,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,22 @@ $motion-duration: $duration-moderate-02;
transform: translate3d(0, calc(min(95vh, 500px)), 0);
}

&.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-slug
.#{$block-class}__container {
border: 1px solid transparent;
/* override carbon ai removing background gradient */
background: linear-gradient(to top, var(--cds-layer), var(--cds-layer))
padding-box,
linear-gradient(
to bottom,
var(--cds-ai-border-start, #78a9ff),
var(--cds-ai-border-end, #d0e2ff)
)
border-box,
linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
box-shadow: 0 4px 10px 2px $ai-drop-shadow;
}

// extra specificity to ensure this transition overrides the carbon default
&.#{$block-class}.#{$block-class} .#{$block-class}__container {
transition: transform $motion-duration motion(entrance, expressive),
Expand Down Expand Up @@ -223,8 +239,14 @@ $motion-duration: $duration-moderate-02;
}

&.#{$block-class}--wide
.#{$block-class}__header.#{$block-class}__header--with-close-icon,
&.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header {
padding-right: $spacing-11;
}

&.#{$block-class}--wide.#{$block-class}--has-slug
.#{$block-class}__header.#{$block-class}__header--with-close-icon {
padding-right: $spacing-10;
margin-right: $spacing-09;
}

&.#{$block-class}--narrow .#{$block-class}__header-description {
Expand Down Expand Up @@ -292,6 +314,10 @@ $motion-duration: $duration-moderate-02;
flex-grow: 1;
}

&.#{$block-class}--has-slug .#{$block-class}__main {
@include utilities.callout-gradient('default', 0);
}

&.#{$block-class}--wide .#{$block-class}__content {
// Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54
.#{$carbon-prefix}--pagination,
Expand Down Expand Up @@ -320,7 +346,8 @@ $motion-duration: $duration-moderate-02;
.#{$carbon-prefix}--dropdown--light .#{$carbon-prefix}--dropdown-list,
/* stylelint-disable-next-line prettier/prettier */
.#{$carbon-prefix}--number--light input[type='number'],
.#{$carbon-prefix}--date-picker--light .#{$carbon-prefix}--date-picker__input {
.#{$carbon-prefix}--date-picker--light
.#{$carbon-prefix}--date-picker__input {
background-color: $field-02;
}
}
Expand All @@ -340,4 +367,9 @@ $motion-duration: $duration-moderate-02;
&.#{$block-class}--wide .#{$block-class}__buttons {
background: $background;
}

&.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
.#{$carbon-prefix}--slug {
inset-inline-end: 0;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import {
Tabs,
TabList,
TextInput,
unstable__Slug as Slug,
unstable__SlugContent as SlugContent,
} from '@carbon/react';

import { Tearsheet, deprecatedProps } from './Tearsheet';
Expand Down Expand Up @@ -102,6 +104,17 @@ export default {
navigation: { control: { disable: true } },
open: { control: { disable: true } },
portalTarget: { control: { disable: true } },
slug: {
control: {
type: 'select',
labels: {
0: 'No AI slug',
1: 'with AI Slug',
},
default: 0,
},
options: [0, 1],
},
},
};

Expand Down Expand Up @@ -160,9 +173,29 @@ const tabs = (

const title = 'Title of the tearsheet';

const sampleSlug = (
<Slug className="slug-container" size="xs">
<SlugContent>
<div>
<p className="secondary">AI Explained</p>
<h1>84%</h1>
<p className="secondary bold">Confidence score</p>
<p className="secondary">
This is not really Lorem Ipsum but the spell checker did not like the
previous text with it&apos;s non-words which is why this unwieldy
sentence, should one choose to call it that, here.
</p>
<hr />
<p className="secondary">Model type</p>
<p className="bold">Foundation model</p>
</div>
</SlugContent>
</Slug>
);

// Template.
// eslint-disable-next-line react/prop-types
const Template = ({ actions, ...args }) => {
const Template = ({ actions, slug, ...args }) => {
const [open, setOpen] = useState(false);

const wiredActions =
Expand Down Expand Up @@ -193,6 +226,7 @@ const Template = ({ actions, ...args }) => {
actions={wiredActions}
open={open}
onClose={() => setOpen(false)}
slug={slug && sampleSlug}
>
{mainContent}
</Tearsheet>
Expand All @@ -202,7 +236,7 @@ const Template = ({ actions, ...args }) => {
};

// eslint-disable-next-line react/prop-types
const StackedTemplate = ({ actions, ...args }) => {
const StackedTemplate = ({ actions, slug, ...args }) => {
const [open1, setOpen1] = useState(false);
const [open2, setOpen2] = useState(false);
const [open3, setOpen3] = useState(false);
Expand Down Expand Up @@ -294,6 +328,7 @@ const StackedTemplate = ({ actions, ...args }) => {
open={open1}
onClose={() => setOpen1(false)}
selectorPrimaryFocus="#stacked-input-1"
slug={slug && sampleSlug}
>
<div className="tearsheet-stories__dummy-content-block">
Main content 1
Expand Down Expand Up @@ -323,6 +358,7 @@ const StackedTemplate = ({ actions, ...args }) => {
open={open2}
onClose={() => setOpen2(false)}
selectorPrimaryFocus="#stacked-input-2"
slug={slug && sampleSlug}
>
<div className="tearsheet-stories__dummy-content-block">
Main content 2
Expand All @@ -339,6 +375,7 @@ const StackedTemplate = ({ actions, ...args }) => {
open={open3}
onClose={() => setOpen3(false)}
selectorPrimaryFocus="#stacked-input-3"
slug={slug && sampleSlug}
>
<div className="tearsheet-stories__dummy-content-block">
Main content 3
Expand Down Expand Up @@ -408,6 +445,7 @@ export const fullyLoaded = prepareStory(Template, {
onClose: action('onClose called'),
title,
actions: 0,
slug: 1,
},
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,14 @@ import { action } from '@storybook/addon-actions';

import { pkg } from '../../settings';

import { Button, Form, FormGroup, TextInput } from '@carbon/react';
import {
Button,
Form,
FormGroup,
TextInput,
unstable__Slug as Slug,
unstable__SlugContent as SlugContent,
} from '@carbon/react';

import { TearsheetNarrow, deprecatedProps } from './TearsheetNarrow';

Expand Down Expand Up @@ -57,6 +64,17 @@ export default {
onClose: { control: { disable: true } },
open: { control: { disable: true } },
portalTarget: { control: { disable: true } },
slug: {
control: {
type: 'select',
labels: {
0: 'No AI slug',
1: 'with AI Slug',
},
default: 0,
},
options: [0, 1],
},
},
};

Expand All @@ -83,9 +101,29 @@ const mainContent = (

const title = 'Title of the tearsheet';

const sampleSlug = (
<Slug className="slug-container" size="xs">
<SlugContent>
<div>
<p className="secondary">AI Explained</p>
<h1>84%</h1>
<p className="secondary bold">Confidence score</p>
<p className="secondary">
This is not really Lorem Ipsum but the spell checker did not like the
previous text with it&apos;s non-words which is why this unwieldy
sentence, should one choose to call it that, here.
</p>
<hr />
<p className="secondary">Model type</p>
<p className="bold">Foundation model</p>
</div>
</SlugContent>
</Slug>
);

// Template.
// eslint-disable-next-line react/prop-types
const Template = ({ actions, ...args }) => {
const Template = ({ actions, slug, ...args }) => {
const [open, setOpen] = useState(false);
const ref = useRef();

Expand Down Expand Up @@ -113,6 +151,7 @@ const Template = ({ actions, ...args }) => {
actions={wiredActions}
open={open}
onClose={() => setOpen(false)}
slug={slug && sampleSlug}
>
{mainContent}
</TearsheetNarrow>
Expand All @@ -122,7 +161,7 @@ const Template = ({ actions, ...args }) => {
};

// eslint-disable-next-line react/prop-types
const StackedTemplate = ({ actions, ...args }) => {
const StackedTemplate = ({ actions, slug, ...args }) => {
const [open1, setOpen1] = useState(false);
const [open2, setOpen2] = useState(false);
const [open3, setOpen3] = useState(false);
Expand Down Expand Up @@ -194,6 +233,7 @@ const StackedTemplate = ({ actions, ...args }) => {
title="Tearsheet #1"
open={open1}
onClose={() => setOpen1(false)}
slug={slug && sampleSlug}
>
<div className="tearsheet-stories__narrow-content-block">
Main content 1
Expand All @@ -205,6 +245,7 @@ const StackedTemplate = ({ actions, ...args }) => {
title="Tearsheet #2"
open={open2}
onClose={() => setOpen2(false)}
slug={slug && sampleSlug}
>
<div className="tearsheet-stories__narrow-content-block">
Main content 2
Expand All @@ -216,6 +257,7 @@ const StackedTemplate = ({ actions, ...args }) => {
title="Tearsheet #3"
open={open3}
onClose={() => setOpen3(false)}
slug={slug && sampleSlug}
>
<div className="tearsheet-stories__narrow-content-block">
Main content 3
Expand Down Expand Up @@ -248,6 +290,7 @@ export const fullyLoaded = prepareStory(Template, {
onClose: action('onClose called'),
title,
actions: 0,
slug: 1,
},
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,10 @@ export const TearsheetShell = React.forwardRef(
navigation,
onClose,
open,
portalTarget: portalTargetIn,
selectorPrimaryFocus,
size,
portalTarget: portalTargetIn,
slug,
title,
verticalPosition,
// Collect any other property values passed in.
Expand Down Expand Up @@ -222,7 +223,10 @@ export const TearsheetShell = React.forwardRef(
depth > 1 || (depth === 1 && prevDepth.current > 1),
[`${bc}--wide`]: wide,
[`${bc}--narrow`]: !wide,
[`${bc}--has-slug`]: slug,
[`${bc}--has-close`]: effectiveHasCloseIcon,
})}
slug={slug}
style={{
[`--${bc}--stacking-scale-factor-single`]: (width - 32) / width,
[`--${bc}--stacking-scale-factor-double`]: (width - 64) / width,
Expand Down Expand Up @@ -492,6 +496,11 @@ TearsheetShell.propTypes = {
*/
size: PropTypes.oneOf(['narrow', 'wide']).isRequired,

/**
* **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
*/
slug: PropTypes.node,

/**
* The main title of the tearsheet, displayed in the header area.
*/
Expand Down
Loading
Loading