rocketcommunicationsinc / astro-components Goto Github PK

@amalyah
fixed switchHoverColor in dark theme
fixed checked knob
I will not updating the colors to Opacity version as opacity in the disabled state is being set via separate property omitting the modification of base color

Re: "fixed checked knob"

If you manually change the status of the switch (using the sample, not the checkmark), then the Checked knob no longer shows the correct status and doesn't change the checked status any more.

Re: "fixed switchHoverColor in dark theme"

@Cheshire89 Is there a technical issue/complication that stops us from making the Off Hover thumb (button) border in the dark theme appear lighter than the track color as in the Abstract file? If yes, then we can change the design instead at the point to keep the two consistent.

Originally posted by @amalyah in #82 (comment)

When using this package the fonts directory is not in the correct spot. It is currently still in the static folder when it should be in the node_modules/@astrouxds/rux-core/dist/ folder.

It's erroring out trying to find the fonts from the css files.

Was wondering when the RUX-Timeline might have documentation to accompany how to use it - am trying to use it in a quasar/vue based webpage for a proof a concept/learning project but have no idea how to use the component atm

rux-tree only has icons for status but it would be more useful if normal icons could be used in the tree.

status: "critical",

What I would like is to set an icon.

icon: "settings",

I have a component uses rux-button.

  <rux-button icon="settings">
    Button
  </rux-button>

The component is use with a route of /components/button. When an icon is used under a route the icon resource cannot be loaded and results in a 404 error.

I believe the cause is the default library is set to the relative path ./icons

this.library = './icons/astro.svg';

I believe the way astro is installed is to put /icons at the top level. This could mean changing the default library to /icons.

I am using Vue3 in Google Chrome. This is what I see:

Nested components still render fine (in this case I am rendering a clock) but the app name I passed and the version number are not visible.

Component code:

<template>
    <div>
        <rux-global-status-bar appname="Test App Name" version="0.1">
            <rux-clock timezone="America/New_York"></rux-clock>
        </rux-global-status-bar>
    </div>
</template>

<script>

export default {
    name: "App",
};
</script>

Relevant main.js code:

import "@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css";
import {
    applyPolyfills,
    defineCustomElements,
} from "@astrouxds/astro-web-components/loader";

// Bind the custom elements to the window object
applyPolyfills().then(() => {
    defineCustomElements();
});

Much like the one you all did for MUI, but for bootstrap!

I would like to view the Julian Date in the rux-clock so that it always shows 3 digits. Attached is a screenshot of the the current implementation from the astro storyboard where the clock's date only has 2 digits when it is less than 100. There is also a screenshot from juliandate.net to show that the day always has 3 digits and a link to IBM that shows that the Julian date format should be 3 digits.

IBM Link:
https://www.ibm.com/docs/en/cics-vt/2.1?topic=reengineering-converting-between-julian-gregorian-date-formats

Any interest in adding event listeners to help with two way data binding? For example RocketCommunicationsInc/astro-boilerplate-vue#1 mentions not being able to access the state of the Toggle component. Would be happy to open a PR for these if you're interested.

Alternatively, I ended up just creating my own thin Vue wrapper components to manage state, but that feels slightly burdensome to have to maintain ¯_(ツ)_/¯

When adding rux-tree I got an error

This relative module was not found:

* ../rux-utils/data.js in ./node_modules/@astrouxds/rux-tree/rux-tree.js

To fix this I had to add rux-utils to my package.json. This should not be needed. rux-tree should declare rux-utils in its package.json.