rentalutions / elements Goto Github PK

Component Request

Create a reusable tooltip design element that we can use pervasively throughout the app

Component Name

Flexible - I just generally call it a 'Tooltip'

Use case

We have hundreds of form fields throughout the app. Need a way/place to put more descriptive text next to them, such that it doesn't render on the page by default (ie stuffed into a tooltip and only activated for users who are confused). New element not necessarily exclusive to form fields - can be used on any page/ui location.

Expectations:

• Desktop: can trigger via a click and hover
• Mobile: can trigger via tap
• All envs: clicking/tapping away from the tooltip closes it

Design

See below for an example of the tooltip. However, please note that I think another component of this design element is a another UI element that would be something analogous to a "question mark in a small circle" type of icon/image. That would be the element/image that would get the click/tap/hover to present the tooltip. However, this is just an idea. Design would own the specifics of these elements, interaction, etc.

https://github.com/marketplace/actions/vercel-action

Prerequisites

• Version: 1.5.1
• Are you running from source/master: Ja
• Operating system: MacOS\

Expected behavior

The select & input components should consume an error prop, which should be a node type, that if present, renders the appropriate error message to the user.

Resources

Update @rent_avail/feedback to typescript.

Prerequisites

• Version: 1.3.0-beta.1
• Running From: NextJs app w/ SSR

Step to reproduce (actual behavior)

1. Import the effected component.

import {DateSearch} from "@rent_avail/elements/date-picker"

2. Server fails and the error below is printed to console.

Expected behavior

I should be able to server render the intersection-observer polyfill without needing to backtick for a window object.

I think this should be fixed by just by importing it as a browsers' global instead of a module build.

Any message or error

SyntaxError: Cannot use import statement outside a module

Resources

https://www.npmjs.com/package/intersection-observer-polyfill

Prerequisites

• Version: 1.3.6
• Are you running from source/master: Yes
• Are you using a released build: Yes
• Operating system: N/A
• Bits: N/A

Step to reproduce (actual behavior)

Open FullPageModal
Console -> View warning

Expected behavior

No 🙅‍♂ warning ⚠️

Any message or error

app.min.js:128425 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Resources

• Links
• Screenshots
  

Prerequisites

• Version: v1.6.15
• Are you running from source/master: master
• Are you using a released build: YES
• Operating system: macOS Catalina 10.15.4
• Bits: 64-bit

Step to reproduce (actual behavior)

@pkrawc

1. visit https://design.avail.co/components/text-input
2. visit top of Usage section about halfway down the page and replace the date/text input code with the following code:

<Input
  error="border turns blue when input is focused"
  type="date"
  label="Birth Date"
  icon={Calendar}
 />
<Input
  error="border remains red when input is focused"
  required
  label="A really long label to make things extra clear for the user."
/>

• When the date input is focused we lose the red border and it becomes navy blue. When the text input is focused, the red border remains.

• The error message displays as expected. It's the behavior of the border that seems to be the problem.

Expected behavior

• The border should remain red when the date input is focused on (while there is still an error state)

Any message or error

N/A

Resources

N/A

Prerequisites

• Version: @rent_avail/controls: 0.2.0
• Operating system: Mac OSX
• Bits: 64bits

Step to reproduce

• Import checkbox from @rentalutions/elements/button
• Add to a React component/view
• Run the react app
• Notice that the Button doesn't show the cursor as a pointer when hovering

Expected behavior

The button should set the cursor as a pointer when hovering

Any message or error

N/A

Resources

N/A

Prerequisites

• Version: @rent_avail/[email protected]
• Are you running from source/master: Yes
• Are you using a released build: Yes
• Operating system: Linux
• Bits: x64

Step to reproduce (actual behavior)

• Open Fullscreen feedback
• Wait until animation end
• Success text is not shown and no way out from the modal

Expected behavior

• Success text is shown

Any message or error

