Legacy card is Deprecated but still Index table is using Legacy Card, and UI of table is effect

[muhammadalizkhan]

Summary

Polaris Deprecated the Legacy card but in Index Table its still using Legacy Card, so the issue is that, when we convert Legacy Card with Simple Card Component, (according to Recommendation in Doc) the Design Alignment, and UI is Effected.

Expected behavior

As you see, following code is using Legacy card, and working perfectly, but this component is Deprecated by Polaris, so the recommend way now is using card components, but when i do same with Card the table header, footer or borders is effected and UI looks so ugly,

Table with Legacy Card,

`import {
IndexTable,
LegacyCard,
useIndexResourceState,
Text,
Badge,
useBreakpoints,
} from '@shopify/polaris';
import React from 'react';

function IndexTableWithPaginationExample() {
const orders = [
{
id: '1020',
order: '#1020',
date: 'Jul 20 at 4:34pm',
customer: 'Jaydon Stanton',
total: '$969.44',
paymentStatus: Paid,
fulfillmentStatus: Unfulfilled,
},
{
id: '1019',
order: '#1019',
date: 'Jul 20 at 3:46pm',
customer: 'Ruben Westerfelt',
total: '$701.19',
paymentStatus: Partially paid,
fulfillmentStatus: Unfulfilled,
},
{
id: '1018',
order: '#1018',
date: 'Jul 20 at 3.44pm',
customer: 'Leo Carder',
total: '$798.24',
paymentStatus: Paid,
fulfillmentStatus: Unfulfilled,
},
];
const resourceName = {
singular: 'order',
plural: 'orders',
};

const {selectedResources, allResourcesSelected, handleSelectionChange} =
useIndexResourceState(orders);

const rowMarkup = orders.map(
(
{id, order, date, customer, total, paymentStatus, fulfillmentStatus},
index,
) => (
<IndexTable.Row
id={id}
key={id}
selected={selectedResources.includes(id)}
position={index}
>
<IndexTable.Cell>

{order}

</IndexTable.Cell>
<IndexTable.Cell>{date}</IndexTable.Cell>
<IndexTable.Cell>{customer}</IndexTable.Cell>
<IndexTable.Cell>

{total}

</IndexTable.Cell>
<IndexTable.Cell>{paymentStatus}</IndexTable.Cell>
<IndexTable.Cell>{fulfillmentStatus}</IndexTable.Cell>
</IndexTable.Row>
),
);

return (

<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={orders.length}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
}
onSelectionChange={handleSelectionChange}
headings={[
{title: 'Order'},
{title: 'Date'},
{title: 'Customer'},
{title: 'Total', alignment: 'end'},
{title: 'Payment status'},
{title: 'Fulfillment status'},
]}
pagination={{
hasNext: true,
onNext: () => {},
}}
>
{rowMarkup}


);
}
export default IndexTableWithPaginationExample;`

Lets replace Legacy Card with Card,

`
import {
IndexTable,
Card,
useIndexResourceState,
Text,
Badge,
useBreakpoints,
} from '@shopify/polaris';
import React from 'react';

function IndexTableWithPaginationExample() {
const orders = [
{
id: '1020',
order: '#1020',
date: 'Jul 20 at 4:34pm',
customer: 'Jaydon Stanton',
total: '$969.44',
paymentStatus: Paid,
fulfillmentStatus: Unfulfilled,
},
{
id: '1019',
order: '#1019',
date: 'Jul 20 at 3:46pm',
customer: 'Ruben Westerfelt',
total: '$701.19',
paymentStatus: Partially paid,
fulfillmentStatus: Unfulfilled,
},
{
id: '1018',
order: '#1018',
date: 'Jul 20 at 3.44pm',
customer: 'Leo Carder',
total: '$798.24',
paymentStatus: Paid,
fulfillmentStatus: Unfulfilled,
},
];
const resourceName = {
singular: 'order',
plural: 'orders',
};

const {selectedResources, allResourcesSelected, handleSelectionChange} =
useIndexResourceState(orders);

const rowMarkup = orders.map(
(
{id, order, date, customer, total, paymentStatus, fulfillmentStatus},
index,
) => (
<IndexTable.Row
id={id}
key={id}
selected={selectedResources.includes(id)}
position={index}
>
<IndexTable.Cell>

{order}

</IndexTable.Cell>
<IndexTable.Cell>{date}</IndexTable.Cell>
<IndexTable.Cell>{customer}</IndexTable.Cell>
<IndexTable.Cell>

{total}

</IndexTable.Cell>
<IndexTable.Cell>{paymentStatus}</IndexTable.Cell>
<IndexTable.Cell>{fulfillmentStatus}</IndexTable.Cell>
</IndexTable.Row>
),
);

return (

<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={orders.length}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
}
onSelectionChange={handleSelectionChange}
headings={[
{title: 'Order'},
{title: 'Date'},
{title: 'Customer'},
{title: 'Total', alignment: 'end'},
{title: 'Payment status'},
{title: 'Fulfillment status'},
]}
pagination={{
hasNext: true,
onNext: () => {},
}}
>
{rowMarkup}


);
}
export default IndexTableWithPaginationExample;`

