refactor(opacitycheckerboard): address concerns about inclusion order (…

…#2382)

* refactor(opacitycheckerboard): simplfy css

* docs(opacitycheckerboard): improve docs

* fix(opacitycheckerboard): display in storybook with updated CSS

* fix(opacitycheckerboard): only apply inline-size properties to storybook for opacitycheckerboard

* docs(opacitycheckerboard): remove new sb heading

components/opacitycheckerboard/README.md

@@ -1,6 +1,7 @@
 # @spectrum-css/opacitycheckerboard
 
-> Opacity checkerboard
+> Opacity checkerboard is a class used to highlight background color opacity.
+
 
 This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
 

components/opacitycheckerboard/index.css

@@ -21,8 +21,6 @@ permissions and limitations under the License. */
 }
 
 .spectrum-OpacityCheckerboard {
-	inline-size: 100%;
-	block-size: 100%;
 	background: repeating-conic-gradient(
 			var(
 					--mod-opacity-checkerboard-light,

components/opacitycheckerboard/metadata/opacitycheckerboard.yml

@@ -1,17 +1,17 @@
-name: Opacity Checkerboard
-description: Opacity checkerboard is used with other components to highlight opacity.
+name: Opacity checkerboard
+description: Opacity checkerboard is a class used to highlight background color opacity.
 examples:
   - id: opacity-checkerboard
-    name: Opacity Checkerboard
+    name: Opacity checkerboard
     markup: |
       <div style="inline-size: 100px; block-size: 100px;">
-        <div class="spectrum-OpacityCheckerboard">
+        <div class="spectrum-OpacityCheckerboard" style="inline-size: 100%; block-size: 100%;">
         </div>
       </div>
   - id: opacity-checkerboard
-    name: Opacity Checkerboard with color overlay
+    name: Opacity checkerboard with color overlay
     markup: |
       <div style="inline-size: 100px; block-size: 100px;">
-        <div class="spectrum-OpacityCheckerboard"></div>
+        <div class="spectrum-OpacityCheckerboard" style="inline-size: 100%; block-size: 100%;"></div>
         <div style="background-color: rgba(255, 0, 0, 0.5); inline-size: 100%; block-size: 100%; position: relative; inset-block: -100%"></div>
       </div>

components/opacitycheckerboard/stories/opacitycheckerboard.stories.js

@@ -22,7 +22,7 @@ export default {
 	},
 	args: {
 		rootClass: "spectrum-OpacityCheckerboard",
-		backgroundPosition: "top left"
+		backgroundPosition: "left top"
 	},
 	parameters: {
 		actions: {
@@ -39,11 +39,20 @@ export default {
 	],
 };
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+	customStyles: {
+		"inline-size": "100%",
+		"block-size": "100%"
+	}
+};
 
 export const CheckerboardPosition = Template.bind({});
 CheckerboardPosition.args = {
 	backgroundPosition: 'center center',
+	customStyles: {
+		"inline-size": "100%",
+		"block-size": "100%"
+	}
 };
 CheckerboardPosition.parameters = {
 	docs: {

components/opacitycheckerboard/stories/template.js

@@ -7,7 +7,7 @@ import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-OpacityCheckerboard",
-	backgroundPosition = "top left",
+	backgroundPosition,
 	customClasses = [],
 	customStyles = {},
 	id,