Skip to content

Commit

Permalink
Merge pull request #594 from gsoft-inc/add_end_icons_to_tag
Browse files Browse the repository at this point in the history 
Add end icons to tag
  • Loading branch information
@patricklafrance
patricklafrance authored May 5, 2021
2 parents d7b883e + 57ac64e commit 9f4b876
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 45 deletions.
6 changes: 3 additions & 3 deletions packages/react-components/src/button/docs/Button.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,8 +194,8 @@ A button content can be a single icon. An accessible name must be provided throu
<Preview>
<Story name="icon button">
<Inline verticalAlign="center">
<IconButton shape="circular" size="sm" aria-label="Add"><AddIcon /></IconButton>
<IconButton shape="circular" aria-label="Add"><AddIcon /></IconButton>
<IconButton size="sm" aria-label="Add"><AddIcon /></IconButton>
<IconButton aria-label="Add"><AddIcon /></IconButton>
</Inline>
</Story>
</Preview>
Expand Down Expand Up @@ -264,7 +264,7 @@ A toggle button content can be a single icon. An accessible name must be provide

<Preview>
<Story name="toggle icon button">
<ToggleIconButton variant="outline" shape="circular" aria-label="Activate">
<ToggleIconButton variant="outline" aria-label="Activate">
<CheckIcon />
</ToggleIconButton>
</Story>
Expand Down
19 changes: 18 additions & 1 deletion packages/react-components/src/tag/docs/Tag.stories.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ArgsTable, Meta, Story } from "@storybook/addon-docs/blocks";
import { CheckCircleIcon, LightbulbIcon, NotificationIcon } from "@react-components/icons";
import { CheckCircleIcon, IconList, LightbulbIcon, NotificationIcon } from "@react-components/icons";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Counter } from "@react-components/counter";
import { Dot } from "@react-components/dot";
Expand Down Expand Up @@ -48,6 +48,23 @@ A tag can contain [icons](?path=/docs/icon-gallery--page).
</Story>
</Preview>

### End icon

