Merge pull request #628 from framer/field-button-truncation

Truncate button text in Notion and Airtable

Author: madebyisaacr

plugins/airtable/src/App.css

@@ -130,6 +130,11 @@ select:not(:disabled) {
     gap: 8px;
 }
 
+.mapping .source-field span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .mapping .source-field[aria-disabled="true"] {
     opacity: 0.5;
 }

plugins/airtable/src/FieldMapping.tsx

@@ -8,8 +8,7 @@ import { isCollectionReference } from "./utils"
 
 function ChevronIcon() {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="16">
-            <title>Chevron</title>
+        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="16" aria-hidden="true">
             <path
                 d="M 3 11 L 6 8 L 3 5"
                 fill="transparent"
@@ -75,6 +74,7 @@ const FieldMappingRow = memo(
                     onClick={disabled ? undefined : () => onToggleIgnored?.(field.id)}
                     tabIndex={0}
                     disabled={disabled || unsupported || missingCollection}
+                    title={originalFieldName ?? field.id}
                 >
                     <input type="checkbox" checked={!isIgnored} tabIndex={-1} readOnly disabled={disabled} />
                     <span>{originalFieldName ?? field.id}</span>

plugins/notion/src/App.css

@@ -166,6 +166,11 @@ p a {
     gap: 8px;
 }
 
+.mapping .source-field span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .mapping .source-field.unsupported {
     pointer-events: none;
 }

plugins/notion/src/FieldMapping.tsx

@@ -79,6 +79,7 @@ function FieldMappingRow({
                     onToggleIgnored(id)
                 }}
                 tabIndex={0}
+                title={originalName}
             >
                 <input type="checkbox" checked={!disabled} tabIndex={-1} readOnly />
                 <span>{originalName}</span>
@@ -88,6 +89,7 @@ function FieldMappingRow({
                 width="8"
                 height="8"
                 fill="none"
+                aria-hidden="true"
                 style={{ opacity: disabled ? 0.5 : 1 }}
             >
                 <path