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.

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

fix: adjust tooltip alignment on last SVG card in row #2229

Merged
merged 2 commits into from
Apr 14, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,8 @@
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-copy-to-clipboard": "^5.0.1",
"react-live": "^2.2.1"
"react-live": "^2.2.1",
"use-media": "^1.4.0"
},
"devDependencies": {
"@babel/core": "^7.11.1",
Expand Down Expand Up @@ -111,7 +112,6 @@
"prismjs": "^1.17.1",
"react-dom": "^16.12.0",
"react-ga": "^2.6.0",
"use-media": "^1.4.0",
"use-resize-observer": "^4.0.0"
},
"husky": {
Expand Down
5 changes: 3 additions & 2 deletions src/components/SVGLibraries/IconLibrary/IconCategory.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,16 @@ import {
svgCategory,
} from '../shared/SvgLibrary.module.scss';

const IconCategory = ({ category, icons }) => {
const IconCategory = ({ category, icons, columnCount }) => {
const [subCategoryRef, containerIsVisible] = useIntersectionObserver();
return (
<section className={svgCategory}>
<h2 className={cx(h2, categoryTitle)}>{category}</h2>
<ul ref={subCategoryRef}>
<ul className={svgGrid}>
{icons.map((icon) => (
{icons.map((icon, i) => (
<SvgCard
isLastCard={(i + 1) % columnCount === 0}
containerIsVisible={containerIsVisible}
key={icon.name}
icon={icon}
Expand Down
10 changes: 9 additions & 1 deletion src/components/SVGLibraries/IconLibrary/IconLibrary.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {
icons as iconMetaData,
categories as iconCategoryMetadata,
} from '@carbon/icons/metadata.json';
import useColumnCount from '../shared/useColumnCount';

import { svgPage, svgLibrary } from '../shared/SvgLibrary.module.scss';

import FilterRow from '../shared/FilterRow';
Expand All @@ -20,6 +22,7 @@ const IconLibrary = () => {
const [searchInputValue, setSearchInputValue] = useState('');
const [categoryList, setCategoryList] = useState([]);
const [categoriesLoaded, setCategoriesLoaded] = useState(false);
const columnCount = useColumnCount({ assetType: 'icons' });

const debouncedSetSearchInputValue = debounce(setSearchInputValue, 200);

Expand Down Expand Up @@ -110,7 +113,12 @@ const IconLibrary = () => {
) : (
<div className={svgLibrary}>
{filteredCategories.map(([category, icons]) => (
<IconCategory key={category} category={category} icons={icons} />
<IconCategory
columnCount={columnCount}
key={category}
category={category}
icons={icons}
/>
))}
</div>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,15 @@ import {
pictograms as pictogramList,
} from '../shared/SvgLibrary.module.scss';

const IconCategory = ({ category, pictograms }) => {
const IconCategory = ({ category, pictograms, columnCount }) => {
const [sectionRef, containerIsVisible] = useIntersectionObserver();
return (
<section ref={sectionRef} className={svgCategory}>
<h2 className={cx(h2, categoryTitle)}>{category}</h2>
<ul className={cx(svgGrid, pictogramList)}>
{pictograms.map((pictogram) => (
{pictograms.map((pictogram, i) => (
<SvgCard
isLastCard={(i + 1) % columnCount === 0}
containerIsVisible={containerIsVisible}
key={pictogram.name}
icon={pictogram}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
icons as pictogramMetaData,
categories as pictogramCatagoryMetadata,
} from '@carbon/pictograms/metadata.json';
import useColumnCount from '../shared/useColumnCount';

import FilterRow from '../shared/FilterRow';
import { svgPage, svgLibrary } from '../shared/SvgLibrary.module.scss';
Expand All @@ -23,6 +24,7 @@ const IconLibrary = () => {
const [categoriesLoaded, setCategoriesLoaded] = useState(false);

const debouncedSetSearchInputValue = debounce(setSearchInputValue, 200);
const columnCount = useColumnCount({ assetType: 'pictograms' });

useEffect(() => {
const pictogramArray = pictogramMetaData.reduce(
Expand Down Expand Up @@ -111,6 +113,7 @@ const IconLibrary = () => {
<div className={svgLibrary}>
{filteredCategories.map(([category, pictograms]) => (
<PictogramCategory
columnCount={columnCount}
key={category}
category={category}
pictograms={pictograms}
Expand Down
7 changes: 5 additions & 2 deletions src/components/SVGLibraries/shared/ActionBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const ActionBar = ({
source,
setIsActionBarVisible,
isActionBarVisible,
isLastCard,
}) => {
const { site, type } = useContext(LibraryContext);
const component = `<${
Expand All @@ -30,6 +31,8 @@ const ActionBar = ({
setIsActionBarVisible(isStillFocusedWithin);
};

const tooltipAlignment = isLastCard ? 'end' : 'center';

const handleDownload = () => {
const a = document.body.appendChild(document.createElement('a'));
const blob = new Blob([source], { type: 'image/svg+xml' });
Expand Down Expand Up @@ -60,7 +63,7 @@ const ActionBar = ({
kind="ghost"
size="small"
hasIconOnly
tooltipAlignment="center"
tooltipAlignment={tooltipAlignment}
tooltipPosition="top"
iconDescription="Download SVG"
renderIcon={Download16}
Expand All @@ -74,7 +77,7 @@ const ActionBar = ({
kind="ghost"
size="small"
hasIconOnly
tooltipAlignment="center"
tooltipAlignment={tooltipAlignment}
tooltipPosition="top"
iconDescription={copyText}
renderIcon={Code16}
Expand Down
3 changes: 2 additions & 1 deletion src/components/SVGLibraries/shared/SvgCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
triggerText,
} from './SvgLibrary.module.scss';

const SvgCard = ({ icon, containerIsVisible, ...rest }) => {
const SvgCard = ({ icon, containerIsVisible, isLastCard, ...rest }) => {
const { name, Component, friendlyName, assets } = icon;
const [isActionBarVisible, setIsActionBarVisible] = useState(false);

Expand Down Expand Up @@ -43,6 +43,7 @@ const SvgCard = ({ icon, containerIsVisible, ...rest }) => {
)}
</div>
<ActionBar
isLastCard={isLastCard}
name={name}
source={source}
friendlyName={friendlyName}
Expand Down
30 changes: 30 additions & 0 deletions src/components/SVGLibraries/shared/useColumnCount.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import useMedia from 'use-media';
import { breakpoints } from '@carbon/elements';

const useColumnCount = ({ assetType }) => {
const isTablet = useMedia({
minWidth: breakpoints.md.width,
maxWidth: breakpoints.lg.width,
});
const isDesktop = useMedia({
minWidth: breakpoints.lg.width,
});

let colCount = 2;

if (assetType === 'pictograms' && isDesktop) {
colCount = 4;
}

if (assetType === 'icons') {
if (isTablet) {
colCount = 4;
} else if (isDesktop) {
colCount = 6;
}
}

return colCount;
};

export default useColumnCount;
2 changes: 1 addition & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -17777,7 +17777,7 @@ url@^0.11.0:

use-media@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/use-media/-/use-media-1.4.0.tgz#e777bf1f382a7aacabbd1f9ce3da2b62e58b2a98"
resolved "https://registry.npmjs.org/use-media/-/use-media-1.4.0.tgz#e777bf1f382a7aacabbd1f9ce3da2b62e58b2a98"
integrity sha512-XsgyUAf3nhzZmEfhc5MqLHwyaPjs78bgytpVJ/xDl0TF4Bptf3vEpBNBBT/EIKOmsOc8UbuECq3mrP3mt1QANA==

use-resize-observer@^4.0.0:
Expand Down