search

RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
108 stars 25 forks source link

Segmented Button Fails to Display #685

Closed whismand closed 1 year ago

whismand commented 2 years ago

Attempting to use a segmented button, and it is not displayed at all. In the html, we have the with <rux-segmented-button data="{{tabLabels}}"></rux-segmented-button> inside it. The .ts file has tabLabels = [ {label: 'Timeline'}, {label: 'List View'}, ] setup for the button to use. From what we can see, this is all the data that is necessary to create the segmented button, but when run, it appears none of the button is created, there's not even a blank area where the button would have been.

micahjones13 commented 2 years ago

Hey there,

I've created a codesandbox trying to repro the issue. Could you take a look and see if that codesandbox is helpful at all? Also, here's a link from our docs that may be of use as well: https://astro-components.netlify.app/?path=/docs/astro-uxds-welcome-javascript--page#complex-data

Please let me know if I can help further!

whismand commented 2 years ago

Alright, I used the example code you provided, and I may have narrowed down the issue. I can get the segmented button to appear properly when it is by itself in the html. But once I put it inside a <mat-drawer-container> then it doesn't appear. Also, we are using typescript with Angular, instead of javascript. Probably doesn't matter, but figured I'd mention it.

micahjones13 commented 2 years ago

Interesting! I'll check it out in that environment and get back to you.

micahjones13 commented 2 years ago

Okay, I've tried it out in this codesandbox running angular and our angular component package. I managed to get the segmented button to render. Is this helpful, or is my angular environment too dissimilar? The version difference might be effecting it as well, so if this doesn't help let me know what versions of angular and @astrouxds/angular package you're on.

whismand commented 2 years ago

Looks like we're using 6.10.0 for @astrouxds/angular and 13.3.11 for angular.

whismand commented 2 years ago

Good to see it working for you, perhaps it is some issue with our environment or package versions. That'll be a good example for us to check out what we have and see if there's something we missed. Thanks for the help!