Support for wildcard attributes, implement data-* attribute

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.21.1 - 2018-04-10
+## Added
+- `aria-*` and `data-*` attributes are now supported in all dash html components. (#40)
+- These new keywords can be added using a dictionary expansion, e.g. `html.Div(id="my-div", **{"data-toggle": "toggled", "aria-toggled": "true"})`
+
 ## 0.21.0 - 2018-02-21
 ## Added
 - #207 Dash now supports React components that use [Flow](https://flow.org/en/docs/react/).

dash/dash.py

@@ -408,7 +408,9 @@ def _validate_callback(self, output, inputs, state, events):
 
  if (hasattr(arg, 'component_property') and
  arg.component_property not in
- component.available_properties):
+ component.available_properties and not
+ any(arg.component_property.startswith(w) for w in
+ component.available_wildcard_properties)):
  raise exceptions.NonExistantPropException('''
  Attempting to assign a callback with
  the property "{}" but the component

dash/development/base_component.py

@@ -23,7 +23,11 @@ def __init__(self, **kwargs):
  # pylint: disable=super-init-not-called
  for k, v in list(kwargs.items()):
  # pylint: disable=no-member
- if k not in self._prop_names:
+ k_in_propnames = k in self._prop_names
+ k_in_wildcards = any([k.startswith(w)
+ for w in
+ self._valid_wildcard_attributes])
+ if not k_in_propnames and not k_in_wildcards:
  raise TypeError(
  'Unexpected keyword argument `{}`'.format(k) +
  '\nAllowed arguments: {}'.format(
@@ -34,10 +38,21 @@ def __init__(self, **kwargs):
  setattr(self, k, v)
 
  def to_plotly_json(self):
+ # Add normal properties
+ props = {
+ p: getattr(self, p)
+ for p in self._prop_names # pylint: disable=no-member
+ if hasattr(self, p)
+ }
+ # Add the wildcard properties data-* and aria-*
+ props.update({
+ k: getattr(self, k)
+ for k in self.__dict__
+ if any(k.startswith(w) for w in
+ self._valid_wildcard_attributes) # pylint:disable=no-member
+ })
  as_json = {
- 'props': {p: getattr(self, p)
- for p in self._prop_names # pylint: disable=no-member
- if hasattr(self, p)},
+ 'props': props,
  'type': self._type, # pylint: disable=no-member
  'namespace': self._namespace # pylint: disable=no-member
  }
@@ -225,8 +240,12 @@ def __init__(self, {default_argtext}):
  self._prop_names = {list_of_valid_keys}
  self._type = '{typename}'
  self._namespace = '{namespace}'
+ self._valid_wildcard_attributes =\
+ {list_of_valid_wildcard_attr_prefixes}
  self.available_events = {events}
  self.available_properties = {list_of_valid_keys}
+ self.available_wildcard_properties =\
+ {list_of_valid_wildcard_attr_prefixes}
 
  for k in {required_args}:
  if k not in kwargs:
@@ -236,15 +255,23 @@ def __init__(self, {default_argtext}):
  super({typename}, self).__init__({argtext})
 
  def __repr__(self):
- if(any(getattr(self, c, None) is not None for c in self._prop_names
- if c is not self._prop_names[0])):
-
- return (
- '{typename}(' +
- ', '.join([c+'='+repr(getattr(self, c, None))
- for c in self._prop_names
- if getattr(self, c, None) is not None])+')')
-
+ if(any(getattr(self, c, None) is not None
+ for c in self._prop_names
+ if c is not self._prop_names[0])
+ or any(getattr(self, c, None) is not None
+ for c in self.__dict__.keys()
+ if any(c.startswith(wc_attr)
+ for wc_attr in self._valid_wildcard_attributes))):
+ props_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self._prop_names
+ if getattr(self, c, None) is not None])
+ wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self.__dict__.keys()
+ if any([c.startswith(wc_attr)
+ for wc_attr in
+ self._valid_wildcard_attributes])])
+ return ('{typename}(' + props_string +
+ (', ' + wilds_string if wilds_string != '' else '') + ')')
  else:
  return (
  '{typename}(' +
@@ -253,6 +280,8 @@ def __repr__(self):
 
  filtered_props = reorder_props(filter_props(props))
  # pylint: disable=unused-variable
+ list_of_valid_wildcard_attr_prefixes = repr(parse_wildcards(props))
+ # pylint: disable=unused-variable
  list_of_valid_keys = repr(list(filtered_props.keys()))
  # pylint: disable=unused-variable
  docstring = create_docstring(
@@ -273,11 +302,9 @@ def __repr__(self):
 
  required_args = required_props(props)
 
- d = c.format(**locals())
-
  scope = {'Component': Component}
  # pylint: disable=exec-used
- exec(d, scope)
+ exec(c.format(**locals()), scope)
  result = scope[typename]
  return result
 
@@ -366,6 +393,27 @@ def parse_events(props):
  return events
 
 
+def parse_wildcards(props):
+ """
+ Pull out the wildcard attributes from the Component props
+
+ Parameters
+ ----------
+ props: dict
+ Dictionary with {propName: propMetadata} structure
+
+ Returns
+ -------
+ list
+ List of Dash valid wildcard prefixes
+ """
+ list_of_valid_wildcard_attr_prefixes = []
+ for wildcard_attr in ["data-*", "aria-*"]:
+ if wildcard_attr in props.keys():
+ list_of_valid_wildcard_attr_prefixes.append(wildcard_attr[:-1])
+ return list_of_valid_wildcard_attr_prefixes
+
+
 def reorder_props(props):
  """
  If "children" is in props, then move it to the

dash/version.py

@@ -1 +1 @@
-__version__ = '0.21.0'
+__version__ = '0.21.1'

dev-requirements.txt

@@ -1,5 +1,5 @@
 dash_core_components>=0.4.0
-dash_html_components>=0.5.0
+dash_html_components>=0.11.0rc1
 dash_flow_example==0.0.3
 dash_renderer
 percy

requirements.txt

@@ -2,7 +2,7 @@ appnope==0.1.0
 backports.shutil-get-terminal-size==1.0.0
 click==6.7
 dash-core-components==0.3.3
-dash-html-components==0.4.0
+dash-html-components==0.11.0rc1
 dash-renderer==0.2.9
 dash.ly==0.14.0
 decorator==4.0.11

tests/development/metadata_test.json

@@ -207,6 +207,20 @@
  "required": false,
  "description": ""
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
  "id": {
  "type": {
  "name": "string"

tests/development/test_base_component.py

@@ -17,6 +17,7 @@
 Component._prop_names = ('id', 'a', 'children', 'style', )
 Component._type = 'TestComponent'
 Component._namespace = 'test_namespace'
+Component._valid_wildcard_attributes = ['data-', 'aria-']
 
 
 def nested_tree():
@@ -411,6 +412,25 @@ def to_dict(id, children):
  )
  """
 
+ def test_to_plotly_json_with_wildcards(self):
+ c = Component(id='a', **{'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None})
+ c._prop_names = ('id',)
+ c._type = 'MyComponent'
+ c._namespace = 'basic'
+ self.assertEqual(
+ c.to_plotly_json(),
+ {'namespace': 'basic',
+ 'props': {
+ 'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None,
+ 'id': 'a',
+ },
+ 'type': 'MyComponent'}
+ )
+
  def test_len(self):
  self.assertEqual(len(Component()), 0)
  self.assertEqual(len(Component(children='Hello World')), 1)
@@ -580,6 +600,16 @@ def test_repr_nested_arguments(self):
  "Table(Table(children=Table(id='1'), id='2'))"
  )
 
+ def test_repr_with_wildcards(self):
+ c = self.ComponentClass(id='1', **{"data-one": "one",
+ "aria-two": "two"})
+ data_first = "Table(id='1', data-one='one', aria-two='two')"
+ aria_first = "Table(id='1', aria-two='two', data-one='one')"
+ repr_string = repr(c)
+ if not (repr_string == data_first or repr_string == aria_first):
+ raise Exception("%s\nDoes not equal\n%s\nor\n%s" %
+ (repr_string, data_first, aria_first))
+
  def test_docstring(self):
  assert_docstring(self.assertEqual, self.ComponentClass.__doc__)
 
@@ -674,6 +704,10 @@ def setUp(self):
 
  ['customArrayProp', 'list'],
 
+ ['data-*', 'string'],
+
+ ['aria-*', 'string'],
+
  ['id', 'string'],
 
  ['dashEvents', "a value equal to: 'restyle', 'relayout', 'click'"]
@@ -749,6 +783,8 @@ def assert_docstring(assertEqual, docstring):
 
  "- customProp (optional)",
  "- customArrayProp (list; optional)",
+ '- data-* (string; optional)',
+ '- aria-* (string; optional)',
  '- id (string; optional)',
  '',
  "Available events: 'restyle', 'relayout', 'click'",

tests/development/test_component_loader.py

@@ -28,6 +28,20 @@
  "description": "Children",
  "required": false
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard data",
+ "required": false
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard aria",
+ "required": false
+ },
  "bar": {
  "type": {
  "name": "custom"
@@ -113,6 +127,9 @@ def test_loadcomponents(self):
  'foo': 'Hello World',
  'bar': 'Lah Lah',
  'baz': 'Lemons',
+ 'data-foo': 'Blah',
+ 'aria-bar': 'Seven',
+ 'baz': 'Lemons',
  'children': 'Child'
  }
  AKwargs = {

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.21.1 - 2018-04-10
+## Added
+- `aria-*` and `data-*` attributes are now supported in all dash html components. (#40)
+- These new keywords can be added using a dictionary expansion, e.g. `html.Div(id="my-div", **{"data-toggle": "toggled", "aria-toggled": "true"})`
+
 ## 0.21.0 - 2018-02-21
 ## Added
 - #207 Dash now supports React components that use [Flow](https://flow.org/en/docs/react/).

dash/dash.py

@@ -408,7 +408,9 @@ def _validate_callback(self, output, inputs, state, events):
 
  if (hasattr(arg, 'component_property') and
  arg.component_property not in
- component.available_properties):
+ component.available_properties and not
+ any(arg.component_property.startswith(w) for w in
+ component.available_wildcard_properties)):
  raise exceptions.NonExistantPropException('''
  Attempting to assign a callback with
  the property "{}" but the component

dash/development/base_component.py

@@ -23,7 +23,11 @@ def __init__(self, **kwargs):
  # pylint: disable=super-init-not-called
  for k, v in list(kwargs.items()):
  # pylint: disable=no-member
- if k not in self._prop_names:
+ k_in_propnames = k in self._prop_names
+ k_in_wildcards = any([k.startswith(w)
+ for w in
+ self._valid_wildcard_attributes])
+ if not k_in_propnames and not k_in_wildcards:
  raise TypeError(
  'Unexpected keyword argument `{}`'.format(k) +
  '\nAllowed arguments: {}'.format(
@@ -34,10 +38,21 @@ def __init__(self, **kwargs):
  setattr(self, k, v)
 
  def to_plotly_json(self):
+ # Add normal properties
+ props = {
+ p: getattr(self, p)
+ for p in self._prop_names # pylint: disable=no-member
+ if hasattr(self, p)
+ }
+ # Add the wildcard properties data-* and aria-*
+ props.update({
+ k: getattr(self, k)
+ for k in self.__dict__
+ if any(k.startswith(w) for w in
+ self._valid_wildcard_attributes) # pylint:disable=no-member
+ })
  as_json = {
- 'props': {p: getattr(self, p)
- for p in self._prop_names # pylint: disable=no-member
- if hasattr(self, p)},
+ 'props': props,
  'type': self._type, # pylint: disable=no-member
  'namespace': self._namespace # pylint: disable=no-member
  }
@@ -225,8 +240,12 @@ def __init__(self, {default_argtext}):
  self._prop_names = {list_of_valid_keys}
  self._type = '{typename}'
  self._namespace = '{namespace}'
+ self._valid_wildcard_attributes =\
+ {list_of_valid_wildcard_attr_prefixes}
  self.available_events = {events}
  self.available_properties = {list_of_valid_keys}
+ self.available_wildcard_properties =\
+ {list_of_valid_wildcard_attr_prefixes}
 
  for k in {required_args}:
  if k not in kwargs:
@@ -236,15 +255,23 @@ def __init__(self, {default_argtext}):
  super({typename}, self).__init__({argtext})
 
  def __repr__(self):
- if(any(getattr(self, c, None) is not None for c in self._prop_names
- if c is not self._prop_names[0])):
-
- return (
- '{typename}(' +
- ', '.join([c+'='+repr(getattr(self, c, None))
- for c in self._prop_names
- if getattr(self, c, None) is not None])+')')
-
+ if(any(getattr(self, c, None) is not None
+ for c in self._prop_names
+ if c is not self._prop_names[0])
+ or any(getattr(self, c, None) is not None
+ for c in self.__dict__.keys()
+ if any(c.startswith(wc_attr)
+ for wc_attr in self._valid_wildcard_attributes))):
+ props_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self._prop_names
+ if getattr(self, c, None) is not None])
+ wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self.__dict__.keys()
+ if any([c.startswith(wc_attr)
+ for wc_attr in
+ self._valid_wildcard_attributes])])
+ return ('{typename}(' + props_string +
+ (', ' + wilds_string if wilds_string != '' else '') + ')')
  else:
  return (
  '{typename}(' +
@@ -253,6 +280,8 @@ def __repr__(self):
 
  filtered_props = reorder_props(filter_props(props))
  # pylint: disable=unused-variable
+ list_of_valid_wildcard_attr_prefixes = repr(parse_wildcards(props))
+ # pylint: disable=unused-variable
  list_of_valid_keys = repr(list(filtered_props.keys()))
  # pylint: disable=unused-variable
  docstring = create_docstring(
@@ -273,11 +302,9 @@ def __repr__(self):
 
  required_args = required_props(props)
 
- d = c.format(**locals())
-
  scope = {'Component': Component}
  # pylint: disable=exec-used
- exec(d, scope)
+ exec(c.format(**locals()), scope)
  result = scope[typename]
  return result
 
@@ -366,6 +393,27 @@ def parse_events(props):
  return events
 
 
+def parse_wildcards(props):
+ """
+ Pull out the wildcard attributes from the Component props
+
+ Parameters
+ ----------
+ props: dict
+ Dictionary with {propName: propMetadata} structure
+
+ Returns
+ -------
+ list
+ List of Dash valid wildcard prefixes
+ """
+ list_of_valid_wildcard_attr_prefixes = []
+ for wildcard_attr in ["data-*", "aria-*"]:
+ if wildcard_attr in props.keys():
+ list_of_valid_wildcard_attr_prefixes.append(wildcard_attr[:-1])
+ return list_of_valid_wildcard_attr_prefixes
+
+
 def reorder_props(props):
  """
  If "children" is in props, then move it to the

dash/version.py

@@ -1 +1 @@
-__version__ = '0.21.0'
+__version__ = '0.21.1'

dev-requirements.txt

@@ -1,5 +1,5 @@
 dash_core_components>=0.4.0
-dash_html_components>=0.5.0
+dash_html_components>=0.11.0rc1
 dash_flow_example==0.0.3
 dash_renderer
 percy

requirements.txt

@@ -2,7 +2,7 @@ appnope==0.1.0
 backports.shutil-get-terminal-size==1.0.0
 click==6.7
 dash-core-components==0.3.3
-dash-html-components==0.4.0
+dash-html-components==0.11.0rc1
 dash-renderer==0.2.9
 dash.ly==0.14.0
 decorator==4.0.11

tests/development/metadata_test.json

@@ -207,6 +207,20 @@
  "required": false,
  "description": ""
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
  "id": {
  "type": {
  "name": "string"

tests/development/test_base_component.py

@@ -17,6 +17,7 @@
 Component._prop_names = ('id', 'a', 'children', 'style', )
 Component._type = 'TestComponent'
 Component._namespace = 'test_namespace'
+Component._valid_wildcard_attributes = ['data-', 'aria-']
 
 
 def nested_tree():
@@ -411,6 +412,25 @@ def to_dict(id, children):
  )
  """
 
+ def test_to_plotly_json_with_wildcards(self):
+ c = Component(id='a', **{'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None})
+ c._prop_names = ('id',)
+ c._type = 'MyComponent'
+ c._namespace = 'basic'
+ self.assertEqual(
+ c.to_plotly_json(),
+ {'namespace': 'basic',
+ 'props': {
+ 'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None,
+ 'id': 'a',
+ },
+ 'type': 'MyComponent'}
+ )
+
  def test_len(self):
  self.assertEqual(len(Component()), 0)
  self.assertEqual(len(Component(children='Hello World')), 1)
@@ -580,6 +600,16 @@ def test_repr_nested_arguments(self):
  "Table(Table(children=Table(id='1'), id='2'))"
  )
 
+ def test_repr_with_wildcards(self):
+ c = self.ComponentClass(id='1', **{"data-one": "one",
+ "aria-two": "two"})
+ data_first = "Table(id='1', data-one='one', aria-two='two')"
+ aria_first = "Table(id='1', aria-two='two', data-one='one')"
+ repr_string = repr(c)
+ if not (repr_string == data_first or repr_string == aria_first):
+ raise Exception("%s\nDoes not equal\n%s\nor\n%s" %
+ (repr_string, data_first, aria_first))
+
  def test_docstring(self):
  assert_docstring(self.assertEqual, self.ComponentClass.__doc__)
 
@@ -674,6 +704,10 @@ def setUp(self):
 
  ['customArrayProp', 'list'],
 
+ ['data-*', 'string'],
+
+ ['aria-*', 'string'],
+
  ['id', 'string'],
 
  ['dashEvents', "a value equal to: 'restyle', 'relayout', 'click'"]
@@ -749,6 +783,8 @@ def assert_docstring(assertEqual, docstring):
 
  "- customProp (optional)",
  "- customArrayProp (list; optional)",
+ '- data-* (string; optional)',
+ '- aria-* (string; optional)',
  '- id (string; optional)',
  '',
  "Available events: 'restyle', 'relayout', 'click'",

tests/development/test_component_loader.py

@@ -28,6 +28,20 @@
  "description": "Children",
  "required": false
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard data",
+ "required": false
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard aria",
+ "required": false
+ },
  "bar": {
  "type": {
  "name": "custom"
@@ -113,6 +127,9 @@ def test_loadcomponents(self):
  'foo': 'Hello World',
  'bar': 'Lah Lah',
  'baz': 'Lemons',
+ 'data-foo': 'Blah',
+ 'aria-bar': 'Seven',
+ 'baz': 'Lemons',
  'children': 'Child'
  }
  AKwargs = {

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.21.1 - 2018-04-10
+## Added
+- `aria-*` and `data-*` attributes are now supported in all dash html components. (#40)
+- These new keywords can be added using a dictionary expansion, e.g. `html.Div(id="my-div", **{"data-toggle": "toggled", "aria-toggled": "true"})`
+
 ## 0.21.0 - 2018-02-21
 ## Added
 - #207 Dash now supports React components that use [Flow](https://flow.org/en/docs/react/).

dash/dash.py

@@ -408,7 +408,9 @@ def _validate_callback(self, output, inputs, state, events):
 
  if (hasattr(arg, 'component_property') and
  arg.component_property not in
- component.available_properties):
+ component.available_properties and not
+ any(arg.component_property.startswith(w) for w in
+ component.available_wildcard_properties)):
  raise exceptions.NonExistantPropException('''
  Attempting to assign a callback with
  the property "{}" but the component

dash/development/base_component.py

@@ -23,7 +23,11 @@ def __init__(self, **kwargs):
  # pylint: disable=super-init-not-called
  for k, v in list(kwargs.items()):
  # pylint: disable=no-member
- if k not in self._prop_names:
+ k_in_propnames = k in self._prop_names
+ k_in_wildcards = any([k.startswith(w)
+ for w in
+ self._valid_wildcard_attributes])
+ if not k_in_propnames and not k_in_wildcards:
  raise TypeError(
  'Unexpected keyword argument `{}`'.format(k) +
  '\nAllowed arguments: {}'.format(
@@ -34,10 +38,21 @@ def __init__(self, **kwargs):
  setattr(self, k, v)
 
  def to_plotly_json(self):
+ # Add normal properties
+ props = {
+ p: getattr(self, p)
+ for p in self._prop_names # pylint: disable=no-member
+ if hasattr(self, p)
+ }
+ # Add the wildcard properties data-* and aria-*
+ props.update({
+ k: getattr(self, k)
+ for k in self.__dict__
+ if any(k.startswith(w) for w in
+ self._valid_wildcard_attributes) # pylint:disable=no-member
+ })
  as_json = {
- 'props': {p: getattr(self, p)
- for p in self._prop_names # pylint: disable=no-member
- if hasattr(self, p)},
+ 'props': props,
  'type': self._type, # pylint: disable=no-member
  'namespace': self._namespace # pylint: disable=no-member
  }
@@ -225,8 +240,12 @@ def __init__(self, {default_argtext}):
  self._prop_names = {list_of_valid_keys}
  self._type = '{typename}'
  self._namespace = '{namespace}'
+ self._valid_wildcard_attributes =\
+ {list_of_valid_wildcard_attr_prefixes}
  self.available_events = {events}
  self.available_properties = {list_of_valid_keys}
+ self.available_wildcard_properties =\
+ {list_of_valid_wildcard_attr_prefixes}
 
  for k in {required_args}:
  if k not in kwargs:
@@ -236,15 +255,23 @@ def __init__(self, {default_argtext}):
  super({typename}, self).__init__({argtext})
 
  def __repr__(self):
- if(any(getattr(self, c, None) is not None for c in self._prop_names
- if c is not self._prop_names[0])):
-
- return (
- '{typename}(' +
- ', '.join([c+'='+repr(getattr(self, c, None))
- for c in self._prop_names
- if getattr(self, c, None) is not None])+')')
-
+ if(any(getattr(self, c, None) is not None
+ for c in self._prop_names
+ if c is not self._prop_names[0])
+ or any(getattr(self, c, None) is not None
+ for c in self.__dict__.keys()
+ if any(c.startswith(wc_attr)
+ for wc_attr in self._valid_wildcard_attributes))):
+ props_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self._prop_names
+ if getattr(self, c, None) is not None])
+ wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self.__dict__.keys()
+ if any([c.startswith(wc_attr)
+ for wc_attr in
+ self._valid_wildcard_attributes])])
+ return ('{typename}(' + props_string +
+ (', ' + wilds_string if wilds_string != '' else '') + ')')
  else:
  return (
  '{typename}(' +
@@ -253,6 +280,8 @@ def __repr__(self):
 
  filtered_props = reorder_props(filter_props(props))
  # pylint: disable=unused-variable
+ list_of_valid_wildcard_attr_prefixes = repr(parse_wildcards(props))
+ # pylint: disable=unused-variable
  list_of_valid_keys = repr(list(filtered_props.keys()))
  # pylint: disable=unused-variable
  docstring = create_docstring(
@@ -273,11 +302,9 @@ def __repr__(self):
 
  required_args = required_props(props)
 
- d = c.format(**locals())
-
  scope = {'Component': Component}
  # pylint: disable=exec-used
- exec(d, scope)
+ exec(c.format(**locals()), scope)
  result = scope[typename]
  return result
 
@@ -366,6 +393,27 @@ def parse_events(props):
  return events
 
 
+def parse_wildcards(props):
+ """
+ Pull out the wildcard attributes from the Component props
+
+ Parameters
+ ----------
+ props: dict
+ Dictionary with {propName: propMetadata} structure
+
+ Returns
+ -------
+ list
+ List of Dash valid wildcard prefixes
+ """
+ list_of_valid_wildcard_attr_prefixes = []
+ for wildcard_attr in ["data-*", "aria-*"]:
+ if wildcard_attr in props.keys():
+ list_of_valid_wildcard_attr_prefixes.append(wildcard_attr[:-1])
+ return list_of_valid_wildcard_attr_prefixes
+
+
 def reorder_props(props):
  """
  If "children" is in props, then move it to the

dash/version.py

@@ -1 +1 @@
-__version__ = '0.21.0'
+__version__ = '0.21.1'

dev-requirements.txt

@@ -1,5 +1,5 @@
 dash_core_components>=0.4.0
-dash_html_components>=0.5.0
+dash_html_components>=0.11.0rc1
 dash_flow_example==0.0.3
 dash_renderer
 percy

requirements.txt

@@ -2,7 +2,7 @@ appnope==0.1.0
 backports.shutil-get-terminal-size==1.0.0
 click==6.7
 dash-core-components==0.3.3
-dash-html-components==0.4.0
+dash-html-components==0.11.0rc1
 dash-renderer==0.2.9
 dash.ly==0.14.0
 decorator==4.0.11

tests/development/metadata_test.json

@@ -207,6 +207,20 @@
  "required": false,
  "description": ""
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
  "id": {
  "type": {
  "name": "string"

tests/development/test_base_component.py

@@ -17,6 +17,7 @@
 Component._prop_names = ('id', 'a', 'children', 'style', )
 Component._type = 'TestComponent'
 Component._namespace = 'test_namespace'
+Component._valid_wildcard_attributes = ['data-', 'aria-']
 
 
 def nested_tree():
@@ -411,6 +412,25 @@ def to_dict(id, children):
  )
  """
 
+ def test_to_plotly_json_with_wildcards(self):
+ c = Component(id='a', **{'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None})
+ c._prop_names = ('id',)
+ c._type = 'MyComponent'
+ c._namespace = 'basic'
+ self.assertEqual(
+ c.to_plotly_json(),
+ {'namespace': 'basic',
+ 'props': {
+ 'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None,
+ 'id': 'a',
+ },
+ 'type': 'MyComponent'}
+ )
+
  def test_len(self):
  self.assertEqual(len(Component()), 0)
  self.assertEqual(len(Component(children='Hello World')), 1)
@@ -580,6 +600,16 @@ def test_repr_nested_arguments(self):
  "Table(Table(children=Table(id='1'), id='2'))"
  )
 
+ def test_repr_with_wildcards(self):
+ c = self.ComponentClass(id='1', **{"data-one": "one",
+ "aria-two": "two"})
+ data_first = "Table(id='1', data-one='one', aria-two='two')"
+ aria_first = "Table(id='1', aria-two='two', data-one='one')"
+ repr_string = repr(c)
+ if not (repr_string == data_first or repr_string == aria_first):
+ raise Exception("%s\nDoes not equal\n%s\nor\n%s" %
+ (repr_string, data_first, aria_first))
+
  def test_docstring(self):
  assert_docstring(self.assertEqual, self.ComponentClass.__doc__)
 
@@ -674,6 +704,10 @@ def setUp(self):
 
  ['customArrayProp', 'list'],
 
+ ['data-*', 'string'],
+
+ ['aria-*', 'string'],
+
  ['id', 'string'],
 
  ['dashEvents', "a value equal to: 'restyle', 'relayout', 'click'"]
@@ -749,6 +783,8 @@ def assert_docstring(assertEqual, docstring):
 
  "- customProp (optional)",
  "- customArrayProp (list; optional)",
+ '- data-* (string; optional)',
+ '- aria-* (string; optional)',
  '- id (string; optional)',
  '',
  "Available events: 'restyle', 'relayout', 'click'",

tests/development/test_component_loader.py

@@ -28,6 +28,20 @@
  "description": "Children",
  "required": false
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard data",
+ "required": false
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard aria",
+ "required": false
+ },
  "bar": {
  "type": {
  "name": "custom"
@@ -113,6 +127,9 @@ def test_loadcomponents(self):
  'foo': 'Hello World',
  'bar': 'Lah Lah',
  'baz': 'Lemons',
+ 'data-foo': 'Blah',
+ 'aria-bar': 'Seven',
+ 'baz': 'Lemons',
  'children': 'Child'
  }
  AKwargs = {

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.21.1 - 2018-04-10
+## Added
+- `aria-*` and `data-*` attributes are now supported in all dash html components. (#40)
+- These new keywords can be added using a dictionary expansion, e.g. `html.Div(id="my-div", **{"data-toggle": "toggled", "aria-toggled": "true"})`
+
 ## 0.21.0 - 2018-02-21
 ## Added
 - #207 Dash now supports React components that use [Flow](https://flow.org/en/docs/react/).

dash/dash.py

@@ -408,7 +408,9 @@ def _validate_callback(self, output, inputs, state, events):
 
  if (hasattr(arg, 'component_property') and
  arg.component_property not in
- component.available_properties):
+ component.available_properties and not
+ any(arg.component_property.startswith(w) for w in
+ component.available_wildcard_properties)):
  raise exceptions.NonExistantPropException('''
  Attempting to assign a callback with
  the property "{}" but the component

dash/development/base_component.py

@@ -23,7 +23,11 @@ def __init__(self, **kwargs):
  # pylint: disable=super-init-not-called
  for k, v in list(kwargs.items()):
  # pylint: disable=no-member
- if k not in self._prop_names:
+ k_in_propnames = k in self._prop_names
+ k_in_wildcards = any([k.startswith(w)
+ for w in
+ self._valid_wildcard_attributes])
+ if not k_in_propnames and not k_in_wildcards:
  raise TypeError(
  'Unexpected keyword argument `{}`'.format(k) +
  '\nAllowed arguments: {}'.format(
@@ -34,10 +38,21 @@ def __init__(self, **kwargs):
  setattr(self, k, v)
 
  def to_plotly_json(self):
+ # Add normal properties
+ props = {
+ p: getattr(self, p)
+ for p in self._prop_names # pylint: disable=no-member
+ if hasattr(self, p)
+ }
+ # Add the wildcard properties data-* and aria-*
+ props.update({
+ k: getattr(self, k)
+ for k in self.__dict__
+ if any(k.startswith(w) for w in
+ self._valid_wildcard_attributes) # pylint:disable=no-member
+ })
  as_json = {
- 'props': {p: getattr(self, p)
- for p in self._prop_names # pylint: disable=no-member
- if hasattr(self, p)},
+ 'props': props,
  'type': self._type, # pylint: disable=no-member
  'namespace': self._namespace # pylint: disable=no-member
  }
@@ -225,8 +240,12 @@ def __init__(self, {default_argtext}):
  self._prop_names = {list_of_valid_keys}
  self._type = '{typename}'
  self._namespace = '{namespace}'
+ self._valid_wildcard_attributes =\
+ {list_of_valid_wildcard_attr_prefixes}
  self.available_events = {events}
  self.available_properties = {list_of_valid_keys}
+ self.available_wildcard_properties =\
+ {list_of_valid_wildcard_attr_prefixes}
 
  for k in {required_args}:
  if k not in kwargs:
@@ -236,15 +255,23 @@ def __init__(self, {default_argtext}):
  super({typename}, self).__init__({argtext})
 
  def __repr__(self):
- if(any(getattr(self, c, None) is not None for c in self._prop_names
- if c is not self._prop_names[0])):
-
- return (
- '{typename}(' +
- ', '.join([c+'='+repr(getattr(self, c, None))
- for c in self._prop_names
- if getattr(self, c, None) is not None])+')')
-
+ if(any(getattr(self, c, None) is not None
+ for c in self._prop_names
+ if c is not self._prop_names[0])
+ or any(getattr(self, c, None) is not None
+ for c in self.__dict__.keys()
+ if any(c.startswith(wc_attr)
+ for wc_attr in self._valid_wildcard_attributes))):
+ props_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self._prop_names
+ if getattr(self, c, None) is not None])
+ wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self.__dict__.keys()
+ if any([c.startswith(wc_attr)
+ for wc_attr in
+ self._valid_wildcard_attributes])])
+ return ('{typename}(' + props_string +
+ (', ' + wilds_string if wilds_string != '' else '') + ')')
  else:
  return (
  '{typename}(' +
@@ -253,6 +280,8 @@ def __repr__(self):
 
  filtered_props = reorder_props(filter_props(props))
  # pylint: disable=unused-variable
+ list_of_valid_wildcard_attr_prefixes = repr(parse_wildcards(props))
+ # pylint: disable=unused-variable
  list_of_valid_keys = repr(list(filtered_props.keys()))
  # pylint: disable=unused-variable
  docstring = create_docstring(
@@ -273,11 +302,9 @@ def __repr__(self):
 
  required_args = required_props(props)
 
- d = c.format(**locals())
-
  scope = {'Component': Component}
  # pylint: disable=exec-used
- exec(d, scope)
+ exec(c.format(**locals()), scope)
  result = scope[typename]
  return result
 
@@ -366,6 +393,27 @@ def parse_events(props):
  return events
 
 
+def parse_wildcards(props):
+ """
+ Pull out the wildcard attributes from the Component props
+
+ Parameters
+ ----------
+ props: dict
+ Dictionary with {propName: propMetadata} structure
+
+ Returns
+ -------
+ list
+ List of Dash valid wildcard prefixes
+ """
+ list_of_valid_wildcard_attr_prefixes = []
+ for wildcard_attr in ["data-*", "aria-*"]:
+ if wildcard_attr in props.keys():
+ list_of_valid_wildcard_attr_prefixes.append(wildcard_attr[:-1])
+ return list_of_valid_wildcard_attr_prefixes
+
+
 def reorder_props(props):
  """
  If "children" is in props, then move it to the

dash/version.py

@@ -1 +1 @@
-__version__ = '0.21.0'
+__version__ = '0.21.1'

dev-requirements.txt

@@ -1,5 +1,5 @@
 dash_core_components>=0.4.0
-dash_html_components>=0.5.0
+dash_html_components>=0.11.0rc1
 dash_flow_example==0.0.3
 dash_renderer
 percy

requirements.txt

@@ -2,7 +2,7 @@ appnope==0.1.0
 backports.shutil-get-terminal-size==1.0.0
 click==6.7
 dash-core-components==0.3.3
-dash-html-components==0.4.0
+dash-html-components==0.11.0rc1
 dash-renderer==0.2.9
 dash.ly==0.14.0
 decorator==4.0.11

tests/development/metadata_test.json

@@ -207,6 +207,20 @@
  "required": false,
  "description": ""
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
  "id": {
  "type": {
  "name": "string"

tests/development/test_base_component.py

@@ -17,6 +17,7 @@
 Component._prop_names = ('id', 'a', 'children', 'style', )
 Component._type = 'TestComponent'
 Component._namespace = 'test_namespace'
+Component._valid_wildcard_attributes = ['data-', 'aria-']
 
 
 def nested_tree():
@@ -411,6 +412,25 @@ def to_dict(id, children):
  )
  """
 
+ def test_to_plotly_json_with_wildcards(self):
+ c = Component(id='a', **{'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None})
+ c._prop_names = ('id',)
+ c._type = 'MyComponent'
+ c._namespace = 'basic'
+ self.assertEqual(
+ c.to_plotly_json(),
+ {'namespace': 'basic',
+ 'props': {
+ 'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None,
+ 'id': 'a',
+ },
+ 'type': 'MyComponent'}
+ )
+
  def test_len(self):
  self.assertEqual(len(Component()), 0)
  self.assertEqual(len(Component(children='Hello World')), 1)
@@ -580,6 +600,16 @@ def test_repr_nested_arguments(self):
  "Table(Table(children=Table(id='1'), id='2'))"
  )
 
+ def test_repr_with_wildcards(self):
+ c = self.ComponentClass(id='1', **{"data-one": "one",
+ "aria-two": "two"})
+ data_first = "Table(id='1', data-one='one', aria-two='two')"
+ aria_first = "Table(id='1', aria-two='two', data-one='one')"
+ repr_string = repr(c)
+ if not (repr_string == data_first or repr_string == aria_first):
+ raise Exception("%s\nDoes not equal\n%s\nor\n%s" %
+ (repr_string, data_first, aria_first))
+
  def test_docstring(self):
  assert_docstring(self.assertEqual, self.ComponentClass.__doc__)
 
@@ -674,6 +704,10 @@ def setUp(self):
 
  ['customArrayProp', 'list'],
 
+ ['data-*', 'string'],
+
+ ['aria-*', 'string'],
+
  ['id', 'string'],
 
  ['dashEvents', "a value equal to: 'restyle', 'relayout', 'click'"]
@@ -749,6 +783,8 @@ def assert_docstring(assertEqual, docstring):
 
  "- customProp (optional)",
  "- customArrayProp (list; optional)",
+ '- data-* (string; optional)',
+ '- aria-* (string; optional)',
  '- id (string; optional)',
  '',
  "Available events: 'restyle', 'relayout', 'click'",

tests/development/test_component_loader.py

@@ -28,6 +28,20 @@
  "description": "Children",
  "required": false
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard data",
+ "required": false
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard aria",
+ "required": false
+ },
  "bar": {
  "type": {
  "name": "custom"
@@ -113,6 +127,9 @@ def test_loadcomponents(self):
  'foo': 'Hello World',
  'bar': 'Lah Lah',
  'baz': 'Lemons',
+ 'data-foo': 'Blah',
+ 'aria-bar': 'Seven',
+ 'baz': 'Lemons',
  'children': 'Child'
  }
  AKwargs = {

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.21.1 - 2018-04-10
+## Added
+- `aria-*` and `data-*` attributes are now supported in all dash html components. (#40)
+- These new keywords can be added using a dictionary expansion, e.g. `html.Div(id="my-div", **{"data-toggle": "toggled", "aria-toggled": "true"})`
+
 ## 0.21.0 - 2018-02-21
 ## Added
 - #207 Dash now supports React components that use [Flow](https://flow.org/en/docs/react/).

dash/dash.py

@@ -408,7 +408,9 @@ def _validate_callback(self, output, inputs, state, events):
 
  if (hasattr(arg, 'component_property') and
  arg.component_property not in
- component.available_properties):
+ component.available_properties and not
+ any(arg.component_property.startswith(w) for w in
+ component.available_wildcard_properties)):
  raise exceptions.NonExistantPropException('''
  Attempting to assign a callback with
  the property "{}" but the component

dash/development/base_component.py

@@ -23,7 +23,11 @@ def __init__(self, **kwargs):
  # pylint: disable=super-init-not-called
  for k, v in list(kwargs.items()):
  # pylint: disable=no-member
- if k not in self._prop_names:
+ k_in_propnames = k in self._prop_names
+ k_in_wildcards = any([k.startswith(w)
+ for w in
+ self._valid_wildcard_attributes])
+ if not k_in_propnames and not k_in_wildcards:
  raise TypeError(
  'Unexpected keyword argument `{}`'.format(k) +
  '\nAllowed arguments: {}'.format(
@@ -34,10 +38,21 @@ def __init__(self, **kwargs):
  setattr(self, k, v)
 
  def to_plotly_json(self):
+ # Add normal properties
+ props = {
+ p: getattr(self, p)
+ for p in self._prop_names # pylint: disable=no-member
+ if hasattr(self, p)
+ }
+ # Add the wildcard properties data-* and aria-*
+ props.update({
+ k: getattr(self, k)
+ for k in self.__dict__
+ if any(k.startswith(w) for w in
+ self._valid_wildcard_attributes) # pylint:disable=no-member
+ })
  as_json = {
- 'props': {p: getattr(self, p)
- for p in self._prop_names # pylint: disable=no-member
- if hasattr(self, p)},
+ 'props': props,
  'type': self._type, # pylint: disable=no-member
  'namespace': self._namespace # pylint: disable=no-member
  }
@@ -225,8 +240,12 @@ def __init__(self, {default_argtext}):
  self._prop_names = {list_of_valid_keys}
  self._type = '{typename}'
  self._namespace = '{namespace}'
+ self._valid_wildcard_attributes =\
+ {list_of_valid_wildcard_attr_prefixes}
  self.available_events = {events}
  self.available_properties = {list_of_valid_keys}
+ self.available_wildcard_properties =\
+ {list_of_valid_wildcard_attr_prefixes}
 
  for k in {required_args}:
  if k not in kwargs:
@@ -236,15 +255,23 @@ def __init__(self, {default_argtext}):
  super({typename}, self).__init__({argtext})
 
  def __repr__(self):
- if(any(getattr(self, c, None) is not None for c in self._prop_names
- if c is not self._prop_names[0])):
-
- return (
- '{typename}(' +
- ', '.join([c+'='+repr(getattr(self, c, None))
- for c in self._prop_names
- if getattr(self, c, None) is not None])+')')
-
+ if(any(getattr(self, c, None) is not None
+ for c in self._prop_names
+ if c is not self._prop_names[0])
+ or any(getattr(self, c, None) is not None
+ for c in self.__dict__.keys()
+ if any(c.startswith(wc_attr)
+ for wc_attr in self._valid_wildcard_attributes))):
+ props_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self._prop_names
+ if getattr(self, c, None) is not None])
+ wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self.__dict__.keys()
+ if any([c.startswith(wc_attr)
+ for wc_attr in
+ self._valid_wildcard_attributes])])
+ return ('{typename}(' + props_string +
+ (', ' + wilds_string if wilds_string != '' else '') + ')')
  else:
  return (
  '{typename}(' +
@@ -253,6 +280,8 @@ def __repr__(self):
 
  filtered_props = reorder_props(filter_props(props))
  # pylint: disable=unused-variable
+ list_of_valid_wildcard_attr_prefixes = repr(parse_wildcards(props))
+ # pylint: disable=unused-variable
  list_of_valid_keys = repr(list(filtered_props.keys()))
  # pylint: disable=unused-variable
  docstring = create_docstring(
@@ -273,11 +302,9 @@ def __repr__(self):
 
  required_args = required_props(props)
 
- d = c.format(**locals())
-
  scope = {'Component': Component}
  # pylint: disable=exec-used
- exec(d, scope)
+ exec(c.format(**locals()), scope)
  result = scope[typename]
  return result
 
@@ -366,6 +393,27 @@ def parse_events(props):
  return events
 
 
+def parse_wildcards(props):
+ """
+ Pull out the wildcard attributes from the Component props
+
+ Parameters
+ ----------
+ props: dict
+ Dictionary with {propName: propMetadata} structure
+
+ Returns
+ -------
+ list
+ List of Dash valid wildcard prefixes
+ """
+ list_of_valid_wildcard_attr_prefixes = []
+ for wildcard_attr in ["data-*", "aria-*"]:
+ if wildcard_attr in props.keys():
+ list_of_valid_wildcard_attr_prefixes.append(wildcard_attr[:-1])
+ return list_of_valid_wildcard_attr_prefixes
+
+
 def reorder_props(props):
  """
  If "children" is in props, then move it to the

dash/version.py

@@ -1 +1 @@
-__version__ = '0.21.0'
+__version__ = '0.21.1'

dev-requirements.txt

@@ -1,5 +1,5 @@
 dash_core_components>=0.4.0
-dash_html_components>=0.5.0
+dash_html_components>=0.11.0rc1
 dash_flow_example==0.0.3
 dash_renderer
 percy

requirements.txt

@@ -2,7 +2,7 @@ appnope==0.1.0
 backports.shutil-get-terminal-size==1.0.0
 click==6.7
 dash-core-components==0.3.3
-dash-html-components==0.4.0
+dash-html-components==0.11.0rc1
 dash-renderer==0.2.9
 dash.ly==0.14.0
 decorator==4.0.11

tests/development/metadata_test.json

@@ -207,6 +207,20 @@
  "required": false,
  "description": ""
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
  "id": {
  "type": {
  "name": "string"

tests/development/test_base_component.py

@@ -17,6 +17,7 @@
 Component._prop_names = ('id', 'a', 'children', 'style', )
 Component._type = 'TestComponent'
 Component._namespace = 'test_namespace'
+Component._valid_wildcard_attributes = ['data-', 'aria-']
 
 
 def nested_tree():
@@ -411,6 +412,25 @@ def to_dict(id, children):
  )
  """
 
+ def test_to_plotly_json_with_wildcards(self):
+ c = Component(id='a', **{'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None})
+ c._prop_names = ('id',)
+ c._type = 'MyComponent'
+ c._namespace = 'basic'
+ self.assertEqual(
+ c.to_plotly_json(),
+ {'namespace': 'basic',
+ 'props': {
+ 'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None,
+ 'id': 'a',
+ },
+ 'type': 'MyComponent'}
+ )
+
  def test_len(self):
  self.assertEqual(len(Component()), 0)
  self.assertEqual(len(Component(children='Hello World')), 1)
@@ -580,6 +600,16 @@ def test_repr_nested_arguments(self):
  "Table(Table(children=Table(id='1'), id='2'))"
  )
 
+ def test_repr_with_wildcards(self):
+ c = self.ComponentClass(id='1', **{"data-one": "one",
+ "aria-two": "two"})
+ data_first = "Table(id='1', data-one='one', aria-two='two')"
+ aria_first = "Table(id='1', aria-two='two', data-one='one')"
+ repr_string = repr(c)
+ if not (repr_string == data_first or repr_string == aria_first):
+ raise Exception("%s\nDoes not equal\n%s\nor\n%s" %
+ (repr_string, data_first, aria_first))
+
  def test_docstring(self):
  assert_docstring(self.assertEqual, self.ComponentClass.__doc__)
 
@@ -674,6 +704,10 @@ def setUp(self):
 
  ['customArrayProp', 'list'],
 
+ ['data-*', 'string'],
+
+ ['aria-*', 'string'],
+
  ['id', 'string'],
 
  ['dashEvents', "a value equal to: 'restyle', 'relayout', 'click'"]
@@ -749,6 +783,8 @@ def assert_docstring(assertEqual, docstring):
 
  "- customProp (optional)",
  "- customArrayProp (list; optional)",
+ '- data-* (string; optional)',
+ '- aria-* (string; optional)',
  '- id (string; optional)',
  '',
  "Available events: 'restyle', 'relayout', 'click'",

tests/development/test_component_loader.py

@@ -28,6 +28,20 @@
  "description": "Children",
  "required": false
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard data",
+ "required": false
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard aria",
+ "required": false
+ },
  "bar": {
  "type": {
  "name": "custom"
@@ -113,6 +127,9 @@ def test_loadcomponents(self):
  'foo': 'Hello World',
  'bar': 'Lah Lah',
  'baz': 'Lemons',
+ 'data-foo': 'Blah',
+ 'aria-bar': 'Seven',
+ 'baz': 'Lemons',
  'children': 'Child'
  }
  AKwargs = {

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.21.1 - 2018-04-10
+## Added
+- `aria-*` and `data-*` attributes are now supported in all dash html components. (#40)
+- These new keywords can be added using a dictionary expansion, e.g. `html.Div(id="my-div", **{"data-toggle": "toggled", "aria-toggled": "true"})`
+
 ## 0.21.0 - 2018-02-21
 ## Added
 - #207 Dash now supports React components that use [Flow](https://flow.org/en/docs/react/).

dash/dash.py

@@ -408,7 +408,9 @@ def _validate_callback(self, output, inputs, state, events):
 
  if (hasattr(arg, 'component_property') and
  arg.component_property not in
- component.available_properties):
+ component.available_properties and not
+ any(arg.component_property.startswith(w) for w in
+ component.available_wildcard_properties)):
  raise exceptions.NonExistantPropException('''
  Attempting to assign a callback with
  the property "{}" but the component

dash/development/base_component.py

@@ -23,7 +23,11 @@ def __init__(self, **kwargs):
  # pylint: disable=super-init-not-called
  for k, v in list(kwargs.items()):
  # pylint: disable=no-member
- if k not in self._prop_names:
+ k_in_propnames = k in self._prop_names
+ k_in_wildcards = any([k.startswith(w)
+ for w in
+ self._valid_wildcard_attributes])
+ if not k_in_propnames and not k_in_wildcards:
  raise TypeError(
  'Unexpected keyword argument `{}`'.format(k) +
  '\nAllowed arguments: {}'.format(
@@ -34,10 +38,21 @@ def __init__(self, **kwargs):
  setattr(self, k, v)
 
  def to_plotly_json(self):
+ # Add normal properties
+ props = {
+ p: getattr(self, p)
+ for p in self._prop_names # pylint: disable=no-member
+ if hasattr(self, p)
+ }
+ # Add the wildcard properties data-* and aria-*
+ props.update({
+ k: getattr(self, k)
+ for k in self.__dict__
+ if any(k.startswith(w) for w in
+ self._valid_wildcard_attributes) # pylint:disable=no-member
+ })
  as_json = {
- 'props': {p: getattr(self, p)
- for p in self._prop_names # pylint: disable=no-member
- if hasattr(self, p)},
+ 'props': props,
  'type': self._type, # pylint: disable=no-member
  'namespace': self._namespace # pylint: disable=no-member
  }
@@ -225,8 +240,12 @@ def __init__(self, {default_argtext}):
  self._prop_names = {list_of_valid_keys}
  self._type = '{typename}'
  self._namespace = '{namespace}'
+ self._valid_wildcard_attributes =\
+ {list_of_valid_wildcard_attr_prefixes}
  self.available_events = {events}
  self.available_properties = {list_of_valid_keys}
+ self.available_wildcard_properties =\
+ {list_of_valid_wildcard_attr_prefixes}
 
  for k in {required_args}:
  if k not in kwargs:
@@ -236,15 +255,23 @@ def __init__(self, {default_argtext}):
  super({typename}, self).__init__({argtext})
 
  def __repr__(self):
- if(any(getattr(self, c, None) is not None for c in self._prop_names
- if c is not self._prop_names[0])):
-
- return (
- '{typename}(' +
- ', '.join([c+'='+repr(getattr(self, c, None))
- for c in self._prop_names
- if getattr(self, c, None) is not None])+')')
-
+ if(any(getattr(self, c, None) is not None
+ for c in self._prop_names
+ if c is not self._prop_names[0])
+ or any(getattr(self, c, None) is not None
+ for c in self.__dict__.keys()
+ if any(c.startswith(wc_attr)
+ for wc_attr in self._valid_wildcard_attributes))):
+ props_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self._prop_names
+ if getattr(self, c, None) is not None])
+ wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self.__dict__.keys()
+ if any([c.startswith(wc_attr)
+ for wc_attr in
+ self._valid_wildcard_attributes])])
+ return ('{typename}(' + props_string +
+ (', ' + wilds_string if wilds_string != '' else '') + ')')
  else:
  return (
  '{typename}(' +
@@ -253,6 +280,8 @@ def __repr__(self):
 
  filtered_props = reorder_props(filter_props(props))
  # pylint: disable=unused-variable
+ list_of_valid_wildcard_attr_prefixes = repr(parse_wildcards(props))
+ # pylint: disable=unused-variable
  list_of_valid_keys = repr(list(filtered_props.keys()))
  # pylint: disable=unused-variable
  docstring = create_docstring(
@@ -273,11 +302,9 @@ def __repr__(self):
 
  required_args = required_props(props)
 
- d = c.format(**locals())
-
  scope = {'Component': Component}
  # pylint: disable=exec-used
- exec(d, scope)
+ exec(c.format(**locals()), scope)
  result = scope[typename]
  return result
 
@@ -366,6 +393,27 @@ def parse_events(props):
  return events
 
 
+def parse_wildcards(props):
+ """
+ Pull out the wildcard attributes from the Component props
+
+ Parameters
+ ----------
+ props: dict
+ Dictionary with {propName: propMetadata} structure
+
+ Returns
+ -------
+ list
+ List of Dash valid wildcard prefixes
+ """
+ list_of_valid_wildcard_attr_prefixes = []
+ for wildcard_attr in ["data-*", "aria-*"]:
+ if wildcard_attr in props.keys():
+ list_of_valid_wildcard_attr_prefixes.append(wildcard_attr[:-1])
+ return list_of_valid_wildcard_attr_prefixes
+
+
 def reorder_props(props):
  """
  If "children" is in props, then move it to the

dash/version.py

@@ -1 +1 @@
-__version__ = '0.21.0'
+__version__ = '0.21.1'

dev-requirements.txt

@@ -1,5 +1,5 @@
 dash_core_components>=0.4.0
-dash_html_components>=0.5.0
+dash_html_components>=0.11.0rc1
 dash_flow_example==0.0.3
 dash_renderer
 percy

requirements.txt

@@ -2,7 +2,7 @@ appnope==0.1.0
 backports.shutil-get-terminal-size==1.0.0
 click==6.7
 dash-core-components==0.3.3
-dash-html-components==0.4.0
+dash-html-components==0.11.0rc1
 dash-renderer==0.2.9
 dash.ly==0.14.0
 decorator==4.0.11

tests/development/metadata_test.json

@@ -207,6 +207,20 @@
  "required": false,
  "description": ""
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
  "id": {
  "type": {
  "name": "string"

tests/development/test_base_component.py

@@ -17,6 +17,7 @@
 Component._prop_names = ('id', 'a', 'children', 'style', )
 Component._type = 'TestComponent'
 Component._namespace = 'test_namespace'
+Component._valid_wildcard_attributes = ['data-', 'aria-']
 
 
 def nested_tree():
@@ -411,6 +412,25 @@ def to_dict(id, children):
  )
  """
 
+ def test_to_plotly_json_with_wildcards(self):
+ c = Component(id='a', **{'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None})
+ c._prop_names = ('id',)
+ c._type = 'MyComponent'
+ c._namespace = 'basic'
+ self.assertEqual(
+ c.to_plotly_json(),
+ {'namespace': 'basic',
+ 'props': {
+ 'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None,
+ 'id': 'a',
+ },
+ 'type': 'MyComponent'}
+ )
+
  def test_len(self):
  self.assertEqual(len(Component()), 0)
  self.assertEqual(len(Component(children='Hello World')), 1)
@@ -580,6 +600,16 @@ def test_repr_nested_arguments(self):
  "Table(Table(children=Table(id='1'), id='2'))"
  )
 
+ def test_repr_with_wildcards(self):
+ c = self.ComponentClass(id='1', **{"data-one": "one",
+ "aria-two": "two"})
+ data_first = "Table(id='1', data-one='one', aria-two='two')"
+ aria_first = "Table(id='1', aria-two='two', data-one='one')"
+ repr_string = repr(c)
+ if not (repr_string == data_first or repr_string == aria_first):
+ raise Exception("%s\nDoes not equal\n%s\nor\n%s" %
+ (repr_string, data_first, aria_first))
+
  def test_docstring(self):
  assert_docstring(self.assertEqual, self.ComponentClass.__doc__)
 
@@ -674,6 +704,10 @@ def setUp(self):
 
  ['customArrayProp', 'list'],
 
+ ['data-*', 'string'],
+
+ ['aria-*', 'string'],
+
  ['id', 'string'],
 
  ['dashEvents', "a value equal to: 'restyle', 'relayout', 'click'"]
@@ -749,6 +783,8 @@ def assert_docstring(assertEqual, docstring):
 
  "- customProp (optional)",
  "- customArrayProp (list; optional)",
+ '- data-* (string; optional)',
+ '- aria-* (string; optional)',
  '- id (string; optional)',
  '',
  "Available events: 'restyle', 'relayout', 'click'",

tests/development/test_component_loader.py

@@ -28,6 +28,20 @@
  "description": "Children",
  "required": false
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard data",
+ "required": false
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard aria",
+ "required": false
+ },
  "bar": {
  "type": {
  "name": "custom"
@@ -113,6 +127,9 @@ def test_loadcomponents(self):
  'foo': 'Hello World',
  'bar': 'Lah Lah',
  'baz': 'Lemons',
+ 'data-foo': 'Blah',
+ 'aria-bar': 'Seven',
+ 'baz': 'Lemons',
  'children': 'Child'
  }
  AKwargs = {

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.21.1 - 2018-04-10
+## Added
+- `aria-*` and `data-*` attributes are now supported in all dash html components. (#40)
+- These new keywords can be added using a dictionary expansion, e.g. `html.Div(id="my-div", **{"data-toggle": "toggled", "aria-toggled": "true"})`
+
 ## 0.21.0 - 2018-02-21
 ## Added
 - #207 Dash now supports React components that use [Flow](https://flow.org/en/docs/react/).

dash/dash.py

@@ -408,7 +408,9 @@ def _validate_callback(self, output, inputs, state, events):
 
  if (hasattr(arg, 'component_property') and
  arg.component_property not in
- component.available_properties):
+ component.available_properties and not
+ any(arg.component_property.startswith(w) for w in
+ component.available_wildcard_properties)):
  raise exceptions.NonExistantPropException('''
  Attempting to assign a callback with
  the property "{}" but the component

dash/development/base_component.py

@@ -23,7 +23,11 @@ def __init__(self, **kwargs):
  # pylint: disable=super-init-not-called
  for k, v in list(kwargs.items()):
  # pylint: disable=no-member
- if k not in self._prop_names:
+ k_in_propnames = k in self._prop_names
+ k_in_wildcards = any([k.startswith(w)
+ for w in
+ self._valid_wildcard_attributes])
+ if not k_in_propnames and not k_in_wildcards:
  raise TypeError(
  'Unexpected keyword argument `{}`'.format(k) +
  '\nAllowed arguments: {}'.format(
@@ -34,10 +38,21 @@ def __init__(self, **kwargs):
  setattr(self, k, v)
 
  def to_plotly_json(self):
+ # Add normal properties
+ props = {
+ p: getattr(self, p)
+ for p in self._prop_names # pylint: disable=no-member
+ if hasattr(self, p)
+ }
+ # Add the wildcard properties data-* and aria-*
+ props.update({
+ k: getattr(self, k)
+ for k in self.__dict__
+ if any(k.startswith(w) for w in
+ self._valid_wildcard_attributes) # pylint:disable=no-member
+ })
  as_json = {
- 'props': {p: getattr(self, p)
- for p in self._prop_names # pylint: disable=no-member
- if hasattr(self, p)},
+ 'props': props,
  'type': self._type, # pylint: disable=no-member
  'namespace': self._namespace # pylint: disable=no-member
  }
@@ -225,8 +240,12 @@ def __init__(self, {default_argtext}):
  self._prop_names = {list_of_valid_keys}
  self._type = '{typename}'
  self._namespace = '{namespace}'
+ self._valid_wildcard_attributes =\
+ {list_of_valid_wildcard_attr_prefixes}
  self.available_events = {events}
  self.available_properties = {list_of_valid_keys}
+ self.available_wildcard_properties =\
+ {list_of_valid_wildcard_attr_prefixes}
 
  for k in {required_args}:
  if k not in kwargs:
@@ -236,15 +255,23 @@ def __init__(self, {default_argtext}):
  super({typename}, self).__init__({argtext})
 
  def __repr__(self):
- if(any(getattr(self, c, None) is not None for c in self._prop_names
- if c is not self._prop_names[0])):
-
- return (
- '{typename}(' +
- ', '.join([c+'='+repr(getattr(self, c, None))
- for c in self._prop_names
- if getattr(self, c, None) is not None])+')')
-
+ if(any(getattr(self, c, None) is not None
+ for c in self._prop_names
+ if c is not self._prop_names[0])
+ or any(getattr(self, c, None) is not None
+ for c in self.__dict__.keys()
+ if any(c.startswith(wc_attr)
+ for wc_attr in self._valid_wildcard_attributes))):
+ props_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self._prop_names
+ if getattr(self, c, None) is not None])
+ wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self.__dict__.keys()
+ if any([c.startswith(wc_attr)
+ for wc_attr in
+ self._valid_wildcard_attributes])])
+ return ('{typename}(' + props_string +
+ (', ' + wilds_string if wilds_string != '' else '') + ')')
  else:
  return (
  '{typename}(' +
@@ -253,6 +280,8 @@ def __repr__(self):
 
  filtered_props = reorder_props(filter_props(props))
  # pylint: disable=unused-variable
+ list_of_valid_wildcard_attr_prefixes = repr(parse_wildcards(props))
+ # pylint: disable=unused-variable
  list_of_valid_keys = repr(list(filtered_props.keys()))
  # pylint: disable=unused-variable
  docstring = create_docstring(
@@ -273,11 +302,9 @@ def __repr__(self):
 
  required_args = required_props(props)
 
- d = c.format(**locals())
-
  scope = {'Component': Component}
  # pylint: disable=exec-used
- exec(d, scope)
+ exec(c.format(**locals()), scope)
  result = scope[typename]
  return result
 
@@ -366,6 +393,27 @@ def parse_events(props):
  return events
 
 
+def parse_wildcards(props):
+ """
+ Pull out the wildcard attributes from the Component props
+
+ Parameters
+ ----------
+ props: dict
+ Dictionary with {propName: propMetadata} structure
+
+ Returns
+ -------
+ list
+ List of Dash valid wildcard prefixes
+ """
+ list_of_valid_wildcard_attr_prefixes = []
+ for wildcard_attr in ["data-*", "aria-*"]:
+ if wildcard_attr in props.keys():
+ list_of_valid_wildcard_attr_prefixes.append(wildcard_attr[:-1])
+ return list_of_valid_wildcard_attr_prefixes
+
+
 def reorder_props(props):
  """
  If "children" is in props, then move it to the

dash/version.py

@@ -1 +1 @@
-__version__ = '0.21.0'
+__version__ = '0.21.1'

dev-requirements.txt

@@ -1,5 +1,5 @@
 dash_core_components>=0.4.0
-dash_html_components>=0.5.0
+dash_html_components>=0.11.0rc1
 dash_flow_example==0.0.3
 dash_renderer
 percy

requirements.txt

@@ -2,7 +2,7 @@ appnope==0.1.0
 backports.shutil-get-terminal-size==1.0.0
 click==6.7
 dash-core-components==0.3.3
-dash-html-components==0.4.0
+dash-html-components==0.11.0rc1
 dash-renderer==0.2.9
 dash.ly==0.14.0
 decorator==4.0.11

tests/development/metadata_test.json

@@ -207,6 +207,20 @@
  "required": false,
  "description": ""
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
  "id": {
  "type": {
  "name": "string"

tests/development/test_base_component.py

@@ -17,6 +17,7 @@
 Component._prop_names = ('id', 'a', 'children', 'style', )
 Component._type = 'TestComponent'
 Component._namespace = 'test_namespace'
+Component._valid_wildcard_attributes = ['data-', 'aria-']
 
 
 def nested_tree():
@@ -411,6 +412,25 @@ def to_dict(id, children):
  )
  """
 
+ def test_to_plotly_json_with_wildcards(self):
+ c = Component(id='a', **{'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None})
+ c._prop_names = ('id',)
+ c._type = 'MyComponent'
+ c._namespace = 'basic'
+ self.assertEqual(
+ c.to_plotly_json(),
+ {'namespace': 'basic',
+ 'props': {
+ 'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None,
+ 'id': 'a',
+ },
+ 'type': 'MyComponent'}
+ )
+
  def test_len(self):
  self.assertEqual(len(Component()), 0)
  self.assertEqual(len(Component(children='Hello World')), 1)
@@ -580,6 +600,16 @@ def test_repr_nested_arguments(self):
  "Table(Table(children=Table(id='1'), id='2'))"
  )
 
+ def test_repr_with_wildcards(self):
+ c = self.ComponentClass(id='1', **{"data-one": "one",
+ "aria-two": "two"})
+ data_first = "Table(id='1', data-one='one', aria-two='two')"
+ aria_first = "Table(id='1', aria-two='two', data-one='one')"
+ repr_string = repr(c)
+ if not (repr_string == data_first or repr_string == aria_first):
+ raise Exception("%s\nDoes not equal\n%s\nor\n%s" %
+ (repr_string, data_first, aria_first))
+
  def test_docstring(self):
  assert_docstring(self.assertEqual, self.ComponentClass.__doc__)
 
@@ -674,6 +704,10 @@ def setUp(self):
 
  ['customArrayProp', 'list'],
 
+ ['data-*', 'string'],
+
+ ['aria-*', 'string'],
+
  ['id', 'string'],
 
  ['dashEvents', "a value equal to: 'restyle', 'relayout', 'click'"]
@@ -749,6 +783,8 @@ def assert_docstring(assertEqual, docstring):
 
  "- customProp (optional)",
  "- customArrayProp (list; optional)",
+ '- data-* (string; optional)',
+ '- aria-* (string; optional)',
  '- id (string; optional)',
  '',
  "Available events: 'restyle', 'relayout', 'click'",

tests/development/test_component_loader.py

@@ -28,6 +28,20 @@
  "description": "Children",
  "required": false
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard data",
+ "required": false
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard aria",
+ "required": false
+ },
  "bar": {
  "type": {
  "name": "custom"
@@ -113,6 +127,9 @@ def test_loadcomponents(self):
  'foo': 'Hello World',
  'bar': 'Lah Lah',
  'baz': 'Lemons',
+ 'data-foo': 'Blah',
+ 'aria-bar': 'Seven',
+ 'baz': 'Lemons',
  'children': 'Child'
  }
  AKwargs = {

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.21.1 - 2018-04-10
+## Added
+- `aria-*` and `data-*` attributes are now supported in all dash html components. (#40)
+- These new keywords can be added using a dictionary expansion, e.g. `html.Div(id="my-div", **{"data-toggle": "toggled", "aria-toggled": "true"})`
+
 ## 0.21.0 - 2018-02-21
 ## Added
 - #207 Dash now supports React components that use [Flow](https://flow.org/en/docs/react/).

dash/dash.py

@@ -408,7 +408,9 @@ def _validate_callback(self, output, inputs, state, events):
 
  if (hasattr(arg, 'component_property') and
  arg.component_property not in
- component.available_properties):
+ component.available_properties and not
+ any(arg.component_property.startswith(w) for w in
+ component.available_wildcard_properties)):
  raise exceptions.NonExistantPropException('''
  Attempting to assign a callback with
  the property "{}" but the component

dash/development/base_component.py

@@ -23,7 +23,11 @@ def __init__(self, **kwargs):
  # pylint: disable=super-init-not-called
  for k, v in list(kwargs.items()):
  # pylint: disable=no-member
- if k not in self._prop_names:
+ k_in_propnames = k in self._prop_names
+ k_in_wildcards = any([k.startswith(w)
+ for w in
+ self._valid_wildcard_attributes])
+ if not k_in_propnames and not k_in_wildcards:
  raise TypeError(
  'Unexpected keyword argument `{}`'.format(k) +
  '\nAllowed arguments: {}'.format(
@@ -34,10 +38,21 @@ def __init__(self, **kwargs):
  setattr(self, k, v)
 
  def to_plotly_json(self):
+ # Add normal properties
+ props = {
+ p: getattr(self, p)
+ for p in self._prop_names # pylint: disable=no-member
+ if hasattr(self, p)
+ }
+ # Add the wildcard properties data-* and aria-*
+ props.update({
+ k: getattr(self, k)
+ for k in self.__dict__
+ if any(k.startswith(w) for w in
+ self._valid_wildcard_attributes) # pylint:disable=no-member
+ })
  as_json = {
- 'props': {p: getattr(self, p)
- for p in self._prop_names # pylint: disable=no-member
- if hasattr(self, p)},
+ 'props': props,
  'type': self._type, # pylint: disable=no-member
  'namespace': self._namespace # pylint: disable=no-member
  }
@@ -225,8 +240,12 @@ def __init__(self, {default_argtext}):
  self._prop_names = {list_of_valid_keys}
  self._type = '{typename}'
  self._namespace = '{namespace}'
+ self._valid_wildcard_attributes =\
+ {list_of_valid_wildcard_attr_prefixes}
  self.available_events = {events}
  self.available_properties = {list_of_valid_keys}
+ self.available_wildcard_properties =\
+ {list_of_valid_wildcard_attr_prefixes}
 
  for k in {required_args}:
  if k not in kwargs:
@@ -236,15 +255,23 @@ def __init__(self, {default_argtext}):
  super({typename}, self).__init__({argtext})
 
  def __repr__(self):
- if(any(getattr(self, c, None) is not None for c in self._prop_names
- if c is not self._prop_names[0])):
-
- return (
- '{typename}(' +
- ', '.join([c+'='+repr(getattr(self, c, None))
- for c in self._prop_names
- if getattr(self, c, None) is not None])+')')
-
+ if(any(getattr(self, c, None) is not None
+ for c in self._prop_names
+ if c is not self._prop_names[0])
+ or any(getattr(self, c, None) is not None
+ for c in self.__dict__.keys()
+ if any(c.startswith(wc_attr)
+ for wc_attr in self._valid_wildcard_attributes))):
+ props_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self._prop_names
+ if getattr(self, c, None) is not None])
+ wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
+ for c in self.__dict__.keys()
+ if any([c.startswith(wc_attr)
+ for wc_attr in
+ self._valid_wildcard_attributes])])
+ return ('{typename}(' + props_string +
+ (', ' + wilds_string if wilds_string != '' else '') + ')')
  else:
  return (
  '{typename}(' +
@@ -253,6 +280,8 @@ def __repr__(self):
 
  filtered_props = reorder_props(filter_props(props))
  # pylint: disable=unused-variable
+ list_of_valid_wildcard_attr_prefixes = repr(parse_wildcards(props))
+ # pylint: disable=unused-variable
  list_of_valid_keys = repr(list(filtered_props.keys()))
  # pylint: disable=unused-variable
  docstring = create_docstring(
@@ -273,11 +302,9 @@ def __repr__(self):
 
  required_args = required_props(props)
 
- d = c.format(**locals())
-
  scope = {'Component': Component}
  # pylint: disable=exec-used
- exec(d, scope)
+ exec(c.format(**locals()), scope)
  result = scope[typename]
  return result
 
@@ -366,6 +393,27 @@ def parse_events(props):
  return events
 
 
+def parse_wildcards(props):
+ """
+ Pull out the wildcard attributes from the Component props
+
+ Parameters
+ ----------
+ props: dict
+ Dictionary with {propName: propMetadata} structure
+
+ Returns
+ -------
+ list
+ List of Dash valid wildcard prefixes
+ """
+ list_of_valid_wildcard_attr_prefixes = []
+ for wildcard_attr in ["data-*", "aria-*"]:
+ if wildcard_attr in props.keys():
+ list_of_valid_wildcard_attr_prefixes.append(wildcard_attr[:-1])
+ return list_of_valid_wildcard_attr_prefixes
+
+
 def reorder_props(props):
  """
  If "children" is in props, then move it to the

dash/version.py

@@ -1 +1 @@
-__version__ = '0.21.0'
+__version__ = '0.21.1'

dev-requirements.txt

@@ -1,5 +1,5 @@
 dash_core_components>=0.4.0
-dash_html_components>=0.5.0
+dash_html_components>=0.11.0rc1
 dash_flow_example==0.0.3
 dash_renderer
 percy

requirements.txt

@@ -2,7 +2,7 @@ appnope==0.1.0
 backports.shutil-get-terminal-size==1.0.0
 click==6.7
 dash-core-components==0.3.3
-dash-html-components==0.4.0
+dash-html-components==0.11.0rc1
 dash-renderer==0.2.9
 dash.ly==0.14.0
 decorator==4.0.11

tests/development/metadata_test.json

@@ -207,6 +207,20 @@
  "required": false,
  "description": ""
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "required": false,
+ "description": ""
+ },
  "id": {
  "type": {
  "name": "string"

tests/development/test_base_component.py

@@ -17,6 +17,7 @@
 Component._prop_names = ('id', 'a', 'children', 'style', )
 Component._type = 'TestComponent'
 Component._namespace = 'test_namespace'
+Component._valid_wildcard_attributes = ['data-', 'aria-']
 
 
 def nested_tree():
@@ -411,6 +412,25 @@ def to_dict(id, children):
  )
  """
 
+ def test_to_plotly_json_with_wildcards(self):
+ c = Component(id='a', **{'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None})
+ c._prop_names = ('id',)
+ c._type = 'MyComponent'
+ c._namespace = 'basic'
+ self.assertEqual(
+ c.to_plotly_json(),
+ {'namespace': 'basic',
+ 'props': {
+ 'aria-expanded': 'true',
+ 'data-toggle': 'toggled',
+ 'data-none': None,
+ 'id': 'a',
+ },
+ 'type': 'MyComponent'}
+ )
+
  def test_len(self):
  self.assertEqual(len(Component()), 0)
  self.assertEqual(len(Component(children='Hello World')), 1)
@@ -580,6 +600,16 @@ def test_repr_nested_arguments(self):
  "Table(Table(children=Table(id='1'), id='2'))"
  )
 
+ def test_repr_with_wildcards(self):
+ c = self.ComponentClass(id='1', **{"data-one": "one",
+ "aria-two": "two"})
+ data_first = "Table(id='1', data-one='one', aria-two='two')"
+ aria_first = "Table(id='1', aria-two='two', data-one='one')"
+ repr_string = repr(c)
+ if not (repr_string == data_first or repr_string == aria_first):
+ raise Exception("%s\nDoes not equal\n%s\nor\n%s" %
+ (repr_string, data_first, aria_first))
+
  def test_docstring(self):
  assert_docstring(self.assertEqual, self.ComponentClass.__doc__)
 
@@ -674,6 +704,10 @@ def setUp(self):
 
  ['customArrayProp', 'list'],
 
+ ['data-*', 'string'],
+
+ ['aria-*', 'string'],
+
  ['id', 'string'],
 
  ['dashEvents', "a value equal to: 'restyle', 'relayout', 'click'"]
@@ -749,6 +783,8 @@ def assert_docstring(assertEqual, docstring):
 
  "- customProp (optional)",
  "- customArrayProp (list; optional)",
+ '- data-* (string; optional)',
+ '- aria-* (string; optional)',
  '- id (string; optional)',
  '',
  "Available events: 'restyle', 'relayout', 'click'",

tests/development/test_component_loader.py

@@ -28,6 +28,20 @@
  "description": "Children",
  "required": false
  },
+ "data-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard data",
+ "required": false
+ },
+ "aria-*": {
+ "type": {
+ "name": "string"
+ },
+ "description": "Wildcard aria",
+ "required": false
+ },
  "bar": {
  "type": {
  "name": "custom"
@@ -113,6 +127,9 @@ def test_loadcomponents(self):
  'foo': 'Hello World',
  'bar': 'Lah Lah',
  'baz': 'Lemons',
+ 'data-foo': 'Blah',
+ 'aria-bar': 'Seven',
+ 'baz': 'Lemons',
  'children': 'Child'
  }
  AKwargs = {