<AspectRatio> applying style attributes not working

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap

https://reshaped.so

110 stars 3 forks source link

<AspectRatio> applying style attributes not working #125

Closed mmailaender closed 1 year ago

mmailaender commented 1 year ago

Applying style to attributes seems not working for <AspectRatio>. For e.g. <View> it's working

<View width="100px" height="100px">
    <AspectRatio ratio={29 / 39} attributes={{ style:{height: "100%"} }}>
        <View position={"absolute"} width="58.621%" height="87.179%">
            <Icon svg={RootLeft} size="100%" attributes={{ style:{display: "inline"} }}/>
        </View>
        <View position={"absolute"} width="41.379%" height="92.308%" >
            <Icon svg={RootMiddle} size="100%" />
        </View>
        <View position={"absolute"} width="58.621%" height="87.179%">
            <Icon svg={RootRight} size="100%" />
        </View>
    </AspectRatio>
</View>

blvdmitry commented 1 year ago

Good catch, it gets overridden by the ratio variables. I can add this for the next release.

Would it work for you if you apply height with a className instead for now?
Do you have a lot of use cases like this? Would it be easier if AspectRatio also supported width or height?

mmailaender commented 1 year ago

To be honest, it was never my plan to add their width or height explicitly. The problem: I'm working with a child element that has position: absolute with % width and height. And then the aspect ratio stops working.

If the parent Container is 100x100, I would expect an aspect ratio of 4/3 to calculate width: 100% and height: 75%. But aspect ratio is such a weak property, with too many exceptions. So it won't work like that, so I had to apply manually a height which compromise the idea of aspect ratio...

The code: If you change position={"absolute"} to position={"relative"} and remove two from three of the SVG's (If you keep all three, they will outgrow the container), then you will see, that aspect ratio is working.

'use client'
import { AspectRatio, Icon, View } from "../Reshaped/Reshaped";

const RootLeft = () => (
    <svg
        width="17"
        height="34"
        viewBox="0 0 17 34"
        fill="currentColor"
        stroke="currentColor">
        <path d="M15.5731 27.5627C15.9908 28.6745 16.3201 29.5508 16.4776 30.2092L15.2017 30.6813C10.5119 32.4168 5.56564 33.3672 0.564143 33.4942C0.721526 32.9214 1.00421 32.0652 1.33586 31.0608C1.55857 30.3863 1.80336 29.6449 2.04712 28.8775C2.69998 26.8222 3.346 24.577 3.42278 23.162C3.57302 20.3931 3.55168 17.3509 3.50452 14.5013C3.49419 13.8768 3.48263 13.2621 3.47134 12.6616C3.43096 10.5132 3.39399 8.54673 3.42861 6.96489C3.46579 5.26623 3.82844 3.82942 4.35106 2.74899C4.87898 1.65759 5.54654 0.974705 6.16301 0.702742C6.79465 0.424089 7.47952 0.403875 8.11748 0.823702C8.77839 1.25863 9.47714 2.22256 9.96805 4.11311C10.052 4.43645 10.3808 6.08008 10.845 8.40082C10.9325 8.83838 11.0248 9.30001 11.1212 9.7814C11.7258 12.7997 12.4849 16.564 13.2063 19.9428C13.7341 22.4142 14.466 24.5671 15.1127 26.3274C15.2744 26.7677 15.429 27.1792 15.5731 27.5627Z" />
    </svg>
)

const RootMiddle = () => (
    <svg
        width="21"
        height="45"
        viewBox="0 0 21 45"
        fill="currentColor"
        stroke="currentColor">
        <path d="M1.17643 43.8197L0.514681 43.8984C0.622289 43.4907 0.795664 43.0085 1.00945 42.4426C1.06166 42.3044 1.11615 42.1616 1.17228 42.0145C1.35337 41.5397 1.55145 41.0204 1.74446 40.4702C2.25157 39.0244 2.73952 37.3224 2.85637 35.4513C2.97847 33.4962 3.08464 31.3692 3.19489 29.1603C3.46591 23.7306 3.76164 17.8059 4.37947 12.7213C4.81415 9.14403 5.40381 6.02807 6.23923 3.81785C6.65728 2.71184 7.12422 1.8676 7.63656 1.30713C8.14046 0.755885 8.66623 0.500023 9.2344 0.5C10.7547 0.499939 12.0063 1.58845 13.0514 3.73069C14.0902 5.85991 14.8441 8.87994 15.4212 12.3967C16.2177 17.2507 16.6634 22.9462 17.0891 28.3861C17.2805 30.8315 17.4678 33.2252 17.6811 35.4675C17.8564 37.3097 18.4311 39.0327 19.0216 40.5634C19.1929 41.0074 19.3633 41.4306 19.5261 41.8347C19.9249 42.825 20.2777 43.7009 20.4836 44.4877C14.1146 43.2803 7.60893 43.0551 1.17643 43.8197Z" />
    </svg>
)

