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

feat: tagset modal design review updates #774

Merged
merged 6 commits into from
May 25, 2021
Merged

feat: tagset modal design review updates #774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
478015b
feat: tagset modal design review updates
lee-chase May 21, 2021
9b044f7
fix: usage within page header
lee-chase May 21, 2021
5cdb4a9
fix: overflow css in wrong place
lee-chase May 21, 2021
63c3d13
fix: review comments
lee-chase May 24, 2021
3cc017a
Merge branch 'main' into issue32
dcwarwick May 25, 2021
77efe5a
Merge branch 'main' into issue32
davidmenendez May 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 1 addition & 7 deletions ...ages/cloud-cognitive/src/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,7 @@

.#{$block-class}__breadcrumb-container--hidden {
// This breadcrumb container is used to measure the width of all displayable breadcrumbs
position: absolute;
top: -100vh;
left: -100vw;
max-width: 0; // do not take up space.
overflow: hidden;
visibility: hidden;
pointer-events: none;
@include measuring-container;
}

.#{$block-class}__displayed-breadcrumb:last-child,
Expand Down
8 changes: 1 addition & 7 deletions packages/cloud-cognitive/src/components/ButtonSetWithOverflow/_button-set-with-overflow.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,7 @@ $block-class: #{$pkg-prefix}--button-set-with-overflow;

.#{$block-class}__button-container--hidden {
// This button-set container is used to measure the width of all displayable button-sets
position: absolute;
top: -100vh;
// stylelint-disable-next-line carbon/layout-token-use
left: calc(-100vw - 100%);
overflow: hidden;
visibility: hidden;
pointer-events: none;
@include measuring-container;
}

.#{$block-class}--right {
Expand Down
31 changes: 22 additions & 9 deletions packages/cloud-cognitive/src/components/TagSet/TagSet.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import React from 'react';

import { Tag } from 'carbon-components-react';
import { types as tagTypes } from 'carbon-components-react/es/components/Tag/Tag';
import styles from './_storybook-styles.scss'; // import index in case more files are added later.
import { pkg } from '../../settings';
import { getStorybookPrefix } from '../../../config';
Expand Down Expand Up @@ -40,7 +41,6 @@ const ManyTagItems = [
{
label: 'Two',
type: 'red',
filter: true,
},
{
label: 'Three',
Expand All @@ -61,7 +61,6 @@ const ManyTagItems = [
{
label: 'Seven',
type: 'cyan',
filter: true,
},
{
label: 'Eight',
Expand All @@ -74,7 +73,6 @@ const ManyTagItems = [
{
label: 'Ten',
type: 'blue',
filter: true,
},
{
label: 'Eleven',
Expand All @@ -96,12 +94,10 @@ const ManyTagItems = [
{
label: 'Fifteen',
type: 'blue',
filter: true,
},
{
label: 'Sixteen',
type: 'high-contrast',
filter: true,
},
{
label: 'Seventeen',
Expand All @@ -110,7 +106,6 @@ const ManyTagItems = [
{
label: 'Eighteen',
type: 'cyan',
filter: true,
},
{
label: 'Nineteen',
Expand All @@ -120,12 +115,24 @@ const ManyTagItems = [
label: 'Twenty',
type: 'high-contrast',
},
].map(({ label, type, filter, dataSearch }) => (
<Tag key={label} data-search={dataSearch} {...{ filter, type }}>
].map(({ label, type, dataSearch }) => (
<Tag key={label} data-search={dataSearch} type={type}>
{label}
</Tag>
));

const HundredsOfItems = [];
for (let i = 0; i < 200; i++) {
const label = `Label_${i + 1}`;
const type = tagTypes[i % tagTypes.length];

HundredsOfItems.push(
<Tag key={label} type={type}>
{label}
</Tag>
);
}

export default {
title: `${storybookPrefix}/${TagSet.displayName}`,
component: TagSet,
Expand All @@ -139,7 +146,7 @@ export default {
(story) => (
<>
<style>
{`.${blockClass}__show-all-modal { opacity: 0; visibility: hidden; /* prevents glitch storybook modal css load */ }`}
{`.${blockClass}__show-all-tags-modal { opacity: 0; visibility: hidden; /* prevents glitch storybook modal css load */ }`}
;
</style>
<div className={`${blockClass}__story-viewport`}>{story()}</div>
Expand Down Expand Up @@ -169,6 +176,12 @@ ManyTags.args = {
containerWidth: 500,
};

export const HundredsOfTags = Template.bind({});
HundredsOfTags.args = {
children: HundredsOfItems,
containerWidth: 500,
};

const Template2 = (argsIn) => {
const { containerWidth, ...args } = { ...argsIn };
return (
Expand Down
46 changes: 28 additions & 18 deletions packages/cloud-cognitive/src/components/TagSet/TagSetModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';

import { Modal, Search } from 'carbon-components-react';
import {
ComposedModal,
ModalHeader,
ModalBody,
Search,
} from 'carbon-components-react';

import { pkg } from '../../settings';
const componentName = 'TagSetModal';
Expand Down Expand Up @@ -53,25 +58,30 @@ export const TagSetModal = ({
};

return (
<Modal
className={`${blockClass}__show-all-modal`}
open={open}
<ComposedModal
className={`${blockClass}__show-all-tags-modal`}
passiveModal
size="sm"
modalHeading={heading}
onRequestClose={onClose}>
<Search
data-modal-primary-focus
className={`${blockClass}__show-all-tags-search`}
labelText={searchLabel}
placeholder={searchPlaceholder}
onChange={handleSearch}
size="lg"
/>
<div className={`${blockClass}__show-all-tags-content`}>
{filteredModalTags}
</div>
</Modal>
{...{ open, onClose }}>
<ModalHeader title={heading}>
<Search
data-modal-primary-focus
className={`${blockClass}__show-all-tags-modal-search`}
labelText={searchLabel}
placeholder={searchPlaceholder}
onChange={handleSearch}
size="lg"
/>
</ModalHeader>
<ModalBody
className={`${blockClass}__show-all-tags-modal-body-2`}
hasForm>
<div className={`${blockClass}__show-all-tags-modal-content`}>
{filteredModalTags}
</div>
</ModalBody>
<div className={`${blockClass}__show-all-tags-modal-fade`} />
</ComposedModal>
);
};

Expand Down
14 changes: 9 additions & 5 deletions packages/cloud-cognitive/src/components/TagSet/TagSetOverflow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,15 @@ export const TagSetOverflow = React.forwardRef(
ref={overflowTagContent}
className={`${blockClass}__overflow-content`}>
<ul className={`${blockClass}__overflow-tag-list`}>
{overflowTags.map((tag, index) => (
<li className={`${blockClass}__overflow-tag-item`} key={index}>
{React.cloneElement(tag, { filter: false })}
</li>
))}
{overflowTags
.filter((_, index) => index < 10)
.map((tag, index) => (
<li
className={`${blockClass}__overflow-tag-item`}
key={index}>
{React.cloneElement(tag, { filter: false })}
</li>
))}
</ul>
{overflowTags.length >= 10 && (
<Link
Expand Down
Loading