* Remove Flex component
* Remove Heading component
* Remove StatusIcon component
* Migrate IconButton from Compass Components repo
* Remove unused variants of IconButton and move into GlobalHeader
We only actually used IconButton in a limited set of locations (all
currently in the global header), and if I tried to test other
variations, they seemed to often have issues (like white text on a white
background). Most of those seemed to be because the theme in the
CompassThemeProvider was missing fields and fell back to defaults that
didn't make sense, but there were also enough errors in IconButtonRoot
(like invalid transitions or other logical errors) that lead me to just
rip out everything we don't currently use.
* Remove CompassThemeProvider
* Remove remaining references to @mattermost/compass-components
* Remove prop that's no longer needed
This rule warns us if an element has an onMouseOver/onMouseLeave
attributes without corresponding onFocus/onBlur ones. It's helpful
for showing where we may be missing some accessible interactions,
and I've filed MM-62343 and MM-62345 to follow up on two of these.
In other cases, the component either has alternate accessibility support
(the emoji picker), it's something that may not make sense to be
accessible (the expanded view of the channel header), or something we're
already planning to review accessiblity for (the search component), so
I'm going to disable it to avoid introducing noise for the time being.
* replace inside of comp/withtooltip
* remove overlay trigger eslint rl
* update location of prev migrated new tooltips
* copy button
* shared_channel_indicator, shared_user_indicator.tsx, size_aware_image
* actions_menu, old_admin_settings, schema_admin_settings, admin_settings
* billing_summary, brand_image_setting, edit_section_edit_table_row, elapsed_duration_cell
* permissions_scheme_summary,secure_connections/controls,system_users_column_toggler_menu,system_users_export,group/group_users/users_to_remove_groups
* team_profile,user_grid_role_dropdown,priority_labels,toggle_formatting_bar,use_emoji_picker,formatting_icon
* show_formatting,alert_banner others
* more
* snap fix
* add disabled prop to menu
* test fix for avatar
feat: Add id to WithTooltip in Avatars component to fix test failures
* combine refs in withtooltip
* channel header title favorite test fix
* priority label comp changes
* types check for children
* Update avatar.tsx
* e2e fixes
* fix E2E tests
* Remove memo from WithTooltip
I found that the web app leaks a fair bit less memory when this is removed. See https://community.mattermost.com/core/pl/gwyyoww9gtbg8fddoic9meq84y for more information
* e2e lint fixes
* e2e fixes
* Fix test style issue
---------
Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>
Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
* Remove label from add_user_to_channel_modal.tsx
The label isn't needed here because it was incorrectly used for error
text. I had to add the display: block to the .modal__error class to
ensure the top margin was the same as before, but I could remove the
font-weight from that class since it was only needed to counteract
the weight that Bootstrap adds for labels.
:
* Remove label from bleve_settings.tsx and replace with SettingSet
It doesn't seem correct to use a label here because it isn't tied to a
single form field. Since this component is a set of fields (a fieldset,
if you will) that looks like a setting, it seemed like a good place to
use SettingSet.
* Remove label from brand_image_setting.tsx, replace with SettingSet, and improve a11y of upload button
Like the last commit for BleveSettings, this setting is multiple inputs,
so it makes more sense as a fieldset/SettingSet.
While doing that, I also changed how the file upload button in
BrandImageSetting works because the new HTML broke how it worked before.
Previously, we overlayed an transparent file input over the button for it,
but the sizing for that got messed up, and that causes some weird
accessibility and breaks some things like hover effects. Instead, the
file input is now fully hidden, and clicking on the button triggers the
file input programatically. The behaviour is otherwise the same, but the
button now shows the hover style and there's only one keyboard focus for
the button.
* Remove some more labels from PluginManagement and use SettingSet there
* Add for attribute to labels in compliance_reports.tsx
* Use SettingSet and add the for attribute to another label in DatabaseSettings
* Use SettingSet in ElasticsearchSettings
* Add for attribute to label in GroupProfile
* Don't use label for help text in TeamEditionRightPanel
For this, I had to add a new CSS class to make the element appear as if
it was a label element as affected by Bootstrap. There's likely some
cases that this won't work, but it applies the same margin and
font-weight.
* Don't use label for help text in TrialBanner
* Don't use label for a heading in PasswordSettings
* Don't use label element in table in ChannelModeration
This text is more like a legend element in SettingSet, but I didn't use
that because it's in a table. This could possibly be given its own
CSS class.
* Don't use label element for error text in AdvancedTextEditor and MessageSubmitError
* Don't use label for help text and add for attribute in RenameChannelModal
* Don't use label for error text in SelectTeam
* Add for attribute to labels in various components
* Turn jsx-a11y/label-has-associated-control to an error
* Fix E2E test
* Enable eslint-plugin-jsx-a11y and add standard rules as warnings or errors
* Fix jsx-a11y/anchor-has-content in BooleanSetting and add SettingSet
The invisible anchor was presumably supposed to let people jump from one
setting's help text to another setting. That didn't work for boolean
settings because there's no element with the ID of the setting. Instead
of an empty anchor, we needed to give something else that ID.
To improve the semantics of those settings, I also put those settings
into a fieldset with a legend containing the setting's label text
instead of using an actual label element as per how it's done on the
MDN. We'll probably end up using the SettingSet for other settings as
well.
Finally, I also fixed the link used by admin.service.useLetsEncryptDescription.disabled
to point to the right place and made it so that the link would open in
the current tab. Ideally, I'd also remove the Markdown from that help
text, but there's a lot here already.
* Fix jsx-a11y/anchor-has-content in CheckboxSetting
* Use SettingSet in PasswordSettings to improve semantics and layout
The main reason for doing this is to use a proper legend and fieldset
for these settings, but it also has the benefit of removing the extra
spacing from in between these settings.
* Change CopyText to use a button and require an aria-label for it
This fixes two ESLint warnings:
- This was failing jsx-a11y/anchor-has-content because it was an empty
anchor element. I fixed that by giving it an aria-label matching the
tooltip of the CopyText, but that required that the label was a string,
so I had to change how CopyText is used. I also made the label required
so that people give an accessible explanation of what is being copied.
- This was also failing jsx-a11y/anchor-is-valid because it should be a
button instead of a link. I applied the btn-link class and made it so
that that doesn't override the link's height which hopefully doesn't
cause problems anywhere else.
This is to fix jsx-a11y/anchor-has-content and jsx-a11y/anchor-is-valid
in the component. The ESLint plugin is complaining that this component
is using an anchor instead of a button element, so I changed that
* Turn jsx-a11y/anchor-has-content to be an error
* Update snapshots
* Remove lingering reference to nested prop which has been removed
* Changing system console password settings to a list and update padding for alerts in it
* Fix typo in SettingSet
* Update E2E tests to enable Elasticsearch by ID and remove duplicate enableElasticSearch helper
* Update E2E test to look for a legend instead of a label
* Fix typo in snapshot
* Ensure all packages remove a node_modules in their folder when cleaning
* Upgrade typescript to 5.6.3 and move to root package.json
Note that this currently fails to build the types package due to
@types/node which I'm going to try to remove
* Update @types/node to 20.11 to match .nvmrc
* Upgrade zen-observable to 0.10.0
It looks like localforage-observable uses its own version
of zen-observable because it hasn't been updated in years.
This seems like something we probably should remove.
* Update yargs to 17.7.2
* Update webpack-dev-server to 5.1.0
* Remove webpack-bundle-analyzer since we haven't used it in years
* Update webpack to 5.95.0
* Update web-vitals to 4.2.4
* Update turndown to 7.2.0
* Update tinycolor2 to 1.6.0
* Update timezones.json to 1.7.0
* Update stylelint to 16.10.0, stylelint-config-recommended-scss to 14.1.0, and stylelint-scss to 6.8.1
* Update webpack-cli to 5.1.4
* Update style-loader to 4.0.0
* Change all Webpack scripts to be ES modules
* Update strip-ansi to 7.1.0
This is a build script dependency
* Update chalk to 5.3.0
This is a build script dependency
* Update concurrently to 9.0.1
This is a build script dependency
* Update smooth-scroll-into-view-if-needed to 2.0.2
* MM-48205 Update serialize-error to 11.0.3
We didn't update this before because it's an ES module which caused Jest to complain. We can fix that by making Jest transform the it
* Update semver to 7.6.3
* Update types for semver, tinycolor2, turndown, and webpack
* Fix type issues: change Props to a type
* Fix type issues: invalid HTML attributes
* Remove unneeded option from Webpack config
* Update ESLint and plugins
* Move most channels-specific ESLint configuration into ESLint plugin
* Add ESLint to types and client packages
* Add ESLint to components package