style-value-types.es.js:183 Uncaught (in promise) TypeError: prop.match is not a function
    at Object.createTransformer (style-value-types.es.js:183)
    at mixComplex (popmotion.es.js:238)
    at createMixers (popmotion.es.js:274)
    at interpolate (popmotion.es.js:331)
    at KeyframesAnimator.createInterpolator (popmotion.es.js:431)
    at new KeyframesAnimator (popmotion.es.js:421)
    at animate (popmotion.es.js:601)
    at startPopmotionAnimate (framer-motion.es.js:1386)
    at start (framer-motion.es.js:1411)
    at start (framer-motion.es.js:1437)

Resources

Zilch

Hey,

So Prakash brought this up and I am tackling it real quick.The problem is that the FullPageModal let's the body scroll when open, causing somewhat of a disjointed effect for users. I propose (and @PrakashKoneru seems to agree) that the modal should attach a "modal-open" class to the body that is then used to set overflow-y: hidden on that body.

The easiest way to do this in my mind is to make the modal component a stateful component that can read it own 'open-ness'. This being the case I also believe that it'll be cleaner and produce less footprint later for the modal to be a FAC component and pass a toggle prop (or two functions, one open and one close) down. The modal body would need again to be moved to a render prop.

I believe this is the best way to do it but before I commit anything I'd like to get a discussion going.

I'm unsure what the outline should look like. I don't love the browser default look, so we'll have to roll with a simple custom one.

Prerequisites

• Version: 1.2.2

This is more a reminder for myself than anything, but would be fun first issue to deal with.

Stepper

Use case

We need a consistent way to guide users through multi-step processes. There should be an abstraction of the boilerplate needed to track the state of the current step in a series of steps.

There are two levels of Stepper we'll want.

Slim

This stepper is used when the process is on the shorter side and displays only a progress bar, the current step, and a button row with a next step hint text.

Normal

This stepper displays all the steps to the user before they start and is useful for longer processes or ones where the user will need to have a bunch of data ready to finish.

Design

Slim

Normal

Update @rent_avail/popover to typescript

Prerequisites

• Versions:

{
  "@rent_avail/base": "^0.4.0",
  "@rent_avail/controls": "^0.2.4",
  "@rent_avail/dialog": "^0.1.11",
  "@rent_avail/elements": "^1.7.3",
  "@rent_avail/input": "^0.1.10",
  "@rent_avail/layout": "^0.3.2",
  "@rent_avail/select": "^0.1.11",
  "@rent_avail/tag": "^0.1.10",
  "@rent_avail/typography": "^0.1.10"
}

• Are you running from source/master: master
• Are you using a released build: YES
• Device: Samsung Galaxy Note9, Android version 9
• Browser: Chrome

Step to reproduce (actual behavior)

@pkrawc As discussed over slack, I'm seeing some unwanted UI behavior when attempting to submit the Invite My Landlord form from the new Tenant Dashboard on mobile. When clicking INVITE MY LANDLORD, a dialog is triggered. When selecting an input field that should trigger the keyboard to pop up, the dialog is pushed much higher than it should be and the current field is no longer in view on the devices screen.

This should be easily reproducible when the tenant account has the feature flag receives-react-tenant-dashboard enabled. A new user account should display the Invite My Landlord card when visiting /app/tenants/dashboard

Expected behavior

Keyboard should move the input field, but it should still remain in view on the user's device.

Any message or error

N/A

Resources

N/A

Screenshots/GIFs

Prerequisites

• Version: 1.3.6

Step to reproduce (actual behavior)

The current buttons used in Avail products have a button--danger class that can be applied to give the impression of a destructive action.

Expected behavior

Using a button from elements, one should be able to add a danger prop to style the button appropriately.

This button should also consume backgroundColor borderColor & color props to make extending in other areas, like a green button or gold button easier.

@creaumond Opening this here so we can track changes

Also, @wade00, if you want to add anything or suggest a different approach mein ohren sind offen

Prerequisites

• Version: 1.6.5
• Are you running from source/master: master

Step to reproduce (actual behavior)

• On Android phones, a tooltip is getting a cutoff (see attached image)

