Fix compatibility with latest UI version

blmage · May 14, 2024 · e36a3c7 · e36a3c7
1 parent 69770e1
commit e36a3c7
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 54 deletions.
diff --git a/src/common/components/Dropdown.js b/src/common/components/Dropdown.js
@@ -128,22 +128,24 @@ const ITEM = 'item';
 const ITEM_ICON = 'item_icon';
 
 const CLASS_NAMES = {
-  // Copied from the courses menu.
+  // Copied from the "courses" menu.
   [CONTEXT_CHALLENGE]: {
-    [WRAPPER]: [ '_3h1gx', '_3YDLx', '_2RQAD' ],
-    [CONTENT]: [ '_2K46L', '_1HyVW' ],
-    [ARROW]: [ '_3XA9c' ],
-    [ARROW_ICON]: [ '_2uOX8' ],
-    [ITEMS]: [ '_2xkqZ' ],
+    [WRAPPER]: [ '_1UOaB', '_2ifIT', '_3ApTJ' ],
+    [CONTENT]: [ '_1DLP9', '_1sDll' ],
+    [ARROW]: [ 'Vpm8Y' ],
+    [ARROW_ICON]: [ '_1IAp5' ],
+    [ITEMS]: [ '_2Xp7p' ],
     [ITEM_WRAPPER]: [
       // Copied from the "My Courses" item (adds a bottom border).
-      '_2aQWq',
-      // Copied from any course item.
-      '_3Ws0y',
-      '_3Qy5R',
-      '_2q_uT',
-      '_20KM-',
-    ]
+      '_2CU3K',
+      // Copied from any item from the "More" menu.
+      '_3vGNs',
+      '_2YF0P',
+      '_2np5u',
+      'yb-vp',
+    ],
+    // Copied by searching for the main (link) color without side-effects.
+    [ITEM_ICON]: [ '_27FUO', '_1PPA6' ],
   },
 };
 
