Facet Selector Adjustments (datacommonsorg#5214)

## Description

This PR makes the following adjustments to the layout and copy of the
facet selector:

- "Close" has become "Cancel" in the facet selector modal.
- The "action" button in the modals now appear on the right. In other
words, "Update" appears to the right of "Cancel". This will be the
standard going forward.
- The facet selector is now rounded and has a smaller font to better
match its surroundings in the chart.

## Notes

The font size here is a special case (to match the design of the
existing charts) but is otherwise not part of the current design
standard. Therefore we applied it specifically to these components only
rather than adding it to the theme.

## Screenshots

### Modal buttons

<img width="639" alt="Screenshot 2025-06-16 at 1 36 37 PM"
src="https://github.com/user-attachments/assets/6b7337a7-2d31-4dde-928b-e4db74b8e2b9"
/>

### Facet selector update

<img width="845" alt="Screenshot 2025-06-16 at 2 13 39 PM"
src="https://github.com/user-attachments/assets/7bbc9698-797a-4df0-84a2-8b197d91b23c"
/>

---------

Co-authored-by: Pablo Noel <pablo@next-solutions.ca>

Author: nick-nlb

static/js/apps/visualization/chart_header.tsx

@@ -103,7 +103,7 @@ export function ChartHeader(props: ChartHeaderProps): ReactElement {
                 gap: ${theme.spacing.sm}px;
                 background: ${theme.colors.box.tooltip.pill};
                 ${theme.typography.family.text};
-                ${theme.typography.text.sm};
+                font-size: 13px;
               `}
             >
               {inputSection.label && (

static/js/i18n/i18n_messages.ts

@@ -72,10 +72,18 @@ export const messages = defineMessages({
     description:
       "Subtitle for the metadata modal showing the list of variables to show source information for",
   },
+  cancel: {
+    id: "cancel",
+    defaultMessage: "Cancel",
+    description:
+      "Button to close a modal or other interactive element without applying changes",
+  },
   close: {
     id: "close",
     defaultMessage: "Close",
-    description: "Button to close the metadata modal",
+    description:
+      "Button to close a modal or other interactive element. Unlike 'Cancel', this doesn not imply abandoning " +
+      "changes; it simply dismisses the dialog. It is used when there are no contrasting actions.",
   },
   download: {
     id: "download",

static/js/shared/facet_selector.tsx

@@ -125,9 +125,11 @@ export function FacetSelector(props: FacetSelectorPropType): ReactElement {
       <Button
         className={`${SELECTOR_PREFIX}-open-modal-button`}
         variant="flat"
+        size="sm"
         onClick={(): void => setModalOpen(true)}
         disabled={loading || !totalFacetOptionCount}
         css={css`
+          font-size: 13px;
           flex-shrink: 0;
           visibility: ${loading || !totalFacetOptionCount
             ? "hidden"
@@ -239,19 +241,19 @@ export function FacetSelector(props: FacetSelectorPropType): ReactElement {
             })}
         </DialogContent>
         <DialogActions>
-          <Button
-            onClick={onConfirm}
-            className={`${SELECTOR_PREFIX}-update-source-button`}
-          >
-            {intl.formatMessage(facetSelectionComponentMessages.Update)}
-          </Button>
           <Button
             variant="text"
             onClick={(): void => {
               setModalOpen(false);
             }}
           >
-            {intl.formatMessage(messages.close)}
+            {intl.formatMessage(messages.cancel)}
+          </Button>
+          <Button
+            onClick={onConfirm}
+            className={`${SELECTOR_PREFIX}-update-source-button`}
+          >
+            {intl.formatMessage(facetSelectionComponentMessages.Update)}
           </Button>
         </DialogActions>
       </Dialog>

static/js/theme/theme.ts

@@ -350,7 +350,7 @@ const theme: Theme = {
         color: DC_BLUE,
         backgroundColor: DC_BLUE_WHITE_LIGHT,
         border: `1px solid ${DC_BLUE_WHITE_LIGHT}`,
-        borderRadius: `8px`,
+        borderRadius: "100px",
         ["&:hover:not(:disabled):not([aria-disabled])"]: {
           backgroundColor: DC_BLUE_WHITE_LIGHT,
           color: DC_BLUE,
@@ -360,7 +360,7 @@ const theme: Theme = {
     },
     size: {
       sm: {
-        padding: `6px ${SPACING.md}px`,
+        padding: `7px ${SPACING.md}px`,
       },
       md: {
         padding: `11px ${SPACING.md}px 9px`,

static/js/tools/shared/metadata/tile_metadata_modal.tsx

@@ -164,11 +164,6 @@ export function TileMetadataModal(
           )}
         </DialogContent>
         <DialogActions>
-          {!error && (
-            <CopyCitationButton citationToCopy={citationText}>
-              {intl.formatMessage(metadataComponentMessages.CopyCitation)}
-            </CopyCitationButton>
-          )}
           <Button
             variant="text"
             onClick={(): void => {
@@ -177,6 +172,11 @@ export function TileMetadataModal(
           >
             {intl.formatMessage(messages.close)}
           </Button>
+          {!error && (
+            <CopyCitationButton citationToCopy={citationText}>
+              {intl.formatMessage(metadataComponentMessages.CopyCitation)}
+            </CopyCitationButton>
+          )}
         </DialogActions>
       </Dialog>
     </>

static/js/tools/timeline/__snapshots__/page.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Single place and single stat var 1`] = `
 "<div class=\\"chart-container dc-async-element-holder\\">
-  <div class=\\"css-1w3kops\\"><button type=\\"button\\" class=\\"button button-flat button-md source-selector-open-modal-button css-1upohkl\\">Select a dataset [1]</button></div>
+  <div class=\\"css-1w3kops\\"><button type=\\"button\\" class=\\"button button-flat button-sm source-selector-open-modal-button css-1t9rw4w\\">Select a dataset [1]</button></div>
   <div class=\\"card\\">
     <div class=\\"statVarChipRegion\\">
       <div class=\\"chip\\"><span class=\\"chip-text chip-clickable-text\\">Age</span><button class=\\"chip-action\\"><i class=\\"material-icons\\">cancel</i></button></div>
@@ -23,7 +23,7 @@ exports[`Single place and single stat var 1`] = `
 
 exports[`Single place and single stat var 2`] = `
 "<div class=\\"chart-container dc-async-element-holder\\">
-  <div class=\\"css-1w3kops\\"><button type=\\"button\\" class=\\"button button-flat button-md source-selector-open-modal-button css-1upohkl\\">Select a dataset [1]</button></div>
+  <div class=\\"css-1w3kops\\"><button type=\\"button\\" class=\\"button button-flat button-sm source-selector-open-modal-button css-1t9rw4w\\">Select a dataset [1]</button></div>
   <div class=\\"card\\">
     <div class=\\"statVarChipRegion\\">
       <div class=\\"chip\\"><span class=\\"chip-text chip-clickable-text\\">Population</span><button class=\\"chip-action\\"><i class=\\"material-icons\\">cancel</i></button></div>
@@ -41,7 +41,7 @@ exports[`Single place and single stat var 2`] = `
   <div class=\\"feedback-link\\"><a href=\\"/feedback\\">Feedback</a></div>
 </div>
 <div class=\\"chart-container dc-async-element-holder\\">
-  <div class=\\"css-1w3kops\\"><button type=\\"button\\" class=\\"button button-flat button-md source-selector-open-modal-button css-1upohkl\\">Select a dataset [1]</button></div>
+  <div class=\\"css-1w3kops\\"><button type=\\"button\\" class=\\"button button-flat button-sm source-selector-open-modal-button css-1t9rw4w\\">Select a dataset [1]</button></div>
   <div class=\\"card\\">
     <div class=\\"statVarChipRegion\\">
       <div class=\\"chip\\"><span class=\\"chip-text chip-clickable-text\\">Age</span><button class=\\"chip-action\\"><i class=\\"material-icons\\">cancel</i></button></div>
@@ -62,7 +62,7 @@ exports[`Single place and single stat var 2`] = `
 
 exports[`Single place and single stat var 3`] = `
 "<div class=\\"chart-container dc-async-element-holder\\">
-  <div class=\\"css-1w3kops\\"><button type=\\"button\\" class=\\"button button-flat button-md source-selector-open-modal-button css-1upohkl\\">Select a dataset [1]</button></div>
+  <div class=\\"css-1w3kops\\"><button type=\\"button\\" class=\\"button button-flat button-sm source-selector-open-modal-button css-1t9rw4w\\">Select a dataset [1]</button></div>
   <div class=\\"card\\">
     <div class=\\"statVarChipRegion\\">
       <div class=\\"chip\\"><span class=\\"chip-text chip-clickable-text\\">Population</span><button class=\\"chip-action\\"><i class=\\"material-icons\\">cancel</i></button></div>
@@ -121,7 +121,7 @@ exports[`Single place and single stat var 4`] = `
 
 exports[`chart options 1`] = `
 "<div class=\\"chart-container dc-async-element-holder\\">
-  <div class=\\"css-1w3kops\\"><button type=\\"button\\" class=\\"button button-flat button-md source-selector-open-modal-button css-1upohkl\\">Select a dataset [1]</button></div>
+  <div class=\\"css-1w3kops\\"><button type=\\"button\\" class=\\"button button-flat button-sm source-selector-open-modal-button css-1t9rw4w\\">Select a dataset [1]</button></div>
   <div class=\\"card\\">
     <div class=\\"statVarChipRegion\\">
       <div class=\\"chip\\"><span class=\\"chip-text chip-clickable-text\\">Population</span><button class=\\"chip-action\\"><i class=\\"material-icons\\">cancel</i></button></div>
@@ -142,7 +142,7 @@ exports[`chart options 1`] = `
 
 exports[`statVar not in PV-tree 1`] = `
 "<div class=\\"chart-container dc-async-element-holder\\">
-  <div class=\\"css-1w3kops\\"><button type=\\"button\\" class=\\"button button-flat button-md source-selector-open-modal-button css-1upohkl\\">Select a dataset [1]</button></div>
+  <div class=\\"css-1w3kops\\"><button type=\\"button\\" class=\\"button button-flat button-sm source-selector-open-modal-button css-1t9rw4w\\">Select a dataset [1]</button></div>
   <div class=\\"card\\">
     <div class=\\"statVarChipRegion\\">
       <div class=\\"chip\\"><span class=\\"chip-text chip-clickable-text\\"></span><button class=\\"chip-action\\"><i class=\\"material-icons\\">cancel</i></button></div>