Merge branch 'develop' into estellecomment/remove-add-space-button

Author: estellecomment

.stylelintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
     "extends": "stylelint-config-standard",
+    customSyntax: require('postcss-scss'),
     "plugins": [
         "stylelint-scss",
     ],
@@ -27,6 +28,25 @@ module.exports = {
         // rather than a CI thing. Shorthand selectors are harder to detect when searching for a
         // class name. This regex is trying to *allow* anything except `&words`, such as `&::before`,
         // `&.mx_Class`, etc.
-        "selector-nested-pattern": "^((&[ :.\\\[,])|([^&]))"
-    }
+        "selector-nested-pattern": "^((&[ :.\\\[,])|([^&]))",
+        "declaration-colon-space-after": "always-single-line",
+        // Disable some defaults
+        "selector-class-pattern": null,
+        "custom-property-pattern": null,
+        "selector-id-pattern": null,
+        "keyframes-name-pattern": null,
+        "string-quotes": null,
+        "alpha-value-notation": null,
+        "color-function-notation": null,
+        "selector-not-notation": null,
+        "import-notation": null,
+        "value-keyword-case": null,
+        "declaration-block-no-redundant-longhand-properties": null,
+        "shorthand-property-no-redundant-values": null,
+        "property-no-vendor-prefix": null,
+        "value-no-vendor-prefix": null,
+        "selector-no-vendor-prefix": null,
+        "media-feature-name-no-vendor-prefix": null,
+        "number-max-precision": null,
+    },
 }

cypress/e2e/1-register/register.spec.ts

@@ -65,6 +65,8 @@ describe("Registration", () => {
         cy.startMeasuring("from-submit-to-home");
         cy.get(".mx_InteractiveAuthEntryComponents_termsSubmit").click();
 
+        cy.get(".mx_UseCaseSelection_skip .mx_AccessibleButton").click();
+
         cy.url().should('contain', '/#/home');
         cy.stopMeasuring("from-submit-to-home");
 

cypress/e2e/12-spotlight/spotlight.spec.ts

@@ -357,7 +357,7 @@ describe("Spotlight", () => {
             cy.spotlightSearch().clear().type("b");
             // our debouncing logic only starts the search after a short timeout,
             // so we wait a few milliseconds.
-            cy.wait(300);
+            cy.wait(1000);
             cy.get(".mx_Spinner").should("not.exist").then(() => {
                 cy.spotlightResults().should("have.length", 2).then(() => {
                     cy.spotlightResults().eq(0)

cypress/e2e/14-timeline/timeline.spec.ts

@@ -23,6 +23,7 @@ import type { EventType } from "matrix-js-sdk/src/@types/event";
 import type { MatrixClient } from "matrix-js-sdk/src/client";
 import { SynapseInstance } from "../../plugins/synapsedocker";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
+import { Layout } from "../../../src/settings/enums/Layout";
 import Chainable = Cypress.Chainable;
 
 // The avatar size used in the timeline
@@ -141,5 +142,52 @@ describe("Timeline", () => {
                 expectAvatar(e, newAvatarUrl);
             });
         });
+
+        it("should create and configure a room on IRC layout", () => {
+            cy.visit("/#/room/" + roomId);
+            cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
+            cy.contains(".mx_RoomView_body .mx_GenericEventListSummary[data-layout=irc] " +
+                ".mx_GenericEventListSummary_summary", "created and configured the room.");
+            cy.percySnapshot("Configured room on IRC layout");
+        });
+
+        it("should click top left of view source event toggle", () => {
+            sendEvent(roomId);
+            cy.visit("/#/room/" + roomId);
+            cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);
+            cy.contains(".mx_RoomView_body .mx_GenericEventListSummary " +
+                ".mx_GenericEventListSummary_summary", "created and configured the room.");
+
+            // Edit message
+            cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile_line", "Message").within(() => {
+                cy.get('[aria-label="Edit"]').click({ force: true }); // Cypress has no ability to hover
+                cy.get(".mx_BasicMessageComposer_input").type("Edit{enter}");
+            });
+            cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", "MessageEdit");
+
+            // Click top left of the event toggle, which should not be covered by MessageActionBar's safe area
+            cy.get(".mx_EventTile .mx_ViewSourceEvent").realHover()
+                .get(".mx_EventTile .mx_ViewSourceEvent .mx_ViewSourceEvent_toggle").click('topLeft', { force: false });
+
+            // Make sure the expand toggle worked
+            cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("be.visible");
+        });
+
+        it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => {
+            cy.visit("/#/room/" + roomId);
+            cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
+            cy.contains(".mx_RoomView_body .mx_GenericEventListSummary[data-layout=bubble] " +
+                ".mx_GenericEventListSummary_summary", "created and configured the room.");
+
+            // Click "expand" link button
+            cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click();
+
+            // Click "collapse" link button on the first hovered info event line
+            cy.get(".mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type").realHover()
+                .get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").click({ force: false });
+
+            // Make sure "collapse" link button worked
+            cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]");
+        });
     });
 });

