feat(style): modify advance panel ui #826
Conversation
WalkthroughThe changes across multiple Vue components and CSS files primarily involve the addition and modification of CSS styles to improve layout and visual spacing. New classes have been introduced, existing styles have been updated, and some text labels have been simplified. These adjustments enhance the user interface by ensuring consistent spacing between elements, improving button layouts, and refining the overall visual presentation of components. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
💤 Files not reviewed due to no reviewable changes (2)
🚧 Files skipped from review as they are similar to previous changes (4)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (10)
packages/configurator/src/slot-configurator/SlotConfigurator.vue (1)
139-141: Approve the spacing improvement with a suggestion for responsivenessThe addition of this CSS rule effectively improves the visual separation between slot items, enhancing the overall readability of the list. This change aligns well with the PR's objective of improving the UI and spacing.
Consider using a relative unit for better responsiveness across different screen sizes. Here's a suggested modification:
.slot-list { display: flex; justify-content: center; align-items: center; &:not(:last-child) { - margin-bottom: 8px; + margin-bottom: 0.5rem; // Approximately 8px at default font size } // ... rest of the styles }This change maintains the intended spacing while potentially improving the component's adaptability to different viewport sizes and user font preferences.
packages/settings/events/src/components/BindEventsDialog.vue (2)
12-14: Added helpful user instructionThe new instructional text improves the dialog's usability by guiding users on how to select or add methods. This aligns well with the PR's UI enhancement objectives.
However, consider internationalizing this text for better support of non-Chinese speaking users if the application is intended for a global audience.
Consider wrapping the text in a translation function, e.g.:
<div class="bind-event-dialog-tip"> {{ $t('bindEventDialog.instruction') }} </div>And define the translations in your i18n files.
22-22: Improved button placement consistencyMoving the "确定" (Confirm) button next to the "取消" (Cancel) button improves UI consistency and follows common dialog design patterns.
However, consider changing the button type from "info" to "primary" to better represent its role as the main action button.
Consider modifying the button type:
<tiny-button type="primary" @click="confirm">确 定</tiny-button>packages/settings/events/src/components/AdvanceConfig.vue (2)
238-240: Consider correcting the class name spellingThe class name
.advnce-configappears to have a typo. It's likely meant to be.advance-configor.advanced-configto match the component's name and purpose.Correcting this spelling would improve code clarity and maintainability. If you decide to make this change, remember to update all occurrences in both the template and style sections of this file, as well as any other files that might be using this class name.
Line range hint
1-240: Consider standardizing language use in the componentI noticed that the component uses a mix of English and non-English text in labels, comments, and variable names. For example:
- Template section:
是否渲染,循环数据, etc.- Script section:
loopData,loopItem, etc.To improve code consistency and maintainability, consider standardizing the language used throughout the component. This could involve:
- Translating all user-facing text to a single language (likely the one preferred by your target users).
- Using consistent English naming for variables, methods, and comments in the script section.
This standardization would make the code more accessible to all team members and easier to maintain in the long run.
packages/settings/events/src/components/BindEvents.vue (4)
4-11: LGTM! Popover styling and positioning improved.The changes to the tiny-popover component enhance its appearance and positioning. The addition of a fixed width and removal of the visible arrow contribute to a cleaner, more consistent look.
Consider adding a comment explaining the reason for the placement change from "bottom-end" to "bottom-start", as this might affect the component's behavior in different contexts.
25-25: LGTM! Event list item formatting improved.The addition of a separator (" | ") between the event name and its label enhances readability and clearly distinguishes between the two pieces of information.
Consider wrapping the separator in a
<span>with an appropriate aria-hidden attribute to improve screen reader accessibility. For example:<div>{{ name }}<span aria-hidden="true"> | </span>{{ event?.label?.zh_CN || name }}</div>
70-70: LGTM! Empty action message improved.The updated message provides more specific information about the functionality, mentioning the support for native DOM events and giving clearer instructions on how to use the "绑定事件" (Bind Event) feature. This change enhances user understanding and guides them more effectively.
Consider breaking the message into two sentences for improved readability:
<div class="center">支持添加原生DOM事件。点击 绑定事件 为画布所选元素增加事件。</div>This separation makes it easier for users to grasp the two main points: the support for native DOM events and the instructions for binding events to selected elements.
Line range hint
313-378: LGTM! Styling improvements enhance overall layout and consistency.The style changes significantly improve the component's visual appeal and usability:
- Standardized button widths and margins create a more consistent layout.
- Updated empty action styling enhances its visual prominence.
- Optimized bind event list item padding and line height improve readability.
These modifications contribute to a more polished and professional appearance of the component.
For consistency, consider using CSS variables for common values like padding and line-height. For example:
:root { --ti-lowcode-events-padding: 12px; --ti-lowcode-events-line-height: 24px; } .bind-event-list-item { padding: 0 var(--ti-lowcode-events-padding); line-height: var(--ti-lowcode-events-line-height); } .empty-action { padding: calc(var(--ti-lowcode-events-padding) * 2) var(--ti-lowcode-events-padding); }This approach would make it easier to maintain consistent spacing throughout the component and facilitate future theme changes.
packages/plugins/i18n/src/Main.vue (1)
21-23: Consider consistency across the applicationThe changes effectively improve button spacing and align well with the PR objectives. To ensure a consistent user experience throughout the application, consider the following:
- Verify if similar spacing adjustments are needed for other button groups in the application.
- Consider creating a reusable button group component or utility class that can be applied consistently across different parts of the UI.
This approach would promote maintainability and ensure a uniform look and feel across the entire application.
Also applies to: 490-492
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
packages/design-core/assets/add.svgis excluded by!**/*.svg
📒 Files selected for processing (16)
- packages/common/component/MetaCodeEditor.vue (1 hunks)
- packages/configurator/src/slot-configurator/SlotConfigurator.vue (1 hunks)
- packages/configurator/src/variable-configurator/VariableConfigurator.vue (1 hunks)
- packages/plugins/i18n/src/Main.vue (2 hunks)
- packages/settings/events/src/commonjs/events.js (1 hunks)
- packages/settings/events/src/components/AddEventsDialog.vue (1 hunks)
- packages/settings/events/src/components/AdvanceConfig.vue (1 hunks)
- packages/settings/events/src/components/BindEvents.vue (7 hunks)
- packages/settings/events/src/components/BindEventsDialog.vue (4 hunks)
- packages/settings/events/src/components/BindEventsDialogContent.vue (4 hunks)
- packages/settings/events/src/components/BindEventsDialogSidebar.vue (2 hunks)
- packages/theme/base/src/component-common.less (2 hunks)
- packages/theme/dark/canvas.less (1 hunks)
- packages/theme/dark/events.less (2 hunks)
- packages/theme/light/canvas.less (1 hunks)
- packages/theme/light/events.less (2 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/settings/events/src/commonjs/events.js
- packages/settings/events/src/components/AddEventsDialog.vue
🔇 Additional comments (36)
packages/theme/dark/canvas.less (1)
8-9: Consistent update to corner mark colorsThe changes to
--ti-lowcode-canvas-corner-mark-left-colorand--ti-lowcode-canvas-corner-mark-bottom-right-colorappear to be intentional and align with the PR objectives of enhancing the UI. Both properties now usevar(--te-common-text-emphasize), which suggests a move towards a more unified and emphasized text style for corner marks.A few points to consider:
- This change improves consistency between left and bottom-right corner marks, as they now use the same color variable.
- The use of
--te-common-text-emphasizeimplies that these corner marks are now more prominent, which could enhance visibility and user experience.- Ensure that this change doesn't negatively impact the contrast or readability of the corner marks against their background.
To verify the impact and consistency of this change, please run the following script:
This script will help ensure that the changes are consistent across the theme and that no unintended side effects are introduced.
✅ Verification successful
Corner mark color updates are consistent and verified
The modifications to
--ti-lowcode-canvas-corner-mark-left-colorand--ti-lowcode-canvas-corner-mark-bottom-right-colorhave been reviewed thoroughly. The changes align with the overall theming strategy and ensure consistency across both dark and light themes. No unintended side effects were detected, and the usage of--te-common-text-emphasizeremains consistent throughout the codebase.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for other occurrences of corner mark colors and text emphasis # Search for other corner mark color definitions echo "Other corner mark color definitions:" rg --type less 'corner-mark.*color' # Search for other uses of the text emphasis variable echo "\nOther uses of --te-common-text-emphasize:" rg --type less 'var\(--te-common-text-emphasize\)' # Search for any remaining uses of the old variables echo "\nRemaining uses of old variables:" rg --type less 'var\(--ti-lowcode-base-text-color-2\)|var\(--te-common-text-weaken\)'Length of output: 5763
packages/theme/light/canvas.less (1)
8-9: Unified corner mark colors for consistencyThe changes to
--ti-lowcode-canvas-corner-mark-left-colorand--ti-lowcode-canvas-corner-mark-bottom-right-colorunify the colors of the left and bottom-right corner marks. This modification aligns with the PR's objective of enhancing the UI.However, please consider the following:
- Ensure that using
var(--te-common-text-emphasize)for both corner marks provides sufficient contrast against the background for visibility.- Verify that this change doesn't negatively impact the user's ability to distinguish between different corner marks if that was the original intent of having distinct colors.
To verify the impact of these changes, please run the following script:
This script will help identify any other components that might be affected by these changes and ensure consistency across the codebase.
✅ Verification successful
Corner mark color changes verified successfully
The modifications to
--ti-lowcode-canvas-corner-mark-left-colorand--ti-lowcode-canvas-corner-mark-bottom-right-colorare localized to thedarkandlightcanvas styles. No unintended usages of these variables were found elsewhere in the codebase.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for any other uses of the modified variables and related color variables # Search for other uses of the modified variables echo "Searching for other uses of --ti-lowcode-canvas-corner-mark-left-color:" rg --type less '--ti-lowcode-canvas-corner-mark-left-color' echo "Searching for other uses of --ti-lowcode-canvas-corner-mark-bottom-right-color:" rg --type less '--ti-lowcode-canvas-corner-mark-bottom-right-color' # Search for the new color variable being used echo "Searching for uses of --te-common-text-emphasize:" rg --type less '--te-common-text-emphasize' # Search for the old color variables that were replaced echo "Searching for uses of --te-common-border-checked:" rg --type less '--te-common-border-checked' echo "Searching for uses of --te-common-text-dark-inverse:" rg --type less '--te-common-text-dark-inverse'Length of output: 3105
Script:
#!/bin/bash # Description: Corrected script to check for any other uses of the modified variables and related color variables # Search for other uses of the modified variables echo "Searching for other uses of --ti-lowcode-canvas-corner-mark-left-color:" rg --type less -- '--ti-lowcode-canvas-corner-mark-left-color' echo "Searching for other uses of --ti-lowcode-canvas-corner-mark-bottom-right-color:" rg --type less -- '--ti-lowcode-canvas-corner-mark-bottom-right-color' # Search for the new color variable being used echo "Searching for uses of --te-common-text-emphasize:" rg --type less -- '--te-common-text-emphasize' # Search for the old color variables that were replaced echo "Searching for uses of --te-common-border-checked:" rg --type less -- '--te-common-border-checked' echo "Searching for uses of --te-common-text-dark-inverse:" rg --type less -- '--te-common-text-dark-inverse'Length of output: 3542
packages/theme/light/events.less (5)
19-19: LGTM: New background color variable for empty actions.The addition of
--ti-lowcode-events-empty-action-bg-coloris consistent with the existing naming convention and uses a common theme variable, which helps maintain visual consistency.
20-20: LGTM: Updated color for empty actions text.The change to
--ti-lowcode-events-empty-action-colorusingvar(--te-common-text-weaken)is good for consistency. It likely makes empty actions less prominent, which is usually desirable.Please verify that the contrast ratio between this text color and the new background color (--ti-lowcode-events-empty-action-bg-color) meets accessibility standards.
21-21: LGTM: New color variable for custom icons.The addition of
--ti-lowcode-events-custom-icon-coloris consistent with the existing naming convention. Usingvar(--te-common-text-weaken)maintains visual harmony with other weakened text elements.
33-33: LGTM: Updated color for bind event dialog text.The change to
--ti-lowcode-bind-event-dialog-colorusingvar(--te-common-text-secondary)aligns with a more standardized color scheme, which is good for consistency across the application.Please ensure that this color change doesn't negatively impact the readability of text in the bind event dialog. Consider testing with various background colors that might be used in the dialog.
Line range hint
19-33: Summary: Improved color consistency and potential UI subtlety.The changes in this file consistently use common theme variables (
--te-common-*) and maintain existing naming conventions. There's a trend towards using weakened or secondary text colors, which might create a more subtle UI. These changes should improve visual consistency across the application.To ensure these changes achieve the desired visual effect without compromising usability:
- Test the new color scheme in various lighting conditions and on different displays.
- Conduct a brief usability test to confirm that the more subtle color choices don't negatively impact user interaction or readability.
- Consider creating before/after screenshots to visually document the impact of these changes.
packages/theme/dark/events.less (5)
17-17: LGTM: New background color variable for empty action states.The addition of
--ti-lowcode-events-empty-action-bg-colorusing a common background container variable maintains consistency with the overall theme and enhances the UI as per the PR objectives.
Line range hint
17-31: Summary: CSS variable changes enhance UI consistency and refinement.The changes to CSS variables in this file consistently use common theme variables, maintaining overall theme coherence. These modifications align well with the PR objectives of enhancing the UI of the advanced panel and refining various UI elements. The use of weaker and secondary text colors for empty states, custom icons, and dialog text likely improves visual hierarchy and readability.
To ensure these changes meet the intended design goals:
- Verify the visual impact of the new and modified color variables in the relevant UI components.
- Confirm that the new
--ti-lowcode-events-custom-icon-colorvariable is consistently applied where needed.- Check the bind event dialog to ensure the new text color provides the desired contrast and readability.
Overall, these changes contribute positively to the UI refinement efforts outlined in the PR objectives.
19-19: LGTM: New color variable for custom icons in events UI.The addition of
--ti-lowcode-events-custom-icon-colorusing the same weaken text color maintains consistency with the empty action text. This change supports the PR objective of enhancing the UI of the advanced panel.Please verify that this new variable is consistently used for custom icons in the events UI:
#!/bin/bash # Description: Find usage of the new variable to ensure consistent application. rg --type less --type vue $'--ti-lowcode-events-custom-icon-color'
31-31: LGTM: Updated color for bind event dialog text.The modification of
--ti-lowcode-bind-event-dialog-colorto use a secondary text color (var(--te-common-text-secondary)) might improve readability or visual hierarchy in the dialog. This change aligns with the PR objective of refining the UI of various pop-up windows.Please verify the visual impact of this change in the bind event dialog:
#!/bin/bash # Description: Find usage of the modified variable to check for any potential visual regressions in the bind event dialog. rg --type less --type vue $'--ti-lowcode-bind-event-dialog-color'
18-18: LGTM: Updated color for empty action text.The modification of
--ti-lowcode-events-empty-action-colorto use a weaker text color (var(--te-common-text-weaken)) likely improves the visual hierarchy by de-emphasizing empty states. This change aligns with the PR objective of refining the UI.Please verify the visual impact of this change to ensure it meets the design requirements:
✅ Verification successful
LGTM: Updated color for empty action text.
The modification of
--ti-lowcode-events-empty-action-colorto use a weaker text color (var(--te-common-text-weaken)) has been consistently applied across both light and dark theme files and is correctly utilized in theBindEvents.vuecomponent. This ensures visual consistency and aligns with the PR objective of refining the UI.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Find usage of the modified variable to check for any potential visual regressions. rg --type less --type vue $'--ti-lowcode-events-empty-action-color'Length of output: 615
Script:
#!/bin/bash # Description: Find usage of the modified variable to check for any potential visual regressions. rg --type less --type vue -e '--ti-lowcode-events-empty-action-color'Length of output: 97
Script:
#!/bin/bash # Description: Find usage of the modified variable to check for any potential visual regressions. rg -e '--ti-lowcode-events-empty-action-color' --glob '*.less' --glob '*.vue'Length of output: 397
packages/settings/events/src/components/BindEventsDialogSidebar.vue (4)
109-109: LGTM: Font weight adjustment for better visual hierarchy.The reduction in font weight from 600 to 400 for the
.left-titleclass creates a more subtle visual hierarchy. This change aligns with the PR's objective of enhancing the UI.
116-116: LGTM: Adjusted spacing for improved layout.The reduction in
margin-topfrom 12px to 8px for the.left-list-wrapclass results in a tighter, more compact layout. This change is in line with the PR's goal of improving spacing in the UI.
Line range hint
1-146: Overall assessment: UI enhancements successfully implemented.The changes in this file consist of minor UI adjustments that improve the visual consistency and layout of the BindEventsDialogSidebar component. These modifications align well with the PR's objectives of enhancing the user interface. No functional changes were introduced, which minimizes the risk of new bugs.
Here's a summary of the improvements:
- Adjusted font weight for better visual hierarchy.
- Refined spacing for a more compact layout.
- Added color styling for action names, potentially improving theme consistency.
These changes contribute positively to the overall user experience without introducing significant risks.
134-134: LGTM: Added color styling for action names. Please verify CSS variable.The addition of the
colorproperty using the--ti-lowcode-bind-event-dialog-colorCSS variable improves consistency in the UI and aligns with the PR's objectives.Please run the following script to verify the CSS variable is defined:
If the variable is not found, consider defining it in a global CSS file or using a fallback color.
packages/settings/events/src/components/BindEventsDialogContent.vue (5)
16-20: Improved UI for extended parameters configurationThe changes simplify the UI by replacing the popover and switch with a checkbox, and moving the descriptive text into a dedicated div. This new layout improves readability and user understanding of the extended parameters feature.
22-22: Improved code readabilityThe addition of an empty line helps separate logical sections, enhancing code readability.
43-43: Updated import statementThe import statement has been correctly updated to include the Checkbox component from '@opentiny/vue', which is consistent with the UI modifications made earlier in the template.
51-51: Added TinyCheckbox to componentsThe TinyCheckbox component has been correctly added to the components object, ensuring it's properly registered for use in the template. This is consistent with the earlier import statement update and UI modifications.
96-96: UI enhancements and potential tip display changeThe CSS adjustments improve the visual layout and consistency of the UI, which is great. However, the change in line 96 where the tip is set to an empty string instead of a default value might affect the display of tips to the user.
Please verify that setting the tip to an empty string doesn't negatively impact the user experience. Run the following script to check for any other occurrences of
context.tipthat might be affected:Also applies to: 149-153
packages/settings/events/src/components/BindEventsDialog.vue (5)
6-7: Improved dialog functionality and stylingThe addition of the
dialog-classanddraggableattributes enhances the dialog's customization and user interaction capabilities. These changes align well with the PR's objective of improving the UI.
74-74: Simplified tip state initializationInitializing the
tipstate as an empty string simplifies the component's initial state and removes the dependency onMETHOD_TIPS_MAP. This change is consistent with the modification in theresetTipErrorfunction.
123-123: Consistent tip reset behaviorThe modification to set
state.tipto an empty string in theresetTipErrorfunction ensures consistent behavior with the initial state. This change improves the clarity and predictability of the component's state management.
234-239: Enhanced dialog stylingThe new styles for
.bind-event-dialogimprove the dialog's appearance and behavior:
- The
z-indexensures the dialog appears above other elements.- The
min-widthprovides a consistent size, preventing layout shifts.These changes contribute to a better user experience, aligning with the PR's UI improvement goals.
241-246: Improved instruction text stylingThe new styles for
.bind-event-dialog-tipenhance the visual presentation of the instruction text:
- Appropriate padding and margin improve readability.
- The use of CSS variables (
var(--te-common-*)) ensures consistency with the overall theme.These styles contribute to a cleaner and more cohesive UI, in line with the PR's objectives.
packages/settings/events/src/components/AdvanceConfig.vue (1)
238-240: Improved spacing enhances UI readabilityThe addition of
margin-bottom: 8pxto all.advnce-configelements except the last child is a good improvement. This change:
- Enhances visual separation between configuration items.
- Improves overall readability of the advanced configuration panel.
- Aligns well with the PR objectives of enhancing the user interface and adjusting spacing.
The exclusion of the last child from this rule prevents unnecessary spacing at the bottom of the container, which is a thoughtful detail.
packages/common/component/MetaCodeEditor.vue (1)
274-276: LGTM: Improved button spacingThe addition of the
.format-btnclass with a right margin of 8px improves the spacing between buttons in the button box. This change aligns well with the PR objectives of enhancing the UI and adjusting spacing in various components.packages/settings/events/src/components/BindEvents.vue (2)
29-35: LGTM! Custom event button improved.The changes to the custom event button enhance its visual appeal and usability:
- The more concise text "添加新事件" (Add New Event) maintains clarity while being more compact.
- The addition of an icon provides a visual cue, improving the button's purpose recognition.
- New classes allow for more precise styling control.
These modifications align well with modern UI practices and improve the overall user experience.
Line range hint
1-378: Overall, excellent UI enhancements that align with PR objectives.The changes in this file successfully address the PR's goal of enhancing the user interface of the advanced panel. Key improvements include:
- Better popover positioning and styling
- Enhanced custom event button with icon and clearer text
- Improved readability of event list items
- More informative empty action message
- Consistent styling and layout throughout the component
These modifications contribute to a more polished, user-friendly interface that should improve the overall user experience when working with events in the application.
packages/plugins/i18n/src/Main.vue (2)
21-23: LGTM: Improved button spacingThe addition of the
leftclass to the "添加词条" (Add Entry) button enhances the UI by improving the spacing between buttons. This change aligns well with the PR objectives of modifying the advanced panel UI and adjusting button layouts.
490-492: LGTM: Consistent button spacingThe addition of the
.leftclass with a right margin of 8 pixels provides a consistent way to add spacing between buttons. This change enhances the UI by ensuring uniform spacing and aligns with the PR objectives of improving button layouts.packages/theme/base/src/component-common.less (3)
250-252: Improved button spacing in dialog box footerThis change enhances the layout by adding consistent spacing between buttons in the dialog box footer. The use of
:not(:first-child)selector is a good approach to avoid unnecessary margin on the last button.
585-585: Enhanced tooltip visibility with borderThe addition of a 1px solid border to the tooltip improves its visual distinction, especially against varying background colors. The use of the
--te-common-border-defaultCSS variable ensures consistency with the overall theme and facilitates easy customization.
Line range hint
1-724: Overall assessment of component-common.less changesThe changes made to this file are focused and align well with the PR objectives of enhancing the UI and adjusting spacing. The modifications to the dialog box footer and tooltip styling improve the overall visual consistency and usability of the components. No other issues or inconsistencies were found in the file.
packages/configurator/src/variable-configurator/VariableConfigurator.vue (1)
715-717: LGTM! Improved spacing in the dialog footer.The addition of the
.leftclass with a right margin of 8 pixels enhances the spacing between elements in the dialog footer. This change aligns well with the PR objectives to improve the UI layout and spacing.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
* feat(style): modify advance panel ui * feat(style): modify button margin * feat(style): modify button margin * feat(style): modify button margin * feat(style): modify button margin
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Styling Changes
Documentation