mayank99

mayank99

Member Since 7 years ago

Experience Points
10
follower
Lessons Completed
8
follow
Lessons Completed
24
stars
Best Reply Awards
15
repos

1224 contributions in the last year

Pinned
⚡ A react implementation of our iTwinUI UX standards.
Activity
Jan
18
2 days ago
pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

feat(Carousel): Add carousel component

  • Adding carousel component.
  • Dots can shrink in size when there are many slides present. Not shown on the demo page.
  • Slides allow for custom interior content or simple image with optional overlaying caption.
    1. Custom inner content.
    2. Embedded YouTube video.
    3. Full frame image with caption.
  • Following w3 recommendations for accessibility. Inspiration came from here & here.
  • Left & right buttons are working in this demo, dots are not.

Closes #374. Dots are based off this provided code. iTwinUI_carousel_Type_default_0_demo-default_0_ iTwinUI_dark_carousel_Type_default_0_demo-default_0_

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

feat(Carousel): Add carousel component

  • Adding carousel component.
  • Dots can shrink in size when there are many slides present. Not shown on the demo page.
  • Slides allow for custom interior content or simple image with optional overlaying caption.
    1. Custom inner content.
    2. Embedded YouTube video.
    3. Full frame image with caption.
  • Following w3 recommendations for accessibility. Inspiration came from here & here.
  • Left & right buttons are working in this demo, dots are not.

Closes #374. Dots are based off this provided code. iTwinUI_carousel_Type_default_0_demo-default_0_ iTwinUI_dark_carousel_Type_default_0_demo-default_0_

mayank99
mayank99

that's correct, except we want to translate in the negative direction. These are the changes I had to make: image image

Activity icon
issue

mayank99 issue comment iTwin/iTwinUI

mayank99
mayank99

Skip to Content link

Feature

'Skip to content' link for users using tab navigation. Allows to bypass links in header/menus and land directly into a page's content. This is a basic accessibility feature we should highly consider.

Examples

WebAIM recommendation More info from Deque University

CC @FlyersPh9

mayank99
mayank99

While it is an essential accessibility feature, I wonder if we need UI for it (our main focus is UI after all).

This is what Google's skip link looks like: image

The hardest problem here is literally just deciding where exactly to position it so it's readable. I don't think we can make that decision in iTwinUI as every app is different.

Activity icon
issue

mayank99 issue comment iTwin/iTwinUI-react

mayank99
mayank99

fix(Button): Improve polymorphic handling