@@ -159,6 +161,7 @@ const STYLE_SHEETS = {
     },
     [ITEMS]: {
       padding: 0,
+      width: 'auto',
     },
     [ITEM_WRAPPER]: {
       color: 'rgb(var(--color-black-text))',

diff --git a/src/common/components/Modal.js b/src/common/components/Modal.js
@@ -178,12 +178,12 @@ const SIZE_BUTTON = 'size_button';
 
 const CLASS_NAMES = {
   [BASE]: {
-    // Copied from the "Report" modal backdrop.
+    // Copied from the modal backdrop ('*[data-test="drawer-backdrop"'] at the moment).
     // The class name responsible for the opacity must not be included here.
-    [OVERLAY]: [ 'Xx0pm', 'mTWq_', '_1Fnem', '_1qKkd' ],
+    [OVERLAY]: [ '_3wtIn', 'Vm8CO', '_1Fnem', '_3ovH6' ],
     // Copied from the global wrapper of the "Report" modal content.
-    // The class name responsible for the opacitymust not be included here.
-    [POSITIONER]: [ '_3Mzt6', '_1qKkd' ],
+    // The class name responsible for the opacity must not be included here.
+    [POSITIONER]: [ '_3Mzt6', '_3ovH6' ],
     // Copied from the closing button of the "Report" modal.
     [CLOSE_BUTTON]: [ 'eJbBB', 'rXoiv' ],
     [SIZE_BUTTON]: [ 'eJbBB', 'rXoiv' ],
@@ -193,20 +193,20 @@ const CLASS_NAMES = {
   [STATE_WILL_OPEN]: {
     // Applies full transparency and disable pointer events.
     // Found in the same file as, and near, the "full opacity" class.
-    [OVERLAY]: [ 'a6uTv' ],
-    [POSITIONER]: [ 'a6uTv' ],
+    [OVERLAY]: [ '_1Kpo_' ],
+    [POSITIONER]: [ '_1Kpo_' ],
   },
   [STATE_OPENING]: {
     // Applies full opacity. Found on the original modal components.
-    [OVERLAY]: [ '_1TRqy', ],
-    [POSITIONER]: [ 'a6uTv' ],
+    [OVERLAY]: [ '_1SiVm', ],
+    [POSITIONER]: [ '_1Kpo_' ],
   },
   [STATE_OPENED]: {
-    [OVERLAY]: [ '_1TRqy' ],
-    [POSITIONER]: [ '_1TRqy' ],
+    [OVERLAY]: [ '_1SiVm' ],
+    [POSITIONER]: [ '_1SiVm' ],
   },
   [STATE_CLOSING]: {
-    [OVERLAY]: [ 'a6uTv' ],
+    [OVERLAY]: [ '_1Kpo_' ],
   },
 };
 

diff --git a/src/common/components/Pagination.js b/src/common/components/Pagination.js
@@ -168,17 +168,18 @@ const CLASS_NAMES = {
     [ITEM]: [ '_3FVNQ', 'wQ_9d' ],
     // Copied from the special letter buttons.
     [BUTTON]: [
-      '_1N-oo',
-      '_36Vd3',
-      '_16r-S',
-      '_8oomW',
       '_8AMBh',
       '_2vfJy',
       '_3Qy5R',
       '_2yFpW',
+      '_1Qh5D',
+      '_36g4N',
+      '_2YF0P',
+      '_2yFpW',
     ],
     [DISABLED_BUTTON]: [
       '_20q0d',
+      '_1NM1Q',
       // Copied by searching for a class that resets the bottom border, alongside the other button classes.
       '_1_xfn',
     ],

diff --git a/src/common/components/SolutionList.js b/src/common/components/SolutionList.js
@@ -1069,13 +1069,6 @@ const CLASS_NAMES = {
     [ACTIVE_LIST_ACTION_LINK]: [ '_27FUO', '_1PPA6' ],
     // Found in the "app" stylesheet. Adds a light gray color.
     [INACTIVE_LIST_ACTION_LINK]: [ '_3cbXv' ],
-    [DISABLED_LIST_ACTION_LINK]: [
-      // Copied from the special letter buttons. Only the main class is used here.
-      '_1N-oo',
-      '_33Jbm',
-      '_8AMBh',
-      '_20q0d',
-    ],
     // Found by searching for the "notification" result color (applied when using the "Can't listen now" button eg).
     [SOLUTION_TOKEN_SEPARATOR]: [ '_2QmYK', '_20psa', '_3wqVs', '_2n6ud' ],
     // Found in the "app" stylesheet. Adds the page background color.

diff --git a/src/common/components/UserReference.js b/src/common/components/UserReference.js
@@ -145,19 +145,19 @@ const CLASS_NAMES = {
       'RpiVp',
     ],
     [BUTTON]: [
-      // Copied from the special letter buttons provided for some languages (such as French).
-      // The class responsible for the small and square dimensions is ignored here.
-      '_1N-oo',
-      '_36Vd3',
-      '_16r-S',
-      '_8oomW',
-      '_8AMBh',
-      '_2vfJy',
-      '_3Qy5R',
+      // Copied from the "Continue" button from the practice sessions.
+      // The class responsible for the colors is ignored here.
+      '_1x5JY',
+      '_1M9iF',
+      '_36g4N',
+      '_2YF0P',
+      '_3DbUj',
+      '_38g3s',
     ],
-    // Found in the "app" stylesheet. Adds the main link color.
-    // Use a class located after the one responsible for the color and background of the button.
-    [COMMIT_BUTTON]: [ '_27FUO', '_1PPA6' ],
+    // Copied from the "Continue" button when the given answer is correct.
+    [COMMIT_BUTTON]: [ '_2oGJR' ],
+    // Copied from the "Continue" button when the given answer is incorrect.
+    [ROLLBACK_BUTTON]: [ '_3S8jJ' ],
   },
 };
 
@@ -178,11 +178,6 @@ const STYLE_SHEETS = {
     [EDIT_FIELD]: {
       marginBottom: '10px',
     },
-    [BUTTON]: {
-      ':before': {
-        '--__internal__border-color': 'currentColor',
-      },
-    },
     [BUTTON_SPACER]: {
       marginLeft: '10px',
     },

diff --git a/src/common/ui.js b/src/common/ui.js
@@ -870,13 +870,13 @@ const SELECTOR_ANSWER_INPUT = [
  * A CSS selector for the container of the full answer for fill-in-the-blank challenges.
  * @type {string}
  */
-const SELECTOR_BLANK_FILLING_FULL_ANSWER = '._2FKqf';
+const SELECTOR_BLANK_FILLING_FULL_ANSWER = '._2FKqf, ._2mrQw';
 
 /**
  * A CSS selector for the extraneous tokens that can be found in answers to fill-in-the-blank challenges.
  * @type {string}
  */
-const SELECTOR_BLANK_FILLING_ANSWER_EXTRANEOUS_TOKEN = '._2FKq, .caPDQ, ._2aMo5';
+const SELECTOR_BLANK_FILLING_ANSWER_EXTRANEOUS_TOKEN = '._2aMo5, ._2pNyl, [data-test="challenge-text-input"]';
 
 /**
  * A CSS selector for the container of the answer tokens selected from the word bank.