feat(component): localize components #1200

jorgemoya · 2023-04-21T18:49:53Z

Breaking changes

What?

Localize components per feedback from #1194

How

Created a localization object prop that has all values that can be localized within the component. This is a breaking change because I changed the pagination props.

Screen with example of new `localization` prop

Testing/Proof

Locally + unit tests.

bc-andreadao · 2023-05-10T16:25:32Z

@jorgemoya For the dev docs team to suggest copyedits, we need some screenshots of the front end changes. Thanks!

jorgemoya · 2023-05-10T18:59:22Z

@jorgemoya For the dev docs team to suggest copyedits, we need some screenshots of the front end changes. Thanks!

This is how it looks for all components (plus/minus the correct type for the corresponding component). Is this enough to 👀 ?

bc-andreadao · 2023-05-10T19:11:25Z

@jorgemoya For the dev docs team to suggest copyedits, we need some screenshots of the front end changes. Thanks!

This is how it looks for all components (plus/minus the correct type for the corresponding component). Is this enough to 👀 ?

Got it, thanks @jorgemoya !

jorgemoya · 2023-06-12T15:32:27Z

Hey @funivan 👋 . Eugene suggested I tag you in this PR to look for your opinion on this implementation of adding translation in BD components. Wanted to hear your input on how I did this, if there is a better way that you've seen, and if this works with the translation tools in the CP. I'm open to suggestions!

funivan · 2023-06-13T07:12:31Z

@jorgemoya LGTM. I'll ping folks that are working more closely with big-design components.
@icatalina @golcinho @RomanKrasinskyi

RomanKrasinskyi

Nice job 👏.
I left a few comments. Please look at them

packages/big-design/src/components/InlineMessage/InlineMessage.tsx

packages/big-design/src/components/Form/Label/Label.tsx

packages/big-design/src/components/Message/Message.tsx

packages/big-design/src/components/Pagination/Pagination.tsx

packages/big-design/src/components/Table/HeaderCell/HeaderCell.tsx

packages/big-design/src/components/Table/TablePagination/TablePagination.tsx

packages/big-design/src/components/TableNext/HeaderCell/HeaderCell.tsx

packages/big-design/src/components/TableNext/TablePagination/TablePagination.tsx

icatalina · 2023-06-14T09:42:19Z