docs/icons.md

@@ -22,7 +22,7 @@ const MyComponent = () => {
 Icon components are svg elements and can be styled as usual.
 
 ```
-// _MyComponents.scss
+// _MyComponents.pcss
 .mx_MyComponent-icon {
     height: 20px;
     width: 20px;
@@ -41,4 +41,4 @@ const MyComponent = () => {
         <FavoriteIcon className="mx_MyComponent-icon" role="img" aria-hidden="false">
     </>;
 }
-```
+```

package.json

@@ -20,7 +20,8 @@
     "CONTRIBUTING.rst",
     "LICENSE",
     "README.md",
-    "package.json"
+    "package.json",
+    ".stylelintrc.js"
   ],
   "main": "./src/index.ts",
   "matrix_src_main": "./src/index.ts",
@@ -47,7 +48,7 @@
     "lint:js": "eslint --max-warnings 0 src test cypress",
     "lint:js-fix": "eslint --fix src test cypress",
     "lint:types": "tsc --noEmit --jsx react && tsc --noEmit --jsx react -p cypress",
-    "lint:style": "stylelint \"res/css/**/*.scss\"",
+    "lint:style": "stylelint \"res/css/**/*.pcss\"",
     "test": "jest",
     "test:cypress": "cypress run",
     "test:cypress:open": "cypress open",
@@ -56,7 +57,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@matrix-org/analytics-events": "^0.1.1",
+    "@matrix-org/analytics-events": "^0.1.2",
     "@matrix-org/react-sdk-module-api": "^0.0.3",
     "@sentry/browser": "^6.11.0",
     "@sentry/tracing": "^6.11.0",
@@ -193,14 +194,15 @@
     "matrix-mock-request": "^2.0.0",
     "matrix-react-test-utils": "^0.2.3",
     "matrix-web-i18n": "^1.3.0",
+    "postcss-scss": "^4.0.4",
     "raw-loader": "^4.0.2",
     "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
     "rrweb-snapshot": "1.1.7",
-    "stylelint": "^13.9.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.18.0",
-    "typescript": "4.5.3",
+    "stylelint": "^14.9.1",
+    "stylelint-config-standard": "^26.0.0",
+    "stylelint-scss": "^4.2.0",
+    "typescript": "^4.7.4",
     "walk": "^2.3.14"
   },
   "resolutions": {

res/css/_animations.scss renamed to res/css/_animations.pcss

@@ -17,10 +17,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@import "./_font-sizes.scss";
-@import "./_font-weights.scss";
-@import "./_animations.scss";
-@import "./_spacing.scss";
+@import "./_font-sizes.pcss";
+@import "./_font-weights.pcss";
+@import "./_animations.pcss";
+@import "./_spacing.pcss";
 @import url("maplibre-gl/dist/maplibre-gl.css");
 
 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
@@ -112,35 +112,35 @@ a:visited {
     color: $accent-alt;
 }
 
-input[type=text],
-input[type=search],
-input[type=password] {
+input[type="text"],
+input[type="search"],
+input[type="password"] {
     font-family: inherit;
     padding: 9px;
     font-size: $font-14px;
     font-weight: 600;
     min-width: 0;
 }
 
-input[type=text].mx_textinput_icon,
-input[type=search].mx_textinput_icon {
+input[type="text"].mx_textinput_icon,
+input[type="search"].mx_textinput_icon {
     padding-left: 36px;
     background-repeat: no-repeat;
     background-position: 10px center;
 }
 
 // FIXME THEME - Tint by CSS rather than referencing a duplicate asset
-input[type=text].mx_textinput_icon.mx_textinput_search,
-input[type=search].mx_textinput_icon.mx_textinput_search {
+input[type="text"].mx_textinput_icon.mx_textinput_search,
+input[type="search"].mx_textinput_icon.mx_textinput_search {
     background-image: url('$(res)/img/feather-customised/search-input.svg');
 }
 
 // dont search UI as not all browsers support it,
 // we implement it ourselves where needed instead
-input[type=search]::-webkit-search-decoration,
-input[type=search]::-webkit-search-cancel-button,
-input[type=search]::-webkit-search-results-button,
-input[type=search]::-webkit-search-results-decoration {
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
     display: none;
 }
 
@@ -150,7 +150,7 @@ textarea::placeholder {
     opacity: initial;
 }
 
-input[type=text], input[type=password], textarea {
+input[type="text"], input[type="password"], textarea {
     background-color: transparent;
     color: $primary-content;
 }
@@ -160,7 +160,7 @@ textarea {
     color: $primary-content;
 }
 
-input[type=text]:focus, input[type=password]:focus, textarea:focus {
+input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
     outline: none;
     box-shadow: none;
 }
@@ -194,15 +194,15 @@ legend {
 // appear to be part of the input
 
 .mx_Dialog, .mx_MatrixChat_wrapper {
-    .mx_textinput > input[type=text],
-    .mx_textinput > input[type=search] {
+    .mx_textinput > input[type="text"],
+    .mx_textinput > input[type="search"] {
         border: none;
         flex: 1;
         color: $primary-content;
     }
 
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
     .mx_textinput {
         display: block;
         box-sizing: border-box;
@@ -219,8 +219,8 @@ legend {
         align-items: center;
     }
 
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder,
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder,
     .mx_textinput input::placeholder {
         color: rgba($input-darker-fg-color, .75);
     }
@@ -230,8 +230,8 @@ legend {
 .dark-panel {
     background-color: $dark-panel-bg-color;
 
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
     .mx_textinput {
         color: $input-darker-fg-color;
         background-color: $background;
@@ -240,8 +240,8 @@ legend {
 }
 
 .light-panel {
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
     .mx_textinput {
         color: $input-darker-fg-color;
         background-color: $input-lighter-bg-color;
@@ -517,7 +517,7 @@ legend {
  * Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class.
  * For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b).
  */
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton),
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
@@ -534,25 +534,25 @@ legend {
     font-family: inherit;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):last-child {
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):last-child {
     margin-right: 0px;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):hover,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):hover,
 .mx_Dialog input[type="submit"]:hover,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):hover,
 .mx_Dialog_buttons input[type="submit"]:hover {
     @mixin mx_DialogButton_hover;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):focus,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
     filter: brightness($focus-brightness);
 }
 
-.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
+.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .mx_Dialog input[type="submit"].mx_Dialog_primary,
 .mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
@@ -561,7 +561,7 @@ legend {
     min-width: 156px;
 }
 
-.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
+.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .mx_Dialog input[type="submit"].danger,
 .mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"].danger {
@@ -570,13 +570,13 @@ legend {
     color: $accent-fg-color;
 }
 
-.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
+.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .mx_Dialog input[type="submit"].warning {
     border: solid 1px $alert;
     color: $alert;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):disabled,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {