johnsonandjohnson / mettle-components Goto Github PK

Describe the bug
Setting the selected initial value does not work

const $component = globalThis.document.querySelector('mettle-tabs')
$component.selected = 3

Description

AS A Developer,
I WANT front -end services
SO THAT I CAN/MAY develop front end applications

Description

AS A Developer
I WANT a modal
SO THAT I CAN display content above the content on my webpage

Description

AS A Developer
I WANT to be able to throw JavaScript exceptions
SO THAT I CAN/MAY catch errors in a routing controller and handle them in a general function

Acceptance Criteria

Scenario 1: Exception thrown in a route controller
Given a route is configured
And a exception handler function has been configured
When an exception is thrown in a route controller
Then the Router library will catch the exception
And pass the exception to the handler function

SCOPE CLARIFICATION

A missing/not found route is not considered an exception thrown by JavaScript

Description

AS A Developer,
I WANT to sort by header
SO THAT I CAN/MAY display data to the user based on the selection

Acceptance Criteria

Scenario 1: Sort headers
Given that the html headers are given
When added to the slot
And the user clicks on the header
Then an event is triggered
And the developer knows which header to sort by

SCOPE CLARIFICATION

This does not actually sort any data, just displays to the user an actionable sort event for the developer to implement

Updating GoogleCloudPlatform/release-please-action@v2 to version 3

Description

AS A Developer
I WANT a custom element navigation
SO THAT I CAN implement navigation on my site by just adding an HTML tag with slots for links

Acceptance Criteria

Scenario 1: Open the navigation custom element
Given that the custom element is in the HTML
And all slots are properly configured
When the user clicks on the navigation
Then the navigation will appear to the user
And the user is able to view the navigation links

Scenario 2: Close the navigation custom element
Given Scenario 1
When the user clicks on the navigation
Then the navigation should close
And the user is able to continue browsing the website

SCOPE CLARIFICATION

Multiple types of navigation do not need to be supported

Additional context

• This navigation should be responsive.
• It should work for Mobile and desktop viewports.
• Any CSS applied should be performant (https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)

Description

AS A Developer
I WANT the tool-tip position to be repositioned in the viewport when hidden
SO THAT IT will always display to the user in the viewport browser window.

Acceptance Criteria

Scenario 1: Mettle-tool-tip text is positioned to the corner of a page
Given the tool-tip text is position at the upper left corner
And the data-position is set to left
When the user hovers over the text
And the tool-tip appears
Then the tool-tip should display on the right
And fully appear in the browser viewport

Scenario 2: Mettle-tool-tip text is positioned to the corner of a page
Given the tool-tip text is position at the upper left corner
And the data-position is set to top
When the user hovers over the text
And the tool-tip appears
Then the tool-tip should display on the bottom
And fully appear in the browser viewport

Scenario 3: Mettle-tool-tip text is positioned with no viewport
Given the tool-tip text is position at the center with no surrounding viewport
And the data-position is set to the default
When the user hovers over the text
And the tool-tip appears
Then the tool-tip should display on the left
And possibly appear in the browser viewport

SCOPE CLARIFICATION

This enhancement should not add any data-position options

Additional context

If set to left and outside the viewport, then it will be set to right. If set to top and outside the view port then it will be set to bottom.

https://github.com/actions/setup-node

Update to use Node 16+

Describe the bug

When removing nodes, have the code check if the node exist.

deleteReferences() {
    this.referenceNodes.forEach(({ node }, reference) => {
      node?.remove() //or if(node) node.remove()
      this.referenceNodes.delete(reference)
    })
    this.model = Object.create(null)
  }

Description

AS A Developer
I WANT a performant custom element for large list of data
SO THAT I CAN display it to the user without performance issues

Acceptance Criteria

Scenario 1: Using the virtual list
Given that I have a large array of data
And that this data is over 100,000 items
And must be displayed in formatted HTML
When a user views this data
And scroll through the data
Then the data is displayed in a fixed row set
And the user can scroll the view the data without performance issues

Scenario 2: Update the virtual list
Given Scenario 1
When some of the data is updated
And the data is applied to the virtual list
Then the list seen by the user is updated
And does not affect the scroll position