const RootRight = () => (
    <svg
        width="17"
        height="34"
        viewBox="0 0 17 34"
        fill="currentColor"
        stroke="currentColor">
        <path d="M1.42688 27.5627C1.00916 28.6745 0.67989 29.5508 0.522377 30.2092L1.79825 30.6813C6.48805 32.4168 11.4344 33.3672 16.4359 33.4942C16.2785 32.9214 15.9958 32.0652 15.6641 31.0608C15.4414 30.3863 15.1966 29.6449 14.9529 28.8775C14.3 26.8222 13.654 24.577 13.5772 23.162C13.427 20.3931 13.4483 17.3509 13.4955 14.5013C13.5058 13.8768 13.5174 13.2621 13.5287 12.6616C13.569 10.5132 13.606 8.54673 13.5714 6.96489C13.5342 5.26623 13.1716 3.82942 12.6489 2.74899C12.121 1.65759 11.4535 0.974705 10.837 0.702742C10.2054 0.424089 9.52048 0.403875 8.88252 0.823702C8.22161 1.25863 7.52286 2.22256 7.03195 4.11311C6.94799 4.43645 6.61924 6.08008 6.15504 8.40082C6.06752 8.83838 5.97518 9.30001 5.87877 9.7814C5.27423 12.7997 4.51511 16.564 3.79366 19.9428C3.26595 22.4142 2.53396 24.5671 1.8873 26.3274C1.72558 26.7677 1.57097 27.1792 1.42688 27.5627Z" />
    </svg>
)

export default function Tooth() {
    return (
        <View width="100px" height="100px">
            <AspectRatio ratio={29 / 39} attributes={{ style:{height: "100%"} }}>
                <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style:{left: "0", bottom: "0"} }}>
                    <Icon svg={RootLeft} size="100%" attributes={{ style:{display: "inline"} }}/>
                </View>
                <View position={"absolute"} width="41.379%" height="92.308%" attributes={{ style:{left: "50%", transform: "translate(-50%, 0px)"} }}>
                    <Icon svg={RootMiddle} size="100%" attributes={{ style:{display: "inline"} }}/>
                </View>
                <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style:{right: "0", bottom: "0"} }}>
                    <Icon svg={RootRight} size="100%" attributes={{ style:{display: "inline"} }}/>
                </View>
            </AspectRatio>
        </View>
    )
}

mmailaender commented 1 year ago

Interestingly, applying the aspectRatio through View is working like expected:

<View width="100px" height="100px">
    <View attributes={{ style: { aspectRatio: "29 / 39" } }}>
        <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style: { left: "0", bottom: "0" } }}>
            <Icon svg={RootLeft} size="100%" attributes={{ style: { display: "inline" } }} />
        </View>
        <View position={"absolute"} width="41.379%" height="92.308%" attributes={{ style: { left: "50%", transform: "translate(-50%, 0px)", top: "0" } }}>
            <Icon svg={RootMiddle} size="100%" attributes={{ style: { display: "inline" } }} />
        </View>
        <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style: { right: "0", bottom: "0" } }}>
            <Icon svg={RootRight} size="100%" attributes={{ style: { display: "inline" } }} />
        </View>
    </View>
</View>

mmailaender commented 1 year ago

Finished the exercise - SVGs composed with Reshaped (But used style)

In our use case, I need e.g. aspectRatio together with maxHeight and maxWidth that the composed SVGs not outgrow the parent.

So eventually it would make more sense to provide aspectRatio directly in View

'use client'
import { AspectRatio, Icon, View } from "../Reshaped/Reshaped";

