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.

Sign up for GitHub

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

chore(AI Label): web components - rename Slug to AI Label #17739

Merged
merged 21 commits into from
Oct 22, 2024
Merged

chore(AI Label): web components - rename Slug to AI Label #17739

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
e197bc6
chore: rename ai slug to ai label
annawen1 Oct 14, 2024
a574494
chore: rename to ai-label
annawen1 Oct 14, 2024
a6d4d19
chore: rename slug example to ai-label
annawen1 Oct 14, 2024
50ab934
chore: add ai label to form group stories
annawen1 Oct 14, 2024
fe5fadc
chore: rename handle slug slot change methods
annawen1 Oct 15, 2024
07c7ab4
Merge branch 'main' into chore/wc-slug-to-label
annawen1 Oct 16, 2024
4f84e94
chore: all stories shifted
annawen1 Oct 16, 2024
94e4a20
chore: resolve merge conflicts
annawen1 Oct 16, 2024
1068059
fix: fix radio-button with ai-label
annawen1 Oct 16, 2024
e54bbba
fix: modal ai-label styles
annawen1 Oct 16, 2024
caef18d
chore: rename test files to ai-label
annawen1 Oct 16, 2024
24dd01b
chore: add space between AI and Label in docs
annawen1 Oct 17, 2024
5b1d98d
chore: undo changes to tearsheet and side-panel
annawen1 Oct 17, 2024
f081274
Merge branch 'main' into chore/wc-slug-to-label
annawen1 Oct 21, 2024
7877c30
chore: keep slug component as deprecated
annawen1 Oct 21, 2024
2aa30ca
chore: resolve merge conflicts
annawen1 Oct 22, 2024
ca722cc
chore: restore readme
annawen1 Oct 22, 2024
9c83fd1
fix: specify js extensions for icon imports (#17818)
annawen1 Oct 21, 2024
e15fd32
chore: add extensions to icons in stories
annawen1 Oct 22, 2024
3176eb1
fix: show actions for playground and datatable sort
annawen1 Oct 22, 2024
c37c2a6
fix: catch both slug and ai-label in event handlers
annawen1 Oct 22, 2024
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
0 e2e/components/AILabel/Slug-test.avt.e2e.js → ...omponents/AILabel/AILabel-test.avt.e2e.js
View file
Open in desktop
File renamed without changes.
0 e2e/components/AILabel/Slug-test.e2e.js → e2e/components/AILabel/AILabel-test.e2e.js
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions packages/web-components/examples/autoalign/cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
></script>
<script
type="module"
src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/slug.min.js"
src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ai-label.min.js"
></script>
<script
type="module"
Expand Down Expand Up @@ -127,7 +127,7 @@
</div>

<div class="section">
<cds-slug autoalign>
<cds-ai-label autoalign>
<div slot="body-text">
<p class="secondary">AI Explained</p>
<h1>84%</h1>
Expand All @@ -140,7 +140,7 @@ <h1>84%</h1>
<p class="secondary">Model type</p>
<p class="bold">Foundation model</p>
</div>
</cds-slug>
</cds-ai-label>
</div>

<script>
Expand Down
6 changes: 3 additions & 3 deletions packages/web-components/examples/autoalign/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
cds-tooltip:not(:defined) {
display: none;
}
cds-slug:not(:defined) {
cds-ai-label:not(:defined) {
display: none;
}
</style>
Expand Down Expand Up @@ -111,7 +111,7 @@
</div>

<div class="section">
<cds-slug autoalign>
<cds-ai-label autoalign>
<div slot="body-text">
<p class="secondary">AI Explained</p>
<h1>84%</h1>
Expand All @@ -124,7 +124,7 @@ <h1>84%</h1>
<p class="secondary">Model type</p>
<p class="bold">Foundation model</p>
</div>
</cds-slug>
</cds-ai-label>
</div>

<script>
Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/examples/autoalign/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* LICENSE file in the root directory of this source tree.
*/

import "@carbon/web-components/es/components/slug/index.js";
import "@carbon/web-components/es/components/ai-label/index.js";
import "@carbon/web-components/es/components/popover/index.js";
import "@carbon/web-components/es/components/toggle-tip/index.js";
import "@carbon/web-components/es/components/tooltip/index.js";
Expand Down
0 ...nents/examples/components/slug/.gitignore → ...s/examples/components/ai-label/.gitignore
View file
Open in desktop
File renamed without changes.
0 ...mponents/examples/components/slug/.sassrc → ...ents/examples/components/ai-label/.sassrc
View file
Open in desktop
File renamed without changes.
8 changes: 4 additions & 4 deletions ...ponents/examples/components/slug/cdn.html → ...nts/examples/components/ai-label/cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" />
<style>
/* Suppress custom element until styles are loaded */
cds-slug:not(:defined) {
cds-ai-label:not(:defined) {
display: none;
}
</style>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/slug/v2/latest/slug.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ai-label.min.js"></script>
</head>
<body class="cds-theme-zone-white">
<cds-slug size="mini" alignment="bottom-left">
<cds-ai-label size="mini" alignment="bottom-left">
<span slot="body-text">AI was used to generate this content</span>
</cds-slug>
</cds-ai-label>
</body>
</html>
6 changes: 3 additions & 3 deletions ...nents/examples/components/slug/index.html → ...s/examples/components/ai-label/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@
<link rel="stylesheet" href="src/styles.scss" />
<style>
/* Suppress custom element until styles are loaded */
cds-slug:not(:defined) {
cds-ai-label:not(:defined) {
display: none;
}
</style>
<script type="module" src="src/index.js"></script>
</head>
<body>
<cds-slug size="mini" alignment="bottom-left">
<cds-ai-label size="mini" alignment="bottom-left">
<span slot="body-text">AI was used to generate this content</span>
</cds-slug>
</cds-ai-label>
</body>
</html>
2 changes: 1 addition & 1 deletion ...nts/examples/components/slug/package.json → ...examples/components/ai-label/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "carbon-web-components-slug-example",
"name": "carbon-web-components-ai-label-example",
"version": "0.1.0",
"private": true,
"description": "Sample project for getting started with the Web Components from Carbon.",
Expand Down
0 ...mples/components/slug/sandbox.config.json → ...s/components/ai-label/sandbox.config.json
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion ...nts/examples/components/slug/src/index.js → ...examples/components/ai-label/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@
* LICENSE file in the root directory of this source tree.
*/

import '@carbon/web-components/es/components/slug/index.js';
import '@carbon/web-components/es/components/ai-label/index.js';
0 .../examples/components/slug/src/styles.scss → ...mples/components/ai-label/src/styles.scss
View file
Open in desktop
File renamed without changes.
0 ...s/examples/components/slug/vite.config.js → ...amples/components/ai-label/vite.config.js
View file
Open in desktop
File renamed without changes.
8 changes: 4 additions & 4 deletions packages/web-components/examples/components/side-panel/cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/button.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/text-input.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/textarea.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/slug.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/ai-label.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/tabs.min.js"></script>
</head>
<body class="cds-theme-zone-white">
Expand Down Expand Up @@ -99,8 +99,8 @@ <h5>Section</h5>
Primary
</cds-button>

<!-- slotted slug -->
<cds-slug size="xs" alignment="bottom-right">
<!-- slotted ai-label -->
<cds-ai-label size="xs" alignment="bottom-right">
<div slot="body-text">
<p class="secondary">AI Explained</p>
<h1>84%</h1>
Expand All @@ -113,7 +113,7 @@ <h1>84%</h1>
<p class="secondary">Model type</p>
<p class="bold">Foundation model</p>
</div>
</cds-slug>
</cds-ai-label>
</cds-side-panel>
</body>
<script>
Expand Down
6 changes: 3 additions & 3 deletions packages/web-components/examples/components/side-panel/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,8 @@ <h5>Section</h5>
Primary
</cds-button>

<!-- slotted slug -->
<cds-slug size="xs" alignment="bottom-right">
<!-- slotted ai-label -->
<cds-ai-label size="xs" alignment="bottom-right">
<div slot="body-text">
<p class="secondary">AI Explained</p>
<h1>84%</h1>
Expand All @@ -107,7 +107,7 @@ <h1>84%</h1>
<p class="secondary">Model type</p>
<p class="bold">Foundation model</p>
</div>
</cds-slug>
</cds-ai-label>
</cds-side-panel>
</body>

Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/examples/components/side-panel/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@ import '@carbon/web-components/es/components/side-panel/index.js';
import '@carbon/web-components/es/components/button/index.js';
import '@carbon/web-components/es/components/text-input/index.js';
import '@carbon/web-components/es/components/textarea/index.js';
import '@carbon/web-components/es/components/slug/index.js';
import '@carbon/web-components/es/components/ai-label/index.js';
import '@carbon/web-components/es/components/tabs/index.js';
8 changes: 4 additions & 4 deletions packages/web-components/examples/components/tearsheet/cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
></script>
<script
type="module"
src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/slug.min.js"
src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/ai-label.min.js"
></script>
<script
type="module"
Expand Down Expand Up @@ -122,8 +122,8 @@ <h5>Section</h5>
Primary
</cds-button>

<!-- slotted slug -->
<cds-slug size="xs" alignment="bottom-right">
<!-- slotted ai-label -->
<cds-ai-label size="xs" alignment="bottom-right">
<div slot="body-text">
<p class="secondary">AI Explained</p>
<h1>84%</h1>
Expand All @@ -136,7 +136,7 @@ <h1>84%</h1>
<p class="secondary">Model type</p>
<p class="bold">Foundation model</p>
</div>
</cds-slug>
</cds-ai-label>

<!-- slotted header-navigation -->
<div slot="header-navigation">
Expand Down
6 changes: 3 additions & 3 deletions packages/web-components/examples/components/tearsheet/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,8 @@ <h5>Section</h5>
Primary
</cds-button>

<!-- slotted slug -->
<cds-slug size="xs" alignment="bottom-right">
<!-- slotted ai-label -->
<cds-ai-label size="xs" alignment="bottom-right">
<div slot="body-text">
<p class="secondary">AI Explained</p>
<h1>84%</h1>
Expand All @@ -107,7 +107,7 @@ <h1>84%</h1>
<p class="secondary">Model type</p>
<p class="bold">Foundation model</p>
</div>
</cds-slug>
</cds-ai-label>

<!-- slotted header-navigation -->
<div slot="header-navigation">
Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/examples/components/tearsheet/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@ import '@carbon/web-components/es/components/tearsheet/index.js';
import '@carbon/web-components/es/components/button/index.js';
import '@carbon/web-components/es/components/text-input/index.js';
import '@carbon/web-components/es/components/textarea/index.js';
import '@carbon/web-components/es/components/slug/index.js';
import '@carbon/web-components/es/components/ai-label/index.js';
import '@carbon/web-components/es/components/tabs/index.js';
30 changes: 30 additions & 0 deletions packages/web-components/src/components/ai-label/ai-label-action-button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* @license
*
* Copyright IBM Corp. 2019, 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.
*/

import { property } from 'lit/decorators.js';
import { prefix } from '../../globals/settings';
import CDSButton from '../button/button';
import styles from './ai-label.scss?lit';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';

/**
* AI Label action button.
*
* @element cds-ai-label-action-button
*/
@customElement(`${prefix}-ai-label-action-button`)
export default class CDSAILabelActionButton extends CDSButton {
/**
* The shadow slot this ai-label-action should be in.
*/
@property({ reflect: true })
slot = 'actions';

static styles = styles;
}
22 changes: 11 additions & 11 deletions ...nents/src/components/slug/slug-story.scss → ...c/components/ai-label/ai-label-story.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/config' as *;

.slug-container {
.ai-label-container {
display: flex;
align-items: flex-start;
margin-block-end: $spacing-12;
Expand All @@ -22,7 +22,7 @@
}
}

.slug-container-example.centered {
.ai-label-container-example.centered {
align-items: center;
justify-content: center;
margin: 0;
Expand Down Expand Up @@ -56,7 +56,7 @@ div #{$prefix}-selectable-tile::-moz-list-bullet {
margin-block-end: $spacing-05;
}

.slug-tile-container {
.ai-label-tile-container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
Expand All @@ -78,37 +78,37 @@ div #{$prefix}-selectable-tile::-moz-list-bullet {
}
}

.slug-tile-container h4 {
.ai-label-tile-container h4 {
margin-block-end: $spacing-05;
}

.slug-tile-container .ai-data {
.ai-label-tile-container .ai-data {
display: flex;
padding: $spacing-05 0;
margin-block-start: $spacing-05;
}

.slug-tile-container .data-container {
.ai-label-tile-container .data-container {
inline-size: 126px;
}

.slug-tile-container .data-container:first-of-type {
.ai-label-tile-container .data-container:first-of-type {
margin-inline-end: $spacing-05;
}

.slug-tile-container p {
.ai-label-tile-container p {
@include type-style('body-01');
}

.slug-tile-container .data-container p {
.ai-label-tile-container .data-container p {
@include type-style('label-02');
}

.slug-tile-container #{$prefix}-tile-below-the-fold-content {
.ai-label-tile-container #{$prefix}-tile-below-the-fold-content {
padding-block-start: $spacing-05;
}

.slug-tile-container #{$prefix}-tile-below-the-fold-content p {
.ai-label-tile-container #{$prefix}-tile-below-the-fold-content p {
@include type-style('label-01');

margin: $spacing-03 0 50px;
Expand Down
Loading
Loading