fix: pr feedback

bigcommerce · Jul 6, 2023 · 393e7bc · 393e7bc
1 parent 84cc4e1
commit 393e7bc
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 31 deletions.
diff --git a/packages/big-design/src/components/Form/Label/Label.tsx b/packages/big-design/src/components/Form/Label/Label.tsx
@@ -2,17 +2,17 @@ import React, { LabelHTMLAttributes } from 'react';
 
 import { StyledLabel } from './styled';
 
-interface Localization {
+export interface LabelLocalization {
   optional: string;
 }
 
-const defaultLocalization: Localization = {
+const defaultLocalization: LabelLocalization = {
   optional: 'optional',
 };
 
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   renderOptional?: boolean;
-  localization?: Localization;
+  localization?: LabelLocalization;
 }
 
 export const FormControlLabel: React.FC<LabelProps> = ({

diff --git a/packages/big-design/src/components/Form/Label/styled.tsx b/packages/big-design/src/components/Form/Label/styled.tsx
@@ -4,10 +4,11 @@ import styled, { css, DefaultTheme, StyledComponent } from 'styled-components';
 import { StyleableH4 } from '../../Typography/private';
 import { HeadingProps } from '../../Typography/types';
 
-import { LabelProps } from './Label';
+import { LabelLocalization, LabelProps } from './Label';
 
-interface StyledLabelArgument extends LabelProps {
+interface StyledLabelArgument extends Omit<LabelProps, 'localization'> {
   theme: DefaultTheme;
+  localization: LabelLocalization;
 }
 
 export const StyledLabel = styled<
@@ -24,7 +25,7 @@ export const StyledLabel = styled<
     css`
       &::after {
         color: ${theme.colors.secondary60};
-        content: ' (${localization?.optional})';
+        content: ' (${localization.optional})';
         font-weight: ${theme.typography.fontWeight.regular};
       }
     `}

diff --git a/packages/big-design/src/components/InlineMessage/InlineMessage.tsx b/packages/big-design/src/components/InlineMessage/InlineMessage.tsx
@@ -16,16 +16,16 @@ import {
   StyledMessageItem,
 } from './styled';
 
-interface Localization {
+export interface InlineMessageLocalization {
   close: string;
 }
 
-const defaultLocalization: Localization = {
+const defaultLocalization: InlineMessageLocalization = {
   close: 'Close',
 };
 
 export type InlineMessageProps = SharedMessagingProps &
-  MarginProps & { localization?: Localization };
+  MarginProps & { localization?: InlineMessageLocalization };
 
 export const InlineMessage: React.FC<InlineMessageProps> = memo(
   ({ className, style, header, localization = defaultLocalization, ...props }) => {

diff --git a/packages/big-design/src/components/Message/Message.tsx b/packages/big-design/src/components/Message/Message.tsx
@@ -16,15 +16,16 @@ import {
   StyledMessageItem,
 } from './styled';
 
-interface Localization {
+export interface MessageLocalization {
   close: string;
 }
 
-const defaultLocalization: Localization = {
+const defaultLocalization: MessageLocalization = {
   close: 'Close',
 };
 
-export type MessageProps = SharedMessagingProps & MarginProps & { localization?: Localization };
+export type MessageProps = SharedMessagingProps &
+  MarginProps & { localization?: MessageLocalization };
 
 export const Message: React.FC<MessageProps> = memo(
   ({ className, localization = defaultLocalization, style, header, ...props }) => {

diff --git a/packages/big-design/src/components/StatefulTable/StatefulTable.tsx b/packages/big-design/src/components/StatefulTable/StatefulTable.tsx
@@ -85,7 +85,7 @@ const InternalStatefulTable = <T extends TableItem>({
   itemName,
   items = [],
   keyField,
-  localization: localizationProp,
+  localization: localizationProp = defaultLocalization,
   getRangeLabel,
   onSelectionChange,
   onRowDrop,

diff --git a/packages/big-design/src/components/Table/HeaderCell/HeaderCell.tsx b/packages/big-design/src/components/Table/HeaderCell/HeaderCell.tsx
@@ -19,11 +19,6 @@ interface Localization {
   descendingOrder: string;
 }
 
-const defaultLocalization: Localization = {
-  ascendingOrder: 'Ascending order',
-  descendingOrder: 'Descending order',
-};
-
 export interface HeaderCellProps<T>
   extends TableHTMLAttributes<HTMLTableCellElement>,
     TableColumnDisplayProps {
@@ -33,7 +28,7 @@ export interface HeaderCellProps<T>
   id: string;
   hide?: boolean;
   isSorted?: boolean;
-  localization?: Localization;
+  localization: Localization;
   sortDirection?: 'ASC' | 'DESC';
   stickyHeader?: boolean;
   onSortClick?(column: TableColumn<T>): void;
@@ -57,7 +52,7 @@ const InternalHeaderCell = <T extends TableItem>({
   hide = false,
   id,
   isSorted,
-  localization = defaultLocalization,
+  localization,
   onSortClick,
   sortDirection,
   stickyHeader,

diff --git a/packages/big-design/src/components/Table/Table.tsx b/packages/big-design/src/components/Table/Table.tsx
@@ -14,6 +14,16 @@ import { Row } from './Row';
 import { StyledTable, StyledTableFigure } from './styled';
 import { TableColumn, TableItem, TableProps } from './types';
 
+interface Localization {
+  ascendingOrder: string;
+  descendingOrder: string;
+}
+
+const defaultLocalization: Localization = {
+  ascendingOrder: 'Ascending order',
+  descendingOrder: 'Descending order',
+};
+
 const InternalTable = <T extends TableItem>(
   props: TableProps<T>,
 ): React.ReactElement<TableProps<T>> => {
@@ -27,7 +37,7 @@ const InternalTable = <T extends TableItem>(
     itemName,
     items,
     keyField = 'id',
-    localization,
+    localization = defaultLocalization,
     onRowDrop,
     pagination,
     selectable,

diff --git a/packages/big-design/src/components/Table/spec.tsx b/packages/big-design/src/components/Table/spec.tsx
@@ -266,7 +266,6 @@ test('renders a pagination component with custom button labels', async () => {
         getRangeLabel,
         label: '[Custom] Pagination',
         localization: {
-          of: 'of',
           previousPage: '[Custom] Previous page',
           nextPage: '[Custom] Next page',
         },

diff --git a/packages/big-design/src/components/TableNext/HeaderCell/HeaderCell.tsx b/packages/big-design/src/components/TableNext/HeaderCell/HeaderCell.tsx
@@ -19,11 +19,6 @@ interface Localization {
   descendingOrder: string;
 }
 
-const defaultLocalization: Localization = {
-  ascendingOrder: 'Ascending order',
-  descendingOrder: 'Descending order',
-};
-
 export interface HeaderCellProps<T>
   extends TableHTMLAttributes<HTMLTableCellElement>,
     TableColumnDisplayProps {
@@ -33,7 +28,7 @@ export interface HeaderCellProps<T>
   id: string;
   hide?: boolean;
   isSorted?: boolean;
-  localization?: Localization;
+  localization: Localization;
   sortDirection?: 'ASC' | 'DESC';
   stickyHeader?: boolean;
   onSortClick?(column: TableColumn<T>): void;
@@ -57,7 +52,7 @@ const InternalHeaderCell = <T extends TableItem>({
   hide = false,
   id,
   isSorted,
-  localization = defaultLocalization,
+  localization,
   onSortClick,
   sortDirection,
   stickyHeader,

diff --git a/packages/big-design/src/components/TableNext/TableNext.tsx b/packages/big-design/src/components/TableNext/TableNext.tsx
@@ -19,6 +19,16 @@ import { RowContainer } from './RowContainer';
 import { StyledTable, StyledTableFigure } from './styled';
 import { TableColumn, TableItem, TableProps } from './types';
 
+interface Localization {
+  ascendingOrder: string;
+  descendingOrder: string;
+}
+
+const defaultLocalization: Localization = {
+  ascendingOrder: 'Ascending order',
+  descendingOrder: 'Descending order',
+};
+
 const InternalTableNext = <T extends TableItem>(
   props: TableProps<T>,
 ): React.ReactElement<TableProps<T>> => {
@@ -33,7 +43,7 @@ const InternalTableNext = <T extends TableItem>(
     itemName,
     items,
     keyField = 'id',
-    localization,
+    localization = defaultLocalization,
     pagination,
     selectable,
     sortable,

diff --git a/packages/big-design/src/components/TableNext/spec.tsx b/packages/big-design/src/components/TableNext/spec.tsx
@@ -291,7 +291,6 @@ describe('pagination', () => {
           onPageChange,
           label: '[Custom] Pagination',
           localization: {
-            of: 'of',
             previousPage: '[Custom] Previous page',
             nextPage: '[Custom] Next page',
           },