const RootLeft = () => (
    <svg
    width="17"
    height="34"
    viewBox="0 0 17 34"
    fill="currentColor"
    stroke="#A7BBDF">
    <path d="M16.4776 30.2092L15.2017 30.6813C10.5119 32.4168 5.56564 33.3672 0.564143 33.4942C0.721526 32.9214 1.00421 32.0652 1.33586 31.0608C1.55857 30.3863 1.80336 29.6449 2.04712 28.8775C2.69998 26.8222 3.346 24.577 3.42278 23.162C3.57302 20.3931 3.55168 17.3509 3.50452 14.5013C3.49419 13.8768 3.48263 13.2621 3.47134 12.6616C3.43096 10.5132 3.39399 8.54673 3.42861 6.96489C3.46579 5.26623 3.82844 3.82942 4.35106 2.74899C4.87898 1.65759 5.54654 0.974705 6.16301 0.702742C6.79465 0.424089 7.47952 0.403875 8.11748 0.823702C8.77839 1.25863 9.47714 2.22256 9.96805 4.11311C10.052 4.43645 10.3808 6.08008 10.845 8.40082C10.9325 8.83838 11.0248 9.30001 11.1212 9.7814C11.7258 12.7997 12.4849 16.564 13.2063 19.9428C13.7341 22.4142 14.466 24.5671 15.1127 26.3274C15.2744 26.7677 15.429 27.1792 15.5731 27.5627C15.9908 28.6745 16.3201 29.5508 16.4776 30.2092Z"/>
    </svg>
)

const RootMiddle = () => (
    <svg
    width="13"
    height="36"
    viewBox="0 0 13 36"
    fill="currentColor"
    stroke="#A7BBDF">
    <path d="M1.45508 35.2794L1.00053 35.3112C1.06108 33.7937 1.20542 28.7387 1.35855 23.3758C1.38417 22.4786 1.41004 21.5727 1.4358 20.6734C1.61668 14.3586 1.79153 8.40701 1.83961 7.92451C2.05992 5.71375 2.39392 3.8298 3.0719 2.50608C3.40635 1.85308 3.81422 1.35782 4.31451 1.02424C4.81104 0.693156 5.43033 0.500019 6.22623 0.5C7.24271 0.499976 7.96301 0.6818 8.49392 0.987804C9.01899 1.29045 9.40221 1.73952 9.70331 2.355C10.009 2.97979 10.2236 3.76299 10.4101 4.71333C10.5428 5.38967 10.6572 6.12684 10.7823 6.93276C10.8333 7.26161 10.8861 7.60191 10.9427 7.95419L10.9427 7.95443C10.9427 7.95444 10.9427 7.95444 10.9428 7.95489L10.9431 7.95688L10.944 7.96411L10.9469 7.98899C10.949 8.00996 10.9515 8.0371 10.9543 8.07092C10.9598 8.13859 10.966 8.22747 10.9727 8.33737C10.9861 8.55692 11.0015 8.85305 11.0184 9.21678C11.0523 9.94384 11.0924 10.9342 11.1369 12.1082C11.2258 14.4558 11.332 17.5323 11.4406 20.6932C11.4495 20.9511 11.4583 21.2096 11.4672 21.4683C11.6752 27.5285 11.8877 33.7168 11.9992 35.494C11.9987 35.4946 11.9981 35.4952 11.9975 35.4958C11.9961 35.4971 11.9947 35.4982 11.9934 35.4991C8.49461 35.1075 4.96728 35.0339 1.45508 35.2794Z"/>
    </svg>
)

const RootRight = () => (
    <svg
    width="17"
    height="34"
    viewBox="0 0 17 34"
    fill="currentColor"
    stroke="#A7BBDF">
    <path d="M0.522377 30.2092L1.79825 30.6813C6.48805 32.4168 11.4344 33.3672 16.4359 33.4942C16.2785 32.9214 15.9958 32.0652 15.6641 31.0608C15.4414 30.3863 15.1966 29.6449 14.9529 28.8775C14.3 26.8222 13.654 24.577 13.5772 23.162C13.427 20.3931 13.4483 17.3509 13.4955 14.5013C13.5058 13.8768 13.5174 13.2621 13.5287 12.6616C13.569 10.5132 13.606 8.54673 13.5714 6.96489C13.5342 5.26623 13.1716 3.82942 12.6489 2.74899C12.121 1.65759 11.4535 0.974705 10.837 0.702742C10.2054 0.424089 9.52048 0.403875 8.88252 0.823702C8.22161 1.25863 7.52286 2.22256 7.03195 4.11311C6.94799 4.43645 6.61924 6.08008 6.15504 8.40082C6.06752 8.83838 5.97518 9.30001 5.87877 9.7814C5.27423 12.7997 4.51511 16.564 3.79366 19.9428C3.26595 22.4142 2.53396 24.5671 1.8873 26.3274C1.72558 26.7677 1.57097 27.1792 1.42688 27.5627C1.00916 28.6745 0.67989 29.5508 0.522377 30.2092Z"/>
    </svg>
)

