etn-ccis/blui-angular-showcase-demo

A sample project for testing new components, themes, etc.

blui-angular-showcase-demo's Issues

RTL view on scorecard body grows & pushes items off card

    Something I just noticed with score card > RTL view

normal view

In RTL view the body grows & pushing everything over

Originally posted by @jeffvg in https://github.com/brightlayer-ui/angular-showcase-demo/issues/280#issuecomment-1332633981

Update stepper example so it doesn't reset the app

Describe the bug

In the Angular Material Stepper demo, hitting the "Next" button after providing an input causes the page to refresh.

What is the expected behavior?

The application should not be reloading if a user hits "Next".

What are the steps to reproduce?

1. Clone the repo.
2. Run yarn && yarn start
3. Navigate to http://localhost:4200/material-components/navigation-components
4. See the "Steppers" card.
5. Enter text in the Step1 Input field.
6. Hit Next
7. See the application reloads

Screenshots or links to minimum reproduction example

Update material data display card with badges for RTL

Describe the bug

While viewing the "Material Components Data Display" example in RTL the badges flow off the card and are not flipped

What is the expected behavior?

Content and badges should properly align in RTL. The badge should be flipped to the left side of the text.

What are the steps to reproduce?

1. Clone the repo (git clone https://github.com/brightlayer-ui/angular-showcase-demo.git)
2. CD in the cloned repo (cd angular-showcase-demo)
3. Run yarn && yarn start.
4. Navigate to http://localhost:4200/material-components/data-display-components
5. Click the RTL toggle in the upper-right-hand corner.
6. Observe image below in the "Badge" card.

Screenshots or links to minimum reproduction example

Update Dependencies

Describe the desired behavior
Check the current/latest version of all dependencies and peer dependencies. Update the package.json to include the latest.

Describe the current behavior
Using old versions of dependencies.

Is this request related to a current issue?
The newest version of NPM (npm version 7) fails on npm install (instead of a warning) when there are peer dependency issues.

Additional Context
After updating the versions of dependencies, make sure that things still work as expected.

Change Tag Colors

Describe the bug

On the showcase
The tag colors in the picture below look incorrect.

What is the expected behavior?

Adjust the "Acknowledged" & "Closed" tag to be less straining on the eyes.

What are the steps to reproduce?

1. Clone the repo and cd into the project.
2. Run yarn && yarn start.
3. Navigate to the Alarms page.
4. Switch to dark-mode using the top-right icon in the app bar.
5. Observe the tags in dark-mode

Screenshots or links to minimum reproduction example

Environment

Chrome, Windows

Anything else to add?

Discovered here:
etn-ccis/blui-angular-component-library#358

Firefox not loading any fonts due to security concerns

Describe the bug

Things look fine in Chrome and Safari. In Firefox, however, fonts are not loaded. Icon fonts are falling back to text, and Open Sans is falling back to Arial.

What is the expected behavior?

Should load.

What are the steps to reproduce?

1. yarn start

Screenshots or links to minimum reproduction example

Firefox says this in the inspector:

An error occurred: MOZILLA_PKIX_ERROR_MITM_DETECTED

Environment

Mac Firefox

Update surface components page so it doesn't bleed in to demo toolbar

Describe the bug

On the Brightlayer UI Surface Components page, the AppBar examples are overflowing the Demo's pinned toolbar (top).
Also the AppBar section is labeled incorrectly. It is currently labeled "ChannelValue" but should be updated to be "AppBar".

What is the expected behavior?

The AppBar examples should not be overflow the toolbar; the should appear behind it.

What are the steps to reproduce?

1. Clone this repo
2. Run yarn && yarn start
3. Navigate to http://localhost:4200/blui-components/surface-components
4. Scroll down and observe that the toolbar example is overflow the screen's pinned appbar.

Screenshots or links to minimum reproduction example

Environment

Chrome, Windows

Anything else to add?

Upgrade to latest version of Angular

Describe the desired behavior

Use the latest version of Angular

Describe the current behavior

Not using the latest version of Angular

Is this request related to a current issue?

Additional Context

Style issues

A list of style issues I noticed so far in the demo project:

/dashboard

1

• The expansion panel should be 48px tall.
• The chevron should be centered.

2

• These icons should be vertically aligned

3

• make .tag-label 16px margin on the right instead of 8px

4

• If possible, make the "alarm" list item use 600 font-weight and red[500] text when there are some alarm present; otherwise, have them stay font-weight 400 and regular text color black 500.

5

• Drawer active item should be using blue 500?

6

There should not be a divider for the last item on the list.

/timeline

1

• Icon with avatar should be white[50] in the center.

2

Card header should use subtitle 2 font, with a 16px distance to the left

3

Card has a round corner, but the stripe appears to spill over.

4

Again, all icons should be center-aligned.

5

List item tags should be vertically centered

6

The timestamp can use a bit less room. (The design on the bottom comes from Figma)

7

Again, card header should be 48px, not 50px

8

This guy should be 48px tall too.

Update: check with Kyle Horchen.

9

Don't use <br /> to space the cards. I recommend a 16px margin-top, and a 24px padding between app bar and the first card element

10

Keep the time format consistent. Don't sometimes show the dates and sometimes don't.