rocketcommunicationsinc / astro Goto Github PK

Add Prop dateIn to rux-clock

dateIn when supplied with a valid date string or value overrides Date.now() standard clock.

modify updateTIme() to update _time and localDate useing dateIn (when provided) otherwise default back to Date.now().

When the browser(in this case firefox) is resized to be smaller than full screen and the rux-pop-up-menu button is selected, the possible choices in rux-menu-items are not displayed below the rux-pop-up-menu and are instead off to the side. See image below.

Ordinary <input> tags can disable the browser's spellcheck by including the attribute spellcheck="false". Please add this simple attribute to <rux-input> and pass the attribute down to the <input> in the Shadow DOM.

Currently if the Timeline range is set to 2000-01-01 - 2000-02-01, and you have a time region that starts on 1999-12-31 20:00 and ends on 2000-01-10 00:00, that time region will not display at all.

It should ideally still render, even if only half of the time region is visible.

Thank you for such a great component library that is easy to work with and provides awesome consistency right out of the box. Great work!

I wanted to pitch an enhancement to the RuxNotification React flavor of the component library. On the modal there is an event called ruxmodalclosed that gets fired when the modal closes. It would be helpful to have something like this for RuxNotification. Here's an example of why.

I have a use-case where I wanted to pop a notification—after talking with Mark it seems like the the new static banner component would be better, but this is what's available now, and maybe this will help inform the design of the static banner component. Anyway, I wanted to pop a notification when the user saved some data. So I had some code like this:

//...
<RuxNotification open={isSuccess} message={messageFromServer} />

The problem is when the user clicks the X to close the notification, it starts closing then immediately shows again, because open is still true. So it would be more ideal to do something like:

//...
<RuxNotification open={isSuccess} message={messageFromServer} onRuxnotificationclosed{() => setIsSuccess(false)} />

Then that event ruxnotificationclosed could fire once the X is clicked or once the autoClose has closed it programmatically. That would be a very useful enhancement, so that we can react to the user's interaction.

As a side note, I think that #121 is somewhat related, because even with this event, the boolean attribute of open won't function correctly when flipped.

This causes it to not correctly line up alongside elements which do properly fully hide the label spacing when there is no label:

<rux-input></rux-input>

<rux-checkbox-group></rux-checkbox-group>

Hi,

When I set “invalid” to “false” in the RuxInput react, the help text appears as error text (red).

I modified the sandbox code here

https://astro-components.netlify.app/?path=/story/astro-uxds-patterns-forms-react--page

Code below:

import './styles.css'
import { React, useState } from 'react'
import {
   RuxInput,
   RuxSelect,
   RuxCheckbox,
   RuxCheckboxGroup,
   RuxRadio,
   RuxRadioGroup,
   RuxSlider,
   RuxButton,
   RuxOption,
} from '@astrouxds/react'
export default function App() {
   const [firstName, setFirstName] = useState('')
   const [lastName, setLastName] = useState('')
   const [email, setEmail] = useState('')
   const [countryRegion, setCountryRegion] = useState('United States')
   const [options, setOptions] = useState('')
   const [range, setRange] = useState(50)
   const [things, setThings] = useState([])

   const handleSubmit = (e) => {
       e.preventDefault()
       alert(`
    First Name: ${firstName} \n
    Last Name: ${lastName} \n
    Email: ${email} \n
    Country/Region: ${countryRegion} \n
    Options: ${options} \n
    Things: ${things} \n
    Range: ${range} \n
   `)
   }
   const handleThings = (e) => {
       let arr = things
       arr.push(e.target.value)
       let unique = [...new Set(arr)]
       setThings(unique)
   }
   return (
       <div className="container">
               <div>
                   <RuxInput
                       label="Last Name"
                       value={lastName}
                       help-text='help-text'
                       error-text=''
                       invalid={false}
                   />
               </div>
       </div>
   )
}

The native HTML <input> element has a 'datetime' or 'datetime-local' type option, but <rux-input> does not. It would be nice to provide the user the ability to put in a precise datetime via a <rux-input>

I have to say this is a great library! Thank you for maintaining it.

I have been working with the React flavor of the web component library, and have noticed some odd things around boolean/removable props. As an example, when the RuxNotification is in an open state, the HTML looks like this:

