Merge pull request #195 from ynput/develop

Release: EntityCard status always right
ynput · Oct 8, 2024 · 9ee938f · 9ee938f
2 parents 6778a69 + 6a5563e
commit 9ee938f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 36 deletions.
diff --git a/src/Dropdowns/SortingDropdown/SortingDropdown.tsx b/src/Dropdowns/SortingDropdown/SortingDropdown.tsx
@@ -108,8 +108,10 @@ export const SortingDropdown: FC<SortingDropdownProps> = ({
                     <SortCard
                       key={id}
                       {...sortValue}
-                      disabled={isOpen}
+                      id={sortValue.id}
+                      label={sortValue.label}
                       sortOrder={sortValue?.sortOrder ?? true}
+                      disabled={isOpen}
                       onSortBy={() => !isOpen && handleSortChange(id)}
                       onRemove={() => !isOpen && handleRemove(id)}
                       onKeyDown={(e) => {

diff --git a/src/EntityCard/EntityCard.styled.ts b/src/EntityCard/EntityCard.styled.ts
@@ -240,13 +240,6 @@ export const Card = styled.div<CardProps>`
 
       .status-container {
         padding-right: 0px;
-
-        &.middle {
-          .status-wrapper {
-            justify-content: center;
-            padding-right: 0px;
-          }
-        }
       }
 
       &:hover {
@@ -297,9 +290,17 @@ export const Card = styled.div<CardProps>`
       }
     }
   }
+  /* hide the priority */
+  @container card (inline-size < 105px) {
+    .row-bottom {
+      .tag.priority {
+        visibility: hidden;
+      }
+    }
+  }
 
   /* hide everything on bottom but the status icon */
-  @container card (inline-size < 85px) {
+  @container card (inline-size < 65px) {
     .row-bottom {
       .tag.users,
       .tag.priority {
@@ -542,10 +543,6 @@ export const StatusContainer = styled.div<StatusProps>`
   display: flex;
   justify-content: flex-end;
   padding-right: 2px;
-  &.middle {
-    padding-right: 0px;
-    justify-content: center;
-  }
   align-items: flex-end;
 
   /* the wrapper is the element that expands full width */

diff --git a/src/EntityCard/EntityCard.tsx b/src/EntityCard/EntityCard.tsx
@@ -179,12 +179,17 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
     const [statusBreakpoints, setStatusBreakpoints] = useState<{
       short?: number
       icon?: number
+      status?: string
     }>({})
 
     useEffect(() => {
       if (!bottomRowRef.current || !status) return
 
+      // if widths for status are already calculated, don't recalculate
+      if (statusBreakpoints.status === status.name) return
+
       const container = bottomRowRef.current
+      const containerWidth = container.offsetWidth
       // calculate how much space things other than status take up
       const containerPadding = 2
       const usersWidth =
@@ -193,6 +198,7 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
         (container.querySelector('.tag.priority') as HTMLElement)?.offsetWidth ||
         (variant === 'status' ? 28 : 0)
       const takenWidth = usersWidth + priorityWidth + containerPadding * 2
+      const remainingSpace = containerWidth - takenWidth
 
       // calculate the width of the status states
       const statusTextWidth =
@@ -203,8 +209,9 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
       setStatusBreakpoints({
         short: takenWidth + statusTextWidth,
         icon: takenWidth + statusShortWidth,
+        status: status?.name,
       })
-    }, [bottomRowRef.current, status])
+    }, [bottomRowRef.current, status?.name])
 
     const handleTitleClick = (e: MouseEvent<HTMLDivElement>) => {
       if (!onTitleClick) return
@@ -347,7 +354,6 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
             {/* BOTTOM ROW */}
             <Styled.Row
               className={clsx('row row-bottom loading-visible', {
-                full: statusMiddle,
                 ['hide-priority']: hidePriority,
               })}
               ref={bottomRowRef}
@@ -428,6 +434,27 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
                 </Styled.Tag>
               )}
 
+              {/* bottom left - priority */}
+              {shouldShowTag(priority && !hidePriority, 'priority') && (
+                <Styled.Tag
+                  onMouseEnter={(e) => editOnHover && handleEditableHover(e, 'priority')}
+                  onClick={(e) => handleEditableHover(e, 'priority')}
+                  {...pt.priorityTag}
+                  className={clsx(
+                    'tag priority',
+                    { editable: priorityEditable, isLoading },
+                    pt.priorityTag?.className,
+                  )}
+                >
+                  {priority?.icon && (
+                    <Icon
+                      icon={priority.icon}
+                      style={{ color: variant == 'default' ? priority?.color : undefined }} // only show priority color in default variant
+                    />
+                  )}
+                </Styled.Tag>
+              )}
+
               {/* bottom right - status */}
               {shouldShowTag(status, 'status') && (
                 <Styled.StatusContainer
@@ -470,27 +497,6 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
                   </div>
                 </Styled.StatusContainer>
               )}
-
-              {/* bottom left - priority */}
-              {shouldShowTag(priority && !hidePriority, 'priority') && (
-                <Styled.Tag
-                  onMouseEnter={(e) => editOnHover && handleEditableHover(e, 'priority')}
-                  onClick={(e) => handleEditableHover(e, 'priority')}
-                  {...pt.priorityTag}
-                  className={clsx(
-                    'tag priority',
-                    { editable: priorityEditable, isLoading },
-                    pt.priorityTag?.className,
-                  )}
-                >
-                  {priority?.icon && (
-                    <Icon
-                      icon={priority.icon}
-                      style={{ color: variant == 'default' ? priority?.color : undefined }} // only show priority color in default variant
-                    />
-                  )}
-                </Styled.Tag>
-              )}
             </Styled.Row>
           </Styled.Thumbnail>
         </Styled.Card>