webJose · September 18, 2022 03:43
diff --git a/pills.html b/pills.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
  div.pill {
      display: inline-block;
      padding: 0.05em 0.15em;
      color: white;
      font-size: 12pt;
      margin: 2px 0px;
      border-radius: 1.5em;
  }
  div.pill.accented {
      border-color: #059fff;
      border-width: 0.22em;
      border-style: dotted solid solid dashed
  }
  div.pill.selected {
      font-weight: bold;
      color: #f3ff00;
  }
  div.pill > button {
      background-color: #059fff;
      border: none;
      padding: 0.4em 0.9em;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: inherit;
      color: inherit;
      font-weight: inherit;
      font-size: inherit;
      min-width: 2em;
  }
  div.pill.disabled > button {
      background-color: lightgray;
      color: black;
      border: solid 0.15em #eee;
      cursor: not-allowed;
  }
 </style>
 </head>
 <body>

 <h1>Pill Check/Radio Buttons</h1>
 <p>Use the accent to communicate that the pill has something special.  For example, imagine that each pill represents a category.  Unaccented pills would mean the category is empty, while accented ones would mean the category has data.</p>
 <p>Styles presented:  Normal, accented, selected, accented selected, disabled.</p>

 <div class="pill"><button>P</button></div>
 <div class="pill accented"><button>P</button></div>
 <div class="pill selected"><button>Item P</button></div>
 <div class="pill accented selected"><button>Item P</button></div>
 <div class="pill disabled"><button>P</button></div>
 <br />
 <div class="pill"><button>7</button></div>
 <div class="pill accented"><button>7</button></div>
 <div class="pill selected"><button>Item #7</button></div>
 <div class="pill accented selected"><button>Item #7</button></div>
 <div class="pill disabled"><button>7</button></div>
 <br />
 <div class="pill"><button>10</button></div>
 <div class="pill accented"><button>10</button></div>
 <div class="pill selected"><button>Item #10</button></div>
 <div class="pill accented selected"><button>Item #10</button></div>
 <div class="pill disabled"><button>10</button></div>
 <br />
 <div class="pill"><button>1</button></div>
 <div class="pill"><button>2</button></div>
 <div class="pill"><button>3</button></div>
 <div class="pill accented"><button>4</button></div>
 <div class="pill"><button>5</button></div>
 <div class="pill"><button>6</button></div>
 <div class="pill"><button>7</button></div>
 <div class="pill accented selected"><button>Item #8</button></div>
 <div class="pill"><button>9</button></div>
 <div class="pill disabled"><button>10</button></div>

 <h2>React Tips</h2>
 <p>To convert this to a React component, make a <strong>PillList</strong> component that generates a list of <strong>Pill</strong> components.  Each pill would support an <strong>onSelected</strong> event through props or similar, giving the opportunity to its parent to unselect the previous selection (if working as radio buttons).  Finally, the <strong>PillList</strong> component would expose an <strong>onSelectionChanged</strong> event that would run UI/business logic.</p>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	div.pill {
	display: inline-block;
	padding: 0.05em 0.15em;
	color: white;
	font-size: 12pt;
	margin: 2px 0px;
	border-radius: 1.5em;
	}
	div.pill.accented {
	border-color: #059fff;
	border-width: 0.22em;
	border-style: dotted solid solid dashed
	}
	div.pill.selected {
	font-weight: bold;
	color: #f3ff00;
	}
	div.pill > button {
	background-color: #059fff;
	border: none;
	padding: 0.4em 0.9em;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: inherit;
	color: inherit;
	font-weight: inherit;
	font-size: inherit;
	min-width: 2em;
	}
	div.pill.disabled > button {
	background-color: lightgray;
	color: black;
	border: solid 0.15em #eee;
	cursor: not-allowed;
	}
	</style>
	</head>
	<body>

	<h1>Pill Check/Radio Buttons</h1>
	<p>Use the accent to communicate that the pill has something special. For example, imagine that each pill represents a category. Unaccented pills would mean the category is empty, while accented ones would mean the category has data.</p>
	<p>Styles presented: Normal, accented, selected, accented selected, disabled.</p>

	<div class="pill"><button>P</button></div>
	<div class="pill accented"><button>P</button></div>
	<div class="pill selected"><button>Item P</button></div>
	<div class="pill accented selected"><button>Item P</button></div>
	<div class="pill disabled"><button>P</button></div>
	<br />
	<div class="pill"><button>7</button></div>
	<div class="pill accented"><button>7</button></div>
	<div class="pill selected"><button>Item #7</button></div>
	<div class="pill accented selected"><button>Item #7</button></div>
	<div class="pill disabled"><button>7</button></div>
	<br />
	<div class="pill"><button>10</button></div>
	<div class="pill accented"><button>10</button></div>
	<div class="pill selected"><button>Item #10</button></div>
	<div class="pill accented selected"><button>Item #10</button></div>
	<div class="pill disabled"><button>10</button></div>
	<br />
	<div class="pill"><button>1</button></div>
	<div class="pill"><button>2</button></div>
	<div class="pill"><button>3</button></div>
	<div class="pill accented"><button>4</button></div>
	<div class="pill"><button>5</button></div>
	<div class="pill"><button>6</button></div>
	<div class="pill"><button>7</button></div>
	<div class="pill accented selected"><button>Item #8</button></div>
	<div class="pill"><button>9</button></div>
	<div class="pill disabled"><button>10</button></div>

	<h2>React Tips</h2>
	<p>To convert this to a React component, make a <strong>PillList</strong> component that generates a list of <strong>Pill</strong> components. Each pill would support an <strong>onSelected</strong> event through props or similar, giving the opportunity to its parent to unselect the previous selection (if working as radio buttons). Finally, the <strong>PillList</strong> component would expose an <strong>onSelectionChanged</strong> event that would run UI/business logic.</p>
	</body>
	</html>