RoomBreadcrumbs2 -> RoomBreadcrumbs

res/css/_components.scss

@@ -175,7 +175,7 @@
 @import "./views/rooms/_PinnedEventsPanel.scss";
 @import "./views/rooms/_PresenceLabel.scss";
 @import "./views/rooms/_ReplyPreview.scss";
-@import "./views/rooms/_RoomBreadcrumbs2.scss";
+@import "./views/rooms/_RoomBreadcrumbs.scss";
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";
 @import "./views/rooms/_RoomPreviewBar.scss";

res/css/views/rooms/_RoomBreadcrumbs.scss

@@ -14,9 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
+.mx_RoomBreadcrumbs {
-
-.mx_RoomBreadcrumbs2 {
     width: 100%;
 
     // Create a flexbox for the crumbs
@@ -24,7 +22,7 @@ limitations under the License.
     flex-direction: row;
     align-items: flex-start;
 
-    .mx_RoomBreadcrumbs2_crumb {
+    .mx_RoomBreadcrumbs_crumb {
         margin-right: 8px;
         width: 32px;
     }
@@ -33,10 +31,10 @@ limitations under the License.
     // could care about, but this is all we worried about for now. The animation works by
     // first triggering the enter state with the newest breadcrumb off screen (-40px) then
     // sliding it into view.
-    &.mx_RoomBreadcrumbs2-enter {
+    &.mx_RoomBreadcrumbs-enter {
         margin-left: -40px; // 32px for the avatar, 8px for the margin
     }
-    &.mx_RoomBreadcrumbs2-enter-active {
+    &.mx_RoomBreadcrumbs-enter-active {
         margin-left: 0;
 
         // Timing function is as-requested by design.
@@ -44,7 +42,7 @@ limitations under the License.
         transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
     }
 
-    .mx_RoomBreadcrumbs2_placeholder {
+    .mx_RoomBreadcrumbs_placeholder {
         font-weight: 600;
         font-size: $font-14px;
         line-height: 32px; // specifically to match the height this is not scaled
@@ -52,7 +50,7 @@ limitations under the License.
     }
 }
 
-.mx_RoomBreadcrumbs2_Tooltip {
+.mx_RoomBreadcrumbs_Tooltip {
     margin-left: -42px;
     margin-top: -42px;
 }

src/components/structures/LeftPanel.tsx

@@ -25,7 +25,7 @@ import { HEADER_HEIGHT } from "../views/rooms/RoomSublist2";
 import { Action } from "../../dispatcher/actions";
 import UserMenu from "./UserMenu";
 import RoomSearch from "./RoomSearch";
-import RoomBreadcrumbs2 from "../views/rooms/RoomBreadcrumbs2";
+import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
 import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import ResizeNotifier from "../../utils/ResizeNotifier";
@@ -325,7 +325,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                     className="mx_LeftPanel_breadcrumbsContainer mx_AutoHideScrollbar"
                     verticalScrollsHorizontally={true}
                 >
-                    <RoomBreadcrumbs2 />
+                    <RoomBreadcrumbs />
                 </IndicatorScrollbar>
             );
         }

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -28,8 +28,6 @@ import { DefaultTagID } from "../../../stores/room-list/models";
 import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
 import Toolbar from "../../../accessibility/Toolbar";
 
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
-
 interface IProps {
 }
 
@@ -44,7 +42,7 @@ interface IState {
     skipFirst: boolean;
 }
 
-export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState> {
+export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState> {
     private isMounted = true;
 
     constructor(props: IProps) {
@@ -88,12 +86,12 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState
             const roomTag = roomTags.includes(DefaultTagID.DM) ? DefaultTagID.DM : roomTags[0];
             return (
                 <RovingAccessibleTooltipButton
-                    className="mx_RoomBreadcrumbs2_crumb"
+                    className="mx_RoomBreadcrumbs_crumb"
                     key={r.roomId}
                     onClick={() => this.viewRoom(r, i)}
                     aria-label={_t("Room %(name)s", {name: r.name})}
                     title={r.name}
-                    tooltipClassName="mx_RoomBreadcrumbs2_Tooltip"
+                    tooltipClassName="mx_RoomBreadcrumbs_Tooltip"
                 >
                     <DecoratedRoomAvatar
                         room={r}
@@ -111,17 +109,17 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState
             return (
                 <CSSTransition
                     appear={true} in={this.state.doAnimation} timeout={640}
-                    classNames='mx_RoomBreadcrumbs2'
+                    classNames='mx_RoomBreadcrumbs'
                 >
-                    <Toolbar className='mx_RoomBreadcrumbs2'>
+                    <Toolbar className='mx_RoomBreadcrumbs'>
                         {tiles.slice(this.state.skipFirst ? 1 : 0)}
                     </Toolbar>
                 </CSSTransition>
             );
         } else {
             return (
-                <div className='mx_RoomBreadcrumbs2'>
+                <div className='mx_RoomBreadcrumbs'>
-                    <div className="mx_RoomBreadcrumbs2_placeholder">
+                    <div className="mx_RoomBreadcrumbs_placeholder">
                         {_t("No recently visited rooms")}
                     </div>
                 </div>