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

Jump to bottom

refactor(opacitycheckerboard): address concerns about inclusion order #2382

Merged
merged 5 commits into from
Jan 22, 2024
Merged

refactor(opacitycheckerboard): address concerns about inclusion order #2382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
298f5bd
refactor(opacitycheckerboard): simplfy css
jenndiaz Dec 15, 2023
b7b4482
docs(opacitycheckerboard): improve docs
jenndiaz Dec 15, 2023
a595f9d
fix(opacitycheckerboard): display in storybook with updated CSS
jenndiaz Dec 20, 2023
25e844a
fix(opacitycheckerboard): only apply inline-size properties to storyb…
jenndiaz Jan 2, 2024
43bbf04
docs(opacitycheckerboard): remove new sb heading
jenndiaz Jan 9, 2024
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
3 changes: 2 additions & 1 deletion components/opacitycheckerboard/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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).

Expand Down
2 changes: 0 additions & 2 deletions components/opacitycheckerboard/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
12 changes: 6 additions & 6 deletions components/opacitycheckerboard/metadata/opacitycheckerboard.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: |
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for updating this to align with the style guide!

<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>
13 changes: 11 additions & 2 deletions components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default {
},
args: {
rootClass: "spectrum-OpacityCheckerboard",
backgroundPosition: "top left"
backgroundPosition: "left top"
},
parameters: {
actions: {
Expand All @@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion components/opacitycheckerboard/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import "../index.css";

export const Template = ({
rootClass = "spectrum-OpacityCheckerboard",
backgroundPosition = "top left",
backgroundPosition,
customClasses = [],
customStyles = {},
id,
Expand Down
Loading