Because the style rules do not belong to AppsDrawer.tsx and are used by other multiple components, it is sensible to manage the rules on _common.pcss rather than _AppsDrapwer.pcss to improve maintainability.
* Integrate compound design tokens
The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here
* lintfix
* Use correct SpyInstance import
* Using npm build of design tokens
* Nest - .mx_Dialog .markdown-body
* Nest - .mx_Dialog .markdown-body *
* Run prettier
* Nest
* Nest - * .mx_Dialog_background
* Run prettier
* Nest - * .mx_Dialog
* Nest - mx_Dialog_title.danger
* Use a variable for z-index: default wrapper index
* Use a variable for z-index: static dialog background
* Use a variable for z-index: static dialog itself
* Use a variable for z-index: standard dialog background
* Use a variable for z-index: standard dialog
* Merge :root selector blocks
* Calculate z-index values to fix the order
* Rename the variables
* Include mx_Dialog_buttons_row in mx_Dialog_buttons
mx_Dialog_buttons_row is used on DialogButtons.tsx only inside mx_Dialog_buttons under {additive}
* Run prettier
* Nest `pre code` in `pre`
* Use CSS custom property: --timeline-image-border-radius
Remove the same variable from _MImageBody.pcss
* Rename the property
The property is neither limited to a timeline nor image, but applied to M.*?Body components as well, such as MLocationBody and MVideoBody.
* Remove a mixin - mx_Tooltip_dark
The mixin has been used on `_AppsDrawer.pcss` only.
* Rename mx_Tooltip_dark based on the naming policy
'mx_Tooltip_dark' has been used on `AppPermission.tsx` only.
* Remove an obsolete variable - `$MessageTimestamp_width_hover`
Added by 9b54aba4c0
Deprecated 5343be7814
* Replace a variable with a custom property - $MessageTimestamp_width
* Merge with an existing property in :root
rename
* Manage the variable on _MessageTimestamp.pcss
* Replace a Sass variable with a CSS custom property - $container-gap-width
* Replace a Sass variable with a CSS custom property - $container-border-width
The style rules have been obsolete since IA 1.1 feedback toast was removed by 5d89230271.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete style rules - `mx_linkButton`
The block was added with fbab8ceeef for CreateKeyBackupDialog.js. It has been replaced with AccessibleButton element (see: onSkipPassPhraseClick on L283 and changeText on L314-316). The last function which had used mx_linkButton (_onOptOutClick) has been removed.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete style rules - `mx_textButton`
mx_textButton has been replaced with AccessibleButton (with kind="link"). There is also not an element which uses the class.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use grid layout instead
- BEM naming style
- Increase block gap from 4px to 8px
- Use flexbox inside 'header' grid-area to let the buttons wrapped
- Use variables
- Remove 4px gap when one of the buttons is not rendered
- Change 'body' to 'message'
- Set 'align-self: start' to the icon and spinner
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Unset height of spinner
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Break lines at newline characters with white-space: pre-line
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Edit tests to check decryption failure bars on narrow timeline
- checkTimelineNarrow() looks for buttons by default
- Test indicator as well
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove a line
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Edit the test to have it check mx_EventTile_last only inside mx_RoomView_body
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix double underscores
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix double underscores - pcss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Iterate - buttons at the bottom
- Set common spacing to buttons with variables
- Remove line breaks, yarn run i18n
- Set data-testid for headlines and buttons in case the tested strings would be displayed elsewhere simultaneously
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Check waiting headline as well
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Increase spacing between the message and the buttons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* lint
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Increase block gap between wrapped buttons for clickability
Apply 8px between wrapped buttons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Revert bottom margin of buttons which are not expected to be wrapped
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Check visibility instead of existence
This commit removes data-testid from headlines and data-testid-button and checks whether the elements are really visible, not overflowing the viewport.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove redundant gap between 'mx_DecryptionFailureBar_start' and the bottom edge
This commit adds '.mx_DecryptionFailureBar--withEnd' class name to have it applied to the bar only if it has button(s). This way the bar is rendered with a flexbox and the row-gap declaration is respected only if there is a 'mx_DecryptionFailureBar--withEnd' element. The element currently includes the button(s) only.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* lint - prettier
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Have Percy take a snapshot of the bar loading spinner before checkTimelineNarrow()
The loading spinner is likely to disappear while checking the bar on the narrow timeline.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Kerry <kerrya@element.io>
* Fix flaky Percy tests of ReplyChain
- Add media query for percy on _ReplyChain.pcss to apply the same color to vertical strokes (border-left)of ReplyChain
- Use CSS variables for visibility
- Manage those variables on _common.pcss for maintainability
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Check receptSent as well for consistency
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add a comment
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Specify zero spacing and remove list-style
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Update our cancel icon
The cancel icon we're using in the app has drifted out of sync with the ones used in our designs. We also had two identical-looking icons, so this consolidates them into one.
I've simultaneously updated our chevron icons, since in the case of the 'jump to unread' timeline button, it became clear that the weight of the new close icon did not match the thinner chevron.
* Don't squish bottom/top-aligned tooltips near the edge of the screen
* Close the timeline panel when returning to the fullscreen timeline view
* Add layout switching capabilities to ElementCall
* Bring the room header in line with the group call designs
* Bring the PiP header in line with the group call designs
* Fix lints
* Clarify tooltip CSS calculations
* Test PipView
* Expand RoomHeader test coverage
* Test PipView more
* Improve accessibility and testability of Tooltip
Adding a role to Tooltip was motivated by React Testing Library's
reliance on accessibility-related attributes to locate elements.
* Make the ReadyWatchingStore constructor safer
The ReadyWatchingStore constructor previously had a chance to
immediately call onReady, which was dangerous because it was potentially
calling the derived class's onReady at a point when the derived class
hadn't even finished construction yet. In normal usage, I guess this
never was a problem, but it was causing some of the tests I was writing
to crash. This is solved by separating out the onReady call into a start
method.
* Rename 1:1 call components to 'LegacyCall'
to reflect the fact that they're slated for removal, and to not clash
with the new Call code.
* Refactor VideoChannelStore into Call and CallStore
Call is an abstract class that currently only has a Jitsi
implementation, but this will make it easy to later add an Element Call
implementation.
* Remove WidgetReady, ClientReady, and ForceHangupCall hacks
These are no longer used by the new Jitsi call implementation, and can
be removed.
* yarn i18n
* Delete call map entries instead of inserting nulls
* Allow multiple active calls and consolidate call listeners
* Fix a race condition when creating a video room
* Un-hardcode the media device fallback labels
* Apply misc code review fixes
* yarn i18n
* Disconnect from calls more politely on logout
* Fix some strict mode errors
* Fix another updateRoom race condition
