new 254 branch #3

lizard-boy · 2024-10-02T00:51:03Z

No description provided.

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

…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

…component

…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)

@W-13119960 Updated README.md for branch name

@W-15551913: changed readonly radio button color to light grey color

greptile-apps

PR Summary

This PR introduces significant updates to the Newport Design System, focusing on improved development experience and expanded B2B functionality.

Updated Storybook configuration in .storybook/preview-head.html for real-time style updates during development
Added new OmniScript configuration OSZenGarden.json for demonstrating CSS styling capabilities
Expanded B2B component imports in ui/components/b2b/base/_index.scss, indicating new features
Introduced new input styling options in ui/_config.scss for more flexible form design
Updated build process in scripts/dist.js and scripts/gulp/styles.js to use the latest sass compiler

_{17 file(s) reviewed, 13 comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps · 2024-10-02T00:51:51Z

.storybook/preview-head.html

@@ -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>


style: Consider using a relative path for the stylesheet href to improve portability

greptile-apps · 2024-10-02T00:51:52Z

.storybook/preview-head.html

@@ -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`);


logic: EventSource may not be supported in all browsers. Consider adding a fallback or feature detection

greptile-apps · 2024-10-02T00:51:53Z

.storybook/preview-head.html

+            setTimeout(() => {
+              newportStorybookStyles.href = `/assets/styles/index.css?${Date.now()}`;
+            }, 250);


style: Using setTimeout may lead to race conditions. Consider using requestAnimationFrame for more reliable timing

greptile-apps · 2024-10-02T00:51:54Z

.storybook/preview-head.html

+        } catch (e) {
+          // ignore
+        }


logic: Silently ignoring errors may hide important issues. Consider logging errors or implementing proper error handling

greptile-apps · 2024-10-02T00:51:55Z

.storybook/preview-head.html

@@ -24,3 +25,23 @@
    /* THE ABOVE OVERRIDE IS PURELY FOR THE EXAMPLES IN STORYBOOK */
  }
 </style>
+<script>


style: This script might benefit from being moved to a separate JavaScript file for better maintainability

greptile-apps · 2024-10-02T00:56:42Z

ui/_config.scss

+/// IMPORTANT: To use this you must also disable $enable-animated-inputs
+///
+/// @type Boolean
+$enable-simple-underlined-inputs: $enable-animated-inputs or true !default;


logic: The default value $enable-animated-inputs or true will always evaluate to true, negating the importance of $enable-animated-inputs. Consider changing to not $enable-animated-inputs if these options should be mutually exclusive.

greptile-apps · 2024-10-02T00:58:00Z

ui/components/b2b/common/_b2bSpinner.scss

+        position: absolute;
+        width: 100%;
+        text-align: center;
+        top: 26rem;


style: Consider using relative units or flexbox for responsive positioning instead of fixed rem values

greptile-apps · 2024-10-02T00:58:01Z

ui/components/b2b/common/_b2bSpinner.scss

+        width: 100%;
+        text-align: center;
+        top: 26rem;
+        color: #747474;


style: Use a color variable instead of a hard-coded hex value for better maintainability

greptile-apps · 2024-10-02T00:58:20Z

ui/components/b2b/common/_b2bTooltip.scss

+	left: 0;
+  transform: translateX(-50%);


style: translateX(-50%) may cause misalignment. Consider using left: 50% instead for better positioning.

greptile-apps · 2024-10-02T00:58:21Z

ui/components/b2b/common/_b2bTooltip.scss

+.nds-b2b-attribute-count {
+  font-size: .875rem;
+    color: #1564bf;
+    font-weight: 400;
+    background: none;
+    border: none;
 }


style: Consider using SCSS variables for colors and font sizes to maintain consistency.

mgoldspink-salesforce and others added 30 commits September 22, 2021 13:36

Upgrading storybook versions and cleaning the main.js to be faster

d2a51d5

changed position of asterisk to right

cacd2af

Merge pull request #4 from sf-industries/vartika-asterisk

7470526

W-10027913 - changed position of asterisk to right for components

Adding some extra fixes to the stability of the refresh.

5eb52e4

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.

@W-9802333 : Adding max-height and overflow-y to be consistent with slds

0257d64

Correcting types in the docs

f6725ec

Also need to update version to 236 now.

Updating to 236

dfdce8c

The sass watcher plugin was recreating the gulp watcher on every file…

04beb4b

… change and not cleaning itself up. This meant that it would slowly grind to a slow halt after a few changes.

Adding nds prefix to class

26142fa

Merge pull request vlocityinc#7 from sf-industries/twu_236_w9802333

43f2b20

@W-9802333 : Adding max-height and overflow-y to be consistent with slds

Merge pull request vlocityinc#8 from sf-industries/feature/zengarden-…

c4921a7

…docs W-9894880 - Adding docs page on css zen garden

Merge pull request vlocityinc#9 from sf-industries/mgoldspink/W-99004…

cb46946

…84_v236 W-9900484 - fixing up styling of step chart

Merge remote-tracking branch 'origin/v236' into feature/enable_underl…

7bbed6f

…ined_input_config

Merge pull request vlocityinc#6 from sf-industries/feature/enable_und…

7a08d7e

…erlined_input_config W-9894880 - config option to render bordered input

@W-9886581, @W-9886551 : Typeahead component stylings

d89767c

W-10046261Shorten the stepchart labels if it's on a mobile device

84e4a38

Merge pull request vlocityinc#16 from sf-industries/lqi/W-10046261-new

935d64d

W-10046261 Shorten the stepchart labels if it's on a mobile device

W-9887298 Newport changes for Address Validation resut status

520a620

Merge pull request vlocityinc#18 from sf-industries/chandru-v236

4441712

Merge pull request vlocityinc#19 from sf-industries/W-9887298_v2

cec6ed7

W-9891061 style changes for fix now button

f861955

Merge pull request vlocityinc#23 from sf-industries/feature/W-9891061

c8c10af

W-9891061 => style changes for fix now button

Merge branch 'v236' of github.com:sf-industries/newport-design-system…

748f70b

… into conflicts/232.6tov236

Merge pull request vlocityinc#24 from sf-industries/conflicts/232.6to…

8c9d3ef

…v236 W-10211997: Merge 232.6 to v236 after resolving conflicts

W-10268321 - Serviceability modal checkbox spacing issue fix

bb596f2

Merge pull request vlocityinc#29 from sf-industries/W-10268321

e5c1f6d

amansoni08 and others added 29 commits March 28, 2023 11:56

Adding new class

5a40fb5

Merge pull request vlocityinc#77 from sf-industries/release-244/W-126…

63905e1

…20021_Biscayne_Accessibility W-12620021: Biscayne accessibility

Removing scroll bars from config card

d95473c

Merge pull request vlocityinc#78 from sf-industries/release-244/joshika

367f60d

W-12577132 : Removing multiple scroll bars from config card

Initial upgrade to Node 18.0.0

50760de

fixing up package-lock.json to reduce size of zip

42326d4

W-13175172: Signature - 44553461 - Bell Canada - Catalog hierarchy is…

bb36fb7

… not rendered completely in the UI

Merge pull request vlocityinc#80 from sf-industries/release-246/W-131…

799f684

…75172_category_list_bug W-13175172: Signature - 44553461 - Bell Canada - Catalog hierarchy is not rendered completely in the UI

Added colour contrast fix for Radio group, Type ahead and knowledge …

2da8be2

…component

changes for step-chart color, success and warning messages and editbl…

1b145b7

…ock colour contrast changes

Fixed review comments

ea911dc

reverted valiable delete

df97f5f

code readjustment for better readability

c405afa

revert some changes

2208249

Merge pull request #84 from sf-industries/CCNewportBranch

f7de8ea

changes for step-chart color, success and warning messages and Editblock color contrast (@W-13633873)

Removing newport-color-accessibility-orange colour

9f3ccd3

Added fix for disabled radio button

11f43cf

changed variable names for colour variable name

240fd0b

updated color for disabled border

d8002ca

Merge branch '246' into shishir-A11y-1

4d1c4ad

Merge pull request #82 from sf-industries/shishir-A11y-1

a470082

Added colour contrast fix for Radio group, Type ahead and knowledge component (@W-13628944)

comment message color fix

c68c02e

Merge pull request #86 from sf-industries/editBlockBugFix

0316772

Edit block bug fix (@ W-13212546)

cc for cancel button border

3a35f01

Merge pull request #87 from sf-industries/editblockCC

6a448d8

cc for cancel button border (@W-13212546)

Update README.md

380bf14

Merge pull request vlocityinc#75 from vlocityinc/ashakya-254-readme

052680b

@W-13119960 Updated README.md for branch name

changed readonly color

8ebc260

Merge pull request vlocityinc#77 from vlocityinc/soumyag-254-radiobutton

0f6fefe

@W-15551913: changed readonly radio button color to light grey color

greptile-apps bot reviewed Oct 2, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

new 254 branch #3

new 254 branch #3

lizard-boy commented Oct 2, 2024

greptile-apps bot left a comment

greptile-apps bot Oct 2, 2024

greptile-apps bot Oct 2, 2024

greptile-apps bot Oct 2, 2024

greptile-apps bot Oct 2, 2024

greptile-apps bot Oct 2, 2024

greptile-apps bot Oct 2, 2024

greptile-apps bot Oct 2, 2024

greptile-apps bot Oct 2, 2024

greptile-apps bot Oct 2, 2024

greptile-apps bot Oct 2, 2024

		@@ -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>

new 254 branch #3

Are you sure you want to change the base?

new 254 branch #3

Conversation

lizard-boy commented Oct 2, 2024

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Oct 2, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 2, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 2, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 2, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 2, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 2, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 2, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 2, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 2, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 2, 2024

Choose a reason for hiding this comment