new 250 #4
Open
new 250 #4
Conversation
This file contains 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
W-10027913 - changed position of asterisk to right for components
On of the most common tasks all people do when customizing newport is disable the animated labels. Unfortunately it's not a straightforward task. So this PR is making it straight forward by adding a simple boolean config property to turn them on or off. I need this for the OS Zen Garden css files because in the ones I'm creating them all need the animated labels turned off. So doing this saves a lot of time. In addition, the way the webpack generation was happening, it was incredibly slow because it had to rebuild the entire JS React app if a css change was made due to the CSS being included in preview.js. So I've sped it up by adding some simple JS into the preview-head.html which listens for a rebuild command and updates the css that way. The additional benefit of this is that this css also includes SourceMaps so chrome and other browsers will now nicely link back to the source file for specific files! Also tidied up commented out dead code.
A common initial change after removing the animated labels is to get back to bordered slds style input boxes. This is another config switch I've added to support this. Since bordered inputs never make sense with the animated logo, it's controlled by the animated logo property too. So both have to be set to false for it to work.
For some reason the stories had an extra depth to it that it doesn't need in main.js The omniscript.lwc.stories.js wasn't correctly detecting the changes and therefore missed the necessary class.
Also need to update version to 236 now.
… change and not cleaning itself up. This meant that it would slowly grind to a slow halt after a few changes.
This page talks about how to get started with the css zengarden demo. It covers how to checkout the branch, include the OS we rebranded as a datapack, the steps taken to rebrand it. I've also fixed up styling of code samples. Also for some reason the docs had been removed from the previewer so added them back in.
@W-9802333 : Adding max-height and overflow-y to be consistent with slds
Leon changed the way step chart items are rendered in v236 so that the elements are now divs wrapped in an li As a part of this PR I've cleaned up all the special attributes that LWC adds as it was causing the following erros to be reported in storybook: ``` [BABEL] Note: The code generator has deoptimised the styling of /Users/mgoldspink/development/newport-design-system/ui/components/omniscript/lwc/omniscript.lwc.stories.js as it exceeds the max of 500KB. ``` I also formatted the indentations so it's easier to read properly
…docs W-9894880 - Adding docs page on css zen garden
…84_v236 W-9900484 - fixing up styling of step chart
…ined_input_config
…erlined_input_config W-9894880 - config option to render bordered input
W-10046261 Shorten the stepchart labels if it's on a mobile device
W-9891061 => style changes for fix now button
… into conflicts/232.6tov236
…v236 W-10211997: Merge 232.6 to v236 after resolving conflicts
…37490_Datatable_RowActions_known_limitation W-12737490: [242.1 ESM] order (PONR reached) i can see cancel button in drop down
… button in drop down"
…-244/W-12737490_Datatable_RowActions_known_limitation Revert "W-12737490: [242.1 ESM] order (PONR reached) i can see cancel button in drop down"
…20021_Biscayne_Accessibility W-12620021: Biscayne accessibility
W-12577132 : Removing multiple scroll bars from config card
… not rendered completely in the UI
…75172_category_list_bug W-13175172: Signature - 44553461 - Bell Canada - Catalog hierarchy is not rendered completely in the UI
…ock colour contrast changes
changes for step-chart color, success and warning messages and Editblock color contrast (@W-13633873)
Added colour contrast fix for Radio group, Type ahead and knowledge component (@W-13628944)
Edit block bug fix (@ W-13212546)
cc for cancel button border (@W-13212546)
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This pull request introduces significant updates to the Newport Design System, focusing on B2B components, Storybook configuration, and documentation enhancements.
- Added new B2B styling options in
ui/components/b2b/common/_b2bSpinner.scssandui/components/b2b/common/_b2bTooltip.scssfor improved UI components - Updated Storybook configuration in
.storybook/main.jsand.storybook/preview.jsto streamline story loading and improve development experience - Introduced
OSZenGarden.jsonfor OmniScript configuration, demonstrating CSS styling capabilities within OmniScripts - Enhanced Markdown rendering in
scripts/storybook/render-md.jswith syntax highlighting using 'highlight.js' - Updated build process in
package.jsonandscripts/dist.js, including dependency upgrades and Node.js version requirements
18 file(s) reviewed, 17 comment(s)
Edit PR Review Bot Settings
| @@ -1,4 +1,5 @@ | |||
| <link rel="stylesheet" href="node_modules/highlight.js/styles/github.css"/> | |||
| <link id="nds-styles" rel="stylesheet" href="/assets/styles/index.css"></link> | |||
There was a problem hiding this comment.
style: Consider using a relative path for better cross-environment compatibility
| @@ -24,3 +25,23 @@ | |||
| /* THE ABOVE OVERRIDE IS PURELY FOR THE EXAMPLES IN STORYBOOK */ | |||
| } | |||
| </style> | |||
| <script> | |||
| (function() { | |||
| const storybookEventSource = new EventSource(`${location.protocol}//${location.host}/__webpack_hmr`); | |||
There was a problem hiding this comment.
logic: This EventSource might not be available in all environments. Consider adding a fallback
Comment on lines
+41
to
+43
| } catch (e) { | ||
| // ignore | ||
| } |
There was a problem hiding this comment.
logic: Silently ignoring all errors could hide important issues. Consider logging or handling errors
| sassWatcher.on('change', function(obj, stats) { | ||
| console.log(`File ${obj} was changed`); | ||
| }); | ||
| sassWatcher.on('change', function (obj, stats) { |
There was a problem hiding this comment.
style: Consider using an arrow function for consistency with the outer function
Comment on lines
+41
to
+45
| font-size: .875rem; | ||
| color: #1564bf; | ||
| font-weight: 400; | ||
| background: none; | ||
| border: none; |
There was a problem hiding this comment.
style: Use SCSS variables for font-size, color, and font-weight to ensure consistency with the design system
Comment on lines
+14
to
+18
| .nds-b2b-tooltip_wrapper:hover { | ||
| .nds-b2b-tooltip_cont { | ||
| display: block; | ||
| } | ||
| } |
There was a problem hiding this comment.
style: Consider using a mixin for hover effects to reduce code duplication
Comment on lines
+17
to
+18
| $b2b-checkbox-blue: #C0E5FF; | ||
| $b2b-checkbox-red: #FFC2C2; |
There was a problem hiding this comment.
style: Consider using HSL or RGB values for consistency with other color definitions
| $b2b-section-title-black: #0B0B0B; | ||
| $b2b-pill-text-orange: #FF8A00; | ||
| $b2b-pill-border-gray: #C5C5C5; | ||
| $b2b-section-background-gray: rgba(221, 219, 218, 0.33); |
There was a problem hiding this comment.
style: Use a variable for the opacity value (0.33) for better maintainability
Comment on lines
+103
to
+113
| @mixin b2b-product-category-events { | ||
| &:hover { | ||
| background: $b2b-color-brand-base-60; | ||
| color: $white; | ||
| } | ||
|
|
||
| &.selected { | ||
| background: $b2b-color-brand-base-60; | ||
| color: $white; | ||
| } | ||
| } |
There was a problem hiding this comment.
style: Consider using variables for hover and selected colors to improve flexibility
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.
No description provided.