<rux-notification status="standby" message="This is a notification banner. It won’t disappear until the user dismisses it." class="hydrated" open=""></rux-notification>

When it is a closed state:

<rux-notification status="standby" message="This is a notification banner. It won’t disappear until the user dismisses it." class="hydrated"></rux-notification>

Notice that the open attribute is now completely missing. React does this natively with built-in elements like input with the disabled attribute. Because of this, it's most intuitive for React developers to do something like:

<input disabled={isDisabled} />

But for some reason, any boolean attributes on Rux* components don't function the way you would expect when toggling the attribute. So I have developed this utility to help alleviate the issues as a workaround but raising this issue in hopes for a more permanent fix:

export function ruxBooleanHelper(
  condition: boolean,
  prop: string
): Record<string, boolean> {
  if (condition && prop) {
    return { [prop]: true };
  }
  return {};
}

I would expect to be able to toggle a boolean like showNotification, as an example, on the RuxNotification component:

<RuxNotification open={showNotification} ... />

I think this needs to be solved for all Rux* components, since I think all boolean-related props will suffer from this. Ideally, they should function like toggling disabled on an input element.

Please let me know how I can help with this issue. Mark has my Email, or please mention me here.

If you have range that is 2000-01-01 - 2000-01-02 and your zoom level is 1, the timeline won't fill it's container if the interval is set to only show days because there aren't enough available columns.

If your range is only 2 days, you'll want to be at the hour level. It's slightly cumbersome to have to manually keep track of what the interval should be and we could support automatically setting the interval based off what would be appropriate for the current zoom level.

We had a reasonably large amount of content in a rux-modal, and on a smaller screen noticed that it overflowed, so there was no way to close the modal.

Suggestion:

• Apply a max-height to the message slot so that the close button is always visibile

