Skip to content

Commit 138527e

Browse files
majornistamajornista
authored
Merge branch 'main' into 1999
2 parents 8ba86d8 + 769a91a commit 138527e

File tree

18 files changed

+557
-26
lines changed

18 files changed

+557
-26
lines changed

‎packages/@adobe/spectrum-css-temp/components/label/index.css renamed to ‎packages/@adobe/spectrum-css-temp/components/badge/index.css

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ governing permissions and limitations under the License.
1212

1313
@import '../commons/index.css';
1414

15-
.spectrum-Label {
16-
display: inline-block;
15+
.spectrum-Badge {
16+
display: inline-flex;
1717
position: relative;
1818

19-
width: auto;
19+
width: fit-content;
2020

21-
padding: var(--spectrum-global-dimension-size-50) var(--spectrum-global-dimension-size-125);
21+
padding: var(--spectrum-global-dimension-size-50) 0;
2222

2323
border-radius: var(--spectrum-border-radius);
2424

@@ -30,14 +30,42 @@ governing permissions and limitations under the License.
3030
-webkit-font-smoothing: subpixel-antialiased;
3131
-moz-osx-font-smoothing: auto;
3232
font-smoothing: subpixel-antialiased;
33+
34+
/* label should always have padding at the end */
35+
.spectrum-Badge-label {
36+
padding-inline-end: var(--spectrum-global-dimension-size-115);
37+
}
38+
39+
.spectrum-Badge-icon {
40+
padding-inline-start: var(--spectrum-global-dimension-size-115);
41+
}
42+
/* icon + text buttons should have padding between the text and icon no matter the order */
43+
.spectrum-Badge-icon + .spectrum-Badge-label {
44+
padding-inline-start: var(--spectrum-global-dimension-size-65);
45+
}
46+
47+
.spectrum-Badge-label:not([hidden]) + .spectrum-Badge-icon {
48+
padding-inline-end: var(--spectrum-global-dimension-size-115);
49+
}
50+
51+
/* text only buttons should have padding at the start */
52+
.spectrum-Badge-label:only-child {
53+
padding-inline-start: var(--spectrum-global-dimension-size-115);
54+
}
55+
56+
/* icon only buttons should have padding at the end */
57+
.spectrum-Badge-icon:only-child {
58+
padding-inline-start: var(--spectrum-global-dimension-size-50);
59+
padding-inline-end: var(--spectrum-global-dimension-size-50);
60+
}
3361
}
3462

35-
.spectrum-Label--large {
63+
.spectrum-Badge--large {
3664
font-size: var(--spectrum-global-dimension-size-175);
3765
padding: var(--spectrum-global-dimension-size-100) var(--spectrum-global-dimension-size-150);
3866
}
3967

40-
.spectrum-Label--small {
68+
.spectrum-Badge--small {
4169
font-size: var(--spectrum-global-dimension-font-size-50);
4270
padding: var(--spectrum-global-dimension-size-40) var(--spectrum-global-dimension-size-85);
4371
}

‎packages/@adobe/spectrum-css-temp/components/label/skin.css renamed to ‎packages/@adobe/spectrum-css-temp/components/badge/skin.css

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,41 +10,49 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13-
.spectrum-Label {
13+
.spectrum-Badge {
1414
color: var(--spectrum-label-colored-text-color);
1515
}
1616

17-
.spectrum-Label--inactive,
18-
.spectrum-Label--grey {
17+
.spectrum-Badge--neutral {
1918
background-color: var(--spectrum-label-colored-gray-background-color);
2019
}
2120

22-
.spectrum-Label--red {
21+
.spectrum-Badge--negative {
2322
background-color: var(--spectrum-label-colored-red-background-color);
2423
}
2524

26-
.spectrum-Label--orange, .spectrum-Label--or {
27-
background-color: var(--spectrum-label-colored-orange-background-color);
28-
}
29-
30-
.spectrum-Label--yellow {
25+
.spectrum-Badge--yellow {
26+
color: var(--spectrum-global-color-static-black);
3127
background-color: var(--spectrum-label-colored-yellow-background-color);
3228
}
3329

34-
.spectrum-Label--seafoam {
30+
.spectrum-Badge--seafoam {
3531
background-color: var(--spectrum-label-colored-seafoam-background-color);
3632
}
3733

38-
.spectrum-Label--green {
34+
.spectrum-Badge--positive {
3935
/* this color is not accessible in dark mode */
4036
/* background-color: var(--spectrum-label-colored-green-background-color); */
4137
background-color: var(--spectrum-global-color-static-green-700);
4238
}
4339

44-
.spectrum-Label--blue, .spectrum-Label--active, .spectrum-Label--and {
40+
.spectrum-Badge--info {
4541
background-color: var(--spectrum-label-colored-blue-background-color);
4642
}
4743

48-
.spectrum-Label--fuchsia {
44+
.spectrum-Badge--fuchsia {
4945
background-color: var(--spectrum-label-colored-fuchsia-background-color);
5046
}
47+
48+
.spectrum-Badge--indigo {
49+
background-color: var(--spectrum-global-color-indigo-400);
50+
}
51+
52+
.spectrum-Badge--magenta {
53+
background-color: var(--spectrum-global-color-magenta-400);
54+
}
55+
56+
.spectrum-Badge--purple {
57+
background-color: var(--spectrum-global-color-purple-400);
58+
}

‎packages/@adobe/spectrum-css-temp/components/label/vars.css renamed to ‎packages/@adobe/spectrum-css-temp/components/badge/vars.css

File renamed without changes.

‎packages/@react-spectrum/badge/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# @react-spectrum/badge
2+
3+
This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

‎packages/@react-spectrum/badge/chromatic/Badge.chromatic.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/*
2+
* Copyright 2022 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Badge} from '../';
14+
import CheckmarkCircle from '@spectrum-icons/workflow/src/CheckmarkCircle';
15+
import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
16+
import {Flex} from '@react-spectrum/layout';
17+
import React from 'react';
18+
import {SpectrumBadgeProps} from '@react-types/badge';
19+
import {Text} from '@react-spectrum/text';
20+
21+
let variants: SpectrumBadgeProps['variant'][] =
22+
['positive', 'info', 'negative', 'neutral', 'yellow', 'fuchsia', 'indigo', 'seafoam', 'magenta', 'purple'];
23+
24+
type BadgeStory = ComponentStoryObj<typeof Badge>;
25+
26+
export default {
27+
title: 'Badge',
28+
component: Badge
29+
} as ComponentMeta<typeof Badge>;
30+
31+
const renderVariants = (args) => (
32+
<Flex wrap gap={8}>
33+
{variants.map((variant) => <Badge {...args} variant={variant} />)}
34+
</Flex>
35+
);
36+
37+
export const TextOnly: BadgeStory = {
38+
args: {children: 'Badge text'},
39+
render: renderVariants
40+
};
41+
42+
export const IconOnly: BadgeStory = {
43+
args: {children: <CheckmarkCircle />},
44+
render: renderVariants
45+
};
46+
47+
export const IconText: BadgeStory = {
48+
name: 'Icon & text',
49+
args: {children: <><CheckmarkCircle /><Text>Badge text</Text></>},
50+
render: renderVariants
51+
};

‎packages/@react-spectrum/badge/docs/Badge.mdx

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
{/* Copyright 2022 Adobe. All rights reserved.
2+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
3+
you may not use this file except in compliance with the License. You may obtain a copy
4+
of the License at http://www.apache.org/licenses/LICENSE-2.0
5+
Unless required by applicable law or agreed to in writing, software distributed under
6+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
7+
OF ANY KIND, either express or implied. See the License for the specific language
8+
governing permissions and limitations under the License. */}
9+
10+
import {Layout} from '@react-spectrum/docs';
11+
export default Layout;
12+
13+
import docs from 'docs:@react-spectrum/badge';
14+
import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
15+
import packageData from '@react-spectrum/badge/package.json';
16+
17+
```jsx import
18+
import {Badge} from '@react-spectrum/badge';
19+
```
20+
21+
---
22+
category: Status
23+
keywords: [badge]
24+
after_version: 3.0.0
25+
---
26+
27+
# Badge
28+
29+
<PageDescription>{docs.exports.Badge.description}</PageDescription>
30+
31+
<HeaderInfo
32+
packageData={packageData}
33+
componentNames={['Badge']}
34+
sourceData={[
35+
{type: 'Spectrum', url: 'https://spectrum.adobe.com/page/badge/'}
36+
]} />
37+
38+
## Example
39+
40+
```tsx example
41+
<Badge variant="positive">Licensed</Badge>
42+
```
43+
44+
## Content
45+
46+
Badges can have a label, an icon, or both. An icon is provided by passing an icon component as a child to the Badge.
47+
A visible label can be provided by passing a string or a Text component as a child, depending on whether the Badge has an accompanying icon.
48+
49+
```tsx example
50+
import {Text} from '@react-spectrum/text';
51+
import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';
52+
53+
<Badge variant="positive">
54+
<CheckmarkCircle />
55+
<Text>Icon + Label</Text>
56+
</Badge>
57+
```
58+
59+
### Accessibility
60+
If a visible label isn't specified, an `aria-label` must be provided for accessibility.
61+
62+
### Internationalization
63+
64+
To internationalize a Badge, a localized string should be set as the child content of the Badge.
65+
For languages that are read right-to-left (e.g. Hebrew and Arabic), the Badge is automatically flipped.
66+
67+
## Props
68+
69+
<PropTable component={docs.exports.Badge} links={docs.links} />
70+
71+
## Visual options
72+
73+
### Variant
74+
[View guidelines](https://spectrum.adobe.com/page/badge/#Semantic-variants)
75+
76+
When badges have a semantic meaning, they should use semantic colors.
77+
Use the appropriate color to indicate status as follows.
78+
79+
```tsx example
80+
import {Flex} from '@react-spectrum/layout';
81+
82+
<Flex direction="column" gap={8}>
83+
<Badge variant="positive">Green: Approved, Complete, Success, New, Purchased, Licensed</Badge>
84+
<Badge variant="info">Blue: Active, In Use, Live, Published</Badge>
85+
<Badge variant="negative">Red: Error, Alert, Rejected, Failed</Badge>
86+
<Badge variant="neutral">Gray: Archived, Deleted, Paused, Draft, Not Started, Ended</Badge>
87+
</Flex>
88+
```
89+
90+
When badges are used to color code categories, they use label colors. The ideal usage for these is when there
91+
are 8 or fewer categories being color coded.
92+
93+
```tsx example
94+
import {Flex} from '@react-spectrum/layout';
95+
96+
<Flex direction="column" gap={8}>
97+
<Badge variant="seafoam">Seafoam</Badge>
98+
<Badge variant="indigo">Indigo</Badge>
99+
<Badge variant="purple">Purple</Badge>
100+
<Badge variant="fuchsia">Fuchsia</Badge>
101+
<Badge variant="magenta">Magenta</Badge>
102+
<Badge variant="yellow">Yellow</Badge>
103+
</Flex>
104+
```

‎packages/@react-spectrum/badge/index.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*
2+
* Copyright 2022 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
export * from './src';

‎packages/@react-spectrum/badge/package.json

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "@react-spectrum/badge",
3+
"version": "3.0.0-alpha.0",
4+
"description": "Spectrum UI components in React",
5+
"license": "Apache-2.0",
6+
"main": "dist/main.js",
7+
"module": "dist/module.js",
8+
"types": "dist/types.d.ts",
9+
"source": "src/index.ts",
10+
"files": [
11+
"dist",
12+
"src"
13+
],
14+
"sideEffects": [
15+
"*.css"
16+
],
17+
"targets": {
18+
"main": {
19+
"includeNodeModules": [
20+
"@adobe/spectrum-css-temp"
21+
]
22+
},
23+
"module": {
24+
"includeNodeModules": [
25+
"@adobe/spectrum-css-temp"
26+
]
27+
}
28+
},
29+
"repository": {
30+
"type": "git",
31+
"url": "https://github.com/adobe/react-spectrum"
32+
},
33+
"dependencies": {
34+
"@babel/runtime": "^7.6.2",
35+
"@react-aria/utils": "^3.13.2",
36+
"@react-spectrum/text": "^3.3.0",
37+
"@react-spectrum/utils": "^3.7.2",
38+
"@react-types/badge": "3.0.0-alpha.0",
39+
"@react-types/shared": "^3.14.0"
40+
},
41+
"devDependencies": {
42+
"@adobe/spectrum-css-temp": "3.0.0-alpha.1"
43+
},
44+
"peerDependencies": {
45+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
46+
"@react-spectrum/provider": "^3.0.0"
47+
},
48+
"publishConfig": {
49+
"access": "public"
50+
}
51+
}

0 commit comments

Comments
 (0)