fix: divider styling, remove chat component context

Author: SpyZzey

src/item-card/__tests__/__snapshots__/styles.test.tsx.snap

@@ -23,26 +23,23 @@ exports[`getContentStyles handles all possible style configurations 3`] = `
 
 exports[`getFooterStyles handles all possible style configurations 1`] = `
 {
-  "borderColor": undefined,
-  "borderWidth": undefined,
   "paddingBlock": undefined,
   "paddingInline": undefined,
 }
 `;
 
 exports[`getFooterStyles handles all possible style configurations 2`] = `
 {
-  "borderColor": undefined,
-  "borderWidth": undefined,
   "paddingBlock": undefined,
   "paddingInline": undefined,
 }
 `;
 
 exports[`getFooterStyles handles all possible style configurations 3`] = `
 {
-  "borderColor": "#e0e0e0",
-  "borderWidth": "1px",
+  "borderBlockStartColor": "#e0e0e0",
+  "borderBlockStartStyle": "solid",
+  "borderBlockStartWidth": "1px",
   "paddingBlock": "12px",
   "paddingInline": "20px",
 }

src/item-card/interfaces.ts

@@ -37,7 +37,7 @@ export interface BaseItemCardProps extends BaseComponentProps {
   children?: React.ReactNode;
 
   /**
-   * Displays an icon next to the content. You can use the `iconPosition` and `iconVerticalAlignment` properties to position the icon.
+   * Displays an icon next to the content.
    */
   iconName?: IconProps.Name;
 
@@ -118,9 +118,6 @@ export interface ItemCardProps extends BaseItemCardProps {
 }
 
 export namespace ItemCardProps {
-  export type IconPosition = 'left' | 'right';
-  export type IconVerticalAlignment = 'top' | 'center';
-
   export interface Style {
     root?: {
       background?: string;

src/item-card/style.tsx

@@ -46,9 +46,12 @@ export function getFooterStyles(style: ItemCardProps.Style | undefined) {
     return {};
   }
 
+  const hasDivider = style?.footer?.divider?.borderColor || style?.footer?.divider?.borderWidth;
+
   return {
-    borderColor: style?.footer?.divider?.borderColor,
-    borderWidth: style?.footer?.divider?.borderWidth,
+    ...(hasDivider && { borderBlockStartStyle: 'solid' as const }),
+    ...(style?.footer?.divider?.borderColor && { borderBlockStartColor: style.footer.divider.borderColor }),
+    ...(style?.footer?.divider?.borderWidth && { borderBlockStartWidth: style.footer.divider.borderWidth }),
     paddingBlock: style?.footer?.root?.paddingBlock,
     paddingInline: style?.footer?.root?.paddingInline,
   };

src/test-utils/dom/item-card/index.ts

@@ -18,14 +18,14 @@ export default class ItemCardWrapper extends ComponentWrapper<HTMLDivElement> {
   /**
    * Finds the content slot of the card.
    */
-  findContent(): ElementWrapper {
+  findContent(): ElementWrapper | null {
     return this.findByClassName(styles.body)!;
   }
 
   /**
    * Finds the description slot of the card.
    */
-  findDescription(): ElementWrapper {
+  findDescription(): ElementWrapper | null {
     return this.findByClassName(styles.description)!;
   }
 

style-dictionary/utils/contexts.ts

@@ -75,11 +75,3 @@ export const createAppLayoutToolbarContext = (tokens: TokenCategory<string, Glob
     tokens,
   };
 };
-
-export const createChatComponentsContext = (tokens: TokenCategory<string, GlobalValue | ModeValue>) => {
-  return {
-    id: 'chat-components',
-    selector: '.awsui-context-chat-components',
-    tokens,
-  };
-};

style-dictionary/visual-refresh/contexts/chat-components.ts

@@ -5,7 +5,6 @@ import { ThemeBuilder } from '@cloudscape-design/theming-build';
 import {
   createAlertContext,
   createAppLayoutToolbarContext,
-  createChatComponentsContext,
   createCompactTableContext,
   createFlashbarContext,
   createFlashbarWarningContext,
@@ -53,7 +52,6 @@ export async function buildVisualRefresh(builder: ThemeBuilder) {
   builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens));
   builder.addContext(createHeaderAlertContext((await import('./contexts/header-alert.js')).tokens));
   builder.addContext(createAppLayoutToolbarContext((await import('./contexts/app-layout-toolbar.js')).tokens));
-  builder.addContext(createChatComponentsContext((await import('./contexts/chat-components.js')).tokens));
 
   return builder.build();
 }