Unpacking a themeBorderRadius?

Elements
1

@ben I’m trying to figure out if it is possible to get at the individual radii from a themeBorderRadius?

Would this have to be done in the hooks.js file in a custom component?

2

do you want the individual class names or the underlying values?

if you need the underlying values Elements offers a responsiveProps object that returns the non-formatted values for the control. Is that what you’re after? :slight_smile:

3

@ben Maybe I should explain what I’m trying to accomplish.

I have a custom component that allows the border radius to be set for the component. But within the component, I have a section where I need to duplicate just the bottom left and right radii so that the rendering can match that of the component.

So I have a borderRadius that I want to unpack just the two bottom radii from, so I can always match the settings for the component. I planned to do this in the hooks file and then just pass out those two values.

Does this make sense?

4

So you have two options:

  1. Use the responsiveProps object and manually build out the tailwind classes in the hooks.js
  2. Write a short javascript function in hooks.js to extract the appropriate classnames you need, like so:
function extractBottomRadiusClasses(twClasses) {
  const tokens = twClasses.split(/\s+/);

  // Matches:
  // rounded-bl, rounded-br
  // sm:rounded-bl-lg, md:rounded-br-xl, etc.
  const regex = /^(?:[a-z]+:)*rounded-b[lr](?:-.+)?$/;

  return tokens.filter(cls => regex.test(cls));
}

const bottomBorderRadiusClasses = extractBottomRadiusClasses(rw.props.borderRadius);
// → ["sm:rounded-bl-lg", "md:rounded-br-xl", "xl:rounded-br"]
5

@ben Awesome, that gets the correct classes, but for some reason, in the HTML, when I apply the result, nothing happens.

This is what the code looks like in the HTML.

<div class="w-full h-auto mt-0 {{bottomBorderRadiusClasses}} bg-black-500">

I’m sure there is something I’m doing wrong, but not sure what that might be.

6

Did you return it in setProps?
In case you are unaware, rw.setProps is where you return the objects / strings / values you have created to make them available in your html.

rw.setProps({
	bottomBorderRadiusClasses,
	node: rw.node
});

Alternatively, you may just need to add a new instance of the component to the page.

If you are trying to add this code after the fact and testing with an instance already in the page, bottomBorderRadiusClasses will return empty {}

7

@Doobox Hi Gary, yes, I am passing it through with SetProps, and I have some console logging that shows the correct values are being passed out. But the classes are not being applied. I have tried it on both a new and an existing instance.

8

Change this line :index_pointing_up:

to this :backhand_index_pointing_down:

const bottomBorderRadiusClasses = extractBottomRadiusClasses(rw.props.borderRadius).join(" ");

Just so you know, it was still an array, so that turns it into a string.

9

@Doobox Gary, you are a champion. That fixed the problem. I should have noticed when it was displayed in the console that it was an array.

All good now, problem finally solved. Phew!

1 Like
10

ahh yes, thanks @Doobox — I should have returned a string, rather than an array, from the extractBottomRadiusClasses method.

Glad you got it sorted :slight_smile:

3 Likes
11

and this is one of the reasons why Gary is very crucial to our community.

1 Like