Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update border radius documentation with new variables #12103

Merged
merged 2 commits into from
Aug 13, 2024
Merged

Update border radius documentation with new variables #12103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
49cabc4
chore: Add upgrade guide for border radius CSS variables
susnux Aug 13, 2024
9a87818
chore: Update border radius documentation with new variables
marcoambrosini Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 22 additions & 3 deletions developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@ The size of the CSS variable ``--clickable-area`` variable has shrunk from ``44p
This will result in several regressions and paper-cuts in your app that will need to be manually fixed.
It's recommended to:

1) Link the @nextcloud/vue current master to your app (pull often cause fixes are getting in there too);
1) Link the ``@nextcloud/vue`` current master to your app (pull often cause fixes are getting in there too);
2) Do a codebase-wide search of `44px` and replace with the variable `--default-clickable-area` if appropriate;
3) Check for regressions and visual bugs;
4) Report the regression of your app in this issue (you can create a heading with the name of your own app);
5) Also report @nextlcoud/vue library regressions if they're not reported already in their list;
6) Fix regression in your app (only the ones that are unrelated to the @nextcloud/vue components);
5) Also report ``@nextlcoud/vue`` library regressions if they're not reported already in their list;
6) Fix regression in your app (only the ones that are unrelated to the ``@nextcloud/vue`` components);

Line height
^^^^^^^^^^^
Expand All @@ -58,6 +58,25 @@ Nextcloud now provides meaningful default styles for heading elements.
This can cause visual regressions if your code does not explicitly set font size and weight.
If you need to use heading elements outside of text content, you might need to adjust their styles.

Border radius
^^^^^^^^^^^^^

The border radius CSS variables have been refactored:

- Added

- ``--border-radius-small`` was added for smaller elements like chips.
- ``--border-radius-container`` was added for smaller containers like action menus.
- ``--border-radius-container-large`` was added for larger containers like body or modals.
- ``--border-radius-element`` was added for interactive elements such as buttons, input, navigation and list items.

- Deprecated

- ``--border-radius`` is deprecated now in favor of ``--border-radius-small``.
- ``--border-radius-large`` is deprecated now in favor of ``--border-radius-element``.
- ``--border-radius-pill`` is deprecated now in favor of ``--border-radius-element``.
- ``--border-radius-rounded`` is deprecated now in favor of ``--border-radius-container``.

Added APIs
^^^^^^^^^^

Expand Down
10 changes: 4 additions & 6 deletions developer_manual/html_css_design/css.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,15 +190,13 @@ Element structure variables
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-width-element-focused`` | ``2px`` | Border width for interactive elements when focussed (adjusted for accessibility) |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius`` | ``3px`` | Default border radius |
| ``--border-radius-small`` | ``4px`` | Border radius used for smaller elements |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius-large`` | ``10px`` | Larger border radius |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius-rounded`` | ``28px`` | Even larger border radius for elements which should be look rounded |
| ``--border-radius-element`` | ``8px`` | Border radius of interactive elements such as buttons, input, navigation and list items. |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius-pill`` | ``calc(var(--default-clickable-area) / 2)`` | Border radius for pill-style elements |
| ``--border-radius-container`` | ``12px`` | For smaller containers like action menus. |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius-element`` | ``8px`` | Border radius of interactive elements such as buttons, input, navigation and list items. |
| ``--border-radius-container-large`` | ``16px`` | For larger containers like body or modals. |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--default-clickable-area`` | ``34px`` | Default size (width and height) for interactive elements like buttons |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
Expand Down
Loading