Actual behavior

import {
  IndexTable,
  LegacyCard,
  useIndexResourceState,
  Text,
  Badge,
  useBreakpoints,
} from '@shopify/polaris';
import React from 'react';

function IndexTableWithPaginationExample() {
  const orders = [
    {
      id: '1020',
      order: '#1020',
      date: 'Jul 20 at 4:34pm',
      customer: 'Jaydon Stanton',
      total: '$969.44',
      paymentStatus: <Badge progress="complete">Paid</Badge>,
      fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>,
    },
    {
      id: '1019',
      order: '#1019',
      date: 'Jul 20 at 3:46pm',
      customer: 'Ruben Westerfelt',
      total: '$701.19',
      paymentStatus: <Badge progress="partiallyComplete">Partially paid</Badge>,
      fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>,
    },
    {
      id: '1018',
      order: '#1018',
      date: 'Jul 20 at 3.44pm',
      customer: 'Leo Carder',
      total: '$798.24',
      paymentStatus: <Badge progress="complete">Paid</Badge>,
      fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>,
    },
  ];
  const resourceName = {
    singular: 'order',
    plural: 'orders',
  };

  const {selectedResources, allResourcesSelected, handleSelectionChange} =
    useIndexResourceState(orders);

  const rowMarkup = orders.map(
    (
      {id, order, date, customer, total, paymentStatus, fulfillmentStatus},
      index,
    ) => (
      <IndexTable.Row
        id={id}
        key={id}
        selected={selectedResources.includes(id)}
        position={index}
      >
        <IndexTable.Cell>
          <Text variant="bodyMd" fontWeight="bold" as="span">
            {order}
          </Text>
        </IndexTable.Cell>
        <IndexTable.Cell>{date}</IndexTable.Cell>
        <IndexTable.Cell>{customer}</IndexTable.Cell>
        <IndexTable.Cell>
          <Text as="span" alignment="end" numeric>
            {total}
          </Text>
        </IndexTable.Cell>
        <IndexTable.Cell>{paymentStatus}</IndexTable.Cell>
        <IndexTable.Cell>{fulfillmentStatus}</IndexTable.Cell>
      </IndexTable.Row>
    ),
  );

  return (
    <LegacyCard>
      <IndexTable
        condensed={useBreakpoints().smDown}
        resourceName={resourceName}
        itemCount={orders.length}
        selectedItemsCount={
          allResourcesSelected ? 'All' : selectedResources.length
        }
        onSelectionChange={handleSelectionChange}
        headings={[
          {title: 'Order'},
          {title: 'Date'},
          {title: 'Customer'},
          {title: 'Total', alignment: 'end'},
          {title: 'Payment status'},
          {title: 'Fulfillment status'},
        ]}
        pagination={{
          hasNext: true,
          onNext: () => {},
        }}
      >
        {rowMarkup}
      </IndexTable>
    </LegacyCard>
  );
}


export default IndexTableWithPaginationExample;

Steps to reproduce

Sandbox: Output with Legacy Card URL: https://codesandbox.io/s/y5v9qx?module=App.tsx&file=/App.tsx:0-2863

Sandbox: Output with Card and Without Legacy Card: https://codesandbox.io/s/y5v9qx?module=App.tsx&file=/App.tsx:0-2845

Are you using React components?

Yes

Polaris version number

Latest

Browser

Chrome

Device

Window

Tasks

Beta Give feedback

No tasks being tracked yet.

Tasks

Beta Give feedback

No tasks being tracked yet.

[pguardiario]

DataTable docs use deprecated LegacyCard also. Should we use deprecated LegacyCard for now?