Merge pull request #260 from element-hq/t3chguy/wat/75

element-hq · Oct 10, 2024 · 3d495c4 · 3d495c4
2 parents 39deac5 + f0ddd82
commit 3d495c4
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 16 deletions.
diff --git a/playwright/visual.test.ts-snapshots/Badge-Badge-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Badge-Badge-1-chromium-linux.png
diff --git a/src/components/Badge/Badge.module.css b/src/components/Badge/Badge.module.css
@@ -20,16 +20,34 @@ limitations under the License.
   align-items: center;
   border-radius: 9999px; /* pill effect */
   padding: var(--cpd-space-1x) var(--cpd-space-3x);
-  background: var(--cpd-color-gray-400);
-  color: var(--cpd-color-text-secondary);
 }
 
-.badge[data-kind="success"] {
-  background: var(--cpd-color-green-400);
-  color: var(--cpd-color-green-900);
+.badge[data-kind="default"] {
+  border: 1px solid var(--cpd-color-alpha-gray-400);
+  color: var(--cpd-color-gray-1100);
 }
 
-.badge[data-kind="critical"] {
-  background: var(--cpd-color-red-400);
-  color: var(--cpd-color-red-900);
+.badge[data-kind="grey"] {
+  background: var(--cpd-color-alpha-gray-300);
+  color: var(--cpd-color-gray-1100);
+}
+
+.badge[data-kind="on-solid"] {
+  background: var(--cpd-color-alpha-gray-1200);
+  color: var(--cpd-color-text-on-solid-primary);
+}
+
+.badge[data-kind="blue"] {
+  background: var(--cpd-color-alpha-blue-300);
+  color: var(--cpd-color-blue-1100);
+}
+
+.badge[data-kind="green"] {
+  background: var(--cpd-color-alpha-green-300);
+  color: var(--cpd-color-green-1100);
+}
+
+.badge[data-kind="red"] {
+  background: var(--cpd-color-alpha-red-300);
+  color: var(--cpd-color-red-1100);
 }
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
@@ -27,13 +27,29 @@ export default {
 } as Meta<typeof BadgeComponent>;
 
 const Template: StoryFn<typeof BadgeComponent> = () => (
-  <>
-    <BadgeComponent kind="success">Trusted</BadgeComponent>
-    &nbsp;
-    <BadgeComponent kind="critical">Not trusted</BadgeComponent>
-    &nbsp;
-    <BadgeComponent kind="default">Public room</BadgeComponent>
-  </>
+  <div>
+    <div>
+      <BadgeComponent kind="green">Trusted</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="red">Not trusted</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="grey">Public room</BadgeComponent>
+    </div>
+    <br />
+    <div>
+      <BadgeComponent kind="default">Default</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="grey">Grey</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="on-solid">On Solid</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="blue">Blue</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="green">Green</BadgeComponent>
+      &nbsp;
+      <BadgeComponent kind="red">Red</BadgeComponent>
+    </div>
+  </div>
 );
 
 export const Badge = Template.bind({});

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -27,7 +27,7 @@ type BadgeProps = {
   /**
    * The type of badge.
    */
-  kind?: "default" | "success" | "critical";
+  kind?: "default" | "grey" | "on-solid" | "blue" | "green" | "red";
 };
 
 /**