Git Product home page Git Product logo

reaviz / realayers Goto Github PK

View Code? Open in Web Editor NEW
50.0 3.0 7.0 2.57 MB

[DEPRECATED] Layer Components - Dialogs, Drawers, Tooltips, Popovers, Menus, Notifications and Context Menus. Maintained by @goodcodeus.

Home Page: https://reaviz.github.io/realayers/

License: Apache License 2.0

JavaScript 6.52% TypeScript 84.92% HTML 1.40% CSS 7.16%
react reactjs dialog tooltip popover drawer menu context-menu notifications

realayers's Issues

Notifications in the stack disappear in random order

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Notifications in the stack disappear in random order

Expected behavior

Notifications in the stack should disappear in order what they appear

Screen.Recording.2022-11-10.at.11.53.10.mov

Add documentation for Dialog Component

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Other... Please describe:

Current behavior

There is no indication within the documentation that --color-dialog and --color-on-dialog need to be defined within your repository in order to set the background and color of the .inner dialog styling https://github.com/reaviz/realayers/blob/master/src/Dialog/Dialog.tsx#L60
https://github.com/reaviz/realayers/blob/master/src/Dialog/Dialog.module.css#L27

Without those defined, there is no .inner background color and is transparent against the .dialog styles

Expected behavior

Documentation specifying any css defined values, including --color-dialog and --color-on-dialog

Minimal reproduction of the problem with instructions

Create a story using the Dialog component without --color-dialog and --color-on-dialog being defined within the app's css files.

<Dialog open={state} onClose={() => setState(false)}>
  <h2>Dialog</h2>
</Dialog>

What is the motivation / use case for changing the behavior?

Faster utilization of the Dialog component

Environment


Libs:
- react version: 17.0.2
- realayers version: 2.4.6


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Dialog className prop should be passed to .inner div instead

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Probably a bug? But, since the className prop is getting passed to the outer container which controls the alignment, placement, z-index etc things that probably won't be overridden. Instead, passing the prop to the .inner div makes more sense so users can affect padding, borders, colors, etc.

Expected behavior

I am able to change [border-radius] of the dialog. background.

Minimal reproduction of the problem with instructions

.dialog {
  border-radius: 25px;
}

<Dialog className={css.dialog} {...otherProps} />
  • Pass a className to Dialog component with the class changing something like border-radius
  • See that the dialog doesn't change

What is the motivation / use case for changing the behavior?

Customizability

Environment


Libs:
- react version: X.Y.Z
- realayers version: 2.5.0


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.