Expected behavior

• render the tooltip on the left side of the target

Any message or error

N/A

Resources

Suggestion

When calculating for collisions to the left and the right and deciding which side to render a tooltip, if there are collisions on the both sides, the decision needs to be based on which side has more overlap (or collision).

Prerequisites

[email protected]

Step to reproduce (actual behavior)

If you're using a scrollable element that has a greater height than the window the popover will always assume there's enough space to render below the target.

Expected behavior

The popover should render relative to the viewport height.

What I think is the offending code.

Update controls package to typescript.

Prerequisites

• Version: v1.6.15
• Are you running from source/master: master
• Are you using a released build: YES
• Operating system: macOS Catalina 10.15.4
• Bits: 64-bit

Step to reproduce (actual behavior)

@pkrawc I noticed when using the Tag component that when an icon is not passed as a prop there is a slight vertical misalignment between tags.

Expected behavior

Tags should be aligned whether or not there is an icon prop being used.

Any message or error

N/A

Resources

N/A

Just a few comments -- nothing crazy:

https://design.avail.co/packages/tag
import Tag, { FilterTag } from "@rent_avail/tooltip"
should be
import Tag, { FilterTag } from "@rent_avail/tag"

https://design.avail.co/packages/input
import { Input } from "@rent_avail/input"
should be
import Input from "@rent_avail/input"

https://design.avail.co/packages/controls
should indicate loading prop will not work if button is disabled

Prerequisites

• Version: 0.0.4
• Operating system: macOS

Step to reproduce (actual behavior)

Create a Fullpage dialog and use a tooltip inside of it. If the dialog scrolls the tooltip stays bound to the document position (which doesn't scroll) and the tooltip is weirdly positioned.

Expected behavior

The tooltip should scroll with it's highest root?

Resources

I'm actually unsure exactly how to deal with this right now.

Prerequisites

• Version: @rent_avail/[email protected]
• Operating system: Mac OSX
• Bits: 64 bits

Step to reproduce (actual behavior)

When search on the Select component is set to false, it appears that the user cannot type into the input field, but the value is still being captured.

Expected behavior

No value should be captured when search is set to false.

A potential solution is adding readOnly: !state.search to the inputProps in packages/select/src/select-input.js.

This was made workable by adding the readOnly prop to the select input, since it will pass that prop along to the Input component, along with search={false}.

Any message or error

N/A

Resources

N/A

Prerequisites

• Version: v1.5.1
• Are you running from source/master: Yes
• Are you using a released build: Yes
• Operating system: n/a
• Bits:

Step to reproduce (actual behavior)

I have not been able to personally reproduce, but multiple tooltips have been reported to show up by clicking. From Trello:

• Create/publish a listing that generates chips w/ tooltips
• Hover over chip with both a) clickable href and b) tooltip (see tooltip #1)
• Click the clickable tooltip (ie. new tab to Zillow listing)
• Return to Show page
• Hover over a second chip (see tooltip #2, but notice that tooltip #1 is still showing when it should not - ie. "sticky")
  

Expected behavior

Only one would stay open at a time.

Any message or error

N/a

Resources

See above.

Prerequisites

• Version: @rent_avail/[email protected]
• Are you running from source/master: No
• Are you using a released build: Yes
• Operating system: ArchLinux
• Bits: 64

Step to reproduce (actual behavior)

• Import FullscreenFeedback from @rent_avail/feedback
• Add to a React component/view
• Add another full-screen component with zIndex > 0
• Run the react app
• Notice that the Feedback is rendering behind the extra full-screen component

Expected behavior

FullscreenFeedback takes the styling props, either via Styled System or via styles

Resources

Component Request

DatePicker

Use case

We want a way to choose dates consistently. This component should have sane defaults but let the end developer control the date as they wish. This component has two types.

1. A specific date option where the component should render a dropdown for each of MM/DD/YYYY.
2. A search date option where the user is kind of unsure what exact date they need but they know they need next Friday cause that's when they get paid.

Design

Date Picker: Search

Date Picker: Specific

What do you think about this @creaumond ?

Prerequisites

• Version: "@rent_avail/input": "^0.1.7"
• Are you using a released build: Yes

Step to reproduce (actual behavior)

• yarn add @rent_avail/input

• import Input from "@rent_avail/input" in a React component

• in the jsx of the React component, use Input

• This component is not rendered, and the whole page is broken

Expected behavior

• Input component is rendered

Any message or error

• Error message: Cannot read property 'ui_500' of undefined

Possible ways to resolve this issue

• theme props is not passed to the Input

• when theme props is provided to InputWrapper in the source code, the issue is resolved

• to fix this issue;

1. allow users to pass theme props, or
2. provide theme props in the source code

Prerequisites

• Version: v1.6.15
• Are you running from source/master: master
• Are you using a released build: YES
• Operating system: macOS Catalina 10.15.4
• Bits: 64-bit

Step to reproduce (actual behavior)

@pkrawc i don't believe this is not a bug but I think it is worth bringing up. I think there had been some discussion around the new inputs and not wanting the errors to have control over other UI behavior e.g. disallowing errors from pushing other elements to make room for the message.

I'm seeing the following behavior, and it's' more of an issue with smaller inputs/longer error messages:

Expected behavior

I don't have a solution but I don't think we should be covering other elements with our error messages unless it's an intentional behavior, like a tooltip, mini-modal, etc. The current behavior feels like a bug.

Any message or error

N/A

Resources

N/A

Problem

Users might not be able to find their address through the google places autocomplete API. Google has a vast majority of addresses but there are some that they don't know how to parse. This is a problem for some of our more rural and international users.

Proposal

We need to let the user enter an address manually, but only after encouraging them to try and find it through places autocomplete. Google returns the top suggestions based on the user input with a limit of 5. If the suggestion list is less than 5 I propose we add a line item for the user to enter their address manually.

When they choose the manual option we should close the autocomplete dropdown list and open a ConfirmationDialog with the fields that the user is required to enter for us to have a complete address. Street Number, Street Name, City, State, Zip, Country. If the user closes the dialog before entering this info, we'll reset the component and they can start fresh.

Context

I've started a branch that cleans up some of the folder structure of @rent_avail/autocomplete.

Feature Branch

update/manual-address-for-autocomplete

Component Request

Dropdown Menu

Use case

We need a reliable way to use dropdown menus in our UI. There are plenty of actions that around the landlord & tenant products that aren't necessary for each visit but should be easily editable.

Design : TODO

Prerequisites

@rent_avail/[email protected], @rent_avail/[email protected]

Step to reproduce (actual behavior)

Placing a select inside a confirmation dialog. When opening the select component the list renders both wider than it's input and over the input. When selecting an option in the list it closes the modal right away.

Expected behavior

It shouldn't close the modal right away, and it should render well inside any portal contained element.

User is unaware of how to delete/edit an already completed address

There are two options here in my mind, one potentially more natural but a lot harder to implement.

1. The easier option would be to add a close/delete icon next to the completed address

2. The harder option would be to move the cursor when there is a completed address so that you see it blinking just after the blue box. This would mean offsetting the input area and or filling the input with blank characters to equal the length of the address.

Missing city/state in the label on completed address

This might be an implementation issue. Two things here, the autocomplete should be defaulted to full addresses, if we're not seeing that then we'll want to fix that. I also believe we're setting the defaultValue whenever the user chooses an address, we probably won't want to do that.

Autocomplete starts at 4 keystrokes when old autocomplete starts at 1.

This is an easy fix in the useAutocomplete hook.

useEffect(() => {
    // Get autocomplete suggestions based on input. Limit calls to inputs over 3
    // characters so we're not trying to guess too early.
    if (input.length > 3) {
      const request = {
        input,
        types: ["address"],
        sessionToken: state.sessionToken,
      }

      autocompleteRef.current.getPlacePredictions(request, updateSuggestions)
    } else {
      dispatch({
        type: "UPDATE_SUGGESTIONS",
        payload: { suggestions: [], called: false },
      })
    }
  }, [input])

Unabled to up/down arrows to navigate the suggestion list.

This is a library change. Currently, you can tab through the list but you cannot use the arrow keys to enter and or navigate. This will take a bit of a redesign of the current implementation which is below

function handleKeyDown({ keyCode }) {
    if (selection) {
      setInput("")
      return clearSelection(onClear)
    }
    switch (keyCode) {
      // Tab Key
      case 9:
        listRef.current?.firstElementChild.focus()
        break
      default:
        break
    }
  }

It should change to be more in line with what happens in the select component.

// Attached to the input component
function handleKeyDown({ key }) {
    if (key === "ArrowDown") listRef.current.firstChild.focus()
    if (key === "Tab") dispatch({ type: types.CLOSE_LIST })
  }

// Attached to the list item component
function handleKeyDown({ key, target }) {
    const itemEl = itemRef.current
    if (key === "ArrowDown" && itemEl.nextSibling) itemEl.nextSibling.focus()
    if (key === "ArrowUp" && itemEl.previousSibling)
      itemEl.previousSibling.focus()
    if (key === "Enter") selectValue({ target })
    if (key === "Escape") dispatch({ type: types.CLOSE_LIST })
  }

@antonzaloznyy Let me know if there is more context needed to get started on this.

CC: @wade00

Prerequisites

• Version: 1.6.14
• Operating system: MacOS

Step to reproduce (actual behavior)

If you tab into the State and Country fields, the values show. However, when you tab away, the values continue to show. In the attached case, it shows the resulting symptom of having stacked/multiple value lists.

Expected behavior

The list should close when the input is blurred.

Resources

Component Request

Data Table

Use case

We have a number of places through out the web app that we use paginated tables of data. Currently there is no centralized way to display this data.

Some of the affordances that I assume a data table would need are: pagination, row deletion?, editing. Multi-select, drag-and-drop?

Design

Mockup TBD. I want to get feedback on whether or not this would be a useful component in the first place. We can use a lot of the learning that Nellie did when creating the calculator page.

Prerequisites

• Version: 1.2.2
• Running from: Import with NextJS
• Are you using a released build: yes
• Operating system: MacOS

Step to reproduce (actual behavior)

When trying to pass a className into FluidProgress or FixedProgress it's not passed onto the underlying DOM element.

Expected behavior

I should be able to add styles to any component through a className prop.

Any message or error

No actual error.

Prerequisites

• Version: 1.6.9
• Operating system: Mac

Step to reproduce (actual behavior)

• hoover over a Tooltip target to show a Tooltip (or a Popover of that Tooltip)
• open a FullPageModal by clicking the Tooltip target
• After the FullPageModal is loaded, the Tooltip still shows, rendered above the FullPageModal

Expected behavior

• If the Tooltip was for a target in the page below the FullPageModal, the Tooltip should be gone after the FullPageModal is loaded.

• It would be nice to let users to set z-index for a Tooltip.

For example,

<ToolTip name="Edit" style={{ zIndex: 100 }}>

Currently, a Popover generated by a Tooltip has a hardcoded z-index of 9999.

    <Popover
      style={{ zIndex: "9999" }}
      targetRef={targetRef}
      ref={popoverRef}
      position={position}
    >
      <StyledTooltip
        {...props}
        ref={tooltipRef}
        role="tooltip"
        id={id}
        aria-hidden={!isOpen}
      >
        {children}
      </StyledTooltip>
    </Popover>

Resources

Create a new @rent_avail/core package that contains both the base and layout packages.

Update base installation to use a ADSProvider component.

function App() {
  return (
    <ADSProvider theme={
        /* Should be merged into the base theme. */
        customTheme
    }>
      {/* App components*/}
    </ADSProvider>
  )
}

This will make is simpler to setup a new project with the Avail Design System.

This package should be created in typescript.

Prerequisites

• Version: 2.0.0-beta.4
• Operating system: MacOS 10.14.6

Step to reproduce (actual behavior)

• Import modal from @rentalutions/elements/modal
• Use nextjs to server render a page component with the modal as a child.

Expected behavior

The modal should render with it's current state.

Any message or error

ReferenceError: document is not defined

Update @rent_avail/dialog to typescript.

Prerequisites

• Version: 2.0.0-beta.7
• Are you using a released build: No
• Operating system: MacOS

Step to reproduce (actual behavior)

Import Modal from @rentalutions/elements/modal and use it on a server rendered page.

Expected behavior

It shouldn't fire useLayoutEffect

Any message or error

It doesn't actually fire useLayoutEffect but react surfaces a warning like it's a problem. We should probably just switch it to useEffect because we're already bailing on the hook when the window is undefined. It won't actually make a difference and the server / client should not mismatch unless you load with a modal open (which will happen after react hydrates so I'm not even sure a mismatch would happen there.

Resources

https://fb.me/react-uselayouteffect-ssr

Component Request

a replacement for our current google places input to match the new input UI.

Component Name

AddressInput

Use case

We will be able to use this component to replace all older styles. We should consider how we send back the address data once retrieved.

Design

Current AddressInput:

Untouched:

On Focus:

Once we start typing:

Prerequisites

• Version: v0.1.16
• Operating system: Mac OSX
• Bits: 64 bits

Step to reproduce (actual behavior)

Included inside CodeSandbox provided below

Expected behavior

Included inside CodeSandbox provided below

Any message or error

N/A

Resources

• CodeSandbox
  • provides a sample and info of the behavior
• Airtable Item
  • initial QA item that called out this behavior

Currently the placeholder isn't looked at when the input is rendered, so it's rendered not raised and looks terrible

Prerequisites

• Version: 1.3.10
• Are you using a released build: Si
• Operating system: MacOS

Step to reproduce (actual behavior)

When omitting the label prop the component still renders a p.label with no children. This should only be rendered if the prop is present.

Expected behavior

{label ? <p className="label">{label}</p> : null}

Any message or error

No error

Resources

No resources

A new Issue

Prerequisites

Version: 1.7.3
Running from: Import using webpack
Are you using a released build: Yes
Operating system: Safari (desktop) on MacOS
Bits: Not sure?

Step to reproduce (actual behavior)

1. Log into tenant account
2. Navigate to Account Settings
3. Click the State dropdown

Expected behavior

The dropdown opens and the options are able to be selected. Note: I'm able to select an option if I click into an adjacent input and tab into the select field.

Any message or error

None

Resources

Screencast

Prerequisites

• Version: 1.6.14

Step to reproduce (actual behavior)

When using the Input component, if you set its type to date the input renders in the raised position, which is expected. The border, however, is blue before the user has ever interacted with it.

Expected behavior

The border should only be blue once the input has been focused and filled in.

Prerequisites

• Version: "@rent_avail/select": "0.1.17"
• Are you using a released build: yes
• Operating system: Mac

Step to reproduce (actual behavior)

• Navigate to Residence History step in a tenant application stepper
• Click "State" drop down menu
• you can see a "Select List" briefly rendered on the top left corner instead of below the input.

Expected behavior

• I should see the menu list below the input instead of the top left corner of the screen.

Any message or error

N/A

Resources

Prerequisites

Version: Release v2.0.0-beta.2
Running from: NextJS
Operating system: Mac OSX

Step to reproduce

• Import avatar from @rentalutions/elements/avatar
• add className to avatar

Expected behavior:

I would expect the class name to be passed to the html element.

Any message or error

No console output
...

Resources

No resources
...

Prerequisites

• Version: 0.1.8
• Are you running from source/master: N
• Are you using a released build: Y
• Operating system: ArchLinux
• Bits: 64

Step to reproduce (actual behavior)

After clicking on tooltip on mobile, the tooltip sticks to the screen when scrolling.

Expected behavior

The tooltip either staying near the target, or disappears on scrolling

Resources