reduce unnecessary classnames

mittwald · Jan 19, 2024 · 59c53d0 · 59c53d0
1 parent dbc568e
commit 59c53d0
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 31 deletions.
diff --git a/packages/components/src/components/CopyButton/CopyButton.module.css b/packages/components/src/components/CopyButton/CopyButton.module.css
diff --git a/packages/components/src/components/CopyButton/CopyButton.tsx b/packages/components/src/components/CopyButton/CopyButton.tsx
@@ -6,7 +6,6 @@ import { Icon } from "@/components/Icon";
 import { faCopy } from "@fortawesome/free-regular-svg-icons/faCopy";
 import locales from "./locales/*.locale.json";
 import { useLocalizedStringFormatter } from "react-aria";
-import styles from "./CopyButton.module.css";
 import clsx from "clsx";
 
 export interface CopyButtonProps {
@@ -19,7 +18,7 @@ export const CopyButton: FC<CopyButtonProps> = (props) => {
 
   const stringFormatter = useLocalizedStringFormatter(locales);
 
-  const rootClassName = clsx(className, styles.root);
+  const rootClassName = clsx(className);
 
   const ariaLabel = stringFormatter.format("copyButton.copy");
 

diff --git a/packages/components/src/components/LabeledValue/LabeledValue.module.css b/packages/components/src/components/LabeledValue/LabeledValue.module.css
@@ -9,23 +9,23 @@
   column-gap: var(--labeled-value--value-to-copy-button-spacing);
   width: fit-content;
 
-  &:has(.copyButton) {
+  &:has(> :global(.flow-button)) {
     grid-template-areas:
       "label label"
-      "value copyButton";
+      "value button";
   }
-}
 
-.label {
-  grid-area: label;
-}
+  :global(.flow-label) {
+    grid-area: label;
+  }
 
-.value {
-  grid-area: value;
-}
+  :global(.flow-text) {
+    grid-area: value;
+  }
 
-.copyButton {
-  grid-area: copyButton;
-  margin-top: calc(var(--labeled-value--label-to-value-spacing) * -1);
-  align-self: start;
+  & > :global(.flow-button) {
+    grid-area: button;
+    margin-top: calc(var(--labeled-value--label-to-value-spacing) * -1);
+    align-self: start;
+  }
 }
diff --git a/packages/components/src/components/LabeledValue/LabeledValue.tsx b/packages/components/src/components/LabeledValue/LabeledValue.tsx
@@ -1,5 +1,4 @@
 import React, { FC, PropsWithChildren, ReactNode } from "react";
-import { PropsContext, PropsContextProvider } from "@/lib/propsContext";
 import styles from "./LabeledValue.module.css";
 import clsx from "clsx";
 import { Text } from "@/components/Text";
@@ -16,19 +15,11 @@ export const LabeledValue: FC<LabeledValueProps> = (props) => {
 
   const rootClassName = clsx(className, styles.root);
 
-  const propsContext: PropsContext = {
-    Label: {
-      className: styles.label,
-    },
-  };
-
   return (
     <div className={rootClassName}>
-      <PropsContextProvider props={propsContext}>
-        {children}
-        <Text>{value}</Text>
-        {copyable && <CopyButton className={styles.copyButton} value={value} />}
-      </PropsContextProvider>
+      {children}
+      <Text>{value}</Text>
+      {copyable && <CopyButton value={value} />}
     </div>
   );
 };