Internal customizations for widgets #2132
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Supporting graphql subscriptions * Adding improvements and style variables to the gql console.
…ey to parameters. (#1748)
…tion (#1569) * added support new captcha API and prepare current for deprecation * added check for legacy captcha endpoint
* migrate msal to @azure/msal-browser * added support 2 msal libraries for aad * replaced editor property to identity provider setting for MSAL client library version
* enable styling for sub-somponents WIP * added styles for label and tag-input * fixed typo * Merged paperbits changes. (#1741) Co-authored-by: Alexander Zaslonov <zaslonov.alexander@gmail.com>
* Added local styles for Product List Widget
#1715) * Added local styles for the "Try it" button in Operation Details widget
* Added local styles for the Product Details Widget
Added local styles for product list dropdown
* Added local styles for List of APIs dropdown widget
Added local styles for operation-list
* Added local styles for API List tiles widget + refactoring
Added local styles for product subscriptions widget
Added local styles for api-details widget
Added local styles for User Subscription widget
Added local styles for Product Subscribe Form widget
Co-authored-by: Alexander Zaslonov <alzaslon@microsoft.com> Co-authored-by: Farhad Alizada <falizada@microsoft.com>
Co-authored-by: Farhad Alizada <falizada@microsoft.com>
* Add Playwright tests with image comparison for profile page --------- Co-authored-by: Farhad Alizada <falizada@microsoft.com>
Co-authored-by: SenpuDev <senpuudev@gmail.com>
* Fixed non-working images in API descriptions * Removed duplicated styles * Fixed Format and Readonly properties displaying * Double quotes ES lint fix
Co-authored-by: Farhad Alizada <falizada@microsoft.com>
|
When is this expected to go live? This is the last customizations needed to truly give the portal a better overall control of the UI. |
azaslonov
force-pushed
the
feature/local-styles
branch
from
72d973c to
4da6104
Compare
azaslonov
force-pushed
the
feature/local-styles
branch
from
4da6104 to
ebc7c2b
Compare
azaslonov
force-pushed
the
master
branch
2 times, most recently
from
79dae19 to
a74f7db
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Goal
Enable customizations for components of the Developer Portal's widgets.
Related issues: #1213
Details
Besides the global styles defined for the entire application, users can define local styles for each widget individually.
The components that are stylable are now selectable, and the button edit for "edit local styles" appears when they are selected, as seen in the following screenshot:
By clicking on the button, a style editor pop-up will appear, with the allowed customizations for the selected component.
The styles defined will be applied for all of the same components of the widget (i.e. defining a different background color for an input inside a widget will change the background color of all the inputs from inside the same widget)
Here is an example of how styling work for the inputs in the test console:
