revert: "feat: Implementation of the Badge component Style API (#3650)" (#3675)

Author: teodoranemes

pages/badge.page.tsx

@@ -1,3 +1,43 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-export { default } from './badge/permutations.page';
+import * as React from 'react';
+
+import Badge, { BadgeProps } from '~components/badge';
+
+import createPermutations from './utils/permutations';
+import PermutationsView from './utils/permutations-view';
+import ScreenshotArea from './utils/screenshot-area';
+
+const permutations = createPermutations<BadgeProps>([
+  {
+    color: [
+      'blue',
+      'grey',
+      'green',
+      'red',
+      'severity-critical',
+      'severity-high',
+      'severity-medium',
+      'severity-low',
+      'severity-neutral',
+    ],
+    children: [
+      'ABC',
+      'Badge With A Very Long Text',
+      <>
+        Badge with <strong>html</strong>
+      </>,
+    ],
+  },
+]);
+
+export default function BadgePermutations() {
+  return (
+    <>
+      <h1>Badge permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView permutations={permutations} render={permutation => <Badge {...permutation} />} />
+      </ScreenshotArea>
+    </>
+  );
+}

pages/badge/permutations.page.tsx

@@ -2907,23 +2907,6 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
       "optional": true,
       "type": "string",
     },
-    {
-      "description": "Specifies an object of selectors and properties that are used to apply custom styles.
-
-- \`root.background\` (string) - (Optional) Background for badge.
-- \`root.borderColor\` (string) - (Optional) Border color for badge.
-- \`root.borderRadius\` (string) - (Optional) Border radius style.
-- \`root.borderWidth\` (string) - (Optional) Border width style.
-- \`root.color\` (string) - (Optional) Text color for badge.
-- \`root.paddingBlock\` (string) - (Optional) Block dimension padding.
-- \`root.paddingInline\` (string) - (Optional) Inline dimension padding.",
-      "name": "style",
-      "optional": true,
-      "systemTags": [
-        "core",
-      ],
-      "type": "BadgeProps.Style",
-    },
   ],
   "regions": [
     {

pages/badge/style-custom-types.page.tsx

@@ -57,31 +57,3 @@ describe('Badge', () => {
     expect(badge).toHaveClass(styles[`badge-color-grey`]);
   });
 });
-
-describe('Style API', () => {
-  test('all style properties', () => {
-    const badge = renderBadge(
-      <Badge
-        style={{
-          root: {
-            background: 'rgb(255, 255, 255)',
-            borderColor: 'rgb(0, 0, 0)',
-            borderRadius: '8px',
-            borderWidth: '2px',
-            paddingBlock: '4px',
-            paddingInline: '8px',
-          },
-        }}
-      >
-        Badge
-      </Badge>
-    );
-
-    expect(getComputedStyle(badge).getPropertyValue('background')).toBe('rgb(255, 255, 255)');
-    expect(getComputedStyle(badge).getPropertyValue('border-color')).toBe('rgb(0, 0, 0)');
-    expect(getComputedStyle(badge).getPropertyValue('border-radius')).toBe('8px');
-    expect(getComputedStyle(badge).getPropertyValue('border-width')).toBe('2px');
-    expect(getComputedStyle(badge).getPropertyValue('padding-block')).toBe('4px');
-    expect(getComputedStyle(badge).getPropertyValue('padding-inline')).toBe('8px');
-  });
-});

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -8,20 +8,19 @@ import { getBaseProps } from '../internal/base-component';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { BadgeProps } from './interfaces';
-import { getBadgeStyles } from './style';
 
 import styles from './styles.css.js';
 
 export { BadgeProps };
 
-export default function Badge({ color = 'grey', children, style, ...rest }: BadgeProps) {
+export default function Badge({ color = 'grey', children, ...rest }: BadgeProps) {
   const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });
   const baseProps = getBaseProps(rest);
 
   const className = clsx(baseProps.className, styles.badge, styles[`badge-color-${color}`]);
 
   return (
-    <span {...baseProps} {...{ className }} ref={__internalRootRef} style={getBadgeStyles(style)}>
+    <span {...baseProps} {...{ className }} ref={__internalRootRef}>
       {children}
     </span>
   );

src/badge/__tests__/badge.test.tsx

@@ -23,32 +23,4 @@ export interface BadgeProps extends BaseComponentProps {
    * Text displayed inside the badge.
    */
   children?: React.ReactNode;
-
-  /**
-   * Specifies an object of selectors and properties that are used to apply custom styles.
-   *
-   * - `root.background` (string) - (Optional) Background for badge.
-   * - `root.borderColor` (string) - (Optional) Border color for badge.
-   * - `root.borderRadius` (string) - (Optional) Border radius style.
-   * - `root.borderWidth` (string) - (Optional) Border width style.
-   * - `root.color` (string) - (Optional) Text color for badge.
-   * - `root.paddingBlock` (string) - (Optional) Block dimension padding.
-   * - `root.paddingInline` (string) - (Optional) Inline dimension padding.
-   * @awsuiSystem core
-   */
-  style?: BadgeProps.Style;
-}
-
-export namespace BadgeProps {
-  export interface Style {
-    root?: {
-      background?: string;
-      borderColor?: string;
-      borderRadius?: string;
-      borderWidth?: string;
-      color?: string;
-      paddingBlock?: string;
-      paddingInline?: string;
-    };
-  }
 }

src/badge/index.tsx

@@ -16,8 +16,6 @@
   border-start-end-radius: awsui.$border-radius-badge;
   border-end-start-radius: awsui.$border-radius-badge;
   border-end-end-radius: awsui.$border-radius-badge;
-  border-block-style: solid;
-  border-inline-style: solid;
   padding-block: 0;
   padding-inline: awsui.$space-xs;
   color: awsui.$color-text-notification-default;