export default function Tooth() {
    return (
        <View width="100px" height="100px">
            <View maxHeight="100%" maxWidth="100%" attributes={{ style: { aspectRatio: "29 / 39" } }}>
                <View position={"absolute"} width="41.379%" height="92.308%" attributes={{ style: { left: "50%", transform: "translate(-50%, 0px)", top: "0" } }}>
                    <Icon svg={RootMiddle} size="100%" attributes={{ style: { display: "inline" } }} />
                </View>
                <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style: { left: "0", bottom: "0" } }}>
                    <Icon svg={RootLeft} size="100%" attributes={{ style: { display: "inline" } }} />
                </View>
                <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style: { right: "0", bottom: "0" } }}>
                    <Icon svg={RootRight} size="100%" attributes={{ style: { display: "inline" } }} />
                </View>
            </View>
        </View>
    )
}

mmailaender commented 1 year ago

Also, something that feels quite unintuitive for people that learn CSS:

Given a Parent height: "1000px" and width: "100px", the child is not outgrowing the parent

<View width="100px" height="1000px">
    <View attributes={{ style: { aspectRatio: "29 / 39" } }}>
        <View position={"absolute"} width="41.379%" height="92.308%" attributes={{ style: { left: "50%", transform: "translate(-50%, 0px)", top: "0" } }}>
            <Icon svg={RootMiddle} size="100%" attributes={{ style: { display: "inline" } }} />
        </View>
        <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style: { left: "0", bottom: "0" } }}>
            <Icon svg={RootLeft} size="100%" attributes={{ style: { display: "inline" } }} />
        </View>
        <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style: { right: "0", bottom: "0" } }}>
            <Icon svg={RootRight} size="100%" attributes={{ style: { display: "inline" } }} />
        </View>
    </View>
</View>

Given a Parent height of 100px and width of 400px, the child is outgrowing the parent

<View width="400px" height="100px">
    <View attributes={{ style: { aspectRatio: "29 / 39" } }}>
        <View position={"absolute"} width="41.379%" height="92.308%" attributes={{ style: { left: "50%", transform: "translate(-50%, 0px)", top: "0" } }}>
            <Icon svg={RootMiddle} size="100%" attributes={{ style: { display: "inline" } }} />
        </View>
        <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style: { left: "0", bottom: "0" } }}>
            <Icon svg={RootLeft} size="100%" attributes={{ style: { display: "inline" } }} />
        </View>
        <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style: { right: "0", bottom: "0" } }}>
            <Icon svg={RootRight} size="100%" attributes={{ style: { display: "inline" } }} />
        </View>
    </View>
</View>

So the default is, that a child is only outgrowing the parent's height, but not the width. I assume because width has a higher priority than height, it will be calculated first?! Maybe there is a way to make that mid-/long-term more consistent/intuitve 🤔

blvdmitry commented 1 year ago

Thanks for these posts, I'll take a full read today to see how we can improve this experience in the upcoming release 🙏🏼

blvdmitry commented 1 year ago

So looking at the examples, I've made some notes:

Original example wasn't working because of the style attribute override inside the component
Second example became weird since each child View has position="absolute". That makes aspect ratio behave weird once you try using width and height on Views, since its height is 0 and AspectRatio has position: relative used in the component styles
After trying all the options – I think the best fix could be just adding aspectRatio property to View, like you've suggested. It should add just one additional condition to the component runtime and all styles will be applied with a separate className anyways.

Also one thing this pushes me to solve in the future is how to eventually reduce the logic built into View. A lot of it are utilities that are currently not excluded from the bundle when not used. They're not causing any performance issues right now but the more this case repeats and the more functionality coming built into View – the more benefits we'll get from improving it. It's kind of similar to Tailwind before and after JIT

blvdmitry commented 1 year ago

So I've got to this composition after trying the new aspectRatio prop:

