S-button's inlineSize property is missing from @shopify/polaris-types

Polaris
1

I just found out that <s-button inlineSize="fill"> exists, but it is neither documented nor in @shopify/polaris-types. I really need that for nice big buttons on a pricing page. Guess I try to hack it in via a types.d.ts for now.

2 Likes
2

Yeah, I can’t figure out how to hack the types. :frowning:

4

Perhaps the best approach for you now would be to use // @ts-expect-error for the time being, such that you’re notified as to when it gets updated.

https://www.npmjs.com/package/@shopify/polaris-types - it looks like there hasn’t been an update to the types library for 2 months, so I’m not surprised there are some out of sync things.

1 Like
5

My current hack: <s-button {...{inlineSize: "fill"} as any}>

But I hoped to do some types.d.ts trickery for that, but that doesn’t seem to be possible.

1 Like
6

Initially, I was using // @ts-expect-error but then came up with this global approach to avoid inline ignores.

polaris-types.d.ts

import '@shopify/polaris-types';

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      's-button': IntrinsicElements['s-button'] & {
        inlineSize?: 'auto' | 'fill' | 'fit-content';
      };
    }
  }
}
7

@junaidkbr This will make s-button type as any, so it will never complain about anything.

8

@Sam_Smith Yes, I realized this when reviewing the code at a later time.