mayank99

mayank99

Member Since 7 years ago

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

1024 contributions in the last year

Pinned
⚡ A react implementation of our iTwinUI UX standards.
Activity
Nov
29
1 day ago
open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

fix(UserIcon): Apply background color to transparent images

If a PNG with transparency is used for the user icon photo the circle's color and initials / SVG display through: Screen Shot 2021-11-24 at 3 29 16 PM Screen Shot 2021-11-24 at 3 49 16 PM

This PR applies background-1 to the <img> itself to hide any content underneath: Screen Shot 2021-11-24 at 3 29 59 PM

mayank99
mayank99

This is better, but I wonder if we should just leave it up to the devs to set the background. Currently because of the specificity, it'd be hard to override.

pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

fix(UserIcon): Apply background color to transparent images

If a PNG with transparency is used for the user icon photo the circle's color and initials / SVG display through: Screen Shot 2021-11-24 at 3 29 16 PM Screen Shot 2021-11-24 at 3 49 16 PM

This PR applies background-1 to the <img> itself to hide any content underneath: Screen Shot 2021-11-24 at 3 29 59 PM

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

feat(Table): Add label to paginator row count dropdown button

  • Add "Rows per page" left of paginator row count dropdown button. Responsive design will be handled in React.

Rows per page label

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

feat(Table): Add label to paginator row count dropdown button

  • Add "Rows per page" left of paginator row count dropdown button. Responsive design will be handled in React.

Rows per page label

pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

feat(Table): Add label to paginator row count dropdown button

  • Add "Rows per page" left of paginator row count dropdown button. Responsive design will be handled in React.

Rows per page label

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

feat(Table): Add label to paginator row count dropdown button

  • Add "Rows per page" left of paginator row count dropdown button. Responsive design will be handled in React.

Rows per page label

mayank99
mayank99
open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

feat(Table): Add label to paginator row count dropdown button

  • Add "Rows per page" left of paginator row count dropdown button. Responsive design will be handled in React.

Rows per page label

mayank99
mayank99

Doesn't this also need overflow: hidden and text-overflow: ellipsis?

pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

feat(Table): Add label to paginator row count dropdown button

  • Add "Rows per page" left of paginator row count dropdown button. Responsive design will be handled in React.

Rows per page label

open pull request

mayank99 wants to merge iTwin/iTwinUI-react

mayank99
mayank99

feat(InformationPanel): Add `InformationBodyContent` component for inner rows

Supports responsive layout (two columns vs one) using responsiveBreakpoint prop which allows setting the width value where the switch happens. Defaults to 0 because we can't make assumptions about a width that will work for most use cases.

responsive-panel

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
pull request

mayank99 merge to iTwin/iTwinUI-react

mayank99
mayank99

feat(InformationPanel): Add `InformationBodyContent` component for inner rows

Supports responsive layout (two columns vs one) using responsiveBreakpoint prop which allows setting the width value where the switch happens. Defaults to 0 because we can't make assumptions about a width that will work for most use cases.

responsive-panel

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
open pull request

mayank99 wants to merge iTwin/iTwinUI-react

mayank99
mayank99

feat(InformationPanel): Add `InformationBodyContent` component for inner rows

Supports responsive layout (two columns vs one) using responsiveBreakpoint prop which allows setting the width value where the switch happens. Defaults to 0 because we can't make assumptions about a width that will work for most use cases.

responsive-panel

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
pull request

mayank99 merge to iTwin/iTwinUI-react

mayank99
mayank99

feat(InformationPanel): Add `InformationBodyContent` component for inner rows

Supports responsive layout (two columns vs one) using responsiveBreakpoint prop which allows setting the width value where the switch happens. Defaults to 0 because we can't make assumptions about a width that will work for most use cases.

responsive-panel

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
push

mayank99 push iTwin/iTwinUI-react

mayank99
mayank99

feat(Table): Don't show paginator when there is only one page (#441)

Added condition to not show paginator when table has only one page.

mayank99
mayank99

Merge branch 'main' into mayank/information-body-content

mayank99
mayank99

Change prop to displayStyle

commit sha: 37fe10947bdc6cbe96720b3c440ac915ea2a6cbe

push time in 7 hours ago
Activity icon
issue

mayank99 issue comment iTwin/iTwinUI-react

mayank99
mayank99

Header thumbnail is displaying at a smaller size than expected

Describe the bug (actual behavior)