<View width="100px" height="100px">
    <View
        position={"absolute"}
        width="58.621%"
        aspectRatio={29 / 39}
        insetStart={0}
        insetBottom={0}
    >
        <Icon svg={RootLeft} size="100%" />
    </View>
    <View
        position={"absolute"}
        width="41.379%"
        aspectRatio={22 / 39}
        attributes={{ style: { left: "50%", transform: "translate(-50%, 0px)" } }}
    >
        <Icon svg={RootMiddle} size="100%" />
    </View>
    <View
        position={"absolute"}
        width="58.621%"
        aspectRatio={29 / 39}
        insetEnd={0}
        insetBottom={0}
    >
        <Icon svg={RootRight} size="100%" />
    </View>
</View>

Does this look like what you're trying to achieve?

mmailaender commented 1 year ago

The first look seems good. Could you also test the following code? It should look optical the same as the picture that you shared:

<View width="100px" height="1000px">
  <View aspectRatio={29 / 39}>
    <View
      position={"absolute"}
      width="41.379%"
      attributes={{
        style: { left: "50%", transform: "translate(-50%, 0px)", top: "0" },
      }}
    >
      <Icon svg={RootMiddle} size="100%" />
    </View>
    <View
      position={"absolute"}
      width="58.621%"
      aspectRatio={29 / 39}
      insetStart={0}
      insetBottom={0}
    >
      <Icon svg={RootLeft} size="100%" />
    </View>
    <View
      position={"absolute"}
      width="58.621%"
      aspectRatio={29 / 39}
      insetEnd={0}
      insetBottom={0}
    >
      <Icon svg={RootRight} size="100%" />
    </View>
  </View>
</View>;

<View width="400px" height="100px">
  <View aspectRatio={29 / 39}>
    <View
      position={"absolute"}
      width="41.379%"
      attributes={{
        style: { left: "50%", transform: "translate(-50%, 0px)", top: "0" },
      }}
    >
      <Icon svg={RootMiddle} size="100%" />
    </View>
    <View
      position={"absolute"}
      width="58.621%"
      aspectRatio={29 / 39}
      insetStart={0}
      insetBottom={0}
    >
      <Icon svg={RootLeft} size="100%" />
    </View>
    <View
      position={"absolute"}
      width="58.621%"
      aspectRatio={29 / 39}
      insetEnd={0}
      insetBottom={0}
    >
      <Icon svg={RootRight} size="100%" />
    </View>
  </View>
</View>;

blvdmitry commented 1 year ago

Looks right with your code snippets, with the only addition of autoWidth to the middle part since by default icons have a square bounding box:

blvdmitry commented 1 year ago

<View width="100px" height="1000px">
            <View aspectRatio={29 / 39}>
                <View
                    position={"absolute"}
                    width="41.379%"
                    attributes={{
                        style: { left: "50%", transform: "translate(-50%, 0px)", top: "0" },
                    }}
                >
                    <Icon svg={RootMiddle} size="100%" autoWidth />
                </View>
                <View
                    position={"absolute"}
                    width="58.621%"
                    aspectRatio={29 / 39}
                    insetStart={0}
                    insetBottom={0}
                >
                    <Icon svg={RootLeft} size="100%" />
                </View>
                <View
                    position={"absolute"}
                    width="58.621%"
                    aspectRatio={29 / 39}
                    insetEnd={0}
                    insetBottom={0}
                >
                    <Icon svg={RootRight} size="100%" />
                </View>
            </View>
        </View>

mmailaender commented 1 year ago

I'm not entirely sure if I understand the need of autoWidth. In my examples above, I was able to compose it without autoWidth. Could it be because you're applying aspectRatio directly to the View wrapping RootLeft & RootRight Icon? Is the following working?

<View width="100px" height="1000px">
  <View aspectRatio={29 / 39}>
    <View
      position={"absolute"}
      width="41.379%"
      height="92.308%"
      attributes={{
        style: { left: "50%", transform: "translate(-50%, 0px)", top: "0" },
      }}
    >
      <Icon svg={RootMiddle} size="100%"/>
    </View>
    <View
      position={"absolute"}
      width="58.621%"
      height="87.179%"
      insetStart={0}
      insetBottom={0}
    >
      <Icon svg={RootLeft} size="100%" />
    </View>
    <View
      position={"absolute"}
      width="58.621%"
      height="87.179%"
      insetEnd={0}
      insetBottom={0}
    >
      <Icon svg={RootRight} size="100%" />
    </View>
  </View>
