amphtml icon indicating copy to clipboard operation
amphtml copied to clipboard

Adding customizing option to amp-story-page-attachment in the near future?

Open 1302580MK opened this issue 4 years ago • 2 comments

Description

I'm working with amp-story and can't find a way to change the color of i-amphtml-story-draggable-drawer-content as well as the draggable drawer handle in my amp-story-page-attachment tag. The only option to customize is theme="light" / "dark" according to the documentation and my testing.

Sadly this not styleable draggable thing destroys my intended brand identiy design (example: everything red / all controls black).

Are there more customizing options planned in the near future like you did with amp-story-page-outlink?

I would love to see custom styling options for:

  • [ ] draggable-drawer
  • [ ] draggable-drawer handle
  • [ ] title tag inside the draggable drawer
  • [ ] close button

for the amp-story-page-attachment tag

Greetings from Vienna, Austria!

Alternatives Considered

Additional Context

No response

1302580MK avatar Oct 09 '21 21:10 1302580MK

Hi 1302580MK, thank you for reaching out.

Child content of amp-story-page-attachment can be styled in any way you like and will pass validation. Like the following (very simple) example:

/* In head.  */
<style amp-custom>
  .attachment-content {
    background-color: #F8EDD5;
    padding: 20px;
  }
</style>
...
/* In an amp-story-page.  */
<amp-story-page-attachment layout="nodisplay">
  <div class="attachment-content">
    <p>Text content.</p>
  </div>
</amp-story-page-attachment>

The handle, title and close button follow the theme of the amp-story-page-attachment element and are not customizable beyond theme. Keeping the colors consistent ensures a11y compliance (color contrast).

It's an interesting idea to use attributes like drawer-ui-accent-color and drawer-ui-accent-element to theme the drawer header UI.

We're always open to reviewing PRs! If this is something you're interesting in contributing it could follow the color logic pattern used in amp-story-open-attachment

processprocess avatar Oct 11 '21 15:10 processprocess

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

stale[bot] avatar Oct 16 '22 07:10 stale[bot]