packages/big-design/src/components/Form/Label/styled.tsx

    renderOptional &&
    css`
      &::after {
        color: ${theme.colors.secondary60};
-        content: ' (optional)';
+        content: ' (${optionalLabel?.toLowerCase() ?? 'optional'})';


we shouldn't be enforcing this, it is up to the consumer to decide if they want lowercase or uppercase.

icatalina · 2023-06-14T09:43:16Z

packages/big-design/src/components/InlineMessage/InlineMessage.tsx

@@ -68,7 +72,7 @@ export const InlineMessage: React.FC<InlineMessageProps> = memo(
        {props.onClose && (
          <GridItem>
            <MessagingButton
-              iconOnly={<CloseIcon size="medium" title="Close." />}


we lost the .?

I think it's okay to remove it. I think the initial intention was to create a pause when a screen reader lands on the button but it should occur naturally since a SR will naturally stop on the element.

packages/big-design/src/components/Message/Message.tsx

icatalina · 2023-06-14T09:49:43Z

packages/big-design/src/components/ButtonGroup/ButtonGroup.tsx

-    );
-  }, [actions]);
+export const ButtonGroup: React.FC<ButtonGroupProps> = memo(
+  ({ actions, localization, ...wrapperProps }) => {


Can we define a default localization object instead of adding the translations adhoc?

Something like:

const defaultLocalization: Localization { more: 'more', }; // ... export const ButtonGroup: React.FC<ButtonGroupProps> = memo( ({ actions, localization = defaultLocalization, ...wrapperProps }) => { // ... iconOnly={<MoreHorizIcon title={localization.more} />}

I had it this way at some point and reverted to what I have now 😅 . In other words, I agree we this!

chanceaclark · 2023-06-14T21:00:33Z

packages/big-design/src/components/Form/Label/Label.tsx

+  optional: string;
+}
+
+const defaultLocalization = {


Suggested change

const defaultLocalization = {

const defaultLocalization: Localization = {

chanceaclark · 2023-06-14T21:01:33Z

packages/big-design/src/components/Pagination/Pagination.tsx

-  totalItems: number,
-  of = 'of',
-): string => {
+const defaultGetRangeLabel = (start: number, end: number, totalItems: number): string => {


Can we add this as part of the localization object?

Like having the function be part of the object? My concern is that this getRangeLabel can be used for non localization purposes.

packages/big-design/src/components/Search/Search.tsx

icatalina · 2023-06-16T11:11:36Z

packages/big-design/src/components/Form/Label/styled.tsx

    renderOptional &&
    css`
      &::after {
        color: ${theme.colors.secondary60};
-        content: ' (optional)';
+        content: ' (${localization?.optional})';


🤔 if localization is nullable, that means localization?.optional can be undefined. Are types correct?

packages/big-design/src/components/Search/Search.tsx

icatalina · 2023-06-16T11:14:27Z

packages/big-design/src/components/StatefulTable/StatefulTable.tsx

@@ -62,6 +85,8 @@ const InternalStatefulTable = <T extends TableItem>({
  itemName,
  items = [],
  keyField,
+  localization: localizationProp,


might want to keep the style across the change:

Suggested change

localization: localizationProp,

localization = defaultLocalization,

jorgemoya · 2023-07-07T02:06:20Z

Added the fixes, please review if you have time. 🙏

chanceaclark · 2023-07-13T16:14:24Z

packages/big-design/src/components/InlineMessage/InlineMessage.tsx

@@ -68,7 +72,7 @@ export const InlineMessage: React.FC<InlineMessageProps> = memo(
        {props.onClose && (
          <GridItem>
            <MessagingButton
-              iconOnly={<CloseIcon size="medium" title="Close." />}


I think it's okay to remove it. I think the initial intention was to create a pause when a screen reader lands on the button but it should occur naturally since a SR will naturally stop on the element.

chanceaclark · 2023-07-13T16:51:29Z

packages/docs/PropTables/PaginationPropTable.tsx

  {
    name: 'getRangeLabel',
    types: '(start: number, end: number, totalItems: number) => string',
    required: false,
    description: 'A callback to format the label of the per-page range dropdown.',
  },
+  {
+    name: 'localization',
+    types: '{of: string, previousPage: string, nextPage: string}',


🍹 💅

Suggested change

types: '{of: string, previousPage: string, nextPage: string}',

types: '{ of: string, previousPage: string, nextPage: string }',

…edback

jorgemoya force-pushed the localize-components branch 2 times, most recently from b6ada22 to 4865b06 Compare April 28, 2023 14:45

jorgemoya changed the title ~~Localize components~~ feat(component): localize components Apr 28, 2023

jorgemoya marked this pull request as ready for review April 28, 2023 15:47

jorgemoya requested review from a team as code owners April 28, 2023 15:47

jorgemoya requested a review from bc-andreadao April 28, 2023 15:47

jorgemoya force-pushed the localize-components branch from 40c026e to d6ddb8d Compare April 28, 2023 18:05

bc-andreadao approved these changes May 10, 2023

View reviewed changes

jorgemoya force-pushed the localize-components branch from d6ddb8d to aaf3a9f Compare May 16, 2023 15:40

RomanKrasinskyi reviewed Jun 13, 2023

View reviewed changes

icatalina reviewed Jun 14, 2023

View reviewed changes

jorgemoya requested review from RomanKrasinskyi and icatalina June 14, 2023 20:43

chanceaclark reviewed Jun 14, 2023

View reviewed changes

jorgemoya force-pushed the localize-components branch from 2d92b3d to 210faac Compare June 14, 2023 21:23

RomanKrasinskyi reviewed Jun 16, 2023

View reviewed changes

packages/big-design/src/components/Search/Search.tsx Show resolved Hide resolved

icatalina reviewed Jun 16, 2023

View reviewed changes

jorgemoya force-pushed the localize-components branch 3 times, most recently from 35f15c5 to 393e7bc Compare July 6, 2023 19:05

jorgemoya requested review from chanceaclark and icatalina July 7, 2023 02:06

jorgemoya requested a review from RomanKrasinskyi July 7, 2023 02:06

chanceaclark approved these changes Jul 13, 2023

View reviewed changes

jorgemoya added 15 commits July 13, 2023 15:49

feat(component): localize Pagination

805769b

feat(component): localize Input and Input components

fdd7489

feat(component): localize Counter

d6d693e

feat(component): localize message components

85e24a0

feat(component): localize ButtonGroup

125b4c1

feat(component): localize search

9dfe6a5

feat(component): localize Tables

fd29d74

refactor(component): refactor how we use localize prop

c3d342c

fix(docs): change localization description

b18ba7f

feat(component): localize Worksheet

befce59

fix(component): fix Inputs, Message, Worksheet localization per PR fe…

2bc7dac

…edback

fix(component): fix Table, Pagination

072cc35

fix(component): fix missing type

e899c17

fix: pr feedback

8776727

fix: add spacing in prop table

4683dae

jorgemoya force-pushed the localize-components branch from a06789d to 4683dae Compare July 13, 2023 20:49

jorgemoya merged commit 151484b into bigcommerce:master Jul 14, 2023

jorgemoya deleted the localize-components branch July 14, 2023 16:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(component): localize components #1200

feat(component): localize components #1200

jorgemoya commented Apr 21, 2023 •

edited

Loading

bc-andreadao commented May 10, 2023

jorgemoya commented May 10, 2023

bc-andreadao commented May 10, 2023

jorgemoya commented Jun 12, 2023

funivan commented Jun 13, 2023

RomanKrasinskyi left a comment

icatalina Jun 14, 2023

icatalina Jun 14, 2023

chanceaclark Jul 13, 2023

icatalina Jun 14, 2023 •

edited

Loading

jorgemoya Jun 14, 2023

chanceaclark Jun 14, 2023

chanceaclark Jun 14, 2023

jorgemoya Jun 14, 2023

icatalina Jun 16, 2023

icatalina Jun 16, 2023

jorgemoya commented Jul 7, 2023

chanceaclark Jul 13, 2023

chanceaclark Jul 13, 2023

	const defaultLocalization = {
	const defaultLocalization: Localization = {

	localization: localizationProp,
	localization = defaultLocalization,

	types: '{of: string, previousPage: string, nextPage: string}',
	types: '{ of: string, previousPage: string, nextPage: string }',

feat(component): localize components #1200

feat(component): localize components #1200

Conversation

jorgemoya commented Apr 21, 2023 • edited Loading

What?

How

Screen with example of new localization prop

Testing/Proof

bc-andreadao commented May 10, 2023

jorgemoya commented May 10, 2023

bc-andreadao commented May 10, 2023

jorgemoya commented Jun 12, 2023

funivan commented Jun 13, 2023

RomanKrasinskyi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

icatalina Jun 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgemoya commented Jul 7, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgemoya commented Apr 21, 2023 •

edited

Loading

Screen with example of new `localization` prop

icatalina Jun 14, 2023 •

edited

Loading