</View>;

blvdmitry commented 1 year ago

Something like this happens and there are 2 things that cause issues in this examples:

I've removed height from the children views because when you define both width and height – aspect ratio doesn't play a big role anymore. And since views have position absolute, their parent view has a height of 0, so height 87% also equals to 0.
You can see the middle icon not being centered. That's because the view has specific proportions defined, but Icon inside takes a 1:1 ratio by default. We do that since in most of the cases we want icons to be aligned in lists which is a more typical case and size="100%" only stretches the icon based on the height. Adding autoWidth prop to them, solves this edge case.

<View width="100px" height="1000px">
        <View aspectRatio={29 / 39}>
            <View
                position={"absolute"}
                width="41.379%"
                attributes={{
                    style: { left: "50%", transform: "translate(-50%, 0px)", top: "0" },
                }}
            >
                <Icon svg={RootMiddle} size="100%" autoWidth />
            </View>
            <View position={"absolute"} width="58.621%" insetStart={0} insetBottom={0}>
                <Icon svg={RootLeft} size="100%" autoWidth />
            </View>
            <View position={"absolute"} width="58.621%" insetEnd={0} insetBottom={0}>
                <Icon svg={RootRight} size="100%" autoWidth />
            </View>
        </View>
    </View>

blvdmitry commented 1 year ago

Going to close this one since it's been implemented for the coming release, feel free to reopen if you have any further questions

mmailaender commented 1 year ago

@blvdmitry It seems the new aspectRatio prop is working differently from the CSS base one (Or it's eventually not working overall?):

With style: { aspectRatio: "29 / 39"} <View maxHeight="100%" maxWidth="100%" attributes={{ style: { aspectRatio: "29 / 39" } }}>

With aspectRatio={29 / 39} <View maxHeight="100%" maxWidth="100%" aspectRatio={29 / 39} > *The picture is empty

Also, insetBottom seems not working:

With insetBottom <View position={"absolute"} width="58.621%" height="87.179%" insetStart={0} insetBottom={0}>

With 'bottom: "0"' <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style: { left: "0", bottom: "0" } }}>

I've tested it also in the docs https://reshaped.so/content/docs/utilities/view#position-properties, and there it's also not working:

Whole code:

'use client'

import { Icon, View } from "reshaped"

const RootLeft = () => (
    <svg
    width="17"
    height="34"
    viewBox="0 0 17 34"
    fill="currentColor"
    stroke="#A7BBDF">
    <path d="M16.4776 30.2092L15.2017 30.6813C10.5119 32.4168 5.56564 33.3672 0.564143 33.4942C0.721526 32.9214 1.00421 32.0652 1.33586 31.0608C1.55857 30.3863 1.80336 29.6449 2.04712 28.8775C2.69998 26.8222 3.346 24.577 3.42278 23.162C3.57302 20.3931 3.55168 17.3509 3.50452 14.5013C3.49419 13.8768 3.48263 13.2621 3.47134 12.6616C3.43096 10.5132 3.39399 8.54673 3.42861 6.96489C3.46579 5.26623 3.82844 3.82942 4.35106 2.74899C4.87898 1.65759 5.54654 0.974705 6.16301 0.702742C6.79465 0.424089 7.47952 0.403875 8.11748 0.823702C8.77839 1.25863 9.47714 2.22256 9.96805 4.11311C10.052 4.43645 10.3808 6.08008 10.845 8.40082C10.9325 8.83838 11.0248 9.30001 11.1212 9.7814C11.7258 12.7997 12.4849 16.564 13.2063 19.9428C13.7341 22.4142 14.466 24.5671 15.1127 26.3274C15.2744 26.7677 15.429 27.1792 15.5731 27.5627C15.9908 28.6745 16.3201 29.5508 16.4776 30.2092Z"/>
    </svg>
)

