playbook_ui 14.19.0.pre.alpha.PLAY2172homeaddressstreetundefinedstatebug7733 → 14.19.0.pre.alpha.PLAY20937693

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 709909c013e2e156a203d422ab5104339b05b8fd5736a3dde4366b0778662bb4
-  data.tar.gz: 8adf52a05b5c0340d2db99605df968b81444bfaabe75c4bc6a1c1d90abcaa24a
+  metadata.gz: 2c5ff1137945a937ea4a81fda473a39b7d9e8016a537ea01abfa7ae79b41e1a0
+  data.tar.gz: 0fbe9b0d22ffecc88c65ba5794b0e3c02d3aeccb4221894abb82e1c9603b5104
 SHA512:
-  metadata.gz: 8ac1160445aa7401de3e70d9c9b5fb05ed96307b264e7b0d7248c3da4300f210de309bd669babe654ff6150a6fcd827c267203a8ab3c7c9c39974e89ef7983b8
-  data.tar.gz: f3a2c1c6675cfe06579702fbe8a79eab436329f99239b503b7003dda102b5941a40b4e92d0821722a771d869ea73a0045b6efdd416f28d73fe6fcf0171574d70
+  metadata.gz: aa662ae46bf92185d89461416cb7312875bb89fd938d1a204156975bfc5044128af090e39fdb8e5b97d123976b8105a4d76aea4555984068e1222349bb230f25
+  data.tar.gz: aaeb07f57c2923c857afeb9a49fb5a83fb8c44eb2d81bfdc488f20f9ed5603d0b29f6c4e82b164ff05330a9e717a3492384d14e03607b2b4fb341c4e5916aaaa

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -93,17 +93,7 @@ export const RegularTableView = ({
 
               {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id);
-                const isLastCell = (() => {
-                  const parent = cell.column.parent;
-                    if (!parent) {
-                      const last = row.getVisibleCells().at(-1);
-                      return last?.column.id === cell.column.id;
-                    }
-                  
-                    const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
-                    return visibleSiblings.at(-1)?.id === cell.column.id;
-                   })();
-
+                const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
                 const { column } = cell;
                 return (
                   <td

data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx

@@ -1,112 +1,25 @@
-import React, { useEffect, useRef, useContext } from "react";
-
-import AdvancedTableContext from "../Context/AdvancedTableContext";
-import { buildVisibilityTree } from "../Utilities/VisibilityTree";
-
+import React, { useEffect, useRef } from "react";
 import Card from "../../pb_card/_card";
 import Caption from "../../pb_caption/_caption";
 import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
-import Dropdown from "../../pb_dropdown/_dropdown";
-import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer";
-import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger";
-import Icon from "../../pb_icon/_icon";
-import Checkbox from "../../pb_checkbox/_checkbox";
-import SectionSeparator from "../../pb_section_separator/_section_separator";
-import Tooltip from "../../pb_tooltip/_tooltip";
-
-import {
-  showActionBar,
-  hideActionBar,
-} from "../Utilities/ActionBarAnimationHelper";
-import { GenericObject } from "../../types";
+import { showActionBar, hideActionBar } from "../Utilities/ActionBarAnimationHelper";
 
 interface TableActionBarProps {
-  isVisible: boolean | GenericObject | undefined;
+  isVisible: boolean;
   selectedCount: number;
   actions?: React.ReactNode[] | React.ReactNode;
-  type?: string;
-}
-
-interface VisibilityNode {
-  id?: string | undefined;
-  label?: string | undefined;
-  children?: VisibilityNode[];
 }
 
 const TableActionBar: React.FC<TableActionBarProps> = ({
   isVisible,
   selectedCount,
-  actions,
-  type = "row-selection",
+  actions
 }) => {
   const cardRef = useRef(null);
-  const { table, columnVisibilityControl, columnDefinitions } =
-    useContext(AdvancedTableContext);
-
-  // ----------- Column visibility logic -----------
-  const includeIds = columnVisibilityControl?.includeIds;
-  const firstLeafId = table.getAllLeafColumns()[0]?.id;
-  // Get the first leaf column ID to exclude it from the visibility tree
-  // This is to avoid showing the first column in the dropdown
-  // as toggling it's visibility breaks the expanded row functionality
-  const tree = buildVisibilityTree(columnDefinitions, includeIds).filter(node => node.id !== firstLeafId);
-
-  const renderLeaf = (id: string, label: string) => {
-    const col   = table.getColumn(id);
-    const show  = col.getIsVisible();
-
-    return (
-      <Checkbox
-          checked={show}
-          key={id}
-          onChange={() => col.toggleVisibility()}
-          paddingBottom="xs"
-          text={label}
-      />
-    );
-  };
-
-  const gatherLeafIds = (node: VisibilityNode): string[] =>
-    node.children && node.children.length
-      ? node.children.flatMap(gatherLeafIds)
-      : node.id
-      ? [node.id]
-      : [];
-
-  const renderGroup = (node: VisibilityNode ) => {
-     const leaves = gatherLeafIds(node);
-    const visibleArray   = leaves.map((id) => table.getColumn(id).getIsVisible());
-    const allOn    = visibleArray.every(Boolean);
-    const someOn   = visibleArray.some(Boolean);
-
-    return (
-      <>
-        <Checkbox
-            checked={allOn}
-            indeterminate={!allOn && someOn}
-            onChange={() =>
-              leaves.forEach((id) =>
-                table.getColumn(id).toggleVisibility(!allOn),
-              )
-            }
-            paddingBottom="xs"
-            text={node.label}
-        />
-        <Flex flexDirection="column" 
-            paddingLeft="lg"
-        >
-          {node?.children?.map((child) =>
-            child.children ? renderGroup(child) : renderLeaf(child.id, child.label),
-          )}
-        </Flex>
-      </>
-    );
-  };
-// ------------ End of column visibility logic --------
 
   useEffect(() => {
-    if (cardRef.current && type === "row-selection") {
+    if (cardRef.current) {
       if (isVisible) {
         showActionBar(cardRef.current);
       } else {
@@ -118,68 +31,22 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
   return (
     <Card
         borderNone={!isVisible}
-        className={`${
-          isVisible && "show-action-card row-selection-actions-card"
-        }`}
+        className={`${isVisible && "show-action-card row-selection-actions-card"}`}
         htmlOptions={{ ref: cardRef as any }}
         padding={`${isVisible ? "xs" : "none"}`}
     >
       <Flex
           alignItems="center"
-          justify={type === "row-selection" ? "between" : "end"}
+          justify="between"
       >
-        {type === "row-selection" ? (
-          <>
-            <Caption color="light" 
-                paddingLeft="xs" 
-                size="xs"
-            >
-              {selectedCount} Selected
-            </Caption>
-            <FlexItem>{actions}</FlexItem>
-          </>
-        ) : (
-          <Dropdown
-              className="column-visibility-dropdown-wrapper"
-              options={columnDefinitions}
-          >
-            <DropdownTrigger>
-            <Tooltip 
-                placement='top' 
-                text="Column Configuration" 
-                zIndex={10}
-            >
-                <Icon 
-                    color="primary" 
-                    cursor="pointer" 
-                    icon="sliders-h" 
-                />
-            </Tooltip>
-            </DropdownTrigger>
-            <DropdownContainer
-                className="column-visibility-dropdown"
-                paddingTop="sm"
-            >
-              <>
-              <Caption 
-                  paddingBottom="sm" 
-                  text="Columns Config"
-                  textAlign="center" 
-              />
-              <SectionSeparator paddingBottom="xs" />
-              {tree.map((node: VisibilityNode) => (
-                <Flex cursor="pointer" 
-                    flexDirection="column" 
-                    key={node.id}
-                    paddingX="xs"
-                >
-                  {node.children ? renderGroup(node) : renderLeaf(node.id, node.label)}
-                </Flex>
-              ))}
-              </>
-            </DropdownContainer>
-          </Dropdown>
-        )}
+        <Caption
+            color="light"
+            paddingLeft="xs"
+            size="xs"
+        >
+          {selectedCount} Selected
+        </Caption>
+        <FlexItem>{actions}</FlexItem>
       </Flex>
     </Card>
   );

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -79,26 +79,9 @@ export const TableHeaderCell = ({
   header?.column.getLeafColumns().length === 1 &&
   header?.column.getLeafColumns()[0].id === header.column.id
 
-  const columnHasVisibleLeaf = (col: any): boolean =>
-    col.getIsVisible?.() ||
-    (Array.isArray(col.columns) &&
-      col.columns.some((child: any) => columnHasVisibleLeaf(child)));
-      
-   // Check on column position in stack + visibility to add the vertical border 
-  const isLastHeaderCell = (() => {
-    if (!header) return false;
-  
-    if (header.colSpan > 1 && header.column.parent !== undefined) return true;
-  
-    const parent = header.column.parent;
-  
-    if (!parent) {
-      const topHeaders = table?.getHeaderGroups()[0].headers.filter((h: any) => columnHasVisibleLeaf(h.column));
-      return topHeaders?.at(-1)?.id === header.id;
-    }
-    const visibleSiblings = parent.columns.filter(columnHasVisibleLeaf);
-    return visibleSiblings.at(-1) === header.column;
-  })();
+  const isLastHeaderCell =
+    header?.column.parent?.columns.at(-1) === header?.column ||
+    (header?.colSpan > 1 && header?.column.parent !== undefined);
  
 const cellClassName = classnames(
   "table-header-cells",

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -26,8 +26,6 @@ interface UseTableStateProps {
   virtualizedRows?: boolean;
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
-  columnVisibilityControl?: GenericObject;
-
 }
 
 export function useTableState({
@@ -42,19 +40,16 @@ export function useTableState({
   pagination = false,
   paginationProps,
   virtualizedRows = false,
-  tableOptions,
-  columnVisibilityControl
+  tableOptions
 }: UseTableStateProps) {
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [localColumnVisibility, setLocalColumnVisibility] = useState({});
+
   // Determine whether to use the prop or the local state
   const expanded = expandedControl ? expandedControl.value : localExpanded;
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
-  const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
-  const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -109,21 +104,17 @@ export function useTableState({
   }]), [columnDefinitions, sortControl]);
 
   // Custom state based on features enabled
-  const customState = useCallback(() => ({
-    state: {
-      expanded,
-      ...(sortControl     && { sorting }),
-      ...(selectableRows  && { rowSelection }),
-      ...(columnVisibility && { columnVisibility }),
-    },
-  }), [
-    expanded,
-    sortControl,
-    sorting,
-    selectableRows,
-    rowSelection,
-    columnVisibility,
-  ]);
+  const customState = useCallback(() => {
+    if (sortControl && selectableRows) {
+      return { state: { expanded, sorting, rowSelection } };
+    } else if (sortControl) {
+      return { state: { expanded, sorting } };
+    } else if (selectableRows) {
+      return { state: { expanded, rowSelection } };
+    } else {
+      return { state: { expanded } };
+    }
+  }, [expanded, rowSelection, sortControl, selectableRows, sorting]);
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
@@ -154,7 +145,6 @@ export function useTableState({
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
     getRowId: selectableRows ? row => row.id : undefined,
-    onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions
     },

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -53,15 +53,6 @@
     width: 100%;
   }
 
-  .column-visibility-dropdown-wrapper {
-    position: unset !important;
-  }
-  .column-visibility-dropdown {
-    width: unset !important;
-    right: $space_xxs;
-    text-align: left;
-  }
-
   // Virtualized table styles
   .virtualized-table-row {
     display: table !important;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -35,7 +35,6 @@ type AdvancedTableProps = {
   className?: string
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
-  columnVisibilityControl?: GenericObject
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -74,7 +73,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     className,
     columnDefinitions,
     columnGroupBorderColor,
-    columnVisibilityControl,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -134,8 +132,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     paginationProps,
     virtualizedRows,
     tableOptions,
-    onRowSelectionChange,
-    columnVisibilityControl,
+    onRowSelectionChange
   });
 
   // Initialize table actions
@@ -255,7 +252,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     : {};
 
   // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
 
   return (
     <>
@@ -289,7 +286,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         <AdvancedTableProvider
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
-            columnVisibilityControl={columnVisibilityControl}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -320,7 +316,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 actions={actions}
                 isVisible={isActionBarVisible}
                 selectedCount={selectedRowsLength}
-                type={columnVisibilityControl ? "column-visibility" : "row-selection"}
             />
 
             {/* Main Table */}

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -47,7 +47,3 @@ examples:
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
   - advanced_table_fullscreen: Fullscreen
-  - advanced_table_column_visibility: Column Visibility Control
-  - advanced_table_column_visibility_with_state: Column Visibility Control With State
-  - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
-  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -27,8 +27,4 @@ export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
-export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
-export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
-export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
-export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
-export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
+export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -77,7 +77,6 @@
     top: 0;
     left: 0;
     border-radius: unset;
-    z-index: 5;
   }
 
   .checkbox-cell {

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx

@@ -6,7 +6,7 @@ import {
   buildDataProps,
   buildHtmlProps
 } from "../../utilities/props";
-import { globalProps, GlobalProps } from "../../utilities/globalProps";
+import { globalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
 
@@ -24,7 +24,7 @@ type DropdownContainerProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   searchbar?: boolean;
-} & GlobalProps;
+};
 
 const DropdownContainer = (props: DropdownContainerProps) => {
   const {

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -9,23 +9,10 @@
     border: none;
     width: 0;
   }
-  &.error {
-    [class^='pb_card_kit'] {
-      border-color: $error;
-    }
-    [class^='pb_body_kit'][status="negative"] {
-      margin-top: $space_xs;
-    }
-  }
 }
 
 .dark [class*='pb_file_upload_kit'] {
   [class*='pb_card_kit'] {
     border: 1px $text_dk_lighter dashed;
   }
-  &.error {
-    [class^='pb_card_kit'] {
-      border-color: $error_dark;
-    }
-  }
 }

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx

@@ -22,7 +22,6 @@ type FileUploadProps = {
   maxSize?: number,
   onFilesAccepted: Callback<File, File>,
   onFilesRejected: (error: string, files: readonly FileRejection[]) => void,
-  error?: string,
 }
 
 const getFormattedFileSize = (fileSize: number): string => {
@@ -37,7 +36,6 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     customMessage,
     dark = false,
     data = {},
-    error,
     htmlOptions = {},
     maxSize,
     onFilesAccepted = noop,
@@ -102,7 +100,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
 
   return (
     <div
-        className={classnames(buildCss('pb_file_upload_kit'), { 'error': error }, globalProps(props), className)}
+        className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
         {...dataProps}
         {...htmlProps}
         {...getRootProps()}
@@ -120,14 +118,6 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
           }
         </Body>
       </Card>
-      {error && (
-        <Body
-            dark={dark}
-            marginTop="xxs"
-            status="negative"
-            text={error}
-        />
-      )}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_file_upload/docs/example.yml

@@ -3,7 +3,6 @@ examples:
   rails:
   - file_upload_default: File Upload
   - file_upload_custom: Custom
-  - file_upload_error: Error
 
   react:
   - file_upload_default: Default List of files to upload
@@ -11,4 +10,3 @@ examples:
   - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit
-  - file_upload_error: Error

data/app/pb_kits/playbook/pb_file_upload/docs/index.js

@@ -3,4 +3,3 @@ export { default as FileUploadAccept } from './_file_upload_accept.jsx'
 export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
-export { default as FileUploadError } from './_file_upload_error.jsx'

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -9,7 +9,6 @@
         <%= pb_rails("text_input", props: {
           type: "file",
           dark: object.dark,
-          error: object.error.presence,
           input_options: {
             id: "upload-#{object.id}",
             classname: "cursor_pointer",

data/app/pb_kits/playbook/pb_file_upload/file_upload.rb

@@ -21,20 +21,14 @@ module Playbook
       prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
-      prop :error, type: Playbook::Props::String
-
       def classname
         file_upload_class = generate_classname("pb_file_upload_kit")
-        file_upload_class + error_class + full_width_class
+        file_upload_class + full_width_class
       end
 
       def full_width_class
         full_width ? " full_width" : ""
       end
-
-      def error_class
-        error.present? ? "_error" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js

@@ -50,21 +50,3 @@ test('displays custom message', () => {
   const kit = screen.getByTestId(testid)
   expect(kit).toHaveTextContent('Hello world!')
 })
-
-test('handles error state with error prop', () => {
-  const errorText = "Test error message"
-  render(
-    <FileUpload
-        data={{ testid: testid }}
-        error={errorText}
-    />
-  )
-
-  const kit = screen.getByTestId(testid)
-  
-  expect(kit).toHaveClass('pb_file_upload_kit')
-  expect(kit).toHaveClass('error')
-  
-  const errorElement = screen.getByText(errorText)
-  expect(errorElement).toBeInTheDocument()
-})

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -81,11 +81,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
 
   const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
 
-  const uppercaseState = state?.toUpperCase() ?? ''
-
-  const fields = [address, addressCont, city, homeId, homeUrl, houseStyle, state, territory, zipcode]
-  const hasAllEmptyProps = fields.every(field => field === undefined || field === null || field === '')
-
   return (
     <div
         className={classes(className, dark)}
@@ -93,8 +88,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
         {...dataProps}
         {...htmlProps}
     >
-      {hasAllEmptyProps && '—'}
-      {emphasis == 'street' && !hasAllEmptyProps &&
+      {emphasis == 'street' &&
         <div>
           <Title
               className="pb_home_address_street_address"
@@ -111,11 +105,11 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
         </div>
       }
-      {emphasis == 'city' && !hasAllEmptyProps &&
+      {emphasis == 'city' &&
         <div>
           <Body color="light">
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -128,18 +122,18 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}`}
+              {`${titleize(city)}, ${state.toUpperCase()}`}
             </Title>
             <Body
                 color="light"
                 tag="span"
             >
-              {` ${zipcode ?? ''}`}
+              {` ${zipcode}`}
             </Body>
           </div>
         </div>
       }
-      {emphasis == 'none' && !hasAllEmptyProps &&
+      {emphasis == 'none' &&
         <div>
           <Body dark={dark}>
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -150,7 +144,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 color="light"
                 dark={dark}
               >
-            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
           </div>
         </div>