Made two changes in PolymorphicForwardRefComponent:

  1. as prop is now optional (because it doesn't seem to get default value in itwinjs-core)
  2. changed type narrowing to check JSX.IntrinsicElements first

Closes #

Checklist

  • Add meaningful unit tests for your component (verify that all lines are covered)
  • Verify that all existing tests pass
  • Add component features demo in Storybook (different stories)
  • Approve test images for new stories
  • Add screenshots of the key elements of the component
mayank99
mayank99

I was able to compile without any changes.

Just to be clear, does this mean it fixes the typescript errors that you were getting re: as prop being required and className not being found, and that you don't need to add any workarounds from [email protected]?

Activity icon
issue

mayank99 issue comment wKich/creevey

mayank99
mayank99

Storybook 6.4.0 - TypeError: Cannot read properties of undefined (reading 'removeAllListeners')

When updating my project to storybook 6.4.0 I am getting a TypeError: Cannot read properties of undefined (reading 'removeAllListeners') error message when running creevey:

image

mayank99
mayank99

I am a bit lost on how to even start creevey, because yarn start does not work on the main branch on my machine.

@Perni1984 Maybe you need to install run-p globally as it's not included in dev deps.

push

mayank99 push iTwin/iTwinUI-react

mayank99
mayank99

fix(Button): Improve polymorphic handling

commit sha: 3f2a1e07c2ff206057316e8f3b2934b215fe4dbd

push time in 1 day ago
Activity icon
issue

mayank99 issue comment iTwin/iTwinUI-react

mayank99
mayank99

fix(Button): Improve polymorphic handling

Made two changes in PolymorphicForwardRefComponent:

  1. as prop is now optional (because it doesn't seem to get default value in itwinjs-core)
  2. changed type narrowing to check JSX.IntrinsicElements first

Closes #

Checklist

  • Add meaningful unit tests for your component (verify that all lines are covered)
  • Verify that all existing tests pass
  • Add component features demo in Storybook (different stories)
  • Approve test images for new stories
  • Add screenshots of the key elements of the component
mayank99
mayank99

@bsteinbk Are you able to build this branch and test your itwinjs-core branch against it? Or if that's not possible, maybe copy the changes into your node_modules?

The goal here is that Button should work by default (pretty much the same way as before) and not require using the as prop.

pull request

mayank99 pull request iTwin/iTwinUI-react

mayank99
mayank99

fix(Button): Improve polymorphic handling

Made two changes in PolymorphicForwardRefComponent:

  1. as prop is now optional (because it doesn't seem to get default value in itwinjs-core)
  2. changed type narrowing to check JSX.IntrinsicElements first

Closes #

Checklist

  • Add meaningful unit tests for your component (verify that all lines are covered)
  • Verify that all existing tests pass
  • Add component features demo in Storybook (different stories)
  • Approve test images for new stories
  • Add screenshots of the key elements of the component
Activity icon
created branch

mayank99 in iTwin/iTwinUI-react create branch mayank/polymorphic-fix

createdAt 1 day ago
open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

feat(Select): Dropdown icon is an icon

image

mayank99
mayank99

Worth mentioning: If we change Select to use input instead of div, we won't be able to use a psuedo-element (CSS limitation). Same problem in ComboBox. So I guess this discussion is not productive.

pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

feat(Select): Dropdown icon is an icon

image

Activity icon
issue

mayank99 issue comment iTwin/iTwinUI

mayank99
mayank99

feat(Select): Dropdown icon is an icon

image

mayank99
mayank99

Added iui-with-icon mixin. @mayank99 something similar you had in mind? p.s. visuals are not completely working yet.

It's so many changes, I don't know what to say if it doesn't even work 😆

Here's what I had in mind:

<input-with-icon>
  <input />
  <icon />
</input-with-icon>

But I see you have:

  • added a modifier on the <div class="iui-select">
  • included the iui-input mixin in <div class="iui-select">

And your solution is using flex, which does not really allow placing elements on top of each other (you need grid or position: absolute).

And it doesn't fix any of the issues with combobox.

I wonder if it'd be better to just use an input instead of div for select. That way, we'd be able to reuse all our CSS and get rid of the overrides. And it will also work with form validation and autocomplete.

pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

feat(Carousel): Add carousel component

  • Adding carousel component.
  • Dots can shrink in size when there are many slides present. Not shown on the demo page.
  • Slides allow for custom interior content or simple image with optional overlaying caption.
    1. Custom inner content.
    2. Embedded YouTube video.
    3. Full frame image with caption.
  • Following w3 recommendations for accessibility. Inspiration came from here & here.
  • Left & right buttons are working in this demo, dots are not.

Closes #374. Dots are based off this provided code. iTwinUI_carousel_Type_default_0_demo-default_0_ iTwinUI_dark_carousel_Type_default_0_demo-default_0_

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

feat(Carousel): Add carousel component

  • Adding carousel component.
  • Dots can shrink in size when there are many slides present. Not shown on the demo page.
  • Slides allow for custom interior content or simple image with optional overlaying caption.
    1. Custom inner content.
    2. Embedded YouTube video.
    3. Full frame image with caption.
  • Following w3 recommendations for accessibility. Inspiration came from here & here.
  • Left & right buttons are working in this demo, dots are not.

Closes #374. Dots are based off this provided code. iTwinUI_carousel_Type_default_0_demo-default_0_ iTwinUI_dark_carousel_Type_default_0_demo-default_0_

mayank99
mayank99

I don't think we should ever be using outline: none outside focus styles

we removed it from iui-button too

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

feat(Carousel): Add carousel component

  • Adding carousel component.
  • Dots can shrink in size when there are many slides present. Not shown on the demo page.
  • Slides allow for custom interior content or simple image with optional overlaying caption.
    1. Custom inner content.
    2. Embedded YouTube video.
    3. Full frame image with caption.
  • Following w3 recommendations for accessibility. Inspiration came from here & here.
  • Left & right buttons are working in this demo, dots are not.

Closes #374. Dots are based off this provided code. iTwinUI_carousel_Type_default_0_demo-default_0_ iTwinUI_dark_carousel_Type_default_0_demo-default_0_

mayank99
mayank99

You know, I'm thinking we might be able to improve this approach by applying transform the parent instead. That way we won't even need to use position: absolute and not need to modify every single item.

pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

feat(Carousel): Add carousel component

  • Adding carousel component.
  • Dots can shrink in size when there are many slides present. Not shown on the demo page.
  • Slides allow for custom interior content or simple image with optional overlaying caption.
    1. Custom inner content.
    2. Embedded YouTube video.
    3. Full frame image with caption.
  • Following w3 recommendations for accessibility. Inspiration came from here & here.
  • Left & right buttons are working in this demo, dots are not.

Closes #374. Dots are based off this provided code. iTwinUI_carousel_Type_default_0_demo-default_0_ iTwinUI_dark_carousel_Type_default_0_demo-default_0_

pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

feat(Carousel): Add carousel component

  • Adding carousel component.
  • Dots can shrink in size when there are many slides present. Not shown on the demo page.
  • Slides allow for custom interior content or simple image with optional overlaying caption.
    1. Custom inner content.
    2. Embedded YouTube video.
    3. Full frame image with caption.
  • Following w3 recommendations for accessibility. Inspiration came from here & here.
  • Left & right buttons are working in this demo, dots are not.

Closes #374. Dots are based off this provided code. iTwinUI_carousel_Type_default_0_demo-default_0_ iTwinUI_dark_carousel_Type_default_0_demo-default_0_

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

feat(Carousel): Add carousel component

  • Adding carousel component.
  • Dots can shrink in size when there are many slides present. Not shown on the demo page.
  • Slides allow for custom interior content or simple image with optional overlaying caption.
    1. Custom inner content.
    2. Embedded YouTube video.
    3. Full frame image with caption.
  • Following w3 recommendations for accessibility. Inspiration came from here & here.
  • Left & right buttons are working in this demo, dots are not.

Closes #374. Dots are based off this provided code. iTwinUI_carousel_Type_default_0_demo-default_0_ iTwinUI_dark_carousel_Type_default_0_demo-default_0_

mayank99
mayank99

I agree, the CSS should be content agnostic

Activity icon
issue

mayank99 issue comment iTwin/iTwinUI-react

mayank99
mayank99

Pointer actions not working with slider

Describe the bug (actual behavior)

We encountered a specific bug in the iTwin-React Slider component during development. This component overrides the default behavior of pointer move event which means that we are not able to perform default pointer actions such e.g. selecting text when the slider is in the DOM.I am unable to select text after adjusting slider value. As seen in the gif below: chrome-capture (1)

Expected behavior

Adjusting the slider should not effect pointer actions in other elements.

Reproduction

Link to a minimal repro:

Steps to reproduce
  1. Select Text (works fine)
  2. Adjust Slider (triggers bug)
  3. Select Text Again (doesn't work)
mayank99
mayank99

Since we are using similar event handling in ColorPicker too, this issue exists there as well. Might be able to fix the two together slide

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

fix(Button): Use `::before` for active background

gradients cannot be animated which causes this flicker: before

Instead of using gradient to mix two colors, I am now using an absolutely positoned ::before psuedo element with a background-color. It fixes the flicker: after

mayank99
mayank99

blue stripe is showing that it is active which is barely visible

I would not call it "barely visible". It is functional and that's good enough for progressive enhancement

I can't see icons in IE.

That's because we are using webcomponents in demo pages. The CSS itself is fine

pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

fix(Button): Use `::before` for active background

gradients cannot be animated which causes this flicker: before

Instead of using gradient to mix two colors, I am now using an absolutely positoned ::before psuedo element with a background-color. It fixes the flicker: after

Jan
14
6 days ago
open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

fix(Button): Use `::before` for active background

gradients cannot be animated which causes this flicker: before

Instead of using gradient to mix two colors, I am now using an absolutely positoned ::before psuedo element with a background-color. It fixes the flicker: after

mayank99
mayank99

Oh, the test is failing and I can't run it locally anymore because I uninstalled docker. 😕 I wonder if the colors are different; thought they looked the same

pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

fix(Button): Use `::before` for active background

gradients cannot be animated which causes this flicker: before

Instead of using gradient to mix two colors, I am now using an absolutely positoned ::before psuedo element with a background-color. It fixes the flicker: after

pull request

mayank99 pull request iTwin/iTwinUI

mayank99
mayank99

fix(Button): Use `::before` for active background

gradients cannot be animated which causes this flicker: before

Instead of using gradient to mix two colors, I am now using an absolutely positoned ::before psuedo element with a background-color. It fixes the flicker: after

Activity icon
created branch

mayank99 in iTwin/iTwinUI create branch mayank/active-button-bg

createdAt 5 days ago
pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

feat(Tile): Add focus styling to entire tile

  • Add :focus to entire tile.
  • Increase outline when :focus & .iui-selected are combined.
  • Use this visually hidden method to allow the "more options" button to be focused.

Closes #442.

Focus on 1st tile, selection on 3rd tile Screen Shot 2022-01-12 at 2 07 18 PM

Focus & selection on 3rd tile Screen Shot 2022-01-12 at 2 07 28 PM

pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

feat(Tile): Add focus styling to entire tile

  • Add :focus to entire tile.
  • Increase outline when :focus & .iui-selected are combined.
  • Use this visually hidden method to allow the "more options" button to be focused.

Closes #442.

Focus on 1st tile, selection on 3rd tile Screen Shot 2022-01-12 at 2 07 18 PM

Focus & selection on 3rd tile Screen Shot 2022-01-12 at 2 07 28 PM

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

feat(Tile): Add focus styling to entire tile

  • Add :focus to entire tile.
  • Increase outline when :focus & .iui-selected are combined.
  • Use this visually hidden method to allow the "more options" button to be focused.

Closes #442.

Focus on 1st tile, selection on 3rd tile Screen Shot 2022-01-12 at 2 07 18 PM

Focus & selection on 3rd tile Screen Shot 2022-01-12 at 2 07 28 PM

mayank99
mayank99

Why not a reusable mixin for this?

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

feat(Tile): Add focus styling to entire tile

  • Add :focus to entire tile.
  • Increase outline when :focus & .iui-selected are combined.
  • Use this visually hidden method to allow the "more options" button to be focused.

Closes #442.

Focus on 1st tile, selection on 3rd tile Screen Shot 2022-01-12 at 2 07 18 PM

Focus & selection on 3rd tile Screen Shot 2022-01-12 at 2 07 28 PM

mayank99
mayank99

When is this iui-visible class applied? The more-options button should really only be shown when the tile is hovered or has focus within.