const RootMiddle = () => (
    <svg
    width="13"
    height="36"
    viewBox="0 0 13 36"
    fill="currentColor"
    stroke="#A7BBDF">
    <path d="M1.45508 35.2794L1.00053 35.3112C1.06108 33.7937 1.20542 28.7387 1.35855 23.3758C1.38417 22.4786 1.41004 21.5727 1.4358 20.6734C1.61668 14.3586 1.79153 8.40701 1.83961 7.92451C2.05992 5.71375 2.39392 3.8298 3.0719 2.50608C3.40635 1.85308 3.81422 1.35782 4.31451 1.02424C4.81104 0.693156 5.43033 0.500019 6.22623 0.5C7.24271 0.499976 7.96301 0.6818 8.49392 0.987804C9.01899 1.29045 9.40221 1.73952 9.70331 2.355C10.009 2.97979 10.2236 3.76299 10.4101 4.71333C10.5428 5.38967 10.6572 6.12684 10.7823 6.93276C10.8333 7.26161 10.8861 7.60191 10.9427 7.95419L10.9427 7.95443C10.9427 7.95444 10.9427 7.95444 10.9428 7.95489L10.9431 7.95688L10.944 7.96411L10.9469 7.98899C10.949 8.00996 10.9515 8.0371 10.9543 8.07092C10.9598 8.13859 10.966 8.22747 10.9727 8.33737C10.9861 8.55692 11.0015 8.85305 11.0184 9.21678C11.0523 9.94384 11.0924 10.9342 11.1369 12.1082C11.2258 14.4558 11.332 17.5323 11.4406 20.6932C11.4495 20.9511 11.4583 21.2096 11.4672 21.4683C11.6752 27.5285 11.8877 33.7168 11.9992 35.494C11.9987 35.4946 11.9981 35.4952 11.9975 35.4958C11.9961 35.4971 11.9947 35.4982 11.9934 35.4991C8.49461 35.1075 4.96728 35.0339 1.45508 35.2794Z"/>
    </svg>
)

const RootRight = () => (
    <svg
    width="17"
    height="34"
    viewBox="0 0 17 34"
    fill="currentColor"
    stroke="#A7BBDF">
    <path d="M0.522377 30.2092L1.79825 30.6813C6.48805 32.4168 11.4344 33.3672 16.4359 33.4942C16.2785 32.9214 15.9958 32.0652 15.6641 31.0608C15.4414 30.3863 15.1966 29.6449 14.9529 28.8775C14.3 26.8222 13.654 24.577 13.5772 23.162C13.427 20.3931 13.4483 17.3509 13.4955 14.5013C13.5058 13.8768 13.5174 13.2621 13.5287 12.6616C13.569 10.5132 13.606 8.54673 13.5714 6.96489C13.5342 5.26623 13.1716 3.82942 12.6489 2.74899C12.121 1.65759 11.4535 0.974705 10.837 0.702742C10.2054 0.424089 9.52048 0.403875 8.88252 0.823702C8.22161 1.25863 7.52286 2.22256 7.03195 4.11311C6.94799 4.43645 6.61924 6.08008 6.15504 8.40082C6.06752 8.83838 5.97518 9.30001 5.87877 9.7814C5.27423 12.7997 4.51511 16.564 3.79366 19.9428C3.26595 22.4142 2.53396 24.5671 1.8873 26.3274C1.72558 26.7677 1.57097 27.1792 1.42688 27.5627C1.00916 28.6745 0.67989 29.5508 0.522377 30.2092Z"/>
    </svg>
)

export default function Tooth() {
    return (
        <View width="100px" height="100px">
            <View maxHeight="100%" maxWidth="100%" attributes={{ style: { aspectRatio: "29 / 39" } }}>
                <View position={"absolute"} width="41.379%" height="92.308%" attributes={{ style: { left: "50%", transform: "translate(-50%, 0px)", top: "0" } }}>
                    <Icon svg={RootMiddle} size="100%" attributes={{ style: { display: "inline" } }} />
                </View>
                <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style: { left: "0", bottom: "0" } }}>
                    <Icon svg={RootLeft} size="100%" attributes={{ style: { display: "inline" } }} />
                </View>
                <View position={"absolute"} width="58.621%" height="87.179%" attributes={{ style: { right: "0", bottom: "0" } }}>
                    <Icon svg={RootRight} size="100%" attributes={{ style: { display: "inline" } }} />
                </View>
            </View>
        </View>
    )
}

blvdmitry commented 1 year ago

Fixed the insetBottom one, as for the other one – copying this from Discord to keep the context:

"So the difference between these two is that when you apply aspect ratio style to the view as an inline style - it only applies aspect ratio to the view itself and not to its children. I see why in your case you're trying to use it this way and with the aspectRatio prop it behaves differently because it tries to make its children to use the aspectRatio instead"

blvdmitry commented 1 year ago

Closing this one for house keeping as the original issue and the follow-ups were resolved or explained