SCOPE CLARIFICATION

N/A

Additional context

• This virtual list will always display a static amount of rows, not dynamic. If it is possible to make it dynamic using the resize API go for it.
• Setting the data will require a method, not by data-attributes

Description

AS A Developer,
I WANT the error notifications cached
SO THAT I CAN/MAY emulate the same behavior as the next notification

Description

AS A Developer
I WANT a public function to close the notification
SO THAT I CAN/MAY be able to do it programmatically

Description

AS A Developer
I WANT an image carousel
SO THAT I CAN neatly display as many images as I want to.

Acceptance Criteria

Scenario 1: Some determinable business situation
Given I am a content contributor
And I want to display a lot of images
When I display these images
And the images exceed the width of the web section
Or the images exceed the height of the web section
Then I can easily scroll to see the next image in the series.

SCOPE CLARIFICATION

Strictly want only vertical or horizontal scrolling
Styling / Designing how the images are displayed in one screen is not within scope

Additional context

Example of Carousel with HTML Element

Description

AS A Developer,
I WANT to display a field error message
SO THAT I CAN/MAY inform the user how to correct the field

Description

AS A Developer
I WANT to set the drop-down position to bottom
SO THAT I CAN/MAY see the drop down be position directly below the target element

Description

AS A Developer,
I WANT to see if using the list items from the render function can used to compare items from the previous list
SO THAT I CAN/MAY ensure that list items that are the same are not recalculating the height.

Describe the bug
At times, it seems like the list does not make the height long enough to display the last record.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
The virtual list should render each height along with any padding and margin to allow for a smoother scroll.

Description

AS A Developer,
I WANT to be able to add extra content to the tab navigation
SO THAT I CAN/MAY customize the navigation with content before, in-between and after the navigation slots

Describe the bug
anytime the history is changed or replaced, the current History State should also be updated

Description

AS A Developer
I WANT an auto complete input form
SO THAT I CAN/MAY display a list of options ti the user

Description

AS A Developer,
I WANT mixin classes
SO THAT I CAN/MAY extend my custom elements with reusable code

Description

AS A Developer
I WANT to display formatted JSON to the user
SO THAT I MAY present data in a formatted way

Acceptance Criteria

Scenario 1: Some determinable business situation
Given some precondition
And some other precondition
When some action by the actor
And some other action
And yet another action
Then some testable outcome is achieved
And something else we can check happens too

Scenario 2: Some determinable business situation
Given Scenario 1
When some action by the actor
And some other action
And yet another action
Then some testable outcome is achieved
And something else we can check happens too

SCOPE CLARIFICATION

There is no need to support multiple syntax highlighting methods.

Additional context

Add any other context or screenshots about the feature request here.

Description

AS A Developer,
I WANT a way to display HTML and CSS
SO THAT I CAN/MAY have an encapsulated display with a transition.

Describe the bug
Rows in the virtual list should be slotted to avoid issues losing functionality from being in the shadow root.

Description

AS A Developer,
I WANT to upgrade the HttpFetch service
SO THAT I CAN/MAY update options, access static methods after instance and intercept request and response calls

Description

AS A developer
I WANT to be able to add to the dictionary
SO THAT I CAN/MAY avoid having to import them using fetch

Describe the bug
After rendering the virtual list should allow for an empty array to be displayed.

While this is a neat trick for private variables, the service variables outside of the class end up sharing the same scope with all class instances, move the variables into the class.

Example from HttpFetch:
let _requestOptions = Object.create(null)
let _nextRequestOptions = Object.create(null)
let _interceptorMap = new Map()

Description

AS A Developer,
I WANT to be able to send bad routes to a 404 page
SO THAT I CAN/MAY inform the user that the page link is no longer found

Acceptance Criteria

Scenario 1: Some determinable business situation
Given i am on a site
And the page not found route is configured
When a user navigates to a non existing page
Then a custom 404 page not found route is executed

Scenario 2: Some determinable business situation
Given i am on a site
and the page not found route is not configured
When a user navigates to a non existing page
Then the default behavior of loading the default page is executed

SCOPE CLARIFICATION

Adding the 404/not found route should not affect any default behavior