When the rux-pop-up-menu is used in the mat-drawer (see https://material.angular.io/components/sidenav/api) it does not render properly. The menu looks like it tries to put it on the container but ends up somewhere else on the application.

We have a project using rux-status-bar with mission status icons. On hover, the icons need to show details of the actual status of the system.

However, the tooltips are not visible due to the contain: content class property applied to the rux-status-bar in the Shadow DOM.

Proposed fix:

Setting this property to contain: layout allows the tooltip to display and keeps the layout unchanged.

When working with rux-clock, I noticed that the julian date change occurs between 1400-1700 UTC rather than at 0000UTC. Here are some screenshots from the story board:
Screenshots initially taken at Dec 2 2021 UTC:

Story Board Screenshot:

I checked the morning of 12/2 and found that the Julian Date for the rux-clock changes around 14-16:00 UTC:

Discussed in #420

CustomEvent {isTrusted: false, detail: null, type: 'ruxmodalclosed', target: rux-modal.hydrated, currentTarget: rux-modal.hydrated, …}
isTrusted: false
bubbles: true
cancelBubble: false
cancelable: true
composed: true
currentTarget: null
defaultPrevented: false
detail: null
eventPhase
```</div>

Discussed in #418

Hi,

The astrouxds/react dependency has [email protected] as a dependency, which requires jest@^27.0.0 as a peer dependency. That is a problem because react-scripts doesn't seem to support jest@27.

Somehow we'd like to force react-scripts to be okay with jest@^27.0.0 or for astrouxds/react to use an older version of ts-jest (26)

Would you have any suggestions on how to handle this problem?

Thank you.

The push button text is off when it is checked and hovered. Probably a blip in the design token name swap. We should also check to make sure our VRT snapshots are correct because Im wondering how this got through

Unable to write any unit tests, using Jest, for components that use RuxInput React Component.
Analysis of issues observed when attempting to use Jest to Unit Test functionality is detailed below, but also open to any suggestions/recommendations from Rocket Communication on Unit Testing Astro.

After investigation, developer is only semi-confident of a couple of things:

• The event bindings for the native input call private functions that emit Events, unless renderHiddenInput overwrites the input element and something is being missed/misunderstood.
• The rux-input web component produces the following CustomEvent emissions: ruxchange, ruxinput, and ruxblur.
• The rux-input value is set via prop, so theoretically if React’s RuxInput value is changed, the input contained within the shadow DOM should change.

With that working understanding of the component RuxInput wraps, when using fireEvent with React testing library like: fireEvent.change targeting a rux-input no change events fired. But, if document.querySelector for rux-input is used then select the first child—which should be the rendered input within the open shadow DOM—then it fires an event, but only if the hidden input is told to dispatch a ruxinput event; that shouldn’t work though, but seemed to be the case.

Even if its forced to manually fire when formik picks up the value, it looks for target.value when setting the state internally, which is always an empty string, if attempting to manually trigger a change. Also attempted forcefully changing that hidden input’s value and dispatching a change event with no success.

A Codesandbox called Unable to Test with RuxInput has been created to demonstrate. The test suite runs weird, reloads a lot, compared to how it runs locally, but eventually fails saying it can’t waitFor findByDisplayValue(‘[email protected]’) any longer which in React Testing Library refers to the value of any input’s value.

Additional needs include:

1. Getting the rux-input to render error messages in these tests, instead of just attributes saying there are errors with no FormFieldMessages rendered.
2. Ability to get input ByLabelText, but no label is rendered even though it's clear it's in the source code and renders outside of tests.
3. Ability to fireEvent.click a RuxButton

Hello,
When trying to access styling from a css file for a RuxIcon, className property doesn't seem to read from css file as expected.
Below is an example of the difference between accessing the style directly in the html tag and attempting to read from css file. Notice difference in button styling to the left.

Code with style property:

import './styles.css'
import { React, useState } from 'react'
import {
    RuxIcon,
    RuxInput,
    RuxSelect,
    RuxCheckbox,
    RuxCheckboxGroup,
    RuxRadio,
    RuxRadioGroup,
    RuxSlider,
    RuxButton,
    RuxOption,
} from '@astrouxds/react'
export default function App() {
    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('')
    const [email, setEmail] = useState('')
    const [countryRegion, setCountryRegion] = useState('United States')
    const [options, setOptions] = useState('')
    const [range, setRange] = useState(50)
    const [things, setThings] = useState([])

    const handleSubmit = (e) => {
        e.preventDefault()
        alert(`
     First Name: ${firstName} \n
     Last Name: ${lastName} \n
     Email: ${email} \n
     Country/Region: ${countryRegion} \n
     Options: ${options} \n
     Things: ${things} \n
     Range: ${range} \n
    `)
    }
    const handleThings = (e) => {
        let arr = things
        if (e.target.checked) {
            arr.push(e.target.value)
            let unique = [...new Set(arr)]
            setThings(unique)
        } else {
            setThings(arr.filter((item) => item !== e.target.value))
        }
    }
    return (
        <div className="container">
            <form onSubmit={(e) => handleSubmit(e)}>
                <div>
                    <RuxButton type="submit" size="large">
                       <RuxIcon icon="tune" size="28px" style={{width:"28px", height:"28px"}}/>
                    </RuxButton>
                </div>
            </form>
        </div>
    )
} 

Code: with CSS:

    return (
        <div className="container">
            <form onSubmit={(e) => handleSubmit(e)}>
                <div>
                    <RuxButton type="submit" size="large">
                       <RuxIcon icon="tune" size="28px" className="myIcon"/>
                    </RuxButton>
                </div>
            </form>
        </div>
    )
}

.container {
    /* text-align: center; */
    width: 60%;
    margin: auto;
}
form {
    padding: 1rem;
}
div {
    margin-bottom: 20px;
}

.myIcon {
  width: "28px";
  height: "28px";
}

Thanks!

@astrouxds/react package rux-button isn’t submitting a formik form, even though it has type submit on it.
The following Code Sandbox replicates the issue:

https://codesandbox.io/s/wonderful-pascal-tddor?file=/src/index.js

As shown in the image below, when the UTC time advances from 23:59:59 to 00:00:00, the date is not incrementing to the next day as it should. This bug was traced to the Astro rux-clock component: https://www.astrouxds.com/components/clock/.

Hi,

Here is a link to a very basic RuxInput button.

https://codesandbox.io/embed/priceless-moser-nc9p7?fontsize=14&hidenavigation=1&theme=dark

If I a type a long name (longer than 8 characters), the state does not automatically update to the error message unless I tab out.

import React from "react";
import { RuxInput } from "@astrouxds/react";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "John"
    };
  }

  onChange = (e) => {
    if (e.target.value.length > 8) {
      this.setState({ [e.target.name]: "too long!!!" });
    } else {
      this.setState({ [e.target.name]: e.target.value });
    }
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <RuxInput
          label="First Name:"
          name="firstName"
          type="text"
          onRuxchange={this.onChange}
          value={this.state.firstName}
          required={true}
        />
      </form>
    );
  }
}

Hello, I tried to us the react starter kit with this command...

npx @astrouxds/react-starter react-w-astro

The command runs, but all the files which are intended for the src dir end up in the public dir also with the package.json.

Here's a look at the tree and I've also added a screen shot of my terminal.

brian@Brians-MBP react-w-astro % tree -a
.
├── package-lock.json
├── public
│   ├── .gitignore
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── README.md
│   ├── favicon.ico
│   ├── index.css
│   ├── index.html
│   ├── index.js
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   ├── package.json
│   ├── reportWebVitals.js
│   ├── robots.txt
│   └── setupTests.js
└── src

Thanks!
Brian

Ordinary <input> tags can disable autocomplete suggestions by including the attribute autocomplete="off". Please add this simple attribute to <rux-input> and pass the attribute down to the <input> in the Shadow DOM.

When compiling a React TypeScript app that uses AstroUXDS:

WARNING in ./node_modules/@astrouxds/react/dist/react-component-lib/createOverlayComponent.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/ezra/Development/PickNik/moveit_studio/moveit_studio_web/node_modules/@astrouxds/react/src/react-component-lib/createOverlayComponent.tsx' file: Error: ENOENT: no such file or directory, open '/Users/ezra/Development/PickNik/moveit_studio/moveit_studio_web/node_modules/@astrouxds/react/src/react-component-lib/createOverlayComponent.tsx'

src folder doesn't exist:

~/D/P/m/moveit_studio_web (main|✚2…) $ ls /Users/ezra/Development/PickNik/moveit_studio/moveit_studio_web/node_modules/@astrouxds/react/src/
ls: /Users/ezra/Development/PickNik/moveit_studio/moveit_studio_web/node_modules/@astrouxds/react/src/: No such file or directory

This produces massive amounts of compiler warnings, to the point of it making it hard to read my build logs 😦

Currently, a <rux-modal> element has a modal-message attribute which sets the message. This is very convenient for simple modals, but sometimes it would be nice to be able to include rich content (e.g. a link to help documentation with more details). Ideally, this should be achievable via a custom slot. Thoughts?

When you toggle the small prop, the selected border does not change

Steps to reproduce:
https://codesandbox.io/s/tab-small-bug-wdbotj

Expected behavior:
I should be able to toggle the small prop on and off and have the styles change as expected

Whenever an option is removed (dropping them from 3 to 2 for example), dynamically, the following error is thrown:

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I've put together a codesandbox detailing the issue. After 5 seconds the number of dynamically generated options is changed, and the error occurs. It does not occur when using React-Bootstrap select.

https://codesandbox.io/s/holy-sound-3szif

<rux-input type="time"> mostly works as expected (the icon gets shown in black), but it would be nice to have official support for it. MDN says browser support is pretty good.

The label on switch appears to be outside of the elements container

Steps to reproduce:
https://codesandbox.io/s/switch-label-bug-prvd32

Expected behavior:
The label should be within the red container

Hey, I noticed the bug fixed by #423 show up in a project last week, does Astro have a schedule for when releases are made?

Thanks!

Expected Behavior

Option group labels text should be legible achieving a minimum of WCAG 2.1 AA contrast compliance

Actual Behavior

Option group labels are hard or impossible to read.

https://astro-components.netlify.app/?path%3D/story/forms-select-menu--with-option-groups

Affected platforms appear to be

Mac Firefox

Windows Edge (Chromium)

Window Chrome

Windows Firefox

When using Astro inputs, I was unable to find an option for a file type input field. Adding support for the input type=file would be very helpful for creating web pages that allow the user to upload files. I am looking to add file uploading to an application using AstroUX.

Is it possible to have the timeline show the entire range when the zoom is set to 0?

Additionally, can we provide control to the developer to X number of days/hours/etc at given zoom levels?

The native HTML <select> option supports a multiple attribute to select multiple elements from a dropdown. It would be really nice to have this in astro rather than having to manually render a list of checkboxes.

Saw the version jump to 6.0.0, but the package size is like 4kB. 0.0.8 (that works) has a size of around 6MB.

When GSB is inside classification marking, there appears to be some layout issues.

Steps to reproduce:
https://codesandbox.io/s/classmarking-gsb-bug-y49kmx

Expected behavior:
the monitoring icons should be within the GSB and the page should not scroll horizontally

I'm using @astrouxds/react, at the latest version, and I can type into text fields but cannot use the backspace key. Strangely, the delete key works. Am I doing something wrong, or is this broken?

When using the rux-tree-node, the event ruxtreenodeselected is fired when you click on the actual node. In order to be able to save state of tree nodes, we need a tree node to fire an event when said node is expanded, not just when the node is selected. A ruxtreenodeexpanded event would suffice.

Steps to reproduce:
https://codesandbox.io/s/table-bug-spdfml

Expected behavior:
It should behave like the native html table element.

We should reevaluate if Table should even be a component because of how complicated and weird it is. Our implementation just wraps the native elements and applies very minor styling, which could be part of a separate opt in stylesheet. But our table has all of the disadvantages of display: table. In cases like this, its way easier to just write a

Requesting a change in dependencies as I failed to complete the npm install script for this repo.

Current OS: MacOS BigSur 11.5.2 (20G95)
Processor: Intel Core i5

Steps to reproduce issue:

1. In any directory:

git clone [email protected]:RocketCommunicationsInc/astro-uxds.git
cd astro-uxds

2. npm install

See output:

Ordinary <input> tags can be readonly, which is distinct from disabled. A readonly field cannot be edited by the user, but is still submitted with the form. A disabled field cannot be edited by the user, but is not submitted with the form.

Please add the readonly attribute to <rux-input>, and apply that attribute to the underlying <input> when it is present.

Attempting to use the RuxTable component from @astrouxds/react seems to work in development. I can see the table and populate it, though it doesn't look like the Storybook version. The issue is when running unit tests on it via jest, I am getting an error:

SyntaxError: The requested module '@astrouxds/react' does not provide an export named 'RuxTable'
          at async Promise.all (index 10)
          at async Promise.all (index 0)
      at jasmine2 (node_modules/jest-jasmine2/build/index.js:228:5)

Looking into the Storybook, the code behind the sample RuxTable is using the Lit-Element component. Am I missing something? Or is there no React-wrapped component for a RuxTable?

The native HTML <option> element has a disabled attribute, but <rux-option> does not. When using a placeholder <rux-option> like "Select an option", it would be nice to disable that option so that users cannot select it.

Particularly, tailwind includes this snippet:

 *,
      ::before,
      ::after {
        box-sizing: border-box; /* 1 */
        border-width: 0; /* 2 */
        border-style: solid; /* 2 */
        border-color: currentColor; /* 2 */
      }

that is rendering out selected tab line invisible.

Steps to reproduce:
https://codesandbox.io/s/selected-tab-bug-5s1vlw

Expected behavior:
We should not be able to override this style unless explicitly using a shadow part

When large lists exist, a way to filter items inside dropdowns become necessary.

rux-icons have a title attribute that's set to the name of the icon by default.

When creating icon buttons with rux-button, it's common to add a title to the button that describes what the button does. For example, I want an add icon button to display "Add tab" when the user hovers over it. However, when the user hovers over the icon in the button, the default "add" title is displayed (see screenshots attached).

Tracks should be able to be collapsed as seen in this mockup: https://grm-schedule.astrouxds.com/

Feature request:

Before Astro supported datetime-local as a type of input, my team built a date input picker based on JDay for choosing the date.

Now that datetime-local is supported, we'd really like to switch to using that, but our users are accustomed to dealing with JDay values rather than month/day when copying dates from an email. Is a JDay based date input on the horizon somewhere?