Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Box - Use logical property names for border radius #10064

Closed
Tracked by #9914
kyledurand opened this issue Aug 15, 2023 · 0 comments
Closed
Tracked by #9914

Box - Use logical property names for border radius #10064

kyledurand opened this issue Aug 15, 2023 · 0 comments
Assignees
@kyledurand
Labels
#gsd:36573 Polaris API Alignment

Comments

@kyledurand
Copy link
Contributor

kyledurand commented Aug 15, 2023 •
edited
Loading

i.e. borderRadiusStartStart becomes borderStartStartRadius

This matches the web standard
@kyledurand kyledurand mentioned this issue Aug 15, 2023
Closed
@kyledurand kyledurand added #gsd:36573 Polaris API Alignment and removed untriaged labels Aug 15, 2023
@kyledurand kyledurand self-assigned this Aug 15, 2023
@kyledurand kyledurand mentioned this issue Aug 17, 2023
Merged
kyledurand added a commit that referenced this issue Aug 17, 2023
@kyledurand
[Box] Update border radius props to match web spec (#10100)
4c7b2d4 
### WHY are these changes introduced?

Fixes #10064

<details>
  <summary>Playground</summary>

```jsx
import React from 'react';

import {Box, Page, VerticalStack} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
      <VerticalStack gap="3">
        <Box padding="3" background="bg-caution" borderRadius="3">
          control{' '}
        </Box>
        <Box padding="3" background="bg-caution" borderStartStartRadius="3">
          border start start radius
        </Box>

        <Box padding="3" background="bg-caution" borderStartEndRadius="3">
          border start end radius
        </Box>

        <Box padding="3" background="bg-caution" borderEndStartRadius="3">
          border end start radius
        </Box>

        <Box padding="3" background="bg-caution" borderEndEndRadius="3">
          border end end radius
        </Box>
      </VerticalStack>
    </Page>
  );
}

```
</details>
kyledurand added a commit that referenced this issue Aug 17, 2023
@kyledurand
[Box] Update border radius props to match web spec (#10100)
8fdb790 
### WHY are these changes introduced?

Fixes #10064

<details>
  <summary>Playground</summary>

```jsx
import React from 'react';

import {Box, Page, VerticalStack} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
      <VerticalStack gap="3">
        <Box padding="3" background="bg-caution" borderRadius="3">
          control{' '}
        </Box>
        <Box padding="3" background="bg-caution" borderStartStartRadius="3">
          border start start radius
        </Box>

        <Box padding="3" background="bg-caution" borderStartEndRadius="3">
          border start end radius
        </Box>

        <Box padding="3" background="bg-caution" borderEndStartRadius="3">
          border end start radius
        </Box>

        <Box padding="3" background="bg-caution" borderEndEndRadius="3">
          border end end radius
        </Box>
      </VerticalStack>
    </Page>
  );
}

```
</details>
sophschneider pushed a commit that referenced this issue Sep 19, 2023
@kyledurand @sophschneider
[Box] Update border radius props to match web spec (#10100)
a7a1747 
### WHY are these changes introduced?

Fixes #10064

<details>
  <summary>Playground</summary>

```jsx
import React from 'react';

import {Box, Page, VerticalStack} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
      <VerticalStack gap="3">
        <Box padding="3" background="bg-caution" borderRadius="3">
          control{' '}
        </Box>
        <Box padding="3" background="bg-caution" borderStartStartRadius="3">
          border start start radius
        </Box>

        <Box padding="3" background="bg-caution" borderStartEndRadius="3">
          border start end radius
        </Box>

        <Box padding="3" background="bg-caution" borderEndStartRadius="3">
          border end start radius
        </Box>

        <Box padding="3" background="bg-caution" borderEndEndRadius="3">
          border end end radius
        </Box>
      </VerticalStack>
    </Page>
  );
}

```
</details>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kyledurand kyledurand

Labels
#gsd:36573 Polaris API Alignment
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@kyledurand