When the header is in the large size, if a thumbnail / photo is available it only displays at 16x16. Screen Shot 2021-11-29 at 9 40 11 AM

Expected behavior

When the header is in the large size, the thumbnail / photo should take the full 24x24 space. It is displaying properly in the HTML/CSS demo page. Screen Shot 2021-11-29 at 9 41 32 AM

mayank99
mayank99

Huh. This is a regression. I wonder why visual tests didn't catch that.

In CSS repo we use div with background-image but here in storybook it's using the img tag.

pull request

mayank99 merge to iTwin/iTwinUI-react

mayank99
mayank99

feat(InformationPanel): Add `InformationBodyContent` component for inner rows

Supports responsive layout (two columns vs one) using responsiveBreakpoint prop which allows setting the width value where the switch happens. Defaults to 0 because we can't make assumptions about a width that will work for most use cases.

responsive-panel

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
open pull request

mayank99 wants to merge iTwin/iTwinUI-react

mayank99
mayank99

feat(InformationPanel): Add `InformationBodyContent` component for inner rows

Supports responsive layout (two columns vs one) using responsiveBreakpoint prop which allows setting the width value where the switch happens. Defaults to 0 because we can't make assumptions about a width that will work for most use cases.

responsive-panel

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

the grid already supports pairs of any two components, but using Label gives it some extra styling

open pull request

mayank99 wants to merge iTwin/iTwinUI-react

mayank99
mayank99

feat(InformationPanel): Add `InformationBodyContent` component for inner rows

Supports responsive layout (two columns vs one) using responsiveBreakpoint prop which allows setting the width value where the switch happens. Defaults to 0 because we can't make assumptions about a width that will work for most use cases.

responsive-panel

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

we already provide color from CSS

That color is not enough because it is relying on border. This is what I had to do to make it look the same as our CSS example. image

Without those overrides, it's too thick. image

pull request

mayank99 merge to iTwin/iTwinUI-react

mayank99
mayank99

feat(InformationPanel): Add `InformationBodyContent` component for inner rows

Supports responsive layout (two columns vs one) using responsiveBreakpoint prop which allows setting the width value where the switch happens. Defaults to 0 because we can't make assumptions about a width that will work for most use cases.

responsive-panel

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
open pull request

mayank99 wants to merge iTwin/iTwinUI-react

mayank99
mayank99

feat(InformationPanel): Add `InformationBodyContent` component for inner rows

Supports responsive layout (two columns vs one) using responsiveBreakpoint prop which allows setting the width value where the switch happens. Defaults to 0 because we can't make assumptions about a width that will work for most use cases.

responsive-panel

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

It's an internal hook. Sounds like a bad idea to show it in examples.

pull request

mayank99 merge to iTwin/iTwinUI-react

mayank99
mayank99

feat(InformationPanel): Add `InformationBodyContent` component for inner rows

Supports responsive layout (two columns vs one) using responsiveBreakpoint prop which allows setting the width value where the switch happens. Defaults to 0 because we can't make assumptions about a width that will work for most use cases.

responsive-panel

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
pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

fix(Buttons): Added some flat level classes

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

fix(Buttons): Added some flat level classes

mayank99
mayank99

Are you sure? It seems to work on my end. All I did is remove margin-right: $iui-icons-large and set gap: $iui-icons-large on the parent.

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

fix(Buttons): Added some flat level classes

mayank99
mayank99

This label color can be set one level above because it gets inherited.

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

fix(Buttons): Added some flat level classes

mayank99
mayank99

Nit: this could be moved into a mixin similar to iui-button-size and included in classes.scss for consistency

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

fix(Buttons): Added some flat level classes

mayank99
mayank99

So as I was reviewing the visuals, I realized that the icon color is always the same as text color. So I think we'll be able to reduce complexity a lot just by using fill: currentColor, provided the color is set on the parent (which it should). We won't need to override the fill in various places.

pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

fix(Buttons): Added some flat level classes

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

fix(Buttons): Added some flat level classes

mayank99
mayank99

Same applies in other places (e.g. borderless.scss and disabled.scss)

open pull request

mayank99 wants to merge iTwin/iTwinUI

mayank99
mayank99

fix(Buttons): Added some flat level classes

mayank99
mayank99

This one should also not include the full mixin.

pull request

mayank99 merge to iTwin/iTwinUI

mayank99
mayank99

fix(Buttons): Added some flat level classes

Previous