fix weird radio labels

kolodny · Jan 15, 2024 · 92f2f39 · 92f2f39
1 parent e5441bc
commit 92f2f39
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 33 deletions.
diff --git a/examples/vite-react-ts/src/report/hover.tsx b/examples/vite-react-ts/src/report/hover.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
 
 export const Hover: React.FunctionComponent<{
+  style?: React.CSSProperties;
   children: (hover: boolean) => React.ReactNode;
-}> = ({ children }) => {
+}> = ({ children, style }) => {
   const [hover, setHover] = React.useState(false);
   return (
-    <div
+    <span
+      style={style}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >
       {children(hover)}
-    </div>
+    </span>
   );
 };
diff --git a/examples/vite-react-ts/src/report/radio.tsx b/examples/vite-react-ts/src/report/radio.tsx
@@ -18,38 +18,34 @@ export const Radio: React.FunctionComponent<Props> = (props) => {
   const selectedValue = controls ? controls.index : uncontrolled;
   return (
     <>
-      <div className="radio" style={{ display: 'inline-flex' }}>
+      <div className='radio'>
         {options.map((option, index) => (
-          <Hover key={index}>
+          <Hover key={index} style={{ marginRight: 4 }}>
             {(hover) => (
-              <div
-                key={index}
+              <label
                 style={{
+                  cursor: 'pointer',
+                  display: 'inline-flex',
+                  // padding: 8,
                   background: hover
                     ? '#ddd'
                     : index === selectedValue
-                    ? '#eee'
-                    : '#fff',
+                      ? '#eee'
+                      : '#fff',
                   transition: 'background 0.2s ease',
                   borderRadius: 4,
-                  paddingRight: 8,
-                  marginRight: 4,
                   border: 'none',
-                  padding: 8,
-                  cursor: 'pointer',
                 }}
               >
-                <label style={{ cursor: 'pointer' }}>
-                  <input
-                    style={{ display: 'none' }}
-                    type="radio"
-                    value={index}
-                    checked={index === selectedValue}
-                    onChange={() => changeHandler(index)}
-                  />
-                  {option}
-                </label>
-              </div>
+                <input
+                  style={{ display: 'none' }}
+                  type='radio'
+                  value={index}
+                  checked={index === selectedValue}
+                  onChange={() => changeHandler(index)}
+                />
+                {option}
+              </label>
             )}
           </Hover>
         ))}

diff --git a/examples/vite-react-ts/src/report/report.tsx b/examples/vite-react-ts/src/report/report.tsx
@@ -197,9 +197,9 @@ export const Report: React.FunctionComponent<Props> = ({
             <Radio
               options={statusFilters.map((s) => {
                 const label = upperFirst(s);
-                return `${statusIcons[s as 'passed'] ?? ''} ${label} (${
-                  statusCounts[s] ?? 0
-                })`;
+                const withLabel = `${statusIcons[s as 'passed'] ?? ''} ${label} (${statusCounts[s] ?? 0
+                  })`;
+                return <div style={{ padding: 8 }}>{withLabel}</div>;
               })}
               defaultIndex={statusFilters.indexOf(showing!)}
               onChange={(e) => {

diff --git a/examples/vite-react-ts/src/report/tabs.tsx b/examples/vite-react-ts/src/report/tabs.tsx
@@ -11,7 +11,7 @@ export const Tabs: React.FunctionComponent<{ tabs: Tab[] }> = ({ tabs }) => {
   const { Radio } = React.useContext(ComponentsContext);
   return (
     <>
-      <div style={{ padding: '0 8px' }}>
+      <div>
         <Radio
           defaultIndex={0}
           options={tabs.map((t) => t.title)}

diff --git a/examples/vite-react-ts/src/report/test.tsx b/examples/vite-react-ts/src/report/test.tsx
@@ -37,14 +37,14 @@ export const Test: React.FunctionComponent<
       if (rendered.length) {
         if (rendered.length === 1) {
           tabs.push({
-            title: upperFirst(type),
+            title: <div style={{ padding: 8 }}>{upperFirst(type)}</div>,
             content: rendered[0]?.item,
           });
         } else if (rendered?.length) {
           const subTabs: Tab[] = [];
           for (const render of rendered) {
             subTabs.push({
-              title: upperFirst(render?.title),
+              title: <div style={{ padding: 8 }}>{upperFirst(render?.title)}</div>,
               content: render?.item,
             });
           }
@@ -65,7 +65,7 @@ export const Test: React.FunctionComponent<
 
         if (content?.length) {
           tabs.push({
-            title,
+            title: <div style={{ padding: 8 }}>{title}</div>,
             content: content.map((child, i) => (
               <div key={i} style={{ marginBottom: 8 }} children={child} />
             )),
@@ -81,7 +81,7 @@ export const Test: React.FunctionComponent<
     tabs.push({
       title: (
         <span
-          style={{ padding: '8px 0' }}
+          style={{ padding: 8 }}
           onClick={(e) => {
             e.preventDefault();
             window.open(testUrl, '_blank');

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "safetest",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Safetest is a powerful UI testing library that combines Playwright, Jest, and React for a powerful end-to-end testing solution for applications and component testing. With Safetest, you can easily test the functionality and appearance of your application, ensuring that it works as expected and looks great on all devices.",
   "main": "lib/index.js",
   "bin": "./lib/cli.js",