nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Change selection-appearance icon of calcite-list-item

GregoryBologna

Before replacing the deprecated pick list item with the calcite-list-item, the selection-appearance icon defaulted to a simple check. I think the calcite-list-item selection-appearance icon looks really bad, especially with my design. I would like to override it or not show it at all.

(BAD) calcite-list-item

(GOOD) calcite-pick-list-item

How do I change the icon to 'check' in JS or CSS?

Najděte více příspěvků označených jako

Accepted answers

KittyHurley

Thanks for the background, much appreciated!

Opened a new enhancement issue on GitHub to support a "check" icon with the List component's selectionAppearance.

Can follow the progress by subscribing or commenting on the issue.

All comments

LefterisKoumis

Why can't you change it to icon="check" or don't use the icon so to remove it.

GregoryBologna

I probably could reach it with the code below, but I'm not exactly sure where in the action icon is the shadowRoot to change.

await customElements.whenDefined('calcite-list-item');

await delay(300);

let node = document.querySelector(`#some-list-here`);

if (node) {

let el = node.shadowRoot.querySelectorAll('calcite-list-item');

if (el) {

el.forEach((item) => {

I'm not sure where the icon is in the shadowRoot

// item.style.setProperty('icon', 'check');

});

}

From the website sample app.

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <script type="module" src=https://js.arcgis.com/calcite-components/1.0.7/calcite.esm.js></script>
  <link rel="stylesheet" type="text/css" href=https://js.arcgis.com/calcite-components/1.0.7/calcite.css />
</head>
<body>

<calcite-list selection-mode="multiple">
    <calcite-list-item label="Hiking trails" value="hiking-trails">
        <calcite-action slot="actions-start" icon="layer" text="Trails layer"></calcite-action>
    </calcite-list-item>
    <calcite-list-item label="Waterfalls" value="waterfalls">
        <calcite-action slot="actions-start" icon="layer" text="Waterfalls layer"></calcite-action>
    </calcite-list-item>
    <calcite-list-item label="Rivers" value="rivers">
        <calcite-action slot="actions-start" icon="layer" text="Rivers layer"></calcite-action>
    </calcite-list-item>
</calcite-list>
</body>
</html>

KittyHurley

Thanks for reaching out @GregoryBologna! It might be helpful to understand a bit more of the use case, and what you are aiming to achieve.

At this time the List component doesn't support changing the selection-appearance="icon". It looks like from above you have implemented it for selection-mode="multiple" types.

We do offer a selection-appearance="border" as an option, but that might not fit the use case you're seeking?

We also offer a slot for individual List items, such as "actions-end" and "actions-start" to add in customized icons for actions with icons.

Could you follow-up with some additional context/support with the user interface (UI) you are building? We might be able to open an enhancement request for consideration.

GregoryBologna

Hi. Thank you for helping me. You can see it in action here or try it at the URL below. Also, I added the code below. Basically, the pick list item uses a very acceptible check icon. I could change the calcite-list-item icon in Chrome devtools, but I cannot find where to override it in code. It sounds like I may need to just go back to using the pick list until calcite-list supports more icons.

https://www.manateepao.gov/parcel/?display=fullaerial&referer=search

/***
 * Checkable list of tax parcel types to filter buffer results.
 */
function buildTaxParcelTypesComponent() {
  return new Promise((resolve) => {
	getTaxParcelTypes()
	  .then((result) => {
		let block = document.createElement('calcite-block');
		block.setAttribute('id', 'pao-taxparceltypes-block');
		block.setAttribute('heading', 'Filter by tax parcel type');
		block.setAttribute('collapsible', '');
		block.setAttribute('hidden', '');
		block.setAttribute('description', 'Click to open'); // default is closed
		block.addEventListener('calciteBlockToggle', (event) => {
		  setBlockDescription(
			event.target.id,
			event.target?.open,
			'Click to open'
		  );
		});

		let slot = document.createElement('calcite-icon');
		slot.setAttribute('scale', 's');
		slot.setAttribute('slot', 'icon');
		slot.setAttribute('icon', 'filter');
		block.appendChild(slot);

		let list = document.createElement('calcite-list');

		let taxparcelTypes = document.createElement('calcite-list');
		taxparcelTypes.setAttribute('id', 'pao-taxparceltypes-list');
		taxparcelTypes.setAttribute('selection-mode', 'multiple');
		taxparcelTypes.setAttribute('selection-appearance', 'icon');
		taxparcelTypes.setAttribute('scale', 's');
		taxparcelTypes.setAttribute('heading-level', '1');

		// Skip event if resetting.
		taxparcelTypes.addEventListener('click', (event) => {
		  if (!bufferWasReset) handleTaxParcelTypesChange(event);
		});

		Object.keys(result.features).forEach((key) => {
		  let tp = result.features[key].attributes['TAXPARCELTYPE'];
		  let item = document.createElement('calcite-list-item');
		  item.setAttribute('overlay-positioning', 'absolute');
		  item.setAttribute('selected', '');
		  item.setAttribute('label', tp);
		  item.setAttribute('value', tp);              

		  let action = document.createElement('calcite-action');
		  action.setAttribute(
			'id',
			`${tp.replace(/ /g, '-').toLowerCase() + '-action'}`
		  );
		  action.setAttribute('slot', 'actions-start');
		  action.setAttribute('appearance','transparent');

		  let span = document.createElement('span');
		  span.style.width = '16px';
		  span.innerHTML = '&nbsp;'; // color will not render without hard space
		  action.appendChild(span);
		  item.appendChild(action);

		  taxparcelTypes.appendChild(item);
		  list.appendChild(taxparcelTypes);
		});

		// Default Tax Parcel Types
		if (taxParcelTypesDefaultString === '') {
		  let taxParcelTypesArray = [];
		  let children = Array.from(list.children[0].children);
		  children.forEach((item) => {
			taxParcelTypesArray.push(item.value);
		  });

		  // Use qualitative colors.
		  // fifo
		  let ramp = {
			[0]: { rgb: '63,0,125' },
			[1]: { rgb: '251,154,153' },
			[2]: { rgb: '153,52,4' },
			[3]: { rgb: '31,120,180' },
			[4]: { rgb: '26,26,26' },
			[5]: { rgb: '227,26,28' },
			[6]: { rgb: '10,247,199' },
			[7]: { rgb: '166,206,227' },
			[8]: { rgb: '202,178,214' },
			[9]: { rgb: '106,61,154' },
			[10]: { rgb: '255,255,153' },
			[11]: { rgb: '177,89,40' },
			[12]: { rgb: '231,225,239' },
			[13]: { rgb: '201,148,199' },
			[14]: { rgb: '221,28,119' },
			[15]: { rgb: '241,238,246' },
		  };

		  // Create array of tax type colors
		  if (taxParcelTypesArray?.length > 0) {
			let s = taxParcelTypesArray.map((v) => `'${v}'`);
			taxParcelTypesDefaultString = s.join(',');
			taxParcelTypesSelectedString = taxParcelTypesDefaultString;
			taxParcelTypeColors = taxParcelTypesArray.reduce(
			  (acc, cur, idx) => {
				if (idx > Object.keys(ramp).length) idx--;
				let obj = {};
				obj[cur] = `rgba(${ramp[idx].rgb},0.4)`;
				acc.push(obj);
				return acc;
			  },
			  []
			);
		  }

		  // Assign style to tax parcel type list item.
		  children.forEach((item) => {
			item.childNodes.forEach((ch) => {
			  if (ch.nodeName.toLowerCase() === 'calcite-action') {
				let id = `${
				  item.value.replace(/ /g, '-').toLowerCase() + '-action'
				}`;
				if (ch.id === id) {
				  ch.childNodes.forEach((n) => {
					if (n.nodeName === 'SPAN') {
					  let rgb = taxParcelTypeColors.filter((obj) => {
						if (obj)
						  if (Object.keys(obj)[0] === item.value)
							return obj[item.value];
					  });
					  if (rgb && rgb.length > 0)
						n.style.backgroundColor = rgb[0][item.value];
					  n.style.borderRadius = '50%';
					}
				  });
				}
			  }
			});
		  });
		}
		block.appendChild(list);
		let panel = document.getElementById('pao-buffer-container');
		if (panel) panel.appendChild(block);
		resolve(true);
	  })
	  .catch((error) => {doLogException('buildTaxParcelTypesComponent->getTaxParcelTypes', error);});
  });
} // end

/**
 * Query ArcGIS for tax parcel types.
 * @returns
 */
function getTaxParcelTypes() {
  return new Promise((resolve) => {
	let queryObject = new Query({
	  outSpatialReference: view.spatialReference,
	  returnGeometry: false,
	  returnIdsOnly: false,
	  returnCountOnly: false,
	  returnZ: false,
	  returnM: false,
	  returnDistinctValues: true,
	  returnExtentOnly: false,
	  orderByFields: ['TAXPARCELTYPE'],
	  outFields: ['TAXPARCELTYPE'],
	  where: '1=1', // where is required.
	});
	query
	  .executeQueryJSON(parcelSearchUrl, queryObject)
	  .then((result) => {
		resolve(result);
	  })
	  ['catch']((error) => {
		doLogException('getTaxParcelTypes', error);
	  });
  });
} // end

I am adding a custom action to get the color bullets.

KittyHurley

Thanks for the background, much appreciated!

Opened a new enhancement issue on GitHub to support a "check" icon with the List component's selectionAppearance.

Can follow the progress by subscribing or commenting on the issue.

GregoryBologna

That's great! Thank you.

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.