*Non standard* end [icons](?path=/docs/icon-gallery--page) can be provided *only if* you have to render a [list of icons](?path=/docs/icon--default-story#icon-list).

<Preview>
<Story name="end icon">
<Tag>
<Text>Falcon 9</Text>
<IconList slot="end-icon">
<CheckCircleIcon />
<LightbulbIcon />
<NotificationIcon />
</IconList>
</Tag>
</Story>
</Preview>

### Dot

A tag can contain a [dot](?path=/docs/dot--default-story).
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/src/tag/docs/TagsPicker.sample.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ function TagsPicker() {
<MenuTrigger closeOnSelect={false}>
<Button color="secondary" className="mr2">
<Text>{selectedKeys.length > 0 ? "Programs" : "All programs"}</Text>
<DisclosureArrow slot="end-icon" />
{selectedKeys.length > 0 && <Counter variant="divider">{selectedKeys.length}</Counter>}
<DisclosureArrow slot="end-icon" />
</Button>
<Menu
selectionMode="multiple"
Expand Down
30 changes: 24 additions & 6 deletions packages/react-components/src/tag/src/Tag.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,24 +266,42 @@ a.o-ui-tag-outline.o-ui-tag-disabled.o-ui-tag-hover {
margin-right: var(--o-ui-global-scale-bravo);
}

/* CONTENT | ICON */
.o-ui-tag:not(.o-ui-tag-fluid) .o-ui-tag-icon {
/* CONTENT | START ICON */
.o-ui-tag:not(.o-ui-tag-fluid) .o-ui-tag-start-icon {
margin-right: var(--o-ui-global-scale-alpha);
}

/* CONTENT | ICON | SMALL */
.o-ui-tag-has-icon.o-ui-tag-sm {
/* CONTENT | START ICON | SMALL */
.o-ui-tag-has-start-icon.o-ui-tag-sm {
padding-left: calc(var(--o-ui-padding-sm) / 1.5);
}

/* CONTENT | ICON | MEDIUM */
.o-ui-tag-has-icon.o-ui-tag-md {
/* CONTENT | START ICON | MEDIUM */
.o-ui-tag-has-start-icon.o-ui-tag-md {
padding-left: calc(var(--o-ui-padding-md) / 1.5);
}

/* CONTENT | END ICON */
.o-ui-tag:not(.o-ui-tag-fluid) .o-ui-tag-end-icon {
margin-left: var(--o-ui-global-scale-alpha);
}

/* CONTENT | END ICON | SMALL */
.o-ui-tag-has-end-icon.o-ui-tag-sm {
padding-right: calc(var(--o-ui-padding-sm) / 1.5);
}

/* CONTENT | END ICON | MEDIUM */
.o-ui-tag-has-end-icon.o-ui-tag-md {
padding-right: calc(var(--o-ui-padding-md) / 1.5);
}

/* CONTENT | TEXT */
.o-ui-tag-text {
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

/* CONTENT | REMOVE BUTTON */
Expand Down
12 changes: 9 additions & 3 deletions packages/react-components/src/tag/src/Tag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,13 @@ export function InnerTag({
}: InnerTagProps) {
const ref = useMergedRefs(forwardedRef);

const { icon, dot, text, counter } = useSlots(children, useMemo(() => ({
const { icon, dot, text, "end-icon": endIcon, counter } = useSlots(children, useMemo(() => ({
_: {
defaultWrapper: Text
},
icon: {
size: embeddedIconSize(size),
className: "o-ui-tag-icon"
className: "o-ui-tag-start-icon"
},
dot: {
disabled,
Expand All @@ -78,6 +78,10 @@ export function InnerTag({
size,
className: "o-ui-tag-text"
},
"end-icon": {
size: embeddedIconSize(size),
className: "o-ui-tag-end-icon"
},
counter: {
color: "inherit",
size,
Expand All @@ -102,7 +106,8 @@ export function InnerTag({
className: cssModule(
"o-ui-tag",
variant,
icon && "has-icon",
icon && "has-start-icon",
endIcon && "has-end-icon",
removeMarkup && "has-remove-button",
fluid && "fluid",
active && "active",
Expand All @@ -119,6 +124,7 @@ export function InnerTag({
{icon}
{dot}
{text}
{endIcon}
{counter}
{removeMarkup}
</Box>
Expand Down
94 changes: 63 additions & 31 deletions packages/react-components/src/tag/tests/chromatic/createTagTestSuite.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,10 @@ export function createTagTestSuite(element, stories) {
<Tag size="sm" element={element}>Falcon 9</Tag>
<Tag element={element}>Falcon 9</Tag>
</Inline>
<Inline>
<Tag fluid element={element}>Falcon 9</Tag>
<div className="w-10">
<Tag fluid element={element}>Falcon 9</Tag>
</Inline>
<Inline className="w-10">
<Tag fluid element={element}>Falcon 9</Tag>
</Inline>
</div>
</Stack>
)
.add("icon", () =>
Expand Down Expand Up @@ -51,18 +49,58 @@ export function createTagTestSuite(element, stories) {
<Text>Falcon 9</Text>
</Tag>
</Inline>
<Inline>
<Tag fluid element={element}>
<CheckCircleIcon />
<Text>Falcon 9</Text>
</Tag>
<div className="w-10">
<Tag fluid element={element}>
<CheckCircleIcon />
<Text>Falcon 9</Text>
</Tag>
</div>
<Inline verticalAlign="end">
<Tag size="sm" element={element}>
<Text>Falcon 9</Text>
<IconList slot="end-icon">
<CheckCircleIcon /><CheckCircleIcon /><CheckCircleIcon />
</IconList>
</Tag>
<Tag element={element}>
<Text>Falcon 9</Text>
<IconList slot="end-icon">
<CheckCircleIcon /><CheckCircleIcon /><CheckCircleIcon />
</IconList>
</Tag>
</Inline>
<Inline className="w-10">
<Tag fluid element={element}>
<Text>Falcon 9</Text>
<IconList slot="end-icon">
<CheckCircleIcon /><CheckCircleIcon /><CheckCircleIcon />
</IconList>
</Tag>
<div className="w-10">
<Tag fluid element={element}>
<CheckCircleIcon />
<Text>Falcon 9</Text>
<IconList slot="end-icon">
<CheckCircleIcon /><CheckCircleIcon /><CheckCircleIcon />
</IconList>
</Tag>
</Inline>
</div>
<Tag element={element}>
<CheckCircleIcon />
<Text>Falcon 9</Text>
<IconList slot="end-icon">
<CheckCircleIcon /><CheckCircleIcon /><CheckCircleIcon />
</IconList>
</Tag>
<Tag fluid element={element}>
<CheckCircleIcon />
<Text>Falcon 9</Text>
<IconList slot="end-icon">
<CheckCircleIcon /><CheckCircleIcon /><CheckCircleIcon />
</IconList>
</Tag>
</Stack>
)
.add("dot", () =>
Expand All @@ -77,18 +115,16 @@ export function createTagTestSuite(element, stories) {
<Text>Falcon 9</Text>
</Tag>
</Inline>
<Inline>
<Tag fluid element={element}>
<Dot />
<Text>Falcon 9</Text>
</Tag>
</Inline>
<Inline className="w-10">
<Tag fluid element={element}>
<Dot />
<Text>Falcon 9</Text>
</Tag>
<div className="w-10">
<Tag fluid element={element}>
<Dot />
<Text>Falcon 9</Text>
</Tag>
</Inline>
</div>
</Stack>
)
.add("counter", () =>
Expand All @@ -103,18 +139,16 @@ export function createTagTestSuite(element, stories) {
<Counter variant="divider">60</Counter>
</Tag>
</Inline>
<Inline>
<Tag fluid element={element}>
<Text>Falcon 9</Text>
<Counter>60</Counter>
</Tag>
</Inline>
<Inline className="w-10">
<Tag fluid element={element}>
<Text>Falcon 9</Text>
<Counter>60</Counter>
</Tag>
<div className="w-10">
<Tag fluid element={element}>
<Text>Falcon 9</Text>
<Counter variant="divider">60</Counter>
</Tag>
</Inline>
</div>
</Stack>
)
.add("remove button", () =>
Expand All @@ -127,16 +161,14 @@ export function createTagTestSuite(element, stories) {
Falcon 9
</Tag>
</Inline>
<Inline>
<Tag fluid onRemove={() => {}} element={element}>
<Tag fluid onRemove={() => {}} element={element}>
Falcon 9
</Tag>
</Inline>
<Inline className="w-10">
</Tag>
<div className="w-10">
<Tag fluid onRemove={() => {}} element={element}>
Falcon 9
</Tag>
</Inline>
</div>
</Stack>
)
.add("as link", () =>
Expand Down

0 comments on commit 9f